:root {
  --navy: #062b72;
  --navy-2: #071f52;
  --blue: #087de8;
  --blue-2: #13a8ff;
  --orange: #ff6a00;
  --orange-2: #ff8a1f;
  --light: #f4f8ff;
  --ink: #10213d;
  --muted: #6c7890;
  --line: #e2eaf5;
  --white: #fff;
}

* {
  box-sizing: border-box
}

body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff
}

a {
  color: var(--navy)
}

.logo {
  width: 175px;
  height: auto
}

.navbar {
  box-shadow: 0 2px 18px rgba(6, 43, 114, .08)
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap
}

.brand-mark {
  position: relative;
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(145deg, var(--blue-2), var(--navy));
  border-radius: 14px 14px 18px 18px;
  box-shadow: 0 8px 20px rgba(8, 125, 232, .25);
  overflow: visible;
  transform: skew(-3deg)
}

.brand-mark:before {
  content: "";
  position: absolute;
  width: 25px;
  height: 18px;
  left: 13px;
  top: -13px;
  border: 5px solid var(--navy);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  transform: skew(3deg)
}

.brand-n {
  font-size: 32px;
  font-weight: 950;
  color: #fff;
  position: relative;
  z-index: 3;
  font-style: italic;
  line-height: 1;
  transform: skew(3deg)
}

.brand-cart {
  position: absolute;
  right: 5px;
  bottom: 9px;
  width: 22px;
  height: 13px;
  border: 3px solid #fff;
  border-top: 0;
  border-radius: 2px;
  transform: skew(3deg);
  z-index: 4
}

.brand-cart:before {
  content: "";
  position: absolute;
  left: -7px;
  top: -6px;
  width: 8px;
  height: 3px;
  background: #fff;
  border-radius: 3px
}

.cart-wheel {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  bottom: -8px;
  left: 2px
}

.cart-wheel.second {
  left: 13px
}

.brand-speed {
  position: absolute;
  height: 4px;
  background: var(--orange);
  border-radius: 8px;
  left: -10px;
  z-index: 1
}

.speed-1 {
  width: 13px;
  top: 22px
}

.speed-2 {
  width: 9px;
  top: 31px;
  left: -7px
}

.brand-swoosh {
  position: absolute;
  width: 42px;
  height: 8px;
  border-radius: 50%;
  border-bottom: 5px solid var(--orange);
  right: -1px;
  bottom: 2px;
  transform: rotate(-8deg);
  z-index: 2
}

.brand-word {
  display: flex;
  flex-direction: column;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -1.5px
}

.brand-word strong {
  color: var(--navy)
}

.brand-word b {
  color: var(--orange)
}

.brand-word small {
  font-size: 9px;
  letter-spacing: .1px;
  font-weight: 700;
  color: var(--navy);
  margin-top: 4px
}

.searchbar {
  display: flex;
  border: 1px solid #d6e0ee;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 18px rgba(6, 43, 114, .04)
}

.searchbar input {
  border: 0;
  outline: 0;
  padding: 12px 15px;
  flex: 1
}

.searchbar button {
  border: 0;
  background: var(--navy);
  color: #fff;
  padding: 0 18px
}

.bg-orange {
  background: var(--orange) !important
}

.btn-orange {
  background: var(--orange);
  color: #fff;
  border: 0;
  font-weight: 800;
  border-radius: 10px;
  padding: .72rem 1.1rem
}

.btn-orange:hover {
  background: #e85d00;
  color: #fff;
  transform: translateY(-1px)
}

.btn-brand {
  background: var(--navy);
  color: #fff
}

.btn-brand:hover {
  background: #041f53;
  color: #fff
}

.btn-outline-brand {
  border: 1px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
  border-radius: 10px
}

.btn-outline-brand:hover {
  background: var(--navy);
  color: #fff
}

.dark-mode .btn-outline-brand {
  border-color: #9fc2e6;
  color: #dceeff
}

.dark-mode .btn-outline-brand:hover {
  background: #2d5c92;
  border-color: #2d5c92;
  color: #fff
}

.hero {
  background: linear-gradient(180deg, #edf5ff 0%, #f6faff 100%);
  padding: 38px 0 48px;
  overflow: hidden
}

.homepage-hero {
  position: relative;
  background:
    radial-gradient(circle at 8% 15%, rgba(19,168,255,.14), transparent 28%),
    radial-gradient(circle at 92% 70%, rgba(255,106,0,.09), transparent 26%),
    linear-gradient(180deg, #edf5ff 0%, #f7fbff 100%);
}

.homepage-hero .container,
.homepage-catalog {
  position: relative;
  z-index: 1;
}

.homepage-campaign {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(7, 32, 84, .16)
}

.homepage-campaign::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(6,43,114,.05);
}

.homepage-campaign .carousel-inner,
.homepage-campaign .carousel-item {
  border-radius: inherit
}

.homepage-campaign img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain
}

.homepage-campaign .carousel-indicators {
  z-index: 4;
  margin-bottom: 16px
}

.homepage-campaign .carousel-indicators button {
  width: 30px;
  height: 4px;
  border: 0;
  border-radius: 10px
}

.homepage-campaign .carousel-control-prev,
.homepage-campaign .carousel-control-next {
  z-index: 5;
  width: 8%
}

.homepage-campaign .carousel-control-prev-icon,
.homepage-campaign .carousel-control-next-icon {
  width: 2rem;
  height: 2rem;
  padding: 8px;
  border-radius: 50%;
  background-color: rgba(6, 43, 114, .78);
  background-size: 55%
}

.hero-panel {
  position: relative;
  min-height: 500px;
  border-radius: 30px;
  background: linear-gradient(125deg, rgba(255,255,255,.8), rgba(233,244,255,.95));
  border: 1px solid rgba(206,222,242,.9);
  box-shadow: 0 30px 80px rgba(7, 32, 84, .13);
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px)
}

.homepage-hero-panel {
  padding: 32px 40px 26px;
  align-items: center
}

.hero-panel:after {
  content: "";
  position: absolute;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  right: -300px;
  top: -210px;
  background: radial-gradient(circle, rgba(255, 255, 255, .3), rgba(8, 125, 232, .05) 40%, transparent 65%);
  z-index: 0
}

.hero-copy {
  position: relative;
  z-index: 3;
  padding: 30px 14px 18px 8px;
  max-width: 720px;
  animation: slideInLeft 0.8s ease-out both
}

.hero-side-stack {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 0 14px;
  animation: slideInRight 0.9s ease-out both;
  animation-delay: .1s
}

.eyebrow {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 30px;
  background: #eaf3ff;
  color: var(--navy);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px
}

.hero-copy h1 {
  font-size: clamp(2.8rem, 4vw, 5rem);
  line-height: .95;
  letter-spacing: -3px;
  font-weight: 900;
  color: var(--navy);
  margin: 18px 0
}

.hero-copy h1 span {
  color: var(--orange)
}

.hero-copy p {
  font-size: 1.12rem;
  line-height: 1.7;
  max-width: 620px;
  color: #42516b
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px
}

.btn-hero-outline {
  border: 2px solid var(--navy);
  color: var(--navy);
  background: #fff;
  font-weight: 800;
  border-radius: 10px
}

.btn-hero-outline:hover {
  background: var(--navy);
  color: #fff
}

.hero-points {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 25px;
  font-size: 13px;
  font-weight: 800;
  color: var(--navy)
}

.hero-points span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap
}

.hero-points i {
  font-size: 1rem;
  color: var(--orange)
}

.hero-points span:first-child {
  color: var(--orange)
}

.community-banner {
  padding: 24px 0 30px
}

.community-banner-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(110deg, #075e54, #128c7e);
  box-shadow: 0 16px 34px rgba(7, 94, 84, .2);
  animation: communityFloat 4s ease-in-out infinite
}

.community-banner-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  font-size: 2rem
}

.community-banner-copy {
  flex: 1
}

.community-banner-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: rgba(255,255,255,.75);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em
}

.community-banner h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 900
}

.community-banner p {
  margin: 5px 0 0;
  color: rgba(255,255,255,.86)
}

.community-banner-button {
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 999px;
  padding: 11px 18px;
  background: #fff;
  color: #075e54;
  font-weight: 900
}

.community-banner-button:hover,
.community-banner-button:focus-visible {
  background: #eafff7;
  color: #075e54
}

.referral-earn-banner {
  padding: 14px 0 28px;
}

.referral-earn-inner {
  display: grid;
  grid-template-columns: minmax(250px, .9fr) minmax(0, 1.35fr) auto;
  align-items: center;
  gap: 24px;
  padding: 28px 30px;
  border: 1px solid rgba(8,125,232,.18);
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(120deg, #062b72, #0a579f 68%, #087de8);
  box-shadow: 0 18px 40px rgba(6,43,114,.16);
}

.referral-earn-inner h2 { margin: 8px 0 0; color: #fff; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.12 }
.referral-earn-inner p { margin: 0; color: rgba(255,255,255,.82); line-height: 1.65 }
.referral-earn-inner .eyebrow-alt { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2) }
.referral-earn-actions { justify-content: flex-end; }
.referral-earn-actions .btn-outline-light { color: #fff; border-color: rgba(255,255,255,.8); }
.referral-earn-actions .btn-outline-light:hover { color: #062b72; background: #fff; }

@keyframes communityFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@media (max-width: 767px) {
  .hero {
    padding: 20px 0 30px
  }

  .homepage-campaign {
    border-radius: 18px
  }

  .homepage-campaign .carousel-control-prev,
  .homepage-campaign .carousel-control-next {
    width: 12%
  }

  .homepage-campaign .carousel-control-prev-icon,
  .homepage-campaign .carousel-control-next-icon {
    width: 1.65rem;
    height: 1.65rem
  }

  .community-banner-inner {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 20px
  }

  .community-banner-copy {
    min-width: calc(100% - 78px)
  }

  .community-banner-button {
    width: 100%;
    text-align: center
  }

  .referral-earn-inner { grid-template-columns: 1fr; gap: 14px; padding: 24px 20px }
  .referral-earn-actions { justify-content: flex-start }
  .referral-earn-actions .btn { width: 100%; }
}

.feature-card {
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(218, 228, 244, .9);
  border-radius: 18px;
  min-height: 120px;
  padding: 26px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 12px 30px rgba(6, 43, 114, .06);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: floatCard 7s ease-in-out infinite alternate
}

.feature-card:nth-child(2) { animation-delay: .55s }
.feature-card:nth-child(3) { animation-delay: 1s }

.feature-card:hover {
  transform: translateY(-5px) translateX(3px);
  box-shadow: 0 18px 30px rgba(6, 43, 114, .12)
}

.glass-card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px)
}

.stagger-card { animation-delay: .5s }
.stagger-card-two { animation-delay: 1s }

.feature-card h3 {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy)
}

.feature-card p {
  margin: 0;
  color: #4e5d7a;
  font-size: 1.05rem;
  font-weight: 500
}

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eaf5ff, #dfeeff);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: var(--navy)
}

.market-features {
  padding: 12px 0 8px
}

.market-features-wrap {
  background: linear-gradient(135deg, #ffffff, #f4f8ff);
  border: 1px solid #ddeaf8;
  border-radius: 28px;
  padding: 28px 24px;
  box-shadow: 0 16px 38px rgba(6, 43, 114, .05)
}

.feature-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px
}

.eyebrow-alt {
  background: rgba(8, 125, 232, .08);
  color: var(--navy);
  width: max-content
}

.feature-intro h2 {
  margin: 0;
  font-size: clamp(1.8rem, 2.2vw, 2.6rem);
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -1px
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px
}

.mini-feature {
  min-width: 0;
  background: #fff;
  border: 1px solid #e6edf8;
  border-radius: 20px;
  padding: 22px 18px;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 10px 25px rgba(6, 43, 114, .04)
}

.mini-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 30px rgba(6, 43, 114, .09)
}

.mini-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff6ee, #fff0dc);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  font-size: 1.4rem;
  color: var(--orange)
}

.mini-feature h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  overflow-wrap: anywhere;
  margin: 0 0 8px
}

.mini-feature p {
  margin: 0;
  color: #586a86;
  line-height: 1.6;
  overflow-wrap: anywhere
}

@media (max-width: 991.98px) {
  .market-features-wrap {
    padding: 24px 20px
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
  }
}

@media (max-width: 575.98px) {
  .market-features {
    padding: 8px 0
  }

  .market-features-wrap {
    border-radius: 18px;
    padding: 22px 14px
  }

  .feature-intro {
    gap: 9px;
    margin-bottom: 16px
  }

  .feature-intro h2 {
    font-size: 1.65rem;
    line-height: 1.2;
    letter-spacing: -.04em
  }

  .feature-grid {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .mini-feature {
    border-radius: 16px;
    padding: 16px
  }

  .mini-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    margin-bottom: 12px;
    font-size: 1.2rem
  }

  .mini-feature h3 {
    font-size: 1rem
  }

  .mini-feature p {
    font-size: .92rem;
    line-height: 1.5
  }
}

.reveal-up {
  opacity: 0;
  transform: translateY(18px);
  animation: revealUp .7s ease forwards
}

.mini-feature:nth-child(2) {
  animation-delay: .12s
}

.mini-feature:nth-child(3) {
  animation-delay: .2s
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(18px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes floatCard {
  0% { transform: translateY(0px) translateX(-2px) }
  100% { transform: translateY(-8px) translateX(3px) }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-28px) }
  to { opacity: 1; transform: translateX(0) }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(28px) }
  to { opacity: 1; transform: translateX(0) }
}

.hero-art {
  position: relative;
  min-height: 500px;
  z-index: 1
}

.art-orbit {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  right: -50px;
  top: 50%;
  transform: translateY(-50%)
}

.orbit-one {
  width: 420px;
  height: 420px
}

.orbit-two {
  width: 330px;
  height: 330px;
  right: 40px
}

.hero-product {
  position: absolute;
  z-index: 3;
  background: #fff;
  border: 7px solid rgba(255, 255, 255, .9);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 45px rgba(0, 0, 0, .25)
}

.hero-product img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.hero-phone {
  width: 150px;
  height: 205px;
  right: 80px;
  top: 155px;
  transform: rotate(7deg)
}

.hero-laptop {
  width: 250px;
  height: 170px;
  right: 225px;
  top: 80px;
  transform: rotate(-4deg)
}

.hero-shoes {
  width: 180px;
  height: 125px;
  right: 240px;
  bottom: 55px;
  transform: rotate(4deg)
}

.art-card {
  position: absolute;
  z-index: 5;
  background: #fff;
  border-radius: 16px;
  padding: 13px 18px;
  box-shadow: 0 18px 35px rgba(0, 0, 0, .18);
  display: flex;
  flex-direction: column
}

.art-card b {
  font-size: 11px;
  color: var(--orange)
}

.art-card span {
  font-weight: 900;
  color: var(--navy);
  font-size: 15px
}

.card-one {
  right: 40px;
  top: 50px
}

.card-two {
  right: 45px;
  bottom: 70px
}

.card-two b {
  font-size: 12px;
  color: var(--blue)
}

@media (max-width: 991px) {
  .homepage-hero-panel {
    grid-template-columns: 1fr;
    padding: 28px 22px 20px;
  }

  .hero-copy {
    padding: 10px 0 8px;
  }

  .hero-side-stack {
    padding: 10px 0 0;
  }
}

@media (max-width: 575px) {
  .homepage-hero-panel {
    border-radius: 22px;
  }

  .hero-copy h1 {
    font-size: 2.8rem;
  }

  .feature-card {
    min-height: 96px;
    padding: 18px 18px;
  }
}

.section-title {
  font-weight: 900;
  color: var(--navy)
}

.category-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  min-height: 132px;
  padding: 18px 12px;
  background: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

.homepage-categories { margin-top: -4px }
.homepage-categories > div > a { display: block; height: 100% }
.homepage-categories .category-card { box-shadow: 0 8px 22px rgba(14,42,84,.04) }
.homepage-categories .category-card .fw-bold { color: var(--ink); font-size: .9rem }

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(6, 43, 114, .08);
  border-color: #cbdcf2
}

.category-icon {
  width: 52px;
  height: 52px;
  margin: auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eaf3ff;
  color: var(--navy);
  font-size: 24px;
  border: 1px solid #d9e9fb
}

.product-card {
  border: 1px solid #e5eaf2;
  border-radius: 18px;
  overflow: hidden;
  height: 100%;
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  animation: gentleLift 8s ease-in-out infinite alternate
}

.catalog-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(214,228,244,.9);
  box-shadow: 0 10px 25px rgba(14, 42, 84, .05)
}

.homepage-products-heading {
  padding: 18px 0 14px;
  border-top: 1px solid #e5edf7;
  border-bottom: 1px solid #e5edf7;
}

.homepage-catalog .catalog-card .product-body { padding: 15px 16px 17px }
.homepage-catalog .catalog-card .product-body > small { color: var(--blue) !important; font-weight: 800; letter-spacing: .02em }
.homepage-catalog .catalog-card h5 { min-height: 2.5em; line-height: 1.25; font-weight: 800 }
.homepage-catalog .catalog-card .btn { padding: .58rem .7rem; font-size: .78rem }

.catalog-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 22px 38px rgba(14, 42, 84, .12);
  border-color: #cdddf4
}

.stats-band {
  margin-top: 0;
  margin-bottom: 22px
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px
}

.stat-box {
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(235,244,255,.95));
  border: 1px solid #dfeaf9;
  border-radius: 18px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(8, 41, 96, .05);
  transition: transform .25s ease
}

.stat-box:hover { transform: translateY(-4px) }

.stat-number {
  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
  font-weight: 900;
  color: var(--navy);
  line-height: 1
}

.stat-number::after {
  content: "%";
  font-size: .6em;
  vertical-align: super;
  margin-left: 2px
}

.stat-box:nth-child(3) .stat-number::after { content: "%" }
.stat-box:nth-child(1) .stat-number::after { content: "+" }
.stat-box:nth-child(2) .stat-number::after { content: "+" }
.stat-box:nth-child(4) .stat-number::after { content: "+" }

.stat-label {
  margin-top: 8px;
  color: #4f5d7a;
  font-weight: 700;
  font-size: .82rem
}

.product-views {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 0;
  font-size: .78rem;
  font-weight: 800;
  color: var(--navy)
}

.product-views i,
.rating-inline i,
.verified-badge,
.trust-item i {
  font-size: 1rem;
  vertical-align: middle
}

.rating-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #f59e0b;
  font-weight: 800
}

.verified-badge-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  color: #1a9d5d
}

.trust-strip {
  background: var(--navy);
  color: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(6, 43, 114, .12)
}

.trust-item {
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-right: 1px solid rgba(255, 255, 255, .16)
}

.trust-item:last-child {
  border-right: 0
}

.trust-item i {
  font-size: 1.4rem
}

.trust-item strong {
  font-size: 1.05rem
}

.trust-item small {
  color: rgba(255, 255, 255, .8)
}

@keyframes gentleLift {
  0% { transform: translateY(0px) }
  100% { transform: translateY(-5px) }
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(6, 43, 114, .09)
}

.product-img {
  height: 240px;
  width: 100%;
  background: linear-gradient(135deg, #eef6ff, #dfeeff);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden
}

.product-visual:before {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 168, 255, .25), transparent 65%);
  top: -80px;
  right: -50px
}

.product-visual:after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 106, 0, .10);
  bottom: -80px;
  left: -40px
}

.visual-glow {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 25px;
  background: linear-gradient(145deg, var(--blue), var(--navy));
  transform: rotate(12deg);
  box-shadow: 0 20px 35px rgba(6, 43, 114, .25)
}

.visual-icon {
  position: relative;
  z-index: 2;
  font-size: 42px;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .12))
}

.visual-label {
  position: absolute;
  z-index: 3;
  bottom: 14px;
  left: 14px;
  padding: 6px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .92);
  font-size: 10px;
  font-weight: 900;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .6px
}

.product-body {
  padding: 16px
}

.price {
  font-weight: 900;
  color: var(--navy)
}

.old-price {
  text-decoration: line-through;
  color: #98a4b5;
  font-size: .9rem
}

.trust-strip {
  background: var(--navy);
  color: #fff;
  border-radius: 20px;
  overflow: hidden
}

.trust-item {
  padding: 22px;
  border-right: 1px solid rgba(255, 255, 255, .2)
}

.trust-item:last-child {
  border-right: 0
}

.orange {
  color: var(--orange)
}

.vendor-hero {
  background: linear-gradient(120deg, var(--navy), #0b6fd8);
  color: #fff;
  border-radius: 24px;
  padding: 55px
}

.footer {
  background: linear-gradient(180deg, #071c45 0%, #0b1f4e 100%);
  color: #dce8ff;
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.footer .container {
  position: relative
}

.footer .container:before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent)
}

.footer-back-top {
  align-items: center;
  background: rgba(0,0,0,.18);
  border: 0;
  color: #dce8ff;
  cursor: pointer;
  display: flex;
  font-size: .78rem;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  letter-spacing: .05em;
  min-height: 48px;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
  width: 100%
}

.footer-back-top:hover,
.footer-back-top:focus-visible {
  background: rgba(0,0,0,.3);
  color: #fff;
  outline: 0
}

.footer-service-strip {
  border-bottom: 1px solid rgba(255,255,255,.12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 38px;
  padding-bottom: 30px
}

.footer-service-strip > div {
  align-items: center;
  display: flex;
  gap: 13px;
  min-width: 0
}

.footer-service-strip > div > i {
  align-items: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  color: #f2c879;
  display: inline-flex;
  flex: 0 0 42px;
  font-size: 1.1rem;
  height: 42px;
  justify-content: center
}

.footer-service-strip strong,
.footer-service-strip small {
  display: block
}

.footer-service-strip strong {
  color: #fff;
  font-size: .86rem;
  margin-bottom: 3px
}

.footer-service-strip small {
  color: rgba(220,232,255,.66);
  font-size: .76rem
}

.footer-main-grid {
  margin-bottom: 6px
}

.footer a {
  color: #dce8ff;
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease
}

.footer a:hover {
  color: #ffbb7c
}

.footer-column {
  padding-right: 18px
}

.footer-brand-column {
  padding-right: 30px
}

.footer .brand-logo {
  margin-bottom: 18px;
  display: inline-flex
}

.footer .brand-image {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(2, 8, 26, .24)
}

.footer-description {
  margin: 0;
  color: rgba(220,232,255,.8);
  line-height: 1.7;
  max-width: 430px
}

.footer-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  color: rgba(255,255,255,.62);
  margin-bottom: 10px
}

.footer-contact {
  margin-top: 22px
}

.footer-email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-weight: 600
}

.footer-email:hover {
  background: rgba(255,255,255,.08)
}

.footer-email-icon {
  color: #ff9c51
}

/* Footer contact details: email, phone, location, hours */
.footer-contact-list {
  display: grid;
  gap: 11px;
  font-style: normal;
  margin: 0;
  max-width: 430px
}

.footer-contact-item {
  align-items: flex-start;
  color: #dce8ff;
  display: flex;
  gap: 12px;
  line-height: 1.5;
  text-decoration: none;
  transition: color .2s ease
}

.footer-contact-item:hover {
  color: #ffbb7c
}

.footer-contact-static:hover {
  color: #dce8ff
}

.footer-contact-icon {
  align-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  color: #f2c879;
  display: inline-flex;
  flex: 0 0 32px;
  font-size: .95rem;
  height: 32px;
  justify-content: center
}

.footer-contact-text {
  font-size: .86rem;
  padding-top: 4px;
  word-break: break-word
}

.footer h6 {
  margin-bottom: 18px;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  font-weight: 800
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.footer .footer-links a {
  display: inline-block;
  width: fit-content;
  padding: 2px 0;
  opacity: .9
}

.footer .footer-links a:hover {
  opacity: 1;
  transform: translateX(2px)
}

.footer-divider {
  border-color: rgba(255,255,255,.12);
  margin: 28px 0 18px
}

.footer-meta {
  color: rgba(220,232,255,.75)
}

.footer-bottom {
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(220,232,255,.75);
  padding-top: 20px
}

.footer-bottom-links {
  display: flex;
  gap: 18px
}

.footer-bottom-links a {
  color: rgba(220,232,255,.75);
  font-size: .8rem
}

@media (max-width: 767.98px) {
  .footer-service-strip {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 30px;
    padding-bottom: 24px
  }

  .footer-service-strip > div {
    padding: 0 4px
  }

  .footer-brand-column {
    padding-right: 0
  }

  .footer-bottom {
    align-items: flex-start
  }

  .footer-bottom-links {
    gap: 14px
  }
}

.footer .brand-word small {
  color: #dce8ff
}

.chip {
  display: inline-block;
  border: 1px solid #dce5f2;
  border-radius: 30px;
  padding: 8px 14px;
  color: var(--navy);
  background: #fff
}

.form-control:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 .2rem rgba(8, 125, 232, .13)
}

.dashboard-card {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(6, 43, 114, .1)
}

.seller-dashboard { max-width: 1320px }
.seller-shell { display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; align-items:start }
.seller-main { min-width:0 }
.seller-dashboard-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:4px 2px 8px }
.seller-dashboard-heading .section-title { font-size:clamp(1.7rem,2.5vw,2.25rem) }
.seller-dashboard-heading-actions { display:flex; align-items:center; gap:12px }
.seller-date { display:inline-flex; align-items:center; gap:7px; padding:10px 12px; color:var(--muted); border:1px solid #e2eaf5; border-radius:10px; background:#fff; font-size:.78rem; white-space:nowrap }
.seller-section-label { display:flex; align-items:center; gap:12px; margin:22px 0 11px; color:#8797ac; font-size:.68rem; font-weight:800; letter-spacing:.14em }
.seller-section-label div { height:1px; flex:1; background:#e5edf7 }
.seller-sidebar { position:sticky; top:92px; min-height:610px; padding:20px 14px; border:1px solid #e2eaf5; border-radius:20px; background:#fff; box-shadow:0 8px 28px rgba(6,43,114,.07) }
.seller-sidebar-brand { display:flex; align-items:center; gap:10px; padding:4px 8px 22px; border-bottom:1px solid #edf2f8 }.seller-sidebar-brand strong,.seller-sidebar-brand small { display:block }.seller-sidebar-brand strong { color:var(--navy); font:700 .9rem "Space Grotesk",sans-serif }.seller-sidebar-brand small { margin-top:2px; color:var(--muted); font-size:.68rem }
.seller-sidebar-logo { display:grid; place-items:center; width:36px; height:36px; color:#fff; border-radius:11px; background:linear-gradient(135deg,var(--navy),var(--blue)) }
.seller-sidebar-nav { display:grid; gap:4px; padding-top:20px }.seller-sidebar-label { margin:8px 10px 4px; color:#97a5b8; font-size:.63rem; font-weight:800; letter-spacing:.12em }.seller-sidebar-nav a { display:flex; align-items:center; gap:11px; padding:10px; color:#607189; border-radius:10px; font-size:.82rem; font-weight:600; text-decoration:none }.seller-sidebar-nav a i { width:18px; text-align:center; font-size:1rem }.seller-sidebar-nav a:hover,.seller-sidebar-nav a.active { color:var(--navy); background:#eaf3ff }.seller-sidebar-nav a.active { font-weight:800 }
.seller-sidebar-tip { margin:42px 5px 0; padding:14px; border-radius:13px; background:#fff5eb; color:#9a5b1b }.seller-sidebar-tip i { font-size:1.1rem }.seller-sidebar-tip strong { display:block; margin:7px 0 3px; font-size:.75rem }.seller-sidebar-tip p { margin:0; color:#a87847; font-size:.7rem; line-height:1.5 }
.seller-welcome { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:28px 30px; border-radius:24px; background:linear-gradient(120deg,#062b72 0%,#087de8 68%,#13a8ff 100%); box-shadow:0 16px 35px rgba(6,43,114,.2); position:relative; overflow:hidden }
.seller-welcome::after { content:""; position:absolute; width:260px; height:260px; right:-70px; top:-125px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 28px rgba(255,255,255,.05),0 0 0 57px rgba(255,255,255,.04) }
.seller-welcome > * { position:relative; z-index:1 }.seller-welcome .eyebrow,.seller-welcome .section-title { color:#fff }.seller-welcome-copy { color:rgba(255,255,255,.78); max-width:620px }
.seller-welcome .btn-light { border:0; color:var(--navy); background:#fff }.seller-welcome .btn-light:hover { background:#eef7ff }
.seller-preview-btn { border:1px solid var(--line); color:var(--navy); background:#fff }
.seller-store-banner { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 26px; background:linear-gradient(115deg,#f3f8ff,#fff); border:1px solid #e3edf9 }
.seller-store-identity { display:flex; align-items:center; gap:16px }
.seller-store-avatar { display:grid; place-items:center; width:58px; height:58px; border-radius:17px; color:#fff; background:linear-gradient(135deg,var(--navy),var(--blue)); font-size:1.5rem }
.seller-store-label,.seller-stat-label { display:block; color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase }
.seller-store-banner h2 { margin:3px 0 7px; color:var(--navy); font:700 1.35rem "Space Grotesk",sans-serif }
.seller-store-meta { display:flex; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:.82rem }
.seller-status { font-weight:700 }.seller-status.verified { color:#16854d }.seller-status.pending { color:#a56a00 }
.seller-text-link { color:var(--navy); font-weight:800; white-space:nowrap; text-decoration:none }.seller-text-link:hover { color:var(--orange) }
.seller-stat-card { display:flex; align-items:center; gap:13px; padding:18px; min-height:116px; border:1px solid #e5edf7; position:relative; overflow:hidden }
.seller-stat-card::after { content:""; position:absolute; right:-18px; bottom:-28px; width:90px; height:90px; border:1px solid rgba(8,125,232,.08); border-radius:50%; box-shadow:0 0 0 14px rgba(8,125,232,.04) }
.seller-stat-card strong { display:block; margin:2px 0 1px; color:var(--navy); font:700 1.35rem "Space Grotesk",sans-serif }
.seller-stat-card small { display:block; color:var(--muted); font-size:.76rem }
.seller-readiness { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:24px 28px; border:1px solid #e5edf7; background:linear-gradient(100deg,#fff,#f5f9ff) }
.seller-readiness-copy { max-width:490px }.seller-readiness-copy h2 { margin:5px 0 7px; color:var(--navy); font:700 1.25rem "Space Grotesk",sans-serif }.seller-readiness-copy p { margin:0; color:var(--muted); font-size:.87rem; line-height:1.6 }
.seller-readiness-meter { display:flex; align-items:center; gap:18px }.seller-readiness-ring { display:flex; flex-direction:column; align-items:center; justify-content:center; width:88px; height:88px; border-radius:50%; background:conic-gradient(var(--orange) var(--readiness),#e9f0f8 0); position:relative; color:var(--navy) }.seller-readiness-ring::before { content:""; position:absolute; inset:8px; border-radius:50%; background:#fff }.seller-readiness-ring strong,.seller-readiness-ring span { position:relative; z-index:1 }.seller-readiness-ring strong { font-size:1.2rem }.seller-readiness-ring span { color:var(--muted); font-size:.65rem }.seller-readiness-checks { display:grid; gap:7px; color:#8190a3; font-size:.78rem }.seller-readiness-checks .complete { color:#16854d; font-weight:700 }.seller-readiness-checks i { margin-right:5px }
.seller-plan-progress { margin:-5px 0 18px; color:var(--muted); font-size:.75rem }.seller-plan-progress > div { height:5px; margin-top:7px; overflow:hidden; border-radius:5px; background:#f0dfd0 }.seller-plan-progress i { display:block; height:100%; border-radius:inherit; background:var(--orange) }
.seller-stat-icon,.seller-action-icon { display:grid; place-items:center; flex:0 0 auto; width:43px; height:43px; border-radius:13px; font-size:1.1rem }
.seller-stat-icon.blue,.seller-action-icon.blue { color:#087de8; background:#e8f3ff }.seller-stat-icon.orange,.seller-action-icon.orange { color:#e86b00; background:#fff0e4 }.seller-stat-icon.green,.seller-action-icon.green { color:#16854d; background:#e7f8ef }.seller-stat-icon.purple,.seller-action-icon.purple { color:#7456cf; background:#f0ebff }
.seller-panel { padding:25px; border:1px solid #e5edf7 }
.seller-panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:20px }
.seller-panel-heading .eyebrow { display:flex; align-items:center; gap:6px }
.seller-panel-heading h2 { margin:5px 0 0; color:var(--navy); font:700 1.3rem "Space Grotesk",sans-serif }
.seller-panel-mark { color:#ff8a1f; font-size:1.4rem }
.seller-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.seller-action-tile { display:flex; align-items:center; gap:12px; min-height:78px; padding:13px; color:var(--ink); border:1px solid #e5edf7; border-radius:14px; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease }
.seller-action-tile:hover { color:var(--ink); border-color:#bcd3ee; box-shadow:0 8px 20px rgba(6,43,114,.08); transform:translateY(-2px) }
.seller-action-tile strong,.seller-action-tile small { display:block }.seller-action-tile strong { font-size:.9rem }.seller-action-tile small { margin-top:3px; color:var(--muted); font-size:.75rem }.seller-action-tile > .bi-chevron-right { margin-left:auto; color:#9aabc0 }
.seller-plan-panel { background:linear-gradient(145deg,#fff9f4,#fff) }.seller-plan-message { color:var(--muted); font-size:.9rem; line-height:1.6 }
.seller-expiry { display:flex; justify-content:space-between; align-items:center; padding:13px 0 18px; margin:18px 0; border-top:1px solid #f0dfd0; border-bottom:1px solid #f0dfd0; color:var(--muted); font-size:.8rem }.seller-expiry strong { color:var(--navy) }
.seller-unread { padding:5px 10px; color:var(--orange); background:#fff0e4; border-radius:20px; font-size:.75rem; font-weight:800 }
.seller-notification-list { display:grid; gap:3px }.seller-notification { display:flex; align-items:flex-start; gap:12px; padding:13px 8px; border-bottom:1px solid #eef3f8 }.seller-notification:last-child { border-bottom:0 }.seller-notification.is-unread { background:#f8fbff }.seller-notification-icon { display:grid; place-items:center; flex:0 0 auto; width:34px; height:34px; color:var(--navy); background:#eaf3ff; border-radius:10px }.seller-notification strong { color:var(--navy); font-size:.88rem }.seller-notification p { margin:3px 0 0; color:var(--muted); font-size:.82rem }.seller-notification time { margin-left:auto; color:#8a99ad; font-size:.72rem; white-space:nowrap }.seller-empty { display:flex; align-items:center; gap:12px; padding:10px 0; color:var(--muted) }.seller-empty i { color:#9eb4cf; font-size:1.5rem }.seller-empty p { margin:0; font-size:.88rem }
.dark-mode .seller-store-banner,.dark-mode .seller-plan-panel,.dark-mode .seller-readiness { background:linear-gradient(115deg,#111e34,#182943) }.dark-mode .seller-store-banner,.dark-mode .seller-stat-card,.dark-mode .seller-panel,.dark-mode .seller-action-tile,.dark-mode .seller-readiness { border-color:#2b3d59 }.dark-mode .seller-store-banner h2,.dark-mode .seller-stat-card strong,.dark-mode .seller-panel-heading h2,.dark-mode .seller-action-tile strong,.dark-mode .seller-notification strong,.dark-mode .seller-expiry strong,.dark-mode .seller-readiness-copy h2 { color:#f3f7ff }.dark-mode .seller-action-tile:hover { border-color:#46658d }.dark-mode .seller-action-tile,.dark-mode .seller-notification.is-unread { background:#14233b }.dark-mode .seller-notification { border-color:#2b3d59 }.dark-mode .seller-preview-btn { color:#e7effc; background:#14233b; border-color:#39516f }.dark-mode .seller-readiness-ring::before { background:#14233b }
.dark-mode .seller-sidebar { background:#111e34; border-color:#2b3d59 }.dark-mode .seller-sidebar-brand { border-color:#2b3d59 }.dark-mode .seller-sidebar-brand strong,.dark-mode .seller-sidebar-nav a.active { color:#f3f7ff }.dark-mode .seller-sidebar-nav a { color:#aebed2 }.dark-mode .seller-sidebar-nav a:hover,.dark-mode .seller-sidebar-nav a.active { background:#1b3558; color:#fff }.dark-mode .seller-sidebar-tip { background:#2f2a24 }
.dark-mode .seller-date { color:#d2deee; border-color:#2b3d59; background:#14233b }.dark-mode .seller-section-label { color:#9caec5 }.dark-mode .seller-section-label div { background:#2b3d59 }
@media(max-width:767px) { .seller-welcome { align-items:stretch; flex-direction:column }.seller-head-actions .btn { flex:1 }.seller-store-banner { align-items:flex-start; flex-direction:column; padding:20px }.seller-action-grid { grid-template-columns:1fr }.seller-panel { padding:20px } }
@media(max-width:767px) { .seller-readiness { align-items:flex-start; flex-direction:column; padding:20px }.seller-readiness-meter { width:100% }.seller-readiness-checks { flex:1 } }
@media(max-width:991px) { .seller-shell { display:block }.seller-sidebar { position:static; min-height:0; margin-bottom:20px; padding:12px 14px }.seller-sidebar-brand { padding-bottom:12px }.seller-sidebar-nav { display:flex; align-items:center; gap:4px; padding-top:12px; overflow-x:auto }.seller-sidebar-label,.seller-sidebar-tip { display:none }.seller-sidebar-nav a { white-space:nowrap } }
@media(max-width:767px) { .seller-dashboard-heading { align-items:stretch; flex-direction:column; gap:15px }.seller-dashboard-heading-actions { justify-content:space-between }.seller-dashboard-heading-actions .btn { flex:1 } }
@media(max-width:480px) { .seller-store-meta { flex-direction:column; gap:5px }.seller-stat-card { min-height:100px; padding:15px }.seller-notification time { display:none } }

/* Seller dashboard polish */
.seller-dashboard {
  padding-top: 32px !important;
  padding-bottom: 56px !important;
}
.seller-dashboard .dashboard-card {
  box-shadow: 0 6px 20px rgba(15, 35, 66, .06);
}
.seller-sidebar {
  border-color: #dfe7f1;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(15, 35, 66, .055);
}
.seller-sidebar-brand {
  padding: 4px 10px 20px;
}
.seller-sidebar-logo {
  border-radius: 9px;
  background: var(--navy);
}
.seller-sidebar-nav a {
  border-radius: 8px;
  letter-spacing: .005em;
}
.seller-sidebar-nav a.active {
  color: #fff;
  background: var(--navy);
  box-shadow: 0 4px 10px rgba(6, 43, 114, .16);
}
.seller-dashboard-heading {
  padding: 0 2px 20px;
  border-bottom: 1px solid #e6edf5;
}
.seller-dashboard-heading .eyebrow {
  color: #74859b;
  font-size: .65rem;
}
.seller-dashboard-heading .section-title {
  color: #122746;
  letter-spacing: -.035em;
}
.seller-welcome-copy {
  font-size: .9rem;
}
.seller-date {
  border-radius: 8px;
  background: #fff;
}
.seller-store-banner {
  padding: 18px 22px;
  border-radius: 14px;
  background: #fff;
  border-top: 3px solid var(--blue);
}
.seller-store-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #edf4fc;
  color: var(--navy);
  font-size: 1.2rem;
}
.seller-store-banner h2 {
  font-size: 1.15rem;
}
.seller-stat-card {
  min-height: 104px;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.seller-stat-card:hover {
  transform: translateY(-3px);
  border-color: #c4d8ee;
  box-shadow: 0 10px 25px rgba(15, 35, 66, .1);
}
.seller-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 1rem;
}
.seller-stat-card strong {
  font-size: 1.22rem;
}
.seller-readiness {
  padding: 20px 24px;
  border-radius: 14px;
  background: #fff;
  border-left: 3px solid var(--orange);
}
.seller-readiness-copy h2,
.seller-panel-heading h2 {
  letter-spacing: -.02em;
}
.seller-panel {
  padding: 22px;
  border-radius: 14px;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.seller-panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: #e8eef6;
}
.seller-panel:first-child::before {
  background: var(--navy);
}
.seller-action-tile {
  min-height: 70px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 35, 66, .025);
}
.seller-action-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(15, 35, 66, .07);
}
.seller-action-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  font-size: .95rem;
}
.seller-plan-panel {
  background: #fff;
  border-top: 3px solid var(--orange);
}
.seller-notification {
  padding: 13px 4px;
}
.seller-notifications {
  border-top: 3px solid #7456cf;
}
.seller-notification-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: .8rem;
}
.seller-section-label {
  margin-top: 26px;
  color: #718299;
}
.dark-mode .seller-dashboard-heading {
  border-color: #2b3d59;
}
.dark-mode .seller-dashboard-heading .section-title {
  color: #f3f7ff;
}
.dark-mode .seller-sidebar-nav a.active {
  background: #1e4d86;
}
.dark-mode .seller-store-banner,
.dark-mode .seller-stat-card,
.dark-mode .seller-readiness,
.dark-mode .seller-panel,
.dark-mode .seller-plan-panel {
  background: #111e34;
}
.dark-mode .seller-stat-card:hover,
.dark-mode .seller-action-tile:hover {
  border-color: #46658d;
}
@media (max-width: 991px) {
  .seller-dashboard { padding-top: 22px !important; }
  .seller-sidebar { border-radius: 12px; }
}

@media (max-width: 1199px) {
  .seller-shell { grid-template-columns: 190px minmax(0, 1fr); gap: 20px; }
  .seller-panel { padding: 20px; }
  .seller-stat-card { padding: 15px; }
  .seller-stat-card strong { font-size: 1.1rem; }
}

@media (max-width: 767px) {
  .seller-dashboard { width: 100%; padding-right: 14px !important; padding-left: 14px !important; }
  .seller-dashboard-heading { padding-bottom: 16px; }
  .seller-dashboard-heading .section-title { font-size: 1.65rem; }
  .seller-dashboard-heading-actions { width: 100%; flex-wrap: wrap; }
  .seller-date { flex: 1 1 150px; justify-content: center; }
  .seller-dashboard-heading-actions .btn { flex: 1 1 170px; }
  .seller-store-banner { align-items: flex-start; padding: 16px; }
  .seller-store-identity { min-width: 0; width: 100%; }
  .seller-store-identity > div:last-child { min-width: 0; }
  .seller-store-banner h2 { overflow-wrap: anywhere; }
  .seller-text-link { align-self: flex-end; }
  .seller-readiness { gap: 18px; padding: 18px; }
  .seller-readiness-meter { align-items: flex-start; width: 100%; }
  .seller-readiness-checks { min-width: 0; }
  .seller-action-grid { grid-template-columns: 1fr; }
  .seller-panel-heading { margin-bottom: 16px; }
  .seller-notification { gap: 9px; }
  .seller-notification p { overflow-wrap: anywhere; }
}

@media (max-width: 575px) {
  .seller-sidebar { margin-right: -2px; margin-left: -2px; overflow: hidden; }
  .seller-sidebar-brand { min-width: 180px; }
  .seller-sidebar-nav { margin-right: -14px; margin-left: -14px; padding: 12px 14px 0; scrollbar-width: thin; }
  .seller-sidebar-nav a { flex: 0 0 auto; padding: 9px 10px; font-size: .76rem; }
  .seller-sidebar-nav a i { width: auto; }
  .seller-section-label { margin-top: 20px; }
  .seller-stat-card { min-height: 92px; }
  .seller-stat-card small { font-size: .7rem; }
  .seller-stat-icon { width: 34px; height: 34px; }
  .seller-readiness-meter { gap: 12px; }
  .seller-readiness-ring { width: 76px; height: 76px; flex: 0 0 76px; }
  .seller-readiness-checks { font-size: .72rem; }
  .seller-panel { padding: 17px; }
  .seller-panel-heading h2 { font-size: 1.12rem; }
  .seller-action-tile { min-height: 64px; padding: 11px; }
  .seller-action-tile small { font-size: .7rem; }
  .seller-notification time { display: none; }
}

@media (max-width: 360px) {
  .seller-dashboard { padding-right: 10px !important; padding-left: 10px !important; }
  .seller-dashboard-heading-actions { display: grid; grid-template-columns: 1fr; }
  .seller-date, .seller-dashboard-heading-actions .btn { width: 100%; }
  .seller-store-identity { align-items: flex-start; gap: 10px; }
  .seller-store-avatar { width: 42px; height: 42px; font-size: 1rem; }
  .seller-store-meta { font-size: .72rem; }
  .seller-readiness-meter { align-items: center; }
  .seller-readiness-checks { font-size: .67rem; }
  .seller-stat-card { gap: 9px; padding: 12px; }
  .seller-stat-card strong { font-size: 1rem; }
  .seller-stat-label { font-size: .63rem; }
}

.stat {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--navy)
}

.cart-visual {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #eaf3ff;
  margin-right: 8px;
  font-size: 24px
}

@media(max-width:991px) {
  .hero-panel {
    grid-template-columns: 1fr
  }

  .hero-art {
    min-height: 360px
  }

  .hero-copy {
    padding: 52px 28px 35px
  }

  .hero-panel:after {
    width: 520px;
    height: 520px;
    right: -300px;
    top: 55%
  }

  .art-bag {
    right: 35%;
    top: 65px;
    transform: scale(.82) rotate(-4deg)
  }

  .art-card.card-one {
    right: 8%;
    top: 30px
  }

  .art-card.card-two {
    right: 5%;
    bottom: 35px
  }

  .art-product.product-one {
    right: 7%;
    top: 150px
  }

  .art-product.product-two {
    left: 12%;
    bottom: 40px
  }

  .art-product.product-three {
    left: 22%;
    top: 35px
  }
}

@media(max-width:575px) {
  .brand-word {
    font-size: 22px
  }

  .brand-mark {
    width: 40px;
    height: 44px
  }

  .hero {
    padding-top: 18px
  }

  .hero-panel {
    border-radius: 22px
  }

  .hero-copy h1 {
    font-size: 2.7rem;
    letter-spacing: -2px
  }

  .hero-points {
    gap: 8px;
    flex-direction: column
  }

  .hero-art {
    min-height: 300px
  }

  .art-bag {
    right: 30%;
    top: 65px;
    transform: scale(.65)
  }

  .art-card {
    transform: scale(.8)
  }

  .product-img {
    height: 175px
  }
}

.product-photo {
  background: #f6f8fc
}

.product-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease
}

.product-card:hover .product-photo img {
  transform: scale(1.05)
}

.photo-label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(255, 255, 255, .94);
  color: var(--navy);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 6px 10px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12)
}

/* Shopping cart controls */
.eyebrow {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--orange)
}

.cart-card,
.order-summary-card,
.empty-cart-card {
  background: #fff;
  border: 1px solid #e6edf7;
  border-radius: 20px;
  box-shadow: 0 10px 35px rgba(6, 43, 114, .08)
}

.cart-card {
  overflow: hidden
}

.cart-item {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto auto;
  gap: 20px;
  align-items: center;
  padding: 22px;
  border-bottom: 1px solid #edf1f7
}

.cart-item:last-child {
  border-bottom: 0
}

.cart-product-image {
  width: 86px;
  height: 86px;
  border-radius: 16px;
  background: #f3f7fc;
  display: grid;
  place-items: center;
  overflow: hidden
}

.cart-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.cart-product-image span {
  font-size: 32px
}

.cart-product-info h5 {
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 6px
}

.control-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #7b8798;
  margin-bottom: 7px
}

.quantity-control {
  display: flex;
  align-items: center;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff
}

.quantity-control form {
  margin: 0
}

.quantity-btn {
  border: 0;
  background: #f4f7fb;
  color: var(--navy);
  width: 36px;
  height: 36px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1
}

.quantity-btn:hover {
  background: #e8f1ff;
  color: var(--blue)
}

.quantity-value {
  min-width: 38px;
  text-align: center;
  font-weight: 800;
  color: var(--navy)
}

.remove-btn {
  border: 0;
  background: transparent;
  color: #dc3545;
  font-size: .82rem;
  font-weight: 700;
  padding: 6px 0 0
}

.remove-btn:hover {
  text-decoration: underline
}

.cart-item-total {
  min-width: 125px;
  text-align: right
}

.cart-item-total strong {
  color: var(--navy);
  font-size: 1.05rem
}

.order-summary-card {
  padding: 26px;
  position: sticky;
  top: 90px
}

.order-summary-card h4 {
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 22px
}

.summary-row,
.summary-total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0
}

.summary-total {
  font-size: 1.2rem;
  color: var(--navy)
}

.summary-total strong {
  color: var(--orange)
}

.continue-shopping {
  display: inline-block;
  margin-top: 18px;
  color: var(--navy);
  font-weight: 700;
  text-decoration: none
}

.continue-shopping:hover {
  color: var(--orange)
}

.empty-cart-icon {
  font-size: 58px;
  margin-bottom: 12px
}

@media(max-width:991px) {
  .cart-item {
    grid-template-columns: 76px 1fr;
    gap: 14px
  }

  .cart-product-image {
    width: 76px;
    height: 76px
  }

  .cart-controls,
  .cart-item-total {
    grid-column: 2;
    text-align: left
  }

  .cart-item-total {
    min-width: 0
  }

  .order-summary-card {
    position: static
  }
}

@media(max-width:575px) {
  .cart-item {
    grid-template-columns: 64px 1fr;
    padding: 16px
  }

  .cart-product-image {
    width: 64px;
    height: 64px
  }

  .cart-product-info h5 {
    font-size: .95rem
  }

  .cart-controls {
    grid-column: 1 / -1
  }

  .cart-item-total {
    grid-column: 1 / -1;
    text-align: left
  }

  .quantity-control {
    width: max-content
  }
}

.role-box {
  border: 1px solid rgba(20, 43, 80, .12);
  background: rgba(24, 99, 210, .04);
  border-radius: 16px;
  padding: 20px
}

.role-box h5 {
  color: #142b50;
  font-weight: 700;
  margin-bottom: 6px
}

.form-select-lg,
.form-control {
  border-radius: 10px
}

/* NelStore interface refinements */
.brand-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(6, 43, 114, .12))
}

.brand-image {
  display: block;
  width: 220px;
  height: 78px;
  object-fit: contain;
  object-position: left center;
  transition: transform .2s ease, filter .2s ease;
  background: rgba(255,255,255,.2);
  border-radius: 12px;
  padding: 4px 6px
}

.brand-image:hover {
  transform: scale(1.02)
}

.searchbar {
  display: flex;
  border: 1px solid #d8e2ef;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  height: 46px
}

.searchbar input {
  border: 0;
  outline: 0;
  padding: 0 15px;
  flex: 1;
  min-width: 0
}

.searchbar button {
  width: 52px;
  border: 0;
  background: var(--orange);
  display: grid;
  place-items: center
}

.searchbar button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round
}

.menu-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle
}

.cart-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px
}

.cart-link .cart-count {
  position: absolute;
  top: 0;
  left: 17px;
  font-size: 9px;
  padding: 3px 5px
}

.profile-link {
  display: flex;
  align-items: center;
  gap: 6px
}

.profile-label {
  font-size: .9rem;
  font-weight: 600
}

.main-navbar .nav-link:hover {
  color: var(--orange)
}

.product-location {
  font-size: .82rem;
  color: #65748a;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.3
}

.location-pin {
  font-size: 1rem;
  color: var(--orange);
  font-weight: 800
}

.product-top-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.views-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef5ff;
  color: var(--navy);
  border-radius: 30px;
  padding: 8px 12px;
  font-size: .8rem;
  font-weight: 800
}

.views-badge svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.product-detail-image {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #f6f8fc;
  box-shadow: 0 18px 45px rgba(6, 43, 114, .09);
  cursor: zoom-in
}

.product-detail-image .product-img {
  height: 560px
}

.image-zoom-btn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  border: 0;
  background: #fff;
  color: var(--navy);
  font-weight: 800;
  border-radius: 10px;
  padding: 10px 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12)
}

.expanded-product-image {
  max-height: 78vh;
  max-width: 100%;
  object-fit: contain;
  border-radius: 12px
}

.image-modal-content {
  border: 0;
  border-radius: 20px
}

.product-info-block {
  padding: 16px;
  background: #f7faff;
  border: 1px solid #e1ebf7;
  border-radius: 14px
}

.search-filter-panel {
  background: #fff;
  border: 1px solid #dfe8f4;
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 12px 35px rgba(6, 43, 114, .07)
}

.search-filter-panel label {
  font-size: .76rem;
  font-weight: 800;
  color: #607089;
  margin-bottom: 6px
}

.filter-icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round
}

.filter-side {
  position: sticky;
  top: 90px
}

.about-hero {
  background: linear-gradient(135deg, #f5f9ff, #e8f3ff);
  border: 1px solid #dce9f7;
  border-radius: 26px;
  padding: 55px;
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 30px;
  align-items: center
}

.about-stats {
  display: grid;
  gap: 14px
}

.about-stats div {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 25px rgba(6, 43, 114, .07)
}

.about-stats strong,
.about-stats span {
  display: block
}

.about-stats strong {
  font-size: 1.25rem;
  color: var(--navy)
}

.about-stats span {
  color: #66758a;
  font-size: .9rem
}

.about-page {
  background: #f7faff
}

.about-hero {
  background: linear-gradient(125deg, #071f52 0%, #0b4e9e 68%, #087de8 100%);
  border: 0;
  border-radius: 0;
  color: #fff;
  display: block;
  overflow: hidden;
  padding: 92px 0 124px;
  position: relative
}

.about-hero:after {
  background: rgba(255,255,255,.07);
  border-radius: 50%;
  content: "";
  height: 480px;
  position: absolute;
  right: -150px;
  top: -180px;
  width: 480px
}

.about-hero .container {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: 40px;
  position: relative;
  z-index: 1
}

.about-hero-content {
  max-width: 680px
}

.about-eyebrow {
  color: #a9dcff;
  letter-spacing: .15em
}

.about-hero h1 {
  color: #fff;
  font-size: clamp(2.3rem, 5vw, 4.3rem);
  letter-spacing: -.05em;
  line-height: 1.05;
  margin: 16px 0 20px
}

.about-hero p {
  color: rgba(255,255,255,.82);
  font-size: 1.08rem;
  line-height: 1.75;
  max-width: 620px
}

.about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px
}

.about-hero-visual {
  min-height: 300px;
  position: relative
}

.about-hero-icon {
  align-items: center;
  background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 34px;
  box-shadow: 0 28px 60px rgba(3,20,54,.32), inset 0 1px 0 rgba(255,255,255,.22);
  color: #f2c879;
  display: flex;
  font-size: 6.4rem;
  height: 190px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  width: 190px
}

.about-orbit {
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  height: 280px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(25deg);
  width: 280px
}

.about-orbit-two {
  height: 330px;
  transform: translate(-50%, -50%) rotate(-35deg);
  width: 330px
}

.about-float-card {
  align-items: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(0,0,0,.17);
  color: var(--navy);
  display: flex;
  font-size: .78rem;
  font-weight: 800;
  gap: 8px;
  padding: 11px 13px;
  position: absolute
}

.about-float-card i {
  color: var(--orange);
  font-size: 1rem
}

.about-float-card-one { right: 4%; top: 24px }
.about-float-card-two { bottom: 28px; left: 5% }

.section-space {
  padding: 68px 0
}

.about-section-title {
  color: var(--navy);
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  letter-spacing: -.04em;
  line-height: 1.15;
  margin: 13px 0 18px
}

.about-lead {
  color: #344c6d;
  font-size: 1.05rem;
  line-height: 1.75
}

.about-intro p:not(.about-lead) {
  color: #607089;
  line-height: 1.8
}

.about-founder-card {
  background: #fff;
  border: 1px solid #e0eaf6;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(6,43,114,.1), inset 0 1px 0 #fff;
  overflow: hidden;
  padding: 30px;
  position: relative
}

.about-founder-card:before {
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0
}

.about-founder-avatar {
  align-items: center;
  background: linear-gradient(145deg, #eaf5ff, #d9ecff);
  border: 1px solid #cfe4fb;
  border-radius: 18px;
  color: var(--blue);
  display: flex;
  font-size: 1.9rem;
  height: 60px;
  justify-content: center;
  margin-bottom: 18px;
  width: 60px
}

.about-card-label {
  color: #8493a8;
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em
}

.about-founder-card h3 {
  color: var(--navy);
  font-size: 1.35rem;
  margin: 7px 0 2px
}

.about-founder-card p {
  color: #718097;
  margin: 0
}

.about-profile-link {
  align-items: center;
  color: var(--blue);
  display: inline-flex;
  font-size: .82rem;
  font-weight: 800;
  gap: 7px;
  margin-top: 12px;
  text-decoration: none
}

.about-profile-link:hover,
.about-profile-link:focus-visible {
  color: var(--navy);
  text-decoration: underline
}

.about-team {
  background: #fff
}

.about-team-intro {
  color: #607089;
  line-height: 1.75;
  margin: 0;
  max-width: 720px
}

.about-team-card {
  align-items: flex-start;
  background: linear-gradient(160deg, #fbfdff, #f2f8ff);
  border: 1px solid #dde9f8;
  border-radius: 20px;
  display: flex;
  gap: 20px;
  height: 100%;
  overflow: hidden;
  padding: 26px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

.about-team-card:hover {
  border-color: #c6dcf2;
  box-shadow: 0 18px 34px rgba(6,43,114,.12);
  transform: translateY(-4px)
}

.about-team-icon {
  align-items: center;
  background: linear-gradient(145deg, #eaf5ff, #d7ebff);
  border: 1px solid #cfe4fb;
  border-radius: 16px;
  color: var(--blue);
  display: flex;
  flex: 0 0 58px;
  font-size: 1.5rem;
  height: 58px;
  justify-content: center;
  width: 58px
}

.about-team-icon-orange { background: linear-gradient(145deg, #fff2e7, #ffe3cc); border-color: #ffd9b8; color: var(--orange) }
.about-team-copy h3 { color: var(--navy); font-size: 1.2rem; margin: 7px 0 4px }
.about-team-copy p { color: #718097; margin: 0 }

.about-founder-card blockquote {
  border-left: 3px solid var(--orange);
  color: #536783;
  font-size: .95rem;
  line-height: 1.65;
  margin: 26px 0 0;
  padding-left: 15px
}

.about-quote {
  color: #dcecff;
  font-size: 2.4rem;
  line-height: 1;
  opacity: .9;
  position: absolute;
  right: 26px;
  top: 30px
}

.about-pillars {
  background: #fff
}

.about-section-heading {
  margin-bottom: 30px
}

.about-pillar-card {
  background: linear-gradient(170deg, #fbfdff, #f1f7ff);
  border: 1px solid #dde9f8;
  border-radius: 20px;
  height: 100%;
  overflow: hidden;
  padding: 28px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

.about-pillar-card:before {
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0
}

.about-pillar-card:nth-child(2):before {
  background: linear-gradient(90deg, var(--orange), var(--orange-2))
}

.about-pillar-card:nth-child(3):before {
  background: linear-gradient(90deg, #16803b, #35b866)
}

.about-pillar-card:hover {
  border-color: #c6dcf2;
  box-shadow: 0 18px 34px rgba(6,43,114,.12);
  transform: translateY(-5px)
}

.about-card-icon {
  align-items: center;
  background: linear-gradient(145deg, #eaf5ff, #d7ebff);
  border: 1px solid #cfe4fb;
  border-radius: 15px;
  color: var(--blue);
  display: flex;
  font-size: 1.35rem;
  height: 54px;
  justify-content: center;
  margin-bottom: 18px;
  width: 54px
}

.about-card-icon-orange { background: linear-gradient(145deg, #fff2e7, #ffe3cc); border-color: #ffd9b8; color: var(--orange) }
.about-card-icon-green { background: linear-gradient(145deg, #e9f8f0, #d6f2e2); border-color: #c3ead5; color: #16803b }

.about-pillar-card h3,
.about-value-grid h3,
.about-timeline h3 {
  color: var(--navy);
  font-size: 1.15rem;
  margin-bottom: 8px
}

.about-pillar-card p,
.about-value-grid p,
.about-timeline p {
  color: #63738b;
  line-height: 1.65;
  margin: 0
}

.about-values {
  background: linear-gradient(135deg, #eef6ff, #f8fbff)
}

.about-eyebrow-dark {
  color: var(--blue);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em
}

.about-text-link {
  color: var(--navy);
  font-weight: 800;
  text-decoration: none
}

.about-text-link:hover { color: var(--orange) }

.about-value-grid {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(2, 1fr)
}

.about-value-grid > div {
  background: #fff;
  border: 1px solid #e0eaf6;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(6,43,114,.05);
  padding: 24px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

.about-value-grid > div > i {
  color: var(--orange);
  font-size: 1.55rem
}

.about-value-grid h3 { font-size: 1rem; margin-top: 15px }

.about-roadmap {
  background: #fff
}

.about-section-heading > p {
  color: #63738b;
  margin: -2px 0 0;
  max-width: 620px
}

.about-section-heading.text-center > p {
  margin-left: auto;
  margin-right: auto
}

.about-timeline {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 44px
}

.about-timeline > div {
  border-top: 2px solid #d4e4f6;
  padding-top: 22px;
  position: relative
}

.about-timeline > div:before {
  background: linear-gradient(145deg, var(--blue), var(--navy));
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #b9d5ed, 0 6px 14px rgba(8,125,232,.28);
  content: "";
  height: 16px;
  left: 0;
  position: absolute;
  top: -10px;
  width: 16px
}

.about-timeline span {
  background: #fff2e7;
  border-radius: 8px;
  color: var(--orange);
  display: inline-block;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  padding: 4px 10px
}

.about-timeline h3 { margin-top: 12px }

.about-cta {
  background: var(--navy);
  color: #fff;
  padding: 64px 0
}

.about-cta-inner {
  align-items: center;
  display: flex;
  gap: 30px;
  justify-content: space-between
}

.about-cta h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  margin: 12px 0 8px
}

.about-cta p {
  color: rgba(255,255,255,.72);
  margin: 0
}

.about-cta-actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 10px
}

@media (max-width: 991.98px) {
  .about-hero .container { grid-template-columns: 1fr }
  .about-hero-visual { min-height: 250px }
  .about-timeline { grid-template-columns: repeat(2, 1fr); row-gap: 32px }
}

@media (max-width: 575.98px) {
  .about-hero { padding: 60px 0 82px }
  .about-hero h1 { font-size: 2.55rem }
  .about-hero-actions .btn { width: 100% }
  .about-hero-visual { min-height: 245px; transform: scale(.88) }
  .section-space { padding: 58px 0 }
  .about-value-grid,
  .about-timeline { grid-template-columns: 1fr }
  .about-cta-inner { align-items: flex-start; flex-direction: column }
  .about-cta-actions { width: 100% }
  .about-cta-actions .btn { flex: 1 }
}

.dark-mode .about-page { background: #101827 }
.dark-mode .about-intro,
.dark-mode .about-roadmap { background: #101827 }
.dark-mode .about-founder-card,
.dark-mode .about-pillar-card,
.dark-mode .about-value-grid > div { background: #172235; border-color: #2b3b54 }
.dark-mode .about-section-title,
.dark-mode .about-founder-card h3,
.dark-mode .about-pillar-card h3,
.dark-mode .about-value-grid h3,
.dark-mode .about-timeline h3 { color: #f4f7fb }
.dark-mode .about-lead,
.dark-mode .about-intro p:not(.about-lead),
.dark-mode .about-pillar-card p,
.dark-mode .about-value-grid p,
.dark-mode .about-timeline p,
.dark-mode .about-founder-card blockquote,
.dark-mode .about-section-heading > p { color: #b6c2d3 }

.contact-info-card {
  display: grid;
  gap: 12px;
  margin-top: 28px
}

.contact-info-card div {
  background: #f5f9ff;
  border: 1px solid #dfebf7;
  border-radius: 14px;
  padding: 16px
}

.contact-info-card strong,
.contact-info-card span {
  display: block
}

.contact-info-card strong {
  color: var(--navy)
}

.contact-info-card span {
  font-size: .9rem;
  color: #65748a;
  margin-top: 4px
}

.contact-info-card a {
  color: #4f6682;
  text-decoration: none
}

.contact-info-card a:hover {
  color: var(--blue);
  text-decoration: underline
}

.contact-page {
  background: #f7faff;
  min-height: 70vh
}

.contact-hero {
  background: linear-gradient(120deg, var(--navy-2), var(--navy) 58%, var(--blue));
  color: #fff;
  padding: 58px 0 116px
}

.contact-hero-copy {
  max-width: 680px
}

.contact-reveal {
  animation: contactReveal .65s cubic-bezier(.2,.75,.25,1) both
}

.contact-reveal-1 { animation-delay: .05s }
.contact-reveal-2 { animation-delay: .14s }
.contact-reveal-3 { animation-delay: .23s }
.contact-reveal-4 { animation-delay: .32s }

@keyframes contactReveal {
  from { opacity: 0; transform: translateY(16px) }
  to { opacity: 1; transform: translateY(0) }
}

.contact-hero .eyebrow {
  color: #9ed9ff;
  letter-spacing: .14em
}

.contact-hero h1 {
  color: #fff;
  font-size: clamp(2.15rem, 4.5vw, 3.65rem);
  letter-spacing: -.04em;
  margin: 12px 0 14px
}

.contact-hero p {
  color: rgba(255,255,255,.8);
  font-size: 1.08rem;
  line-height: 1.7;
  max-width: 600px;
  margin: 0
}

.contact-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 25px
}

.contact-trust-row span {
  color: rgba(255,255,255,.82);
  font-size: .85rem;
  font-weight: 700
}

.contact-trust-row i {
  color: #8ee1ba;
  margin-right: 5px
}

.contact-content {
  margin-top: -64px;
  padding-bottom: 72px;
  position: relative;
  z-index: 1
}

.contact-support-panel {
  padding: 30px 8px 20px 4px
}

.contact-panel-icon,
.contact-form-mark {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(19,168,255,.13);
  color: var(--blue);
  font-size: 1.45rem
}

.contact-panel-icon {
  position: relative;
  animation: contactIconFloat 4s ease-in-out infinite
}

.contact-icon-pulse {
  border: 1px solid rgba(8,125,232,.35);
  border-radius: inherit;
  inset: -6px;
  opacity: 0;
  position: absolute;
  animation: contactIconPulse 2.8s ease-out infinite
}

@keyframes contactIconFloat {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-4px) }
}

@keyframes contactIconPulse {
  0% { opacity: .7; transform: scale(.88) }
  75%, 100% { opacity: 0; transform: scale(1.16) }
}

.contact-support-panel h2,
.contact-form-heading h2 {
  color: var(--navy);
  font-size: 1.55rem;
  margin: 18px 0 8px
}

.contact-support-panel > p {
  line-height: 1.7;
  max-width: 420px
}

.contact-topic-box {
  border-top: 1px solid #e2eaf5;
  border-bottom: 1px solid #e2eaf5;
  margin: 24px 0 4px;
  padding: 20px 0
}

.contact-topic-label {
  color: var(--navy);
  display: block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 11px;
  text-transform: uppercase
}

.contact-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.contact-topic {
  background: #fff;
  border: 1px solid #dce7f4;
  border-radius: 999px;
  color: #35506f;
  cursor: pointer;
  font-size: .82rem;
  padding: 8px 12px;
  transition: .2s ease
}

.contact-topic i {
  color: var(--blue);
  margin-right: 4px
}

.contact-topic:hover,
.contact-topic:focus-visible {
  background: #edf7ff;
  border-color: #8ccdf5;
  color: var(--navy);
  outline: 0;
  transform: translateY(-1px)
}

.contact-topic.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff
}

.contact-topic.is-active i {
  color: #9ed9ff
}

.contact-info-card {
  margin-top: 28px
}

.contact-info-card div {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 15px 16px
}

.contact-info-item {
  transition: transform .2s ease, box-shadow .2s ease
}

.contact-info-item:hover {
  box-shadow: 0 8px 20px rgba(6,43,114,.07);
  transform: translateX(4px)
}

.contact-info-card .contact-info-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  background: #e8f4ff;
  border-radius: 10px;
  color: var(--blue)
}

.contact-form-card {
  background: #fff;
  border: 1px solid #e5edf7;
  border-radius: 18px;
  box-shadow: 0 16px 42px rgba(6,43,114,.11);
  padding: clamp(24px, 4vw, 40px)
}

.contact-form-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px
}

.contact-form-heading h2 {
  margin-top: 14px
}

.contact-form-heading p {
  color: #718097;
  margin: 0
}

.contact-form-mark {
  flex: 0 0 auto;
  background: #fff3e9;
  color: var(--orange);
  animation: contactFormIconFloat 3.5s ease-in-out .5s infinite
}

@keyframes contactFormIconFloat {
  0%, 100% { transform: rotate(0) translateY(0) }
  50% { transform: rotate(4deg) translateY(-3px) }
}

.contact-form .form-label {
  color: var(--navy);
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .01em;
  margin-bottom: 7px
}

.contact-form .form-label span {
  color: var(--orange)
}

.contact-input {
  position: relative
}

.contact-input > i {
  color: #7890ac;
  left: 15px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1
}

.contact-input .form-control {
  min-height: 48px;
  padding-left: 42px
}

.contact-input .form-control.is-selected {
  animation: contactFieldSelected .7s ease
}

.contact-character-count {
  color: #8292a7;
  font-size: .76rem;
  margin-bottom: 7px
}

.contact-form textarea.form-control {
  min-height: 164px;
  resize: vertical
}

.contact-submit {
  padding: .78rem 1.25rem;
  min-width: 154px
}

.contact-submit.is-sending i {
  animation: contactSpinner .8s linear infinite
}

.dark-mode .contact-page {
  background: #101827
}

.dark-mode .contact-support-panel h2,
.dark-mode .contact-form-heading h2,
.dark-mode .contact-form .form-label {
  color: #f4f7fb
}

.dark-mode .contact-form-card {
  background: #172235;
  border-color: #2b3b54
}

.dark-mode .contact-form-heading p,
.dark-mode .contact-support-panel > p {
  color: #b6c2d3 !important
}

.dark-mode .contact-info-card div {
  background: #172235;
  border-color: #2b3b54
}

.dark-mode .contact-info-card strong {
  color: #f4f7fb
}

.dark-mode .contact-info-card .contact-info-icon {
  background: #203d5b
}

.dark-mode .contact-topic-box {
  border-color: #2b3b54
}

.dark-mode .contact-topic-label {
  color: #f4f7fb
}

.dark-mode .contact-topic {
  background: #172235;
  border-color: #2b3b54;
  color: #c8d4e4
}

.dark-mode .contact-topic:hover,
.dark-mode .contact-topic:focus-visible {
  background: #203d5b;
  border-color: #467da7
}

.dark-mode .contact-topic.is-active {
  background: #2d73b4;
  border-color: #2d73b4;
  color: #fff
}

@keyframes contactFieldSelected {
  0%, 100% { box-shadow: 0 0 0 .2rem rgba(8,125,232,.13) }
  50% { box-shadow: 0 0 0 .35rem rgba(8,125,232,.22) }
}

@keyframes contactSpinner {
  to { transform: rotate(360deg) }
}

@media (max-width: 575px) {
  .contact-hero {
    padding: 42px 0 92px
  }

  .contact-hero h1 {
    font-size: 2.35rem
  }

  .contact-hero p {
    font-size: .98rem
  }

  .contact-content {
    margin-top: -48px;
    padding-bottom: 48px
  }

  .contact-support-panel {
    padding: 18px 0 4px
  }

  .contact-form-heading {
    margin-bottom: 22px
  }

  .contact-form-mark {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 1.15rem
  }

  .contact-form-card {
    border-radius: 18px;
    padding: 22px 18px
  }

  .contact-submit {
    width: 100%
  }
}

.seller-head-actions,
.dashboard-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.add-product-btn {
  padding: .45rem .75rem !important;
  border-radius: 9px !important
}

.quick-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap
}

.plan-card {
  height: 100%;
  background: #fff;
  border: 1px solid #dfe8f4;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 12px 32px rgba(6, 43, 114, .07);
  position: relative
}

.plan-card h3 {
  color: var(--navy);
  font-weight: 900
}

.plan-price {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--orange);
  margin: 10px 0
}

.plan-card li {
  margin: 9px 0;
  color: #5f6d80
}

.featured-plan {
  border: 2px solid var(--orange);
  transform: translateY(-5px)
}

.plan-tag {
  position: absolute;
  right: 18px;
  top: 18px;
  background: var(--orange);
  color: #fff;
  border-radius: 20px;
  padding: 5px 9px;
  font-size: .7rem;
  font-weight: 900
}

.footer .brand-image {
  background: #fff;
  border-radius: 10px;
  padding: 4px;
  width: 210px;
  height: 78px
}

@media(max-width:991px) {
  .brand-image {
    width: 195px;
    height: 68px
  }

  .about-hero {
    grid-template-columns: 1fr;
    padding: 35px
  }

  .filter-side {
    position: static
  }

  .quick-actions {
    align-items: flex-start
  }

  .dashboard-actions {
    width: 100%
  }
}

@media(max-width:575px) {
  .brand-image {
    width: 175px;
    height: 62px
  }

  .profile-label {
    display: none
  }

  .main-navbar .navbar-nav {
    align-items: flex-start !important
  }

  .about-hero {
    padding: 25px
  }

  .product-detail-image .product-img {
    height: 380px
  }

  .seller-head-actions {
    width: 100%
  }

  .seller-head-actions .btn {
    flex: 1
  }
}

/* Day/Night mode, translation and back-to-top */
.theme-toggle,
.translate-toggle {
  border: 0;
  background: transparent !important;
  font-size: 1.15rem;
  cursor: pointer;
  padding: .5rem .65rem !important
}

.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
  cursor: pointer;
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: .25s
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.back-to-top:hover {
  background: var(--navy)
}

.dark-mode {
  background: #101827 !important;
  color: #e7edf7
}

.dark-mode .navbar {
  background: #111b2d !important;
  border-color: #26344a !important
}

.dark-mode .navbar .nav-link,
.dark-mode .main-navbar .nav-link {
  color: #e7edf7 !important
}

.dark-mode .searchbar,
.dark-mode .searchbar input,
.dark-mode .search-filter-panel,
.dark-mode .product-card,
.dark-mode .category-card,
.dark-mode .dashboard-card,
.dark-mode .plan-card,
.dark-mode .order-summary-card,
.dark-mode .empty-cart-card,
.dark-mode .product-info-block,
.dark-mode .about-stats div,
.dark-mode .contact-info-card div,
.dark-mode .form-control,
.dark-mode .form-select,
.dark-mode .role-box {
  background: #172235 !important;
  color: #e7edf7 !important;
  border-color: #2b3b54 !important
}

.dark-mode .searchbar input::placeholder,
.dark-mode .form-control::placeholder {
  color: #91a0b5
}

.dark-mode .section-title,
.dark-mode .price,
.dark-mode .product-card h5,
.dark-mode .stat,
.dark-mode .about-stats strong,
.dark-mode .order-summary-card h4,
.dark-mode .quantity-value,
.dark-mode .role-box h5 {
  color: #f4f7fb !important
}

.dark-mode .text-dark,
.dark-mode .text-muted,
.dark-mode .lead,
.dark-mode .product-location,
.dark-mode .about-stats span,
.dark-mode .contact-info-card span {
  color: #b6c2d3 !important
}

.dark-mode .hero {
  background: linear-gradient(135deg, #0e1829, #111c2d) !important
}

.dark-mode .hero-panel {
  background: linear-gradient(125deg, #172235, #1b2a41) !important;
  border-color: #2b3b54
}

.dark-mode .hero-copy h1 {
  color: #f4f7fb
}

.dark-mode .hero-copy p {
  color: #b6c2d3
}

.dark-mode .chip {
  background: #172235;
  color: #e7edf7;
  border-color: #52647e
}

.dark-mode .product-img {
  background: linear-gradient(135deg, #1c2a3d, #25364e)
}

.dark-mode table {
  color: #e7edf7
}

.dark-mode .table {
  --bs-table-bg: transparent;
  --bs-table-color: #e7edf7;
  --bs-table-border-color: #2b3b54
}

.dark-mode .about-hero {
  background: linear-gradient(135deg, #172235, #1b2a41);
  border-color: #2b3b54
}

.dark-mode .views-badge {
  background: #20334e;
  color: #e7edf7
}


/* Reliable interactive controls */
html.dark-mode,
html.dark-mode body {
  background: #101827 !important;
  color: #e7edf7 !important;
}

.language-nav-item {
  position: relative;
}

.theme-toggle {
  min-width: 42px;
  width: 42px;
  height: 42px;
  padding: .35rem !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem !important;
  white-space: nowrap;
}

.translate-toggle {
  white-space: nowrap;
}

.language-code {
  font-size: .72rem;
  font-weight: 800;
  vertical-align: middle;
}

.language-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 155px;
  padding: 7px;
  background: #fff;
  border: 1px solid #dce5f2;
  border-radius: 12px;
  box-shadow: 0 14px 35px rgba(6, 43, 114, .16);
  display: none;
  z-index: 2000;
}

.language-menu.open,
.language-menu.show {
  display: block;
}

.language-menu button {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  font-size: .88rem;
}

.language-menu button:hover {
  background: #eef5ff;
  color: var(--navy);
}


.back-to-top {
  display: grid;
  place-items: center;
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 25px;
  font-weight: 900;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
  cursor: pointer;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(15px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--navy);
  transform: translateY(-3px);
}

html.dark-mode .language-menu,
body.dark-mode .language-menu {
  background: #172235;
  border-color: #2b3b54;
}

html.dark-mode .language-menu button,
body.dark-mode .language-menu button {
  color: #e7edf7;
}

html.dark-mode .language-menu button:hover,
body.dark-mode .language-menu button:hover {
  background: #20334e;
}

@media (max-width: 991px) {
  .language-menu {
    left: 0;
    right: auto;
  }

  .language-code {
    display: inline;
  }
}

/* Product views and related products */
.product-card {
  position: relative
}

.product-views {
  padding: 8px 14px 0;
  font-size: .78rem;
  font-weight: 800;
  color: var(--navy);
  background: inherit;
  display: flex;
  align-items: center;
  gap: 5px
}

.related-products-section {
  margin-top: 10px
}

.dark-mode .product-views {
  color: #e7edf7
}

/* NelStore logout button */
.logout-btn {
  width: 110px;
  height: 40px;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 8px !important;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.logout-btn:hover {
  transform: translateY(-1px);
}

@media (max-width: 575px) {
  .logout-btn {
    width: 100px;
    height: 38px;
    font-size: 13px;
  }
}


/* FORCE SMALL SOCIAL ICONS */


/* ==============================
   FOOTER SOCIAL ICONS - INLINE
   ============================== */

.footer .social-icons {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  margin-top: 20px !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important
}

.footer .social-icons a.social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 38px !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
  line-height: 1 !important;
  font-size: 0 !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 8px 18px rgba(8, 17, 37, .16)
}

.footer .social-icons a.social-icon svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 18px !important;
  fill: #fff !important
}

.footer .social-icons a.social-icon svg path {
  fill: #fff !important
}

.footer .social-icons a.social-icon:hover {
  background: linear-gradient(135deg, #ff8a3d, #ffb76f) !important;
  border-color: rgba(255,255,255,.3) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(255,138,61,.28)
}

.community-whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  width: fit-content;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #25d366, #1ebc5a);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(37, 211, 102, .22);
  transition: transform .2s ease, box-shadow .2s ease
}

.community-whatsapp-link:hover,
.community-whatsapp-link:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(37, 211, 102, .3)
}

.community-whatsapp-link svg {
  width: 18px;
  height: 18px;
  fill: #fff;
  flex-shrink: 0
}

.floating-whatsapp {
  position: fixed;
  left: 22px;
  right: auto;
  bottom: 24px;
  z-index: 1060;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25d366, #1ebc5a);
  box-shadow: 0 16px 32px rgba(37, 211, 102, .35);
  border: 3px solid rgba(255,255,255,.8);
  transition: transform .2s ease, box-shadow .2s ease;
}

.floating-whatsapp:hover,
.floating-whatsapp:focus-visible {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 20px 40px rgba(37, 211, 102, .45);
}

.floating-whatsapp i {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 29px;
  line-height: 1
}

@media (max-width: 575px) {
  .floating-whatsapp {
    width: 52px;
    height: 52px;
    left: 16px;
    bottom: 18px
  }

  .floating-whatsapp i {
    width: 24px;
    height: 24px;
    font-size: 25px
  }
}

/* Smart visual product search */
.searchbar {
  position: relative
}

.visual-search-trigger {
  border: 0 !important;
  background: #fff !important;
  color: var(--navy) !important;
  border-left: 1px solid #d6e0ee !important;
  padding: 0 13px !important;
  font-size: 20px;
  line-height: 1;
  cursor: pointer
}

.visual-search-trigger:hover {
  background: #f4f8ff !important;
  color: var(--orange) !important
}

.visual-search-modal {
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(6, 43, 114, .2)
}

.visual-search-modal .modal-header {
  padding: 24px 26px 18px;
  border-bottom: 1px solid var(--line)
}

.visual-search-modal .modal-body {
  padding: 26px
}

.visual-search-upload {
  border: 2px dashed #bfd1e8;
  border-radius: 18px;
  padding: 42px 20px;
  text-align: center;
  background: #f8fbff;
  transition: .2s
}

.visual-search-upload.dragover {
  border-color: var(--orange);
  background: #fff7f1
}

/* Dark mode: the visual-search modal must not keep light surfaces */
html.dark-mode .visual-search-modal,
body.dark-mode .visual-search-modal {
  background: #172235;
  color: #e7edf7
}

html.dark-mode .visual-search-modal .modal-header,
body.dark-mode .visual-search-modal .modal-header {
  border-bottom-color: #2b3b54
}

html.dark-mode .visual-search-modal .section-title,
html.dark-mode .visual-search-modal h4,
html.dark-mode .visual-search-modal h5,
html.dark-mode .visual-search-modal h6,
body.dark-mode .visual-search-modal .section-title,
body.dark-mode .visual-search-modal h4,
body.dark-mode .visual-search-modal h5,
body.dark-mode .visual-search-modal h6 {
  color: #f4f7fb !important
}

html.dark-mode .visual-search-modal .text-muted,
body.dark-mode .visual-search-modal .text-muted {
  color: #b6c2d3 !important
}

html.dark-mode .visual-search-upload,
body.dark-mode .visual-search-upload {
  background: #1a2740;
  border-color: #33486a
}

html.dark-mode .visual-search-upload.dragover,
body.dark-mode .visual-search-upload.dragover {
  background: #2a2113;
  border-color: var(--orange)
}

html.dark-mode .visual-search-results,
body.dark-mode .visual-search-results {
  color: #e7edf7
}

.visual-search-camera {
  font-size: 48px;
  margin-bottom: 10px
}

.visual-search-loading {
  text-align: center;
  padding: 55px 20px
}

.visual-search-grid .visual-result-card {
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
  background: #fff;
  transition: .2s;
  cursor: pointer
}

.visual-search-grid .visual-result-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(6, 43, 114, .1);
  border-color: #b9cde8
}

.visual-result-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
  background: #eef5ff
}

.visual-result-body {
  padding: 12px
}

.visual-result-body h6 {
  font-size: .9rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 5px
}

.visual-result-score {
  font-size: 11px;
  color: var(--muted)
}

.similar-search-box {
  border: 1px solid #cfe0f3;
  background: #f7fbff;
  border-radius: 16px;
  padding: 16px
}

.selected-visual-image {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #dce7f3
}

.similar-search-box .searchbar input {
  padding: 11px 13px
}

@media(max-width:575.98px) {
  .visual-search-modal .modal-body {
    padding: 18px
  }

  .visual-search-grid .visual-result-image {
    height: 125px
  }

  .visual-search-upload {
    padding: 30px 15px
  }
}

/* Final cart styling: responsive controls and complete dark-mode contrast */
.cart-card,
.order-summary-card,
.empty-cart-card {
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease
}

.cart-item,
.cart-product-info {
  min-width: 0
}

.cart-product-info h5 {
  overflow-wrap: anywhere
}

.cart-controls {
  min-width: 155px
}

.quantity-control {
  width: max-content;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04)
}

.quantity-control form {
  display: flex;
  align-items: center;
  margin: 0
}

.quantity-btn {
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s ease, color .15s ease, transform .15s ease
}

.quantity-btn:active {
  transform: scale(.94)
}

.remove-btn {
  cursor: pointer
}

.cart-controls .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px
}

.cart-item-total {
  white-space: nowrap
}

.empty-cart-card {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.dark-mode .cart-card,
.dark-mode .order-summary-card,
.dark-mode .empty-cart-card {
  background: #172235 !important;
  border-color: #2b3b54 !important;
  color: #e7edf7 !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, .25)
}

.dark-mode .cart-product-image {
  background: #202f44 !important
}

.dark-mode .cart-product-info h5,
.dark-mode .cart-item-total strong,
.dark-mode .summary-total,
.dark-mode .order-summary-card h4,
.dark-mode .quantity-value {
  color: #f4f7fb !important
}

.dark-mode .control-label {
  color: #aebbd0 !important
}

.dark-mode .quantity-control {
  background: #111b2d !important;
  border-color: #3a4b65 !important
}

.dark-mode .quantity-btn {
  background: #22324a !important;
  color: #f4f7fb !important
}

.dark-mode .quantity-btn:hover {
  background: #2d4564 !important;
  color: #fff !important
}

.dark-mode .continue-shopping {
  color: #e7edf7 !important
}

.dark-mode .order-summary-card hr {
  border-color: #3a4b65 !important;
  opacity: 1
}

.dark-mode .order-summary-card .alert-info {
  background: #173c55 !important;
  border-color: #285b78 !important;
  color: #e5f5ff !important
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e85d00;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  margin-left: 5px
}

@media(max-width:991px) {
  .cart-item {
    grid-template-columns: 76px minmax(0, 1fr)
  }

  .cart-controls {
    grid-column: 2;
    min-width: 0
  }

  .cart-item-total {
    grid-column: 2;
    text-align: left
  }

  .cart-item-total .control-label {
    display: inline-block;
    margin-right: 8px
  }
}

@media(max-width:575px) {
  .cart-item {
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 15px
  }

  .cart-product-image {
    width: 64px;
    height: 64px
  }

  .cart-controls {
    grid-column: 1 / -1
  }

  .cart-item-total {
    grid-column: 1 / -1
  }

  .cart-controls .btn {
    width: 100%
  }

  .cart-item-total {
    text-align: left
  }

  .order-summary-card {
    padding: 20px
  }

  .summary-row,
  .summary-total {
    align-items: flex-start
  }

  .cart-product-info .small {
    font-size: .78rem
  }
}

/* ==========================================================
   CART PAGE - FINAL RESPONSIVE UI
   Scoped to #nelstore-cart-page so it cannot break other pages.
   ========================================================== */
#nelstore-cart-page {
  padding-top: 46px;
  padding-bottom: 56px
}

#nelstore-cart-page .cart-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
  padding: 24px 28px;
  border: 1px solid #e1eaf5;
  border-radius: 24px;
  background: linear-gradient(120deg,#f8fbff,#eef6ff);
  box-shadow: 0 12px 30px rgba(10,44,90,.06)
}

#nelstore-cart-page .cart-eyebrow {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  color: var(--orange);
  margin: 0 0 5px
}

#nelstore-cart-page .cart-heading h1 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 900;
  color: var(--navy);
  margin: 0
}
#nelstore-cart-page .cart-heading h1::before { content:""; display:inline-block; width:10px; height:34px; margin-right:12px; vertical-align:-5px; border-radius:8px; background:linear-gradient(#ff6a00,#087de8) }

#nelstore-cart-page .cart-heading p {
  max-width: 650px;
  margin: 7px 0 0;
  color: #738196
}

#nelstore-cart-page .cart-card {
  border: 1px solid #e5ebf3;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(10, 44, 90, .08);
  overflow: hidden
}

#nelstore-cart-page .cart-item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 165px 130px;
  gap: 22px;
  align-items: center;
  padding: 22px 24px;
  border-bottom: 1px solid #edf1f6;
  transition: background .18s ease
}

#nelstore-cart-page .cart-item:hover {
  background: linear-gradient(90deg,#fbfdff,#f5faff)
}

#nelstore-cart-page .cart-item:last-child {
  border-bottom: 0
}

#nelstore-cart-page .cart-product-image {
  width: 104px;
  height: 104px;
  border-radius: 16px;
  border: 1px solid #e4ebf4;
  background: linear-gradient(145deg,#f8fbff,#eaf3ff);
  overflow: hidden;
  display: grid;
  place-items: center
}

#nelstore-cart-page .cart-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

#nelstore-cart-page .cart-product-image span {
  font-size: 36px
}

#nelstore-cart-page .cart-product-info {
  min-width: 0
}

#nelstore-cart-page .cart-product-info h5 {
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.35;
  color: var(--navy);
  margin: 0 0 8px;
  overflow-wrap: anywhere
}

#nelstore-cart-page .cart-product-info .unit-price {
  font-size: .9rem;
  font-weight: 700;
  color: #56657a;
  margin-bottom: 7px
}

#nelstore-cart-page .stock-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #edf9f1;
  color: #16803b;
  font-size: .72rem;
  font-weight: 800
}

#nelstore-cart-page .cart-controls {
  min-width: 0
}

#nelstore-cart-page .control-label {
  font-size: .68rem;
  letter-spacing: .08em;
  font-weight: 850;
  text-transform: uppercase;
  color: #7c899b;
  margin-bottom: 8px
}

#nelstore-cart-page .quantity-control {
  display: inline-flex;
  align-items: center;
  height: 42px;
  border: 1px solid #d9e2ed;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: none
}

#nelstore-cart-page .quantity-control form {
  height: 100%;
  display: flex;
  margin: 0
}

#nelstore-cart-page .quantity-btn {
  width: 40px;
  height: 100%;
  border: 0;
  background: #f5f8fb;
  color: var(--navy);
  font-size: 21px;
  font-weight: 900;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .15s ease
}

#nelstore-cart-page .quantity-btn:hover {
  background: #e9f2ff;
  color: var(--blue)
}

#nelstore-cart-page .quantity-value {
  min-width: 42px;
  text-align: center;
  font-weight: 900;
  color: var(--navy);
  font-size: .95rem
}

#nelstore-cart-page .remove-btn {
  display: block;
  border: 0;
  background: transparent;
  color: #dc3545;
  padding: 8px 0 0;
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer
}

#nelstore-cart-page .remove-btn:hover {
  text-decoration: underline
}

#nelstore-cart-page .buy-cart-btn {
  display: flex !important;
  width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: 9px;
  border-radius: 10px;
  font-weight: 850;
  text-decoration: none
}

#nelstore-cart-page .cart-item-total {
  text-align: right;
  min-width: 0
}

#nelstore-cart-page .cart-item-total strong {
  display: block;
  font-size: 1.12rem;
  color: var(--navy);
  font-weight: 900
}

#nelstore-cart-page .continue-shopping {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  color: var(--navy);
  font-weight: 800;
  text-decoration: none
}

#nelstore-cart-page .continue-shopping:hover {
  color: var(--orange)
}

#nelstore-cart-page .order-summary-card {
  position: sticky;
  top: 96px;
  padding: 25px;
  border: 1px solid #e5ebf3;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(10, 44, 90, .1);
  overflow: hidden
}
#nelstore-cart-page .order-summary-card::before { content:""; display:block; height:5px; margin:-25px -25px 22px; background:linear-gradient(90deg,#062b72,#087de8,#ff6a00) }

#nelstore-cart-page .order-summary-card h4 {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 20px
}

#nelstore-cart-page .summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin: 14px 0;
  color: #68778a;
  font-size: .9rem
}

#nelstore-cart-page .summary-row span:last-child {
  font-weight: 750;
  color: var(--navy);
  text-align: right
}

#nelstore-cart-page .summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding-top: 3px;
  color: var(--navy);
  font-weight: 850
}

#nelstore-cart-page .summary-total strong {
  font-size: 1.45rem;
  color: var(--orange);
  font-weight: 950
}

#nelstore-cart-page .delivery-notice {
  margin: 20px 0 0;
  padding: 14px;
  border: 1px solid #cfe6f5;
  border-radius: 13px;
  background: #f1f9ff;
  color: #34546b;
  font-size: .8rem;
  line-height: 1.5
}

#nelstore-cart-page .empty-cart-card {
  min-height: 330px;
  padding: 40px 20px;
  border: 1px solid #e5ebf3;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(10, 44, 90, .08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

#nelstore-cart-page .empty-cart-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #edf5ff;
  font-size: 38px;
  margin-bottom: 17px
}

#nelstore-cart-page .empty-cart-card h3 {
  font-weight: 900;
  color: var(--navy)
}

#nelstore-cart-page .empty-cart-card p {
  max-width: 480px
}

.dark-mode #nelstore-cart-page .cart-heading h1,
.dark-mode #nelstore-cart-page .cart-product-info h5,
.dark-mode #nelstore-cart-page .cart-item-total strong,
.dark-mode #nelstore-cart-page .summary-row span:last-child,
.dark-mode #nelstore-cart-page .summary-total,
.dark-mode #nelstore-cart-page .order-summary-card h4,
.dark-mode #nelstore-cart-page .empty-cart-card h3 {
  color: #f4f7fb !important
}

.dark-mode #nelstore-cart-page .cart-heading p {
  color: #aebbd0 !important
}
.dark-mode #nelstore-cart-page .cart-heading {
  background:linear-gradient(120deg,#172235,#1d3049);
  border-color:#2b3b54
}

.dark-mode #nelstore-cart-page .cart-card,
.dark-mode #nelstore-cart-page .order-summary-card,
.dark-mode #nelstore-cart-page .empty-cart-card {
  background: #172235 !important;
  border-color: #2b3b54 !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, .24)
}

.dark-mode #nelstore-cart-page .cart-item {
  border-color: #2b3b54;
  background: #172235
}

.dark-mode #nelstore-cart-page .cart-item:hover {
  background: #1a2a40
}

.dark-mode #nelstore-cart-page .cart-product-image {
  background: #202f44;
  border-color: #344963
}

.dark-mode #nelstore-cart-page .unit-price,
.dark-mode #nelstore-cart-page .summary-row,
.dark-mode #nelstore-cart-page .control-label {
  color: #aebbd0 !important
}

.dark-mode #nelstore-cart-page .quantity-control {
  background: #101a2a;
  border-color: #3a4d68
}

.dark-mode #nelstore-cart-page .quantity-btn {
  background: #22334b;
  color: #f4f7fb
}

.dark-mode #nelstore-cart-page .quantity-btn:hover {
  background: #2d4564;
  color: #fff
}

.dark-mode #nelstore-cart-page .quantity-value {
  color: #fff
}

.dark-mode #nelstore-cart-page .continue-shopping {
  color: #e7edf7
}

.dark-mode #nelstore-cart-page .delivery-notice {
  background: #17384e;
  border-color: #285a76;
  color: #dff3ff
}

.dark-mode #nelstore-cart-page .empty-cart-icon {
  background: #20334e
}

.dark-mode #nelstore-cart-page hr {
  border-color: #3a4d68 !important;
  opacity: 1
}
.referral-earn-actions { margin-bottom: 8px }
.referral-stat-card { height:100%; padding:16px; border:1px solid #e1eaf5; border-radius:14px; background:linear-gradient(135deg,#f8fbff,#eef7ff); box-shadow:0 8px 18px rgba(15,35,66,.04); border-top:3px solid var(--blue) }
.referral-stat-card span,.referral-stat-card small { display:block; color:#718095; font-size:.75rem }
.referral-stat-card span i { margin-right:5px; color:#087de8 }
.referral-stat-card strong { display:block; margin:8px 0 3px; color:var(--navy); font-size:1.35rem }
.dark-mode .referral-stat-card { background:#172235; border-color:#2b3b54 }
.dark-mode .referral-stat-card strong { color:#f4f7fb }
.referral-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:20px }
.referral-share-block { padding:18px; border:1px dashed #cfe0f2; border-radius:14px; background:linear-gradient(135deg,#f8fbff 0%, #eef6ff 100%); border-top:3px solid var(--orange); box-shadow:0 8px 18px rgba(15,35,66,.04) }
.referral-share-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px }
.referral-share-head h3 { display:flex; align-items:center; gap:8px; margin:0; color:var(--navy); font:700 1rem "Space Grotesk",sans-serif }
.referral-share-head h3 i { color:var(--orange) }
.referral-link-meta { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:10px 16px; margin:14px 0; padding:0 }
.referral-link-meta dt { color:#718095; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase }
.referral-link-meta dd { margin:4px 0 0; color:var(--navy); font-size:.85rem; font-weight:600; word-break:break-all }
.referral-share-help { margin:10px 0 0; color:#718095; font-size:.78rem }
.referral-rules { margin-top:20px; padding:18px; border:1px solid #e1eaf5; border-radius:14px }
.referral-rules-head { display:flex; align-items:flex-start; gap:11px }
.referral-rules-head > i { display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; color:#fff; background:linear-gradient(135deg,var(--orange),#ff9a4d); border-radius:11px }
.referral-rules-head h3 { margin:0; color:var(--navy); font:700 1rem "Space Grotesk",sans-serif }
.referral-rules-head p { margin:3px 0 0; color:#718095; font-size:.78rem }
.referral-rules-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin-top:15px }
.referral-rule-chip { padding:13px; border:1px solid #e1eaf5; border-radius:12px; background:#f8fbff }
.referral-rule-plan { display:block; color:var(--navy); font:700 .92rem "Space Grotesk",sans-serif }
.referral-rule-price { display:block; margin-top:3px; color:#718095; font-size:.75rem }
.referral-rule-earn { display:block; margin-top:9px; color:#0e7a4a; font-size:.82rem; font-weight:800 }
.referral-history { margin-top:22px }
.referral-history h3 { display:flex; align-items:center; gap:8px; margin:0 0 11px; color:var(--navy); font:700 1rem "Space Grotesk",sans-serif }
.referral-history h3 i { color:var(--brand) }
.sub-status { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:.75rem; font-weight:800; white-space:nowrap }
.sub-status-active { color:#0e7a4a; background:#e0f7ea }
.sub-status-expired { color:#a32020; background:#fdeaea }
.sub-status-none { color:#6b7c93; background:#eef2f7 }
.referral-table td { vertical-align:middle }
.referral-row-number { width:44px; color:#718095; font:700 .8rem "Space Grotesk",sans-serif }
.dark-mode .sub-status-active { color:#4ade80; background:#12291d }
.dark-mode .sub-status-expired { color:#fca5a5; background:#2b1616 }
.dark-mode .sub-status-none { color:#a9b8ca; background:#1b2637 }
.referral-empty { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid #e1eaf5; border-radius:12px; background:#fbfdff; color:#718095 }
.referral-empty i { color:#9eb4cf; font-size:1.5rem }
.referral-empty p { margin:0; font-size:.85rem }
.dark-mode .referral-share-block,.dark-mode .referral-rules,.dark-mode .referral-rule-chip,.dark-mode .referral-empty { background:#172235; border-color:#2b3b54 }
.dark-mode .referral-share-head h3,.dark-mode .referral-rules-head h3,.dark-mode .referral-history h3,.dark-mode .referral-link-meta dd,.dark-mode .referral-rule-plan { color:#f4f7fb }
.dark-mode .referral-link-meta dt,.dark-mode .referral-share-help,.dark-mode .referral-rules-head p,.dark-mode .referral-rule-price { color:#93a6bf }
.dark-mode .referral-rule-earn { color:#4ade80 }
@media(max-width:991px) { .referral-stats,.referral-rules-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:575px) { .referral-stats,.referral-rules-grid { grid-template-columns:minmax(0,1fr) } .referral-link-meta { grid-template-columns:minmax(0,1fr) } }
/* Withdrawals */
.referral-payout-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; padding:16px 18px; border:1px solid #d7e8dc; border-radius:14px; background:linear-gradient(100deg,#f4fdf7,#eefaf3) }
.referral-payout-copy { display:flex; align-items:center; gap:12px }
.referral-payout-copy > i { display:grid; place-items:center; flex:0 0 auto; width:42px; height:42px; color:#fff; font-size:1.1rem; background:linear-gradient(135deg,#13834c,#2fbf78); border-radius:12px }
.referral-payout-copy strong { display:block; color:var(--navy); font:700 .95rem "Space Grotesk",sans-serif }
.referral-payout-copy p { color:#5f7a6a; font-size:.8rem }
.payout-method-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px }
.payout-method-option { position:relative; display:block; margin:0; cursor:pointer }
.payout-method-option input { position:absolute; opacity:0; width:0; height:0 }
.payout-method-body { display:flex; align-items:center; gap:11px; padding:14px; border:1px solid #e1eaf5; border-radius:12px; background:#fbfdff; transition:.16s }
.payout-method-option input:checked + .payout-method-body { border-color:var(--orange); background:#fff6ed; box-shadow:0 0 0 3px rgba(255,122,0,.12) }
.payout-method-option input:focus-visible + .payout-method-body { outline:2px solid var(--brand); outline-offset:2px }
.payout-method-badge { display:inline-grid; place-items:center; min-width:34px; height:26px; padding:0 8px; color:#fff; font-size:.72rem; font-weight:800; border-radius:8px; background:#5a6b82 }
.payout-method-momo { background:#ffcb05; color:#3a3000 }
.payout-method-om { background:#ff7900 }
.withdraw-status { display:inline-block; padding:4px 10px; border-radius:999px; font-size:.72rem; font-weight:800 }
.withdraw-status-pending { color:#8a5a00; background:#fff3d6 }
.withdraw-status-processing { color:#0b4d8f; background:#e2f0ff }
.withdraw-status-paid { color:#0e7a4a; background:#e0f7ea }
.withdraw-status-rejected { color:#a32020; background:#fdeaea }
.withdraw-blocked { display:flex; gap:12px; padding:16px; border:1px dashed #cfe0f2; border-radius:12px; background:#f8fbff }
.withdraw-blocked > i { flex:0 0 auto; color:var(--brand); font-size:1.4rem }
.withdraw-blocked strong { display:block; color:var(--navy); font-size:.9rem }
.withdraw-blocked p { margin:4px 0 0; color:#718095; font-size:.82rem }
.dark-mode .referral-payout-bar { background:linear-gradient(100deg,#12271d,#152f22); border-color:#2c4a39 }
.dark-mode .referral-payout-copy strong { color:#f3f7ff }
.dark-mode .referral-payout-copy p { color:#9db8a8 }
.dark-mode .payout-method-body,.dark-mode .withdraw-blocked { background:#172235; border-color:#2b3b54 }
.dark-mode .payout-method-option input:checked + .payout-method-body { background:#2a2113; border-color:var(--orange) }
.dark-mode .withdraw-blocked strong { color:#f3f7ff }
.dark-mode .withdraw-blocked p { color:#93a6bf }
@media(max-width:575px) { .payout-method-grid { grid-template-columns:minmax(0,1fr) } .referral-payout-bar { flex-direction:column; align-items:stretch } .referral-payout-bar .btn { width:100% } }

@media(max-width:1199px) {
  #nelstore-cart-page .cart-item {
    grid-template-columns: 92px minmax(0, 1fr) 150px 110px;
    gap: 17px;
    padding: 20px
  }

  #nelstore-cart-page .cart-product-image {
    width: 92px;
    height: 92px
  }
}

@media(max-width:575.98px) {
  #nelstore-cart-page { padding-top:22px }
  #nelstore-cart-page .cart-heading { align-items:flex-start; flex-direction:column; padding:20px; border-radius:18px }
  #nelstore-cart-page .cart-heading h1::before { height:27px; margin-right:9px }
  #nelstore-cart-page .cart-heading .btn { width:100% }
  .auth-logo-panel { align-items:flex-start; flex-direction:column; gap:8px }
  .auth-logo-panel > span { text-align:left }
  .auth-logo-panel .brand-image { width:190px; height:62px }
}

@media(max-width:991px) {
  #nelstore-cart-page {
    padding-top: 25px
  }

  #nelstore-cart-page .cart-heading {
    align-items: flex-start;
    flex-direction: column
  }

  #nelstore-cart-page .order-summary-card {
    position: static
  }

  #nelstore-cart-page .cart-item {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 15px
  }

  #nelstore-cart-page .cart-product-image {
    width: 86px;
    height: 86px
  }

  #nelstore-cart-page .cart-controls {
    grid-column: 2
  }

  #nelstore-cart-page .cart-item-total {
    grid-column: 2;
    text-align: left
  }

  #nelstore-cart-page .cart-item-total .control-label {
    display: inline-block;
    margin-right: 8px
  }

  #nelstore-cart-page .cart-item-total strong {
    display: inline;
    font-size: 1.05rem
  }
}

@media(max-width:575px) {
  #nelstore-cart-page {
    padding-top: 18px;
    padding-bottom: 35px
  }

  #nelstore-cart-page .cart-heading h1 {
    font-size: 1.65rem
  }

  #nelstore-cart-page .cart-heading .btn {
    width: 100%
  }

  #nelstore-cart-page .cart-item {
    grid-template-columns: 70px minmax(0, 1fr);
    padding: 16px 14px;
    gap: 12px
  }

  #nelstore-cart-page .cart-product-image {
    width: 70px;
    height: 70px;
    border-radius: 13px
  }

  #nelstore-cart-page .cart-product-info h5 {
    font-size: .9rem;
    margin-bottom: 5px
  }

  #nelstore-cart-page .cart-product-info .unit-price {
    font-size: .78rem
  }

  #nelstore-cart-page .cart-controls {
    grid-column: 1 / -1
  }

  #nelstore-cart-page .cart-item-total {
    grid-column: 1 / -1;
    text-align: left
  }

  #nelstore-cart-page .buy-cart-btn {
    margin-top: 10px
  }

  #nelstore-cart-page .order-summary-card {
    padding: 19px
  }
}

/* Final marketplace visual system */
:root {
  --navy: #12345b;
  --navy-2: #0b2745;
  --blue: #2b78b8;
  --blue-2: #61b5d9;
  --orange: #ee6b35;
  --orange-2: #f18a55;
  --light: #f5f8fb;
  --ink: #203247;
  --muted: #718095;
  --line: #dfe7ef;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: "DM Sans", sans-serif;
  background: #f7f9fb;
  color: var(--ink);
  letter-spacing: 0
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand-word {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: 0
}

.main-navbar {
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 1px 0 rgba(18, 52, 91, .08), 0 8px 25px rgba(18, 52, 91, .05);
  backdrop-filter: blur(14px)
}

.main-navbar .container {
  min-height: 78px
}

.main-navbar .nav-link {
  font-weight: 700;
  color: #52647a;
  padding-left: .75rem !important;
  padding-right: .75rem !important
}

.main-navbar .nav-link:hover {
  color: var(--orange) !important
}

.searchbar {
  border-color: #d5e0ea;
  box-shadow: 0 5px 18px rgba(18, 52, 91, .06);
  border-radius: 11px
}

.searchbar:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(43, 120, 184, .12)
}

.searchbar button {
  background: var(--orange)
}

.hero {
  padding: 30px 0 54px;
  background: linear-gradient(180deg, #edf5f9 0%, #f7f9fb 100%)
}

.hero-panel {
  min-height: 480px;
  border: 1px solid rgba(143, 176, 198, .34);
  border-radius: 24px;
  background: linear-gradient(118deg, #fff 0%, #f7fbfc 52%, #e9f2f6 100%);
  box-shadow: 0 22px 55px rgba(18, 52, 91, .12)
}

.hero-panel:after {
  background: linear-gradient(145deg, rgba(18, 52, 91, .98), rgba(43, 120, 184, .84))
}

.hero-copy {
  padding: 64px 42px 50px 58px
}

.eyebrow {
  background: #e7f1f4;
  color: var(--navy);
  border-radius: 8px;
  letter-spacing: .12em
}

.hero-copy h1 {
  font-size: clamp(2.65rem, 5vw, 4.6rem);
  line-height: 1.01;
  letter-spacing: -.04em;
  margin: 20px 0 17px
}

.hero-copy h1 span {
  color: var(--orange)
}

.hero-copy p {
  color: #52647a;
  font-size: 1.05rem;
  line-height: 1.65
}

.hero-actions {
  margin-top: 24px
}

.btn-orange,
.btn-hero-outline,
.btn-outline-brand {
  border-radius: 8px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease
}

.btn-orange {
  background: var(--orange);
  box-shadow: 0 8px 18px rgba(238, 107, 53, .22)
}

.btn-orange:hover {
  background: #d95827;
  box-shadow: 0 10px 22px rgba(238, 107, 53, .28)
}

.btn-hero-outline {
  border-color: #b8c8d5;
  background: rgba(255, 255, 255, .7)
}

.hero-points {
  color: #52647a
}

.hero-points span:first-child {
  color: var(--orange)
}

.category-card {
  border-radius: 12px;
  padding: 18px 12px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 7px 20px rgba(18, 52, 91, .035);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 28px rgba(18, 52, 91, .11);
  border-color: #b8d0de
}

.category-icon {
  width: 48px;
  height: 48px;
  background: #edf5f7;
  border-color: #d7e7ec
}

.section-title {
  font-size: 1.65rem;
  letter-spacing: -.02em
}

.product-card {
  border-color: #e0e7ed;
  border-radius: 13px;
  box-shadow: 0 5px 16px rgba(18, 52, 91, .04);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease
}

.product-card:hover {
  transform: translateY(-6px);
  border-color: #c6d8e2;
  box-shadow: 0 18px 35px rgba(18, 52, 91, .12)
}

.product-img {
  height: 225px;
  background: linear-gradient(145deg, #edf5f8, #e1edf2)
}

.product-body {
  padding: 17px
}

.product-body h5 {
  font-size: 1rem;
  line-height: 1.35;
  color: var(--navy)
}

.product-views {
  color: #718095
}

.price {
  font-size: 1.08rem;
  color: var(--navy)
}

.product-location {
  color: #718095
}

.location-priority-badge {
  align-items: center;
  background: #eaf6ff;
  border: 1px solid #c9e7f8;
  border-radius: 999px;
  color: #17638b;
  display: inline-flex;
  font-size: .72rem;
  font-weight: 800;
  gap: 5px;
  padding: 5px 9px
}

.location-priority-badge i {
  color: var(--blue)
}

.dark-mode .location-priority-badge {
  background: #193650;
  border-color: #2e5875;
  color: #bce5fa
}

/* Marketplace shop experience */
.shop-page {
  background: linear-gradient(180deg, #f7faff 0, #fff 28rem);
  min-height: 70vh
}

.shop-hero {
  background: linear-gradient(120deg, #061f51 0%, #0c3d83 62%, #116da0 100%);
  color: #fff;
  overflow: hidden;
  position: relative
}

.shop-hero:after {
  background: radial-gradient(circle, rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 22px 22px;
  content: "";
  inset: 0;
  opacity: .35;
  pointer-events: none;
  position: absolute
}

.shop-hero-inner {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr);
  min-height: 350px;
  position: relative;
  z-index: 1
}

.shop-hero .eyebrow { color: #9edcff }
.shop-hero h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  letter-spacing: -.05em;
  line-height: 1.02;
  margin: 14px 0 16px;
  max-width: 650px
}
.shop-hero h1 span { color: #ffb449 }
.shop-hero p { color: #d5e7ff; font-size: 1.05rem; line-height: 1.7; max-width: 580px }
.shop-hero-points { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 26px }
.shop-hero-points span { color: #eaf5ff; font-size: .84rem; font-weight: 700 }
.shop-hero-points i { color: #ffb449; margin-right: 5px }
.shop-hero-art { height: 280px; justify-self: end; position: relative; width: 320px }
.shop-hero-bag {
  align-items: center;
  background: linear-gradient(145deg, #ffbe55, #f27424);
  border: 10px solid rgba(255,255,255,.18);
  border-radius: 42px;
  box-shadow: 0 24px 45px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.4);
  color: #fff;
  display: flex;
  font-size: 5.2rem;
  height: 180px;
  justify-content: center;
  left: 70px;
  position: absolute;
  top: 48px;
  transform: rotate(-8deg);
  width: 180px;
  z-index: 2
}
.shop-hero-orbit { border: 1px solid rgba(173,225,255,.45); border-radius: 50%; height: 260px; position: absolute; width: 260px }
.orbit-one { left: 30px; top: 8px; transform: rotate(28deg) scaleX(.55) }
.orbit-two { left: 40px; top: 18px; transform: rotate(-35deg) scaleX(.7) }
.shop-float-card { background: rgba(255,255,255,.94); border-radius: 10px; box-shadow: 0 12px 25px rgba(0,0,0,.16); color: #17355e; font-size: .75rem; font-weight: 800; padding: 10px 12px; position: absolute; z-index: 3 }
.shop-float-card i { color: #f59d27; margin-right: 4px }
.float-one { right: 0; top: 35px; transform: rotate(7deg) }
.float-two { bottom: 38px; left: 0; transform: rotate(-5deg) }
.shop-content { position: relative; z-index: 2 }
.shop-search-panel { margin-top: -34px; position: relative }
.shop-panel-heading { align-items: flex-start; display: flex; justify-content: space-between; gap: 20px }
.shop-clear-link { color: var(--blue); font-size: .83rem; font-weight: 800; text-decoration: none; white-space: nowrap }
.shop-clear-link:hover { color: var(--orange) }
.shop-filter-form { align-items: end; display: grid; gap: 12px; grid-template-columns: 1.6fr 1fr .8fr .8fr auto; margin-top: 23px }
.shop-filter-field label, .shop-sort-form label { color: #607089; display: block; font-size: .72rem; font-weight: 800; margin-bottom: 7px }
.shop-input-wrap { position: relative }
.shop-input-wrap i { color: #7d91ac; left: 13px; position: absolute; top: 12px; z-index: 1 }
.shop-input-wrap .form-control { padding-left: 36px }
.shop-filter-form .form-control, .shop-sort-form .form-select { border-radius: 10px; min-height: 44px }
.shop-filter-button { min-height: 44px; white-space: nowrap }
.shop-results-layout { margin-top: 34px }
.shop-category-panel { background: #fff; border: 1px solid #e0e9f4; border-radius: 18px; box-shadow: 0 10px 30px rgba(9,45,90,.06); padding: 20px; }
.shop-category-heading { border-bottom: 1px solid #e8eef6; margin-bottom: 8px; padding: 2px 4px 15px }
.shop-category-heading h3 { color: var(--navy); font-size: 1.25rem; font-weight: 900; margin: 5px 0 0 }
.shop-category-link { align-items: center; border-radius: 10px; color: #50617a; display: flex; font-size: .86rem; font-weight: 700; gap: 10px; margin: 3px 0; min-height: 45px; padding: 6px 8px; text-decoration: none; transition: .2s }
.shop-category-link:hover, .shop-category-link.active { background: #edf5ff; color: var(--blue) }
.shop-category-link strong { color: #9aa8bb; font-size: .72rem; margin-left: auto }
.shop-category-link > i { color: #aab8c9; font-size: .7rem; margin-left: auto }
.shop-category-icon { align-items: center; background: #f0f5fb; border-radius: 8px; display: inline-flex; height: 30px; justify-content: center; min-width: 30px; text-align: center }
.shop-category-link.active .shop-category-icon { background: #d9ebff; color: var(--blue) }
.shop-trust-note { align-items: flex-start; background: #f7fbff; border: 1px solid #e4f0fc; border-radius: 12px; display: flex; gap: 9px; margin-top: 20px; padding: 13px 11px }
.shop-trust-note > i { color: #28a56b; font-size: 1.2rem }
.shop-trust-note strong, .shop-trust-note small { display: block }
.shop-trust-note strong { color: var(--navy); font-size: .76rem }
.shop-trust-note small { color: #718095; font-size: .68rem; line-height: 1.45; margin-top: 3px }
.shop-results-toolbar { align-items: end; display: flex; justify-content: space-between; margin-bottom: 20px; gap: 20px }
.shop-results-toolbar h2 { font-size: 1.75rem }
.shop-sort-form { align-items: center; display: flex; gap: 9px }
.shop-sort-form label { margin: 0; white-space: nowrap }
.shop-sort-form .form-select { font-size: .8rem; min-width: 170px }
.shop-product-card { display: flex; flex-direction: column; animation: none }
.shop-product-card .product-body { display: flex; flex: 1; flex-direction: column }
.shop-product-card .shop-product-actions { margin-top: auto }
.shop-product-category { color: #66809f; font-size: .7rem; font-weight: 800; text-transform: uppercase }
.shop-product-card h5 { font-size: 1rem; line-height: 1.3; margin: 6px 0 5px }
.shop-store-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.shop-rating { color: #f19a25; font-weight: 800 }
.shop-rating span { color: #7d8ba0; font-weight: 500 }
.shop-product-card .price { font-size: 1.08rem }
.shop-product-actions .btn { font-size: .76rem; min-height: 38px; padding: 8px 9px }
.shop-empty-state { border: 1px dashed #b9cce1; box-shadow: none }
.shop-empty-icon { align-items: center; background: #edf5ff; border-radius: 50%; color: var(--blue); display: flex; font-size: 1.5rem; height: 58px; justify-content: center; margin: 0 auto 16px; width: 58px }
.dark-mode .shop-page { background: linear-gradient(180deg, #101827 0, #101827 28rem) }
.dark-mode .shop-category-panel { background: #172235; border-color: #2b3b54 }
.dark-mode .shop-category-heading { border-color: #2b3b54 }
.dark-mode .shop-category-heading h3, .dark-mode .shop-trust-note strong { color: #f4f7fb }
.dark-mode .shop-category-link { color: #b6c2d3 }
.dark-mode .shop-category-link:hover, .dark-mode .shop-category-link.active { background: #20334e; color: #d5eaff }
.dark-mode .shop-category-icon, .dark-mode .shop-trust-note, .dark-mode .shop-empty-icon { background: #20334e; border-color: #344b68 }
.dark-mode .shop-trust-note small, .dark-mode .shop-sort-form label, .dark-mode .shop-filter-field label { color: #9eafc5 }
.dark-mode .shop-product-category { color: #9eb9d5 }
.dark-mode .shop-rating span { color: #b6c2d3 }

.shop-rating .bi-star-fill,
.rating-stars .bi-star-fill { color: #d8e0ea; font-size: .78rem }
.shop-rating .bi-star-fill.is-filled,
.rating-stars .bi-star-fill.is-filled { color: #f3a52b }
.shop-rating strong { color: #43556f; margin-left: 3px }
.dark-mode .shop-rating strong { color: #e7edf7 }

.product-rating-summary {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0
}
.product-rating-summary strong { color: var(--navy); font-size: 1.05rem }
.product-rating-summary span { color: #73839a; font-size: .85rem }
.rating-stars { display: inline-flex; gap: 2px }
.product-reviews-section {
  background: #f7faff;
  border-top: 1px solid #e1eaf5;
  margin-top: 55px;
  padding: 56px 0 70px
}
.reviews-heading {
  align-items: end;
  display: flex;
  justify-content: space-between;
  gap: 25px
}
.reviews-total {
  background: #fff;
  border: 1px solid #dfebf8;
  border-radius: 15px;
  min-width: 150px;
  padding: 13px 17px;
  text-align: center
}
.reviews-total strong { color: var(--navy); display: block; font-size: 1.55rem; line-height: 1 }
.reviews-total small { color: #718095; display: block; font-size: .72rem; margin-top: 4px }
.reviews-total .rating-stars { margin-top: 7px }
.review-form-card,
.review-list {
  background: #fff;
  border: 1px solid #dfebf8;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(17, 58, 105, .05);
  padding: 24px
}
.review-form-card h3 { color: var(--navy); font-size: 1.15rem; font-weight: 900; margin-bottom: 5px }
.star-picker { direction: rtl; display: inline-flex; gap: 4px; justify-content: flex-end }
.star-picker input { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px }
.star-picker label { color: #d8e0ea; cursor: pointer; font-size: 1.8rem; line-height: 1; transition: color .18s, transform .18s }
.star-picker label:hover, .star-picker label:hover ~ label, .star-picker input:checked ~ label { color: #f3a52b; transform: scale(1.08) }
.star-picker input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 3px }
.review-login-prompt { padding: 18px 0 3px; text-align: center }
.review-login-prompt > i, .review-empty > i { color: #78a8d5; display: block; font-size: 2rem; margin-bottom: 11px }
.review-login-prompt h4, .review-empty h4 { color: var(--navy); font-size: 1.05rem; font-weight: 900 }
.review-item { display: flex; gap: 13px; padding: 4px 0 20px }
.review-item + .review-item { border-top: 1px solid #e8eef6; padding-top: 20px }
.review-avatar { align-items: center; background: #e8f2ff; border-radius: 50%; color: var(--blue); display: flex; flex: 0 0 38px; font-size: .9rem; font-weight: 900; height: 38px; justify-content: center }
.review-content { flex: 1; min-width: 0 }
.review-content strong { color: var(--navy); font-size: .88rem }
.review-content p { color: #55677f; font-size: .86rem; line-height: 1.6; white-space: pre-line }
.review-content time { font-size: .72rem }
.review-empty { padding: 25px 10px; text-align: center }
.review-alert { margin: 22px 0 0 }
.dark-mode .product-rating-summary strong,
.dark-mode .review-form-card h3,
.dark-mode .reviews-total strong,
.dark-mode .review-content strong,
.dark-mode .review-login-prompt h4,
.dark-mode .review-empty h4 { color: #f4f7fb }
.dark-mode .product-rating-summary span,
.dark-mode .review-content p,
.dark-mode .reviews-total small { color: #b6c2d3 }
.dark-mode .product-reviews-section { background: #101827; border-color: #2b3b54 }
.dark-mode .reviews-total,
.dark-mode .review-form-card,
.dark-mode .review-list { background: #172235; border-color: #2b3b54 }
.dark-mode .review-item + .review-item { border-color: #2b3b54 }
.dark-mode .review-avatar { background: #203b5a; color: #bde3ff }
.dark-mode .review-content p { color: #c2cede }

/* Star ratings stay legible in dark mode: the generic `label { color: … !important }`
   rule was painting every picker star gray, so clicked stars showed no colour. */
html.dark-mode .rating-stars .bi-star-fill,
body.dark-mode .rating-stars .bi-star-fill,
html.dark-mode .shop-rating .bi-star-fill,
body.dark-mode .shop-rating .bi-star-fill {
  color: #4a5a72 !important
}

html.dark-mode .rating-stars .bi-star-fill.is-filled,
body.dark-mode .rating-stars .bi-star-fill.is-filled,
html.dark-mode .shop-rating .bi-star-fill.is-filled,
body.dark-mode .shop-rating .bi-star-fill.is-filled {
  color: #ffc24d !important
}

html.dark-mode .star-picker label,
body.dark-mode .star-picker label {
  color: #4a5a72 !important
}

html.dark-mode .star-picker label:hover,
html.dark-mode .star-picker label:hover ~ label,
html.dark-mode .star-picker input:checked ~ label,
body.dark-mode .star-picker label:hover,
body.dark-mode .star-picker label:hover ~ label,
body.dark-mode .star-picker input:checked ~ label {
  color: #ffc24d !important
}

/* Auth experience */
.auth-shell-body { background:#f6f9fd }
.auth-shell-body .market-nav-strip { display:none }
.auth-shell-body .main-navbar .profile-link,
.auth-shell-body .main-navbar .cart-link,
.auth-shell-body .main-navbar .language-nav-item { display:none }
.auth-page {
  min-height: calc(100vh - 82px);
  padding: 18px 0 48px;
  background:
    radial-gradient(circle at 10% 15%, rgba(19,168,255,.13), transparent 30%),
    radial-gradient(circle at 92% 80%, rgba(255,106,0,.10), transparent 28%),
    #f6f9fd;
  overflow: hidden;
}
.auth-layout {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(360px, 1fr);
  gap: 28px;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
  animation: auth-rise .65s ease both;
}
.auth-layout-register { max-width: 1180px; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.45fr) }
.auth-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 560px;
  padding: 44px;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(145deg, #062b72, #087de8 68%, #13a8ff);
  box-shadow: 0 20px 50px rgba(6,43,114,.2);
}
.auth-showcase::before { content:""; position:absolute; inset:-35% auto auto -20%; width:65%; height:150%; background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.12) 50%, transparent 65%); transform:rotate(14deg); animation:auth-shine 8s ease-in-out infinite; pointer-events:none }
.auth-showcase::after { content:""; position:absolute; z-index:-1; width:300px; height:300px; right:-100px; bottom:-120px; border:1px solid rgba(255,255,255,.2); border-radius:50%; box-shadow:0 0 0 32px rgba(255,255,255,.05),0 0 0 66px rgba(255,255,255,.04) }
.auth-showcase .eyebrow {
  position: relative;
  z-index: 2;
  padding: 8px 13px;
  color: #fff !important;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 0 6px 18px rgba(3,31,82,.12);
  letter-spacing: .18em;
  text-shadow: 0 1px 2px rgba(3,31,82,.35)
}
.auth-showcase h1 { max-width: 390px; margin: 16px 0 14px; color:#fff; font: 700 clamp(2rem,4vw,3.2rem)/1.05 "Space Grotesk",sans-serif }
.auth-showcase p { max-width: 390px; color: rgba(255,255,255,.76); line-height: 1.7 }
.auth-showcase-icon { display:grid; place-items:center; width:72px; height:72px; margin-bottom:24px; border:2px solid rgba(255,255,255,.4); border-radius:20px; color:#fff; background:rgba(255,255,255,.16); box-shadow:0 12px 28px rgba(3,31,82,.2); font-size:2rem; line-height:1; animation: auth-float 4s ease-in-out infinite }
.auth-trust-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; color:rgba(255,255,255,.9); font-size:.78rem; font-weight:700 }
.auth-trust-row span { display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:8px 12px; border:1px solid rgba(255,255,255,.2); border-radius:10px; background:rgba(3,31,82,.14) }
.auth-trust-row i { display:grid; place-items:center; width:20px; height:20px; color:#ffd3a8; font-size:1rem; line-height:1 }
.auth-orbit { position:absolute; border:1px solid rgba(255,255,255,.16); border-radius:50%; pointer-events:none }
.auth-orbit-one { width:180px; height:180px; top:-70px; right:-42px }
.auth-orbit-two { width:270px; height:270px; top:-115px; right:-88px }
.auth-card { align-self: center; width:100%; border:1px solid rgba(217,228,241,.9); border-radius:26px; background:rgba(255,255,255,.92); box-shadow:0 20px 55px rgba(6,43,114,.12); backdrop-filter:blur(12px); animation: auth-card-in .75s .08s ease both }
.auth-card:hover { box-shadow:0 24px 64px rgba(6,43,114,.16) }
.auth-card-heading { margin-bottom:26px }
.auth-card-heading::after { content:""; display:block; width:48px; height:4px; margin-top:18px; border-radius:9px; background:linear-gradient(90deg,#ff6a00,#087de8) }
.auth-logo-panel { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:92px; margin:-8px -8px 26px; padding:14px 18px; border:1px solid #dce8f5; border-radius:18px; background:linear-gradient(135deg,#f8fbff,#edf5ff); box-shadow:0 10px 24px rgba(6,43,114,.08) }
.auth-logo-panel .brand-logo { padding:7px 10px; border-radius:12px; background:#fff; box-shadow:0 6px 16px rgba(6,43,114,.1) }
.auth-logo-panel .brand-image { width:210px; height:70px; padding:0; background:#fff }
.auth-logo-panel > span { color:#6c7e93; font-size:.68rem; font-weight:800; text-align:right; line-height:1.35 }
.auth-kicker { display:block; margin-bottom:8px; color:#087de8; font-size:.68rem; font-weight:800; letter-spacing:.16em }
.auth-card-heading h2 { margin-bottom:8px }
.auth-card-heading p { margin:0; color:#718095 }
.auth-field { display:block; margin-bottom:17px; color:#43556f; font-size:.78rem; font-weight:800 }
.auth-field > span:first-child { display:block; margin-bottom:7px }
.auth-input { position:relative; display:block }
.auth-input > i { position:absolute; z-index:2; top:50%; left:16px; display:grid; place-items:center; width:22px; height:22px; color:#087de8; font-size:1.15rem; line-height:1; pointer-events:none; transform:translateY(-50%) }
.auth-input .form-control { min-height:52px; padding-left:52px; padding-right:52px; border:1px solid #dce7f3; border-radius:12px; background:#fbfdff }
.auth-input .form-control:focus { border-color:#087de8; box-shadow:0 0 0 4px rgba(8,125,232,.11) }
.auth-input:focus-within > i { color:#087de8; transform:translateY(-50%) scale(1.08) }
.auth-input .pw-wrap { position:relative; display:block; width:100% }
.auth-input .pw-wrap > input { width:100%; min-height:52px; padding-left:52px; padding-right:56px; border:1px solid #dce7f3; border-radius:12px; background:#fbfdff }
.auth-input .pw-toggle { right:10px; width:34px; height:34px; border:1px solid #c9d9eb; border-radius:9px; color:#087de8; background:#f3f8fe; font-size:1.05rem }
.auth-input .pw-toggle:hover, .auth-input .pw-toggle:focus-visible { color:#062b72; border-color:#087de8; background:#e6f2ff }
.auth-card .form-select { min-height:52px; border:1px solid #dce7f3; border-radius:12px; background-color:#fbfdff }
.auth-card .form-select:focus { border-color:#087de8; box-shadow:0 0 0 4px rgba(8,125,232,.11) }
.auth-card .role-box { animation:auth-section-in .4s ease both }
.auth-card .role-box h5 { display:flex; align-items:center; gap:8px }
.auth-card .role-box h5::before { content:""; width:8px; height:8px; border-radius:50%; background:#ff6a00; box-shadow:0 0 0 5px rgba(255,106,0,.12) }
.auth-card .form-check { padding:14px 16px 14px 40px; border:1px solid #e4edf6; border-radius:12px; background:#f8fbff; color:#61728a; font-size:.8rem }
.auth-card .form-check-input { margin-top:.12rem; margin-left:-24px; accent-color:#087de8 }
.auth-card .form-check a { color:#087de8; font-weight:700 }
.auth-submit { min-height:52px; margin-top:8px; border-radius:12px; font-weight:800; box-shadow:0 10px 22px rgba(255,106,0,.2); transition:transform .2s, box-shadow .2s }
.auth-submit:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(255,106,0,.28) }
.auth-submit i { margin-left:7px; transition:transform .2s }
.auth-submit:hover i { transform:translateX(4px) }
.auth-links { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:22px; font-size:.8rem }
.auth-links-center { justify-content:center }
.auth-links a { color:#087de8; font-weight:700; text-decoration:none }
.auth-links a:hover { color:#062b72 }
.auth-alert { border:0; border-radius:12px; font-size:.82rem }
.auth-register-page .auth-card { align-self: start }
.auth-register-page .auth-card-heading { text-align:center }
.auth-register-page .auth-card-heading::after { margin-left:auto; margin-right:auto }
.auth-register-page .auth-card-heading .brand-logo { display:inline-flex }
@keyframes auth-rise { from { opacity:0; transform:translateY(18px) } to { opacity:1; transform:none } }
@keyframes auth-card-in { from { opacity:0; transform:translateX(18px) } to { opacity:1; transform:none } }
@keyframes auth-float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-7px) } }
@keyframes auth-shine { 0%,55%,100% { transform:translateX(-30%) rotate(14deg); opacity:0 } 65% { opacity:1 } 82% { transform:translateX(210%) rotate(14deg); opacity:0 } }
@keyframes auth-section-in { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
@media (max-width: 767.98px) {
  .auth-page { min-height:calc(100vh - 70px); padding-top:10px }
  .auth-layout, .auth-layout-register { grid-template-columns:1fr; gap:18px }
  .auth-showcase { min-height:270px; padding:30px; border-radius:20px }
  .auth-showcase h1 { font-size:2rem }
  .auth-showcase p { margin-bottom:0 }
  .auth-trust-row { margin-top:16px }
  .auth-card { border-radius:20px; padding:26px 20px !important }
}
.dark-mode .auth-page { background:#101827 }
.dark-mode .auth-card { background:rgba(23,34,53,.94); border-color:#2b3b54 }
.dark-mode .auth-card-heading p, .dark-mode .auth-field { color:#b6c2d3 }
.dark-mode .auth-input .form-control { background:#172235; border-color:#2b3b54; color:#f4f7fb }
.dark-mode .auth-input .pw-wrap > input { background:#172235; border-color:#2b3b54; color:#f4f7fb }
.dark-mode .auth-input .pw-toggle { border-color:#45617f; color:#8ed0ff; background:#20334e }
.dark-mode .auth-input .pw-toggle:hover, .dark-mode .auth-input .pw-toggle:focus-visible { color:#fff; border-color:#8ed0ff; background:#294764 }
.dark-mode .auth-card .form-select, .dark-mode .auth-card .form-check { background:#172235; border-color:#2b3b54; color:#e7edf7 }
.dark-mode .auth-logo-panel { background:linear-gradient(135deg,#20334e,#172235); border-color:#354b68 }
.dark-mode .auth-logo-panel .brand-logo, .dark-mode .auth-logo-panel .brand-image { background:#fff }
.dark-mode .auth-logo-panel > span { color:#c2cede }
@media (prefers-reduced-motion: reduce) {
  .auth-layout, .auth-card, .auth-showcase-icon, .auth-showcase::before, .auth-card .role-box { animation:none }
  .auth-submit, .auth-submit i { transition:none }
}

/* Legal and trust pages */
.legal-page { background: #f7faff; min-height: 70vh }
.legal-hero { background: linear-gradient(120deg, #061f51, #0c478a 68%, #117698); color: #fff; overflow: hidden; padding: 74px 0 68px; position: relative }
.legal-hero:after { background: radial-gradient(circle, rgba(255,255,255,.17) 1px, transparent 1px); background-size: 22px 22px; content: ""; inset: 0; opacity: .3; pointer-events: none; position: absolute }
.legal-hero .container { position: relative; z-index: 1 }
.legal-hero .eyebrow { color: #a6ddff }
.legal-hero h1 { font-family: "Space Grotesk", sans-serif; font-size: clamp(2.35rem, 5vw, 4rem); letter-spacing: -.045em; margin: 15px 0 14px; max-width: 720px }
.legal-hero p { color: #d9eaff; font-size: 1.05rem; line-height: 1.7; max-width: 720px }
.legal-meta { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 25px }
.legal-meta span { color: #e7f4ff; font-size: .8rem; font-weight: 700 }
.legal-meta i { color: #ffb449; margin-right: 5px }
.legal-content { padding-bottom: 75px; padding-top: 48px }
.legal-layout { align-items: start; display: grid; gap: 34px; grid-template-columns: 235px minmax(0, 820px); justify-content: center }
.legal-sidebar { position: sticky; top: 100px }
.legal-toc { background: #fff; border: 1px solid #dfe9f5; border-radius: 15px; box-shadow: 0 10px 28px rgba(12,46,90,.05); padding: 17px 15px }
.legal-toc strong { color: var(--navy); display: block; font-size: .78rem; letter-spacing: .04em; margin-bottom: 10px; text-transform: uppercase }
.legal-toc a { border-left: 2px solid transparent; color: #718095; display: block; font-size: .78rem; line-height: 1.3; padding: 8px 8px; text-decoration: none; transition: .2s }
.legal-toc a:hover { background: #edf5ff; border-color: var(--blue); color: var(--blue) }
.legal-article { background: #fff; border: 1px solid #dfe9f5; border-radius: 20px; box-shadow: 0 15px 38px rgba(12,46,90,.06); padding: clamp(25px, 5vw, 50px) }
.legal-intro { border-bottom: 1px solid #e6edf6; color: #50617a; font-size: 1.04rem; line-height: 1.8; margin: 0 0 30px; padding-bottom: 27px }
.legal-article section { scroll-margin-top: 100px }
.legal-article section + section { border-top: 1px solid #e8eef6; margin-top: 30px; padding-top: 30px }
.legal-article h2 { color: var(--navy); font-size: 1.3rem; font-weight: 900; margin-bottom: 13px }
.legal-article p, .legal-article li { color: #5b6c83; font-size: .91rem; line-height: 1.78 }
.legal-article ul { padding-left: 20px }
.legal-article li { margin-bottom: 9px; padding-left: 4px }
.legal-article strong { color: #344c6c }
.legal-contact-card { align-items: flex-start; background: linear-gradient(135deg, #edf7ff, #f7fbff); border: 1px solid #d5eafa; border-radius: 14px; display: flex; gap: 13px; margin-top: 18px; padding: 17px }
.legal-contact-card > i { color: var(--blue); font-size: 1.45rem }
.legal-contact-card strong, .legal-contact-card a, .legal-contact-card small { display: block }
.legal-contact-card strong { color: var(--navy); font-size: .87rem }
.legal-contact-card a { color: var(--blue); font-size: .85rem; font-weight: 800; margin-top: 3px; text-decoration: none }
.legal-contact-card small { color: #718095; font-size: .74rem; line-height: 1.5; margin-top: 4px }
.legal-updated { background: #f5f8fc; border-left: 3px solid #72a8d7; font-size: .8rem !important; margin: 30px 0 0; padding: 12px 14px }
.legal-updated i { color: var(--blue); margin-right: 5px }
.dark-mode .legal-page { background: #101827 }
.dark-mode .legal-toc, .dark-mode .legal-article { background: #172235; border-color: #2b3b54 }
.dark-mode .legal-toc strong, .dark-mode .legal-article h2, .dark-mode .legal-article strong, .dark-mode .legal-contact-card strong { color: #f4f7fb }
.dark-mode .legal-toc a { color: #b6c2d3 }
.dark-mode .legal-toc a:hover { background: #20334e; color: #d5eaff }
.dark-mode .legal-intro, .dark-mode .legal-article p, .dark-mode .legal-article li { color: #b6c2d3 }
.dark-mode .legal-article section + section { border-color: #2b3b54 }
.dark-mode .legal-contact-card, .dark-mode .legal-updated { background: #20334e; border-color: #344b68 }
.dark-mode .legal-contact-card small { color: #b6c2d3 }
@media (max-width: 767px) {
  .legal-hero { padding: 52px 0 46px }
  .legal-hero p { font-size: .94rem }
  .legal-layout { display: block }
  .legal-sidebar { margin-bottom: 20px; position: static }
  .legal-toc { display: flex; flex-wrap: wrap; gap: 3px; padding: 12px }
  .legal-toc strong { flex-basis: 100%; margin: 3px 7px 4px }
  .legal-toc a { background: #f5f8fc; border: 0; border-radius: 7px; padding: 7px 9px }
  .legal-article { border-radius: 15px; padding: 23px 19px }
}

@media (max-width: 767px) {
  .reviews-heading { align-items: flex-start; display: block }
  .reviews-total { margin-top: 18px; max-width: 180px }
  .product-reviews-section { margin-top: 35px; padding: 40px 0 50px }
}
@media (max-width: 575px) {
  .review-form-card, .review-list { padding: 18px }
  .product-rating-summary { gap: 5px }
  .review-content time { width: 100% }
}

@media (max-width: 1199px) {
  .shop-filter-form { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .shop-filter-button { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .shop-hero-inner { grid-template-columns: 1fr; min-height: 390px; padding: 45px 0 35px }
  .shop-hero-art { display: none }
  .shop-hero h1 { font-size: clamp(2.2rem, 11vw, 3.3rem) }
  .shop-hero p { font-size: .95rem }
  .shop-hero-points { gap: 9px 14px }
  .shop-search-panel { margin-top: -22px; padding: 19px }
  .shop-panel-heading { display: block }
  .shop-clear-link { display: inline-block; margin-top: 12px }
  .shop-filter-form { grid-template-columns: 1fr 1fr; }
  .shop-filter-search, .shop-filter-button { grid-column: 1 / -1 }
  .shop-results-toolbar { align-items: flex-start; display: block }
  .shop-sort-form { margin-top: 17px }
  .shop-sort-form .form-select { flex: 1; }
}
@media (max-width: 575px) {
  .shop-content { padding-bottom: 2.5rem !important; padding-top: 2.5rem !important }
  .shop-filter-form { display: block }
  .shop-filter-field { margin-top: 12px }
  .shop-filter-field:first-child { margin-top: 0 }
  .shop-filter-button { margin-top: 14px; width: 100% }
  .shop-results-layout { margin-top: 25px }
  .shop-category-panel { padding: 15px }
  .shop-category-link { min-height: 42px }
  .shop-product-grid { --bs-gutter-x: .75rem; --bs-gutter-y: 1rem }
  .shop-product-card h5 { font-size: .87rem }
  .shop-product-card .product-body { padding: 12px !important }
  .shop-product-actions { display: block !important }
  .shop-product-actions .btn { display: block; margin-top: 7px; width: 100% }
}

.trust-strip {
  background: var(--navy);
  border-radius: 13px;
  box-shadow: 0 16px 32px rgba(18, 52, 91, .13)
}

.trust-item {
  padding: 20px 14px;
  color: #edf5f7
}

.footer {
  background: #0b2745
}

.footer a {
  color: #c7d7e4
}

.footer a:hover {
  color: #f18a55
}

@media(max-width:575px) {
  .main-navbar .container {
    min-height: 68px
  }

  .hero {
    padding-top: 16px;
    padding-bottom: 34px
  }

  .hero-panel {
    border-radius: 18px
  }

  .hero-copy {
    padding: 40px 24px 28px
  }

  .hero-copy h1 {
    font-size: 2.55rem
  }

  .product-img {
    height: 180px
  }
}

/* Dense marketplace layout */
body {
  background: #f3f5f7
}

.main-navbar {
  border-bottom: 1px solid #d8e1e8 !important
}

.main-navbar .container {
  max-width: 1400px;
  min-height: 72px
}

.brand-image {
  width: 185px;
  height: 62px
}

.searchbar {
  height: 50px;
  border-radius: 7px;
  border-color: #b9c9d5;
  box-shadow: none
}

.searchbar input {
  font-size: .94rem
}

.searchbar button {
  width: 58px
}

.hero {
  padding: 20px 0 38px;
  background: #f3f5f7
}

.hero-panel {
  min-height: 410px;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(18, 52, 91, .10)
}

.hero-copy {
  padding: 52px 42px 42px 54px
}

.hero-copy h1 {
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  margin: 16px 0 14px
}

.hero-copy p {
  font-size: 1rem;
  max-width: 560px
}

.hero-actions {
  margin-top: 20px
}

.hero-product {
  border-radius: 14px;
  border-width: 5px
}

.art-card {
  border-radius: 8px;
  padding: 10px 14px
}

.category-card {
  border-radius: 8px;
  padding: 15px 10px;
  box-shadow: 0 2px 8px rgba(18, 52, 91, .05)
}

.category-icon {
  width: 44px;
  height: 44px;
  font-size: 21px
}

.section-title {
  font-size: 1.45rem
}

.product-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(18, 52, 91, .06)
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 20px rgba(18, 52, 91, .12)
}

.product-img {
  height: 205px
}

.product-body {
  padding: 14px
}

.product-body h5 {
  font-family: "DM Sans", sans-serif;
  font-size: .96rem;
  font-weight: 800
}

.product-body .small {
  font-size: .76rem;
  color: #66788c !important
}

.price {
  font-size: 1.12rem
}

.product-body .btn {
  font-size: .8rem;
  font-weight: 800;
  padding: .55rem .55rem
}

.product-views {
  padding: 7px 14px 0;
  font-size: .72rem
}

.trust-strip {
  border-radius: 8px
}

.trust-item {
  padding: 17px 12px;
  font-size: .9rem
}

.footer {
  margin-top: 34px !important
}

@media(max-width:991px) {
  .main-navbar .container {
    min-height: 66px
  }

  .hero-panel {
    min-height: 0
  }

  .hero-copy {
    padding: 42px 30px 30px
  }

  .hero-art {
    min-height: 300px
  }
}

@media(max-width:575px) {
  .brand-image {
    width: 160px;
    height: 56px
  }

  .hero {
    padding-top: 12px;
    padding-bottom: 28px
  }

  .hero-copy {
    padding: 34px 22px 25px
  }

  .hero-copy h1 {
    font-size: 2.35rem
  }

  .product-img {
    height: 170px
  }

  .product-body {
    padding: 12px
  }

  .product-body .btn {
    font-size: .72rem
  }
}

/* Marketplace navigation and motion */
.market-nav-strip {
  background: var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--orange)
}

.market-nav-strip .container {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1400px
}

.market-browse,
.market-links a {
  color: #fff;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 800;
  white-space: nowrap
}

.market-browse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  margin-left: -15px;
  background: rgba(255, 255, 255, .09)
}

.market-browse span {
  font-size: 1rem;
  line-height: 1
}

.market-links {
  display: flex;
  align-items: center;
  gap: 24px
}

.market-links a {
  font-weight: 600;
  color: #dce9f1;
  transition: color .2s ease
}

.market-links a:hover {
  color: #fff
}

.market-note {
  margin-left: auto;
  color: #c6d7e3;
  font-size: .76rem;
  font-weight: 600
}

.hero-copy>*,
.hero-art>* {
  animation: market-rise .65s cubic-bezier(.2, .75, .25, 1) both
}

.hero-copy .eyebrow {
  animation-delay: .08s
}

.hero-copy h1 {
  animation-delay: .14s
}

.hero-copy p {
  animation-delay: .2s
}

.hero-actions {
  animation-delay: .26s
}

.hero-points {
  animation-delay: .32s
}

.hero-product {
  animation: market-float .8s cubic-bezier(.2, .75, .25, 1) both
}

.hero-phone {
  animation-delay: .18s
}

.hero-laptop {
  animation-delay: .08s
}

.hero-shoes {
  animation-delay: .26s
}

.art-card {
  animation-delay: .34s
}

.category-card {
  animation: market-rise .55s cubic-bezier(.2, .75, .25, 1) both
}

.category-card:nth-child(2) {
  animation-delay: .04s
}

.category-card:nth-child(3) {
  animation-delay: .08s
}

.category-card:nth-child(4) {
  animation-delay: .12s
}

.category-card:nth-child(5) {
  animation-delay: .16s
}

.category-card:nth-child(6) {
  animation-delay: .20s
}

.category-card:nth-child(7) {
  animation-delay: .24s
}

.category-card:nth-child(8) {
  animation-delay: .28s
}

.category-card:nth-child(9) {
  animation-delay: .32s
}

.category-card:nth-child(10) {
  animation-delay: .36s
}

.product-card {
  animation: market-rise .6s cubic-bezier(.2, .75, .25, 1) both
}

.product-card:nth-child(2) {
  animation-delay: .05s
}

.product-card:nth-child(3) {
  animation-delay: .10s
}

.product-card:nth-child(4) {
  animation-delay: .15s
}

.product-card:nth-child(5) {
  animation-delay: .20s
}

.product-card:nth-child(6) {
  animation-delay: .25s
}

.product-card:nth-child(7) {
  animation-delay: .30s
}

.product-card:nth-child(8) {
  animation-delay: .35s
}

@keyframes market-rise {
  from {
    opacity: 0;
    transform: translateY(14px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes market-float {
  from {
    opacity: 0;
    transform: translateY(18px) rotate(0)
  }

  to {
    opacity: 1
  }
}

@media(max-width:991px) {
  .market-nav-strip .container {
    overflow-x: auto;
    gap: 18px;
    min-height: 40px;
    scrollbar-width: none
  }

  .market-nav-strip .container::-webkit-scrollbar {
    display: none
  }

  .market-links {
    gap: 18px
  }

  .market-note {
    display: none
  }
}

@media(max-width:575px) {
  .market-nav-strip .container {
    padding-left: 20px;
    padding-right: 20px
  }

  .market-browse {
    margin-left: 0
  }

  .market-links a:nth-child(n+3) {
    display: none
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important
  }
}

/* About page final responsive and theme overrides */
.about-page .about-hero {
  display: block;
  grid-template-columns: none;
  padding: 92px 0 124px
}

  .about-page .about-hero .container {
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr)
  }

  @media(max-width:991px) {
    .about-page .about-hero {
      padding: 72px 0 100px
    }

    .about-page .about-hero .container {
      grid-template-columns: 1fr
    }
  }

  @media(max-width:575px) {
    .about-page .about-hero {
      padding: 58px 0 78px
    }

    .about-page .about-hero .container {
      padding-left: 20px;
      padding-right: 20px
    }

    .about-page .about-hero-actions .btn {
      width: 100%
    }

    .about-page .about-hero-visual {
      min-height: 235px;
      transform: scale(.86)
    }

    .about-page .about-value-grid,
    .about-page .about-timeline {
      grid-template-columns: 1fr
    }
  }

  html.dark-mode .about-page .about-hero,
  body.dark-mode .about-page .about-hero {
    background: linear-gradient(125deg, #0b1c38 0%, #123d70 68%, #145d9e 100%);
    border-color: transparent
  }

  html.dark-mode .about-page .about-intro,
  body.dark-mode .about-page .about-intro,
  html.dark-mode .about-page .about-roadmap,
  body.dark-mode .about-page .about-roadmap {
    background: #101827
  }

  html.dark-mode .about-page .about-values,
  body.dark-mode .about-page .about-values {
    background: linear-gradient(135deg, #111d31, #142238)
  }

  html.dark-mode .about-page .about-card-label,
  body.dark-mode .about-page .about-card-label {
    color: #a9b9ce
  }

  html.dark-mode .about-page .about-founder-card p,
  body.dark-mode .about-page .about-founder-card p,
  html.dark-mode .about-page .about-section-heading > p,
  body.dark-mode .about-page .about-section-heading > p {
    color: #b6c2d3
  }

  html.dark-mode .about-page .about-text-link,
  body.dark-mode .about-page .about-text-link {
    color: #9ed9ff
  }

  html.dark-mode .about-page .about-timeline > div,
  body.dark-mode .about-page .about-timeline > div {
    border-color: #38516f
  }

  html.dark-mode .about-page .about-timeline > div:hover,
  body.dark-mode .about-page .about-timeline > div:hover {
    border-color: #63b9f4
  }

  html.dark-mode .about-page .about-quote,
  body.dark-mode .about-page .about-quote {
    color: #385575
  }

  /* About page premium motion and depth */
  .about-page {
    overflow: hidden
  }

  .about-page .about-hero {
    box-shadow: 0 22px 55px rgba(5, 31, 82, .18);
  }

  .about-page .about-hero-content > * {
    animation: aboutRise .7s cubic-bezier(.2,.75,.25,1) both
  }

  .about-page .about-hero-content .about-eyebrow { animation-delay: .04s }
  .about-page .about-hero-content h1 { animation-delay: .11s }
  .about-page .about-hero-content p { animation-delay: .18s }
  .about-page .about-hero-content .about-hero-actions { animation-delay: .25s }

  .about-page .about-hero-visual {
    animation: aboutVisualIn .9s cubic-bezier(.2,.75,.25,1) .18s both
  }

  .about-page .about-hero-icon {
    animation: aboutIconFloat 5s ease-in-out 1s infinite
  }

  .about-page .about-orbit-one {
    animation: aboutOrbitSpin 18s linear infinite
  }

  .about-page .about-orbit-two {
    animation: aboutOrbitSpinReverse 24s linear infinite
  }

  .about-page .about-float-card {
    animation: aboutFloatCard 4s ease-in-out infinite
  }

  .about-page .about-float-card-two {
    animation-delay: .8s
  }

  .about-page .about-founder-card,
  .about-page .about-pillar-card,
  .about-page .about-value-grid > div {
    box-shadow: 0 12px 32px rgba(6,43,114,.06);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease
  }

  .about-page .about-founder-card:hover,
  .about-page .about-pillar-card:hover,
  .about-page .about-value-grid > div:hover {
    border-color: #c6dcf2;
    box-shadow: 0 20px 42px rgba(6,43,114,.13);
    transform: translateY(-6px)
  }

  .about-page .about-scroll-item {
    opacity: 1;
    transform: none
  }

  .js .about-page .about-scroll-item {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s ease var(--about-reveal-delay, 0ms), transform .65s cubic-bezier(.2,.75,.25,1) var(--about-reveal-delay, 0ms)
  }

  .about-page .about-scroll-item.is-visible {
    opacity: 1;
    transform: translateY(0)
  }

  .about-page .about-pillar-card:nth-child(1),
  .about-page .about-pillar-card:nth-child(2),
  .about-page .about-pillar-card:nth-child(3),
  .about-page .about-timeline > div {
    animation: aboutRise .65s cubic-bezier(.2,.75,.25,1) both
  }

  .about-page .about-pillar-card:nth-child(2) { animation-delay: .08s }
  .about-page .about-pillar-card:nth-child(3) { animation-delay: .16s }
  .about-page .about-timeline > div:nth-child(2) { animation-delay: .08s }
  .about-page .about-timeline > div:nth-child(3) { animation-delay: .16s }
  .about-page .about-timeline > div:nth-child(4) { animation-delay: .24s }

  .about-page .about-card-icon {
    box-shadow: 0 8px 18px rgba(8,125,232,.12);
    transition: transform .25s ease
  }

  .about-page .about-pillar-card:hover .about-card-icon {
    transform: rotate(-6deg) scale(1.08)
  }

  .about-page .about-value-grid > div > i {
    transition: transform .25s ease
  }

  .about-page .about-value-grid > div:hover > i {
    transform: scale(1.16) rotate(-5deg)
  }

  .about-page .about-timeline > div {
    transition: border-color .25s ease
  }

  .about-page .about-timeline > div:hover {
    border-color: var(--blue)
  }

  .about-page .about-timeline > div:hover:before {
    box-shadow: 0 0 0 5px rgba(8,125,232,.12)
  }

  .about-page .about-cta {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 -18px 45px rgba(6,43,114,.08)
  }

  @keyframes aboutRise {
    from { opacity: 0; transform: translateY(18px) }
    to { opacity: 1; transform: translateY(0) }
  }

  @keyframes aboutVisualIn {
    from { opacity: 0; transform: translateX(28px) scale(.96) }
    to { opacity: 1; transform: translateX(0) scale(1) }
  }

  @keyframes aboutIconFloat {
    0%, 100% { transform: translate(-50%, -50%) rotate(-5deg) }
    50% { transform: translate(-50%, calc(-50% - 9px)) rotate(-2deg) }
  }

  @keyframes aboutOrbitSpin {
    to { transform: translate(-50%, -50%) rotate(385deg) }
  }

  @keyframes aboutOrbitSpinReverse {
    to { transform: translate(-50%, -50%) rotate(-395deg) }
  }

  @keyframes aboutFloatCard {
    0%, 100% { transform: translateY(0) }
    50% { transform: translateY(-6px) }
  }

  @media (max-width: 575.98px) {
    .about-page .about-hero-visual {
      animation-name: aboutVisualMobileIn
    }

    .about-page .about-founder-card:hover,
    .about-page .about-pillar-card:hover,
    .about-page .about-value-grid > div:hover {
      transform: none
    }
  }

  @keyframes aboutVisualMobileIn {
    from { opacity: 0; transform: translateX(18px) scale(.82) }
    to { opacity: 1; transform: translateX(0) scale(.86) }
  }

  @media (prefers-reduced-motion: reduce) {
    .about-page .about-hero-content > *,
    .about-page .about-hero-visual,
    .about-page .about-hero-icon,
    .about-page .about-orbit,
    .about-page .about-float-card,
    .about-page .about-pillar-card,
    .about-page .about-timeline > div {
      animation: none !important
    }

    .about-page .about-scroll-item {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important
    }
  }

.results-toolbar {
  gap: 18px
}

/* Luxury navigation treatment */
.main-navbar {
  background: rgba(7, 25, 58, .97) !important;
  border-bottom: 1px solid rgba(205, 161, 74, .28) !important;
  box-shadow: 0 12px 30px rgba(4, 15, 35, .18);
}

.main-navbar .container {
  min-height: 84px;
}

.main-navbar .brand-image {
  filter: brightness(1.2) contrast(1.08) drop-shadow(0 2px 10px rgba(255, 255, 255, .22));
  background: rgba(255, 255, 255, .06);
}

.main-navbar .nav-link {
  color: rgba(255, 255, 255, .78);
  border-radius: 9px;
  transition: color .2s ease, background-color .2s ease;
}

.main-navbar .nav-link:hover,
.main-navbar .nav-link:focus-visible {
  color: #f2c879 !important;
  background: rgba(255, 255, 255, .08);
}

.main-navbar .menu-icon {
  color: currentColor;
  stroke: none;
  fill: currentColor;
  font-size: 1.18rem;
  width: auto;
  height: auto;
}

.main-navbar .searchbar {
  border-color: rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.main-navbar .searchbar input {
  color: #fff;
  background: transparent;
}

.main-navbar .searchbar input::placeholder {
  color: rgba(255, 255, 255, .58);
}

.main-navbar .searchbar:focus-within {
  border-color: #d9ad5b;
  box-shadow: 0 0 0 3px rgba(217, 173, 91, .16);
}

.main-navbar .searchbar button {
  background: #c9963e;
  color: #fff;
}

.main-navbar .searchbar button i {
  font-size: 1.05rem;
}

.main-navbar .visual-search-trigger {
  background: transparent !important;
  color: rgba(255, 255, 255, .72) !important;
  border-left-color: rgba(255, 255, 255, .15) !important;
}

.main-navbar .visual-search-trigger:hover {
  color: #f2c879 !important;
  background: rgba(255, 255, 255, .08) !important;
}

.main-navbar .navbar-toggler {
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  padding: .4rem .65rem;
}

.main-navbar .navbar-toggler i {
  font-size: 1.35rem;
}

.market-nav-strip {
  background: #102d55;
  border-bottom: 1px solid rgba(217, 173, 91, .4);
}

.market-browse {
  background: #c9963e;
  color: #fff;
}

.market-links a,
.market-note {
  color: rgba(255, 255, 255, .72);
}

.market-links a:hover,
.market-browse:hover {
  color: #fff;
}

.vendor-hero-icon {
  display: inline-grid;
  place-items: center;
  width: 148px;
  height: 148px;
  border: 1px solid rgba(226, 185, 99, .48);
  border-radius: 42px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04));
  box-shadow: 0 18px 35px rgba(5, 18, 42, .24), inset 0 1px 0 rgba(255, 255, 255, .2);
  color: #f2c879;
  font-size: 4.4rem;
}

.market-browse i,
.translate-toggle i,
.theme-toggle i {
  font-size: 1rem;
  vertical-align: -.08em;
}

.theme-toggle {
  color: rgba(255, 255, 255, .78) !important;
}

.language-menu {
  border-color: rgba(201, 150, 62, .35);
}

.visual-search-camera {
  color: var(--navy);
}

.visual-search-camera i {
  font-size: 2.8rem;
}

.back-to-top i {
  font-size: 1.1rem;
}

html.dark-mode .main-navbar,
body.dark-mode .main-navbar {
  background: rgba(5, 16, 36, .98) !important;
}

/* Final luxury navigation layer */
.main-navbar {
  background: linear-gradient(110deg, #071a38 0%, #102d55 62%, #193b63 100%) !important;
  border-bottom: 1px solid rgba(226, 185, 99, .45) !important;
  box-shadow: 0 14px 32px rgba(5, 18, 42, .22);
}

.main-navbar .container {
  min-height: 86px;
}

.main-navbar .brand-image {
  width: 196px;
  height: 68px;
  filter: brightness(0) invert(1) drop-shadow(0 5px 12px rgba(0, 0, 0, .18));
}

.main-navbar .nav-link {
  color: rgba(255, 255, 255, .76);
  font-size: .82rem;
  letter-spacing: .02em;
  padding: .72rem .7rem !important;
}

.main-navbar .nav-link:hover,
.main-navbar .nav-link:focus-visible,
.main-navbar .nav-link.active {
  color: #f2c879 !important;
  background: rgba(255, 255, 255, .08);
}

.main-navbar .searchbar {
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 24px;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.main-navbar .searchbar input {
  padding-left: 20px;
}

.main-navbar .searchbar button {
  width: 50px;
  background: #c9963e;
}

.main-navbar .searchbar button:hover {
  background: #e0b45f;
}

.main-navbar .cart-link,
.main-navbar .profile-link {
  gap: 7px;
}

.main-navbar .menu-icon {
  color: currentColor;
  font-size: 1.05rem;
}

.main-navbar .cart-link .cart-count {
  top: 3px;
  left: 22px;
  background: #d9ad5b !important;
  color: #17243b;
}

.market-nav-strip {
  background: #0a213f;
  border-bottom: 1px solid rgba(226, 185, 99, .42);
  overflow: hidden;
}

.market-nav-strip .container {
  min-height: 46px;
}

.market-browse {
  background: linear-gradient(135deg, #c9963e, #e0b45f);
  padding: 12px 18px;
  margin-left: -18px;
  color: #14243c;
}

.market-links a,
.market-note {
  color: rgba(255, 255, 255, .7);
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.market-links a:hover,
.market-browse:hover {
  color: #fff;
}

@media (max-width: 1199.98px) {
  .main-navbar .container {
    min-height: 72px
  }

  .main-navbar .navbar-collapse {
    padding-bottom: 14px
  }

  .main-navbar .navbar-nav {
    align-items: stretch !important
  }

  .main-navbar .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    min-height: 42px
  }

  .market-nav-strip .container {
    gap: 14px;
    min-height: 44px;
    overflow-x: auto;
    scrollbar-width: none
  }

  .market-nav-strip .container::-webkit-scrollbar {
    display: none
  }

  .market-links {
    gap: 14px;
    min-width: max-content
  }

  .market-note {
    display: none
  }
}

.category-icon,
.visual-icon,
.empty-cart-icon,
.access-icon {
  display: grid;
  place-items: center;
}

.category-icon i,
.visual-icon i,
.empty-cart-icon i,
.access-icon i {
  line-height: 1;
}

.visual-icon {
  font-size: 2.7rem;
  color: #fff;
}

.empty-cart-icon {
  font-size: 3.2rem;
  color: var(--navy);
}

.access-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, #eaf5ff, #dcecff);
  color: var(--navy);
  font-size: 2rem;
}

.location-pin {
  font-size: .88rem;
}

.sort-form {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap
}

.sort-form label {
  font-size: .75rem;
  font-weight: 800;
  color: #718095
}

.sort-form select {
  min-width: 158px;
  padding: 9px 30px 9px 11px;
  border: 1px solid #ccd9e3;
  border-radius: 7px;
  background: #fff;
  color: var(--navy);
  font-size: .8rem;
  font-weight: 700;
  outline: 0
}

.sort-form select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(43, 120, 184, .12)
}

@media(max-width:575px) {
  .results-toolbar {
    align-items: flex-start !important;
    flex-direction: column
  }

  .sort-form {
    width: 100%
  }

  .sort-form select {
    flex: 1
  }
}/* Password visibility toggle + strength guide (auth forms and account pages). */
.pw-wrap {
  position: relative;
  display: block;
}

.pw-wrap > input {
  padding-right: 46px;
}

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}

.pw-toggle:hover,
.pw-toggle:focus-visible {
  color: var(--blue);
  background: rgba(8, 125, 232, .1);
}

.pw-toggle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

/* Auth pages place the input inside a decorated wrapper, so anchor there. */
.auth-input .pw-wrap {
  flex: 1;
}

.auth-input .pw-wrap > input {
  border: 0;
  padding-left: 0;
}

.pw-meter {
  margin-top: 8px;
}

.pw-meter-track {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.pw-meter-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--line);
  transition: width .25s ease, background-color .25s ease;
}

.pw-meter-fill[data-score="1"] { width: 25%; background: #d92d20; }
.pw-meter-fill[data-score="2"] { width: 50%; background: #f79009; }
.pw-meter-fill[data-score="3"] { width: 75%; background: #eaaa08; }
.pw-meter-fill[data-score="4"] { width: 100%; background: #12805c; }

.pw-meter-label {
  display: block;
  margin-top: 5px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}

.pw-guide {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--light);
}

.pw-guide-title {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 7px;
}

.pw-guide-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.pw-guide-list li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  color: var(--muted);
}

.pw-guide-list li i {
  font-size: .9rem;
  flex: 0 0 auto;
}

.pw-guide-list li.is-met {
  color: #12805c;
}

.pw-guide-list li.is-met i::before {
  content: "\F26B";
}

.dark-mode .pw-toggle:hover,
.dark-mode .pw-toggle:focus-visible {
  background: rgba(43, 120, 184, .2);
}

.dark-mode .pw-guide {
  background: rgba(255, 255, 255, .03);
}

.dark-mode .pw-guide-title {
  color: #e7edf7;
}

/* Final UI polish and accessible theme tokens. */
:root {
  --surface: #fff;
  --surface-soft: #f7faff;
  --text-strong: #10213d;
  --text-muted: #66788c;
  --border-soft: #dce7f1;
  --shadow-soft: 0 12px 30px rgba(18, 52, 91, .08);
  --shadow-hover: 0 20px 42px rgba(18, 52, 91, .14);
}

html.dark-mode,
body.dark-mode {
  --surface: #172235;
  --surface-soft: #1d2b40;
  --text-strong: #f4f7fb;
  --text-muted: #b8c5d6;
  --border-soft: #344963;
  --shadow-soft: 0 14px 34px rgba(0, 0, 0, .22);
  --shadow-hover: 0 22px 48px rgba(0, 0, 0, .34);
}

body {
  color: var(--text-strong);
  transition: background-color .3s ease, color .3s ease;
}

.main-navbar,
.searchbar,
.product-card,
.category-card,
.stat-box,
.feature-card,
.about-founder-card,
.about-pillar-card,
.about-team-card,
.review-form-card,
.review-list,
.contact-form-card,
.contact-info-card,
.dashboard-card,
.empty-cart-card,
.plan-card {
  box-shadow: var(--shadow-soft);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
}

.product-card:hover,
.category-card:hover,
.feature-card:hover,
.about-founder-card:hover,
.about-pillar-card:hover,
.about-team-card:hover,
.review-form-card:hover,
.contact-info-card:hover,
.plan-card:hover {
  box-shadow: var(--shadow-hover);
}

.reveal-up {
  animation: ui-reveal-up .65s cubic-bezier(.2,.7,.2,1) both;
}

.reveal-up:nth-child(2) { animation-delay: .08s; }
.reveal-up:nth-child(3) { animation-delay: .16s; }
.reveal-up:nth-child(4) { animation-delay: .24s; }

@keyframes ui-reveal-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

html.dark-mode body,
body.dark-mode {
  background: #101827 !important;
  color: var(--text-strong) !important;
}

html.dark-mode p,
html.dark-mode .small,
html.dark-mode small,
html.dark-mode label,
html.dark-mode .form-text,
html.dark-mode .text-muted,
html.dark-mode .lead,
body.dark-mode p,
body.dark-mode .small,
body.dark-mode small,
body.dark-mode label,
body.dark-mode .form-text,
body.dark-mode .text-muted,
body.dark-mode .lead {
  color: var(--text-muted) !important;
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode .section-title,
html.dark-mode .about-section-title,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .section-title,
body.dark-mode .about-section-title {
  color: var(--text-strong) !important;
}

html.dark-mode .product-card,
html.dark-mode .category-card,
html.dark-mode .stat-box,
html.dark-mode .feature-card,
html.dark-mode .about-founder-card,
html.dark-mode .about-pillar-card,
html.dark-mode .about-team-card,
html.dark-mode .review-form-card,
html.dark-mode .review-list,
html.dark-mode .contact-form-card,
html.dark-mode .contact-info-card,
html.dark-mode .dashboard-card,
html.dark-mode .empty-cart-card,
html.dark-mode .plan-card,
body.dark-mode .product-card,
body.dark-mode .category-card,
body.dark-mode .stat-box,
body.dark-mode .feature-card,
body.dark-mode .about-founder-card,
body.dark-mode .about-pillar-card,
body.dark-mode .about-team-card,
body.dark-mode .review-form-card,
body.dark-mode .review-list,
body.dark-mode .contact-form-card,
body.dark-mode .contact-info-card,
body.dark-mode .dashboard-card,
body.dark-mode .empty-cart-card,
body.dark-mode .plan-card {
  background: var(--surface) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-strong) !important;
}

html.dark-mode .product-body .small,
html.dark-mode .product-body > small,
html.dark-mode .product-location,
html.dark-mode .product-views,
html.dark-mode .stat-label,
html.dark-mode .about-card-label,
body.dark-mode .product-body .small,
body.dark-mode .product-body > small,
body.dark-mode .product-location,
body.dark-mode .product-views,
body.dark-mode .stat-label,
body.dark-mode .about-card-label {
  color: var(--text-muted) !important;
}

html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode textarea,
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode textarea {
  background: var(--surface) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-strong) !important;
}

html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus,
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 4px rgba(19,168,255,.18) !important;
}

html.dark-mode .about-team,
html.dark-mode .about-pillars,
html.dark-mode .about-intro,
html.dark-mode .about-roadmap,
body.dark-mode .about-team,
body.dark-mode .about-pillars,
body.dark-mode .about-intro,
body.dark-mode .about-roadmap {
  background: #101827 !important;
}

html.dark-mode .about-value-grid > div,
body.dark-mode .about-value-grid > div {
  background: var(--surface) !important;
  border-color: var(--border-soft) !important;
}

html.dark-mode .homepage-products-heading,
body.dark-mode .homepage-products-heading {
  border-color: var(--border-soft);
}

/* ============================================================
   ABOUT PAGE — PROFESSIONAL VISUAL UPGRADE
   Scoped to .about-page so nothing else on the site is touched.
   ============================================================ */

/* --- Section rhythm: alternating tinted bands so sections separate --- */
.about-page .about-intro { background: linear-gradient(180deg, #ffffff, #f4f8ff) }
.about-page .about-team { background: #ffffff }
.about-page .about-pillars { background: linear-gradient(180deg, #f4f8ff, #ffffff) }
.about-page .about-values { background: linear-gradient(135deg, #eef5ff, #f9fcff) }
.about-page .about-roadmap { background: #ffffff }

.about-page .section-space { padding: 78px 0 }

/* --- Hero: deeper, more cinematic --- */
.about-page .about-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(19, 168, 255, .32), transparent 46%),
    radial-gradient(circle at 12% 88%, rgba(255, 106, 0, .18), transparent 40%),
    linear-gradient(125deg, #05173d 0%, #0a3c86 62%, #0873d6 100%);
  box-shadow: 0 30px 70px rgba(4, 22, 60, .3), inset 0 -1px 0 rgba(255, 255, 255, .08);
  isolation: isolate;
}

.about-page .about-hero::before {
  background: radial-gradient(circle, rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 26px 26px;
  content: "";
  inset: 0;
  opacity: .4;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.about-page .about-hero h1 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  text-shadow: 0 2px 24px rgba(2, 14, 40, .35)
}

.about-page .about-hero p { text-shadow: 0 1px 14px rgba(2, 14, 40, .3) }

/* Hero eyebrow as a glass pill */
.about-page .about-eyebrow {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  color: #cbeaff;
  padding: 7px 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px)
}

/* Hero buttons: real depth + sheen */
.about-page .about-hero-actions .btn {
  border-radius: 12px;
  font-weight: 800;
  padding: .78rem 1.3rem;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease
}

.about-page .about-hero-actions .btn-orange {
  background: #d9560f;
  box-shadow: 0 14px 30px rgba(217, 86, 15, .42)
}

.about-page .about-hero-actions .btn-orange:hover { background: #c24c0c }

.about-page .about-hero-actions .btn-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(255, 106, 0, .46)
}

.about-page .about-hero-actions .btn-outline-light {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px)
}

.about-page .about-hero-actions .btn-outline-light:hover {
  background: rgba(255, 255, 255, .16);
  border-color: #fff;
  transform: translateY(-2px)
}

/* Hero visual: bigger, brighter, glowing */
.about-page .about-hero-visual { min-height: 340px }

.about-page .about-hero-icon {
  background: linear-gradient(150deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 40px;
  box-shadow: 0 30px 65px rgba(2, 14, 40, .45), 0 0 90px rgba(19, 168, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .28);
  color: #ffd27a;
  font-size: 6.8rem;
  height: 200px;
  width: 200px
}

.about-page .about-orbit { border-color: rgba(180, 226, 255, .32) }

.about-page .about-float-card {
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 18px 38px rgba(2, 14, 40, .28);
  font-size: .8rem;
  padding: 12px 15px
}

/* --- Headings: tighter, more editorial --- */
.about-page .about-section-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -.035em
}

.about-page .eyebrow.eyebrow-alt {
  background: rgba(8, 125, 232, .1);
  border: 1px solid rgba(8, 125, 232, .16);
  border-radius: 999px;
  color: #0a62b5;
  padding: 7px 14px
}

/* --- Founder card: restructured, richer --- */
.about-page .about-founder-card {
  background: linear-gradient(165deg, #ffffff, #f5faff);
  border: 1px solid #dbe7f6;
  box-shadow: 0 22px 48px rgba(8, 41, 96, .12), inset 0 1px 0 #fff
}

.about-page .about-founder-card:before {
  background: linear-gradient(90deg, var(--blue), var(--blue-2), var(--orange));
  height: 5px
}

.about-page .about-founder-avatar {
  background: linear-gradient(145deg, var(--blue), var(--navy));
  border: 0;
  box-shadow: 0 12px 26px rgba(8, 125, 232, .3);
  color: #fff;
  height: 64px;
  width: 64px
}

.about-page .about-quote {
  color: #dbe9ff;
  font-size: 2.2rem;
  right: 24px;
  top: 34px
}

.about-page .about-founder-card blockquote {
  border-left: 3px solid var(--orange);
  color: #4a5f7d;
  font-style: italic
}

/* --- Team cards: stronger, taller, more presence --- */
.about-page .about-team-card {
  background: linear-gradient(165deg, #ffffff, #f1f8ff);
  border: 1px solid #d8e5f5;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(8, 41, 96, .07), inset 0 1px 0 #fff;
  padding: 30px
}

.about-page .about-team-card::before {
  background: linear-gradient(180deg, var(--blue), var(--blue-2));
  border-radius: 4px;
  content: "";
  height: 46px;
  left: 0;
  position: absolute;
  top: 30px;
  width: 4px
}

.about-page .about-team-card:last-child::before,
.about-page .about-team-icon-orange ~ .about-team-copy ~ * { background: none }

.about-page .about-team-icon {
  background: linear-gradient(145deg, var(--blue), #0a5fb5);
  border: 0;
  box-shadow: 0 12px 26px rgba(8, 125, 232, .32);
  color: #fff;
  flex: 0 0 64px;
  font-size: 1.6rem;
  height: 64px;
  width: 64px
}

.about-page .about-team-icon-orange {
  background: linear-gradient(145deg, var(--orange), #d9560f);
  box-shadow: 0 12px 26px rgba(255, 106, 0, .34)
}

.about-page .about-team-card:hover {
  border-color: #a9cdf0;
  box-shadow: 0 24px 48px rgba(8, 41, 96, .16);
  transform: translateY(-6px)
}

.about-page .about-team-copy h3 { font-size: 1.28rem }

/* --- Pillar cards: gradient icon chips, bold accents --- */
.about-page .about-pillar-card {
  background: #ffffff;
  border: 1px solid #d8e5f5;
  border-radius: 22px;
  box-shadow: 0 16px 38px rgba(8, 41, 96, .08), inset 0 1px 0 #fff;
  padding: 32px 28px
}

.about-page .about-pillar-card:before {
  height: 5px
}

.about-page .about-card-icon {
  border: 0;
  border-radius: 17px;
  box-shadow: 0 12px 26px rgba(8, 125, 232, .28);
  color: #fff;
  font-size: 1.5rem;
  height: 62px;
  width: 62px;
  background: linear-gradient(145deg, var(--blue), #0a5fb5)
}

.about-page .about-card-icon-orange {
  background: linear-gradient(145deg, var(--orange), #d9560f);
  box-shadow: 0 12px 26px rgba(255, 106, 0, .3)
}

.about-page .about-card-icon-green {
  background: linear-gradient(145deg, #16a34a, #0f7a37);
  box-shadow: 0 12px 26px rgba(22, 163, 74, .3)
}

.about-page .about-pillar-card h3 {
  font-size: 1.28rem;
  font-weight: 800
}

.about-page .about-pillar-card:hover {
  border-color: #a9cdf0;
  box-shadow: 0 26px 52px rgba(8, 41, 96, .16);
  transform: translateY(-7px)
}

/* --- Value grid: crisp cards --- */
.about-page .about-value-grid { gap: 18px; height: 100% }

.about-page .about-values .row { align-items: stretch }

.about-page .about-values .about-value-grid > div {
  background: #ffffff;
  border: 1px solid #d9e6f5;
  border-radius: 20px;
  box-shadow: 0 14px 32px rgba(8, 41, 96, .08), inset 0 1px 0 #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  padding: 26px
}

.about-page .about-value-grid > div > i {
  align-items: center;
  background: linear-gradient(145deg, #fff2e7, #ffe0c8);
  border-radius: 14px;
  color: var(--orange);
  display: inline-flex;
  font-size: 1.5rem;
  height: 52px;
  justify-content: center;
  width: 52px
}

.about-page .about-value-grid h3 {
  font-size: 1.06rem;
  font-weight: 800;
  margin-top: 17px
}

.about-page .about-value-grid > div:hover {
  border-color: #f0b489;
  box-shadow: 0 24px 46px rgba(8, 41, 96, .15);
  transform: translateY(-6px)
}

/* --- Roadmap timeline: confident connector + numbered nodes --- */
.about-page .about-timeline { margin-top: 52px; gap: 24px }

.about-page .about-timeline > div {
  border-top: 2px solid #dbe8f6;
  padding-top: 26px
}

.about-page .about-timeline > div:before {
  background: linear-gradient(145deg, var(--blue), var(--navy));
  border: 5px solid #fff;
  box-shadow: 0 0 0 2px #bcd8f2, 0 8px 18px rgba(8, 125, 232, .35);
  height: 20px;
  top: -12px;
  width: 20px
}

.about-page .about-timeline span {
  background: linear-gradient(145deg, var(--orange), var(--orange-2));
  border-radius: 9px;
  box-shadow: 0 8px 18px rgba(255, 106, 0, .28);
  color: #fff;
  font-size: .74rem;
  padding: 5px 12px
}

.about-page .about-timeline h3 {
  font-size: 1.22rem;
  font-weight: 800;
  margin-top: 14px
}

/* --- CTA band: gradient + glow --- */
.about-page .about-cta {
  background:
    radial-gradient(circle at 88% 20%, rgba(255, 106, 0, .22), transparent 42%),
    linear-gradient(125deg, #05173d, #0a3c86 70%, #0a5fb5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1)
}

.about-page .about-cta h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  text-shadow: 0 2px 20px rgba(2, 14, 40, .3)
}

.about-page .about-cta .btn { border-radius: 12px; font-weight: 800; padding: .82rem 1.4rem }

.about-page .about-cta .btn-orange { background: #d9560f; box-shadow: 0 14px 30px rgba(217, 86, 15, .42) }
.about-page .about-cta .btn-orange:hover { background: #c24c0c }

.about-page .about-cta .btn-outline-light { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .55) }

/* --- Icon spring on hover --- */
.about-page .about-card-icon,
.about-page .about-team-icon {
  transition: transform .3s cubic-bezier(.2, .8, .3, 1.4), box-shadow .3s ease
}

.about-page .about-pillar-card:hover .about-card-icon {
  transform: rotate(-7deg) scale(1.1)
}

.about-page .about-team-card:hover .about-team-icon {
  transform: rotate(-6deg) scale(1.08)
}

/* --- Reveal: slightly longer, springier --- */
.js .about-page .about-scroll-item {
  transform: translateY(26px) scale(.985);
  transition: opacity .7s ease var(--about-reveal-delay, 0ms),
    transform .7s cubic-bezier(.2, .8, .25, 1) var(--about-reveal-delay, 0ms)
}

.about-page .about-scroll-item.is-visible {
  transform: translateY(0) scale(1)
}

/* ============================================================
   ABOUT PAGE — DARK MODE CONTRAST (text always legible)
   ============================================================ */
html.dark-mode .about-page,
body.dark-mode .about-page { background: #0c1524 }

html.dark-mode .about-page .about-intro,
body.dark-mode .about-page .about-intro { background: linear-gradient(180deg, #0e1829, #0c1524) }

html.dark-mode .about-page .about-team,
body.dark-mode .about-page .about-team { background: #0e1829 }

html.dark-mode .about-page .about-pillars,
body.dark-mode .about-page .about-pillars { background: linear-gradient(180deg, #0c1524, #0e1829) }

html.dark-mode .about-page .about-values,
body.dark-mode .about-page .about-values { background: linear-gradient(135deg, #0d1b2f, #101d33) }

html.dark-mode .about-page .about-roadmap,
body.dark-mode .about-page .about-roadmap { background: #0e1829 }

/* Card surfaces */
html.dark-mode .about-page .about-founder-card,
html.dark-mode .about-page .about-team-card,
html.dark-mode .about-page .about-pillar-card,
html.dark-mode .about-page .about-value-grid > div,
body.dark-mode .about-page .about-founder-card,
body.dark-mode .about-page .about-team-card,
body.dark-mode .about-page .about-pillar-card,
body.dark-mode .about-page .about-value-grid > div {
  background: #172235 !important;
  border-color: #2c3e59 !important;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .04)
}

/* Headings — bright, never lost */
html.dark-mode .about-page .about-section-title,
html.dark-mode .about-page .about-founder-card h3,
html.dark-mode .about-page .about-team-copy h3,
html.dark-mode .about-page .about-pillar-card h3,
html.dark-mode .about-page .about-value-grid h3,
html.dark-mode .about-page .about-timeline h3,
html.dark-mode .about-page .about-cta h2,
body.dark-mode .about-page .about-section-title,
body.dark-mode .about-page .about-founder-card h3,
body.dark-mode .about-page .about-team-copy h3,
body.dark-mode .about-page .about-pillar-card h3,
body.dark-mode .about-page .about-value-grid h3,
body.dark-mode .about-page .about-timeline h3,
body.dark-mode .about-page .about-cta h2 {
  color: #f6f9ff !important
}

/* Body copy — high-contrast muted (WCAG-friendly on #172235) */
html.dark-mode .about-page .about-lead,
html.dark-mode .about-page .about-intro p:not(.about-lead),
html.dark-mode .about-page .about-team-intro,
html.dark-mode .about-page .about-founder-card p,
html.dark-mode .about-page .about-team-copy p,
html.dark-mode .about-page .about-pillar-card p,
html.dark-mode .about-page .about-value-grid p,
html.dark-mode .about-page .about-timeline p,
html.dark-mode .about-page .about-founder-card blockquote,
html.dark-mode .about-page .about-section-heading > p,
body.dark-mode .about-page .about-lead,
body.dark-mode .about-page .about-intro p:not(.about-lead),
body.dark-mode .about-page .about-team-intro,
body.dark-mode .about-page .about-founder-card p,
body.dark-mode .about-page .about-team-copy p,
body.dark-mode .about-page .about-pillar-card p,
body.dark-mode .about-page .about-value-grid p,
body.dark-mode .about-page .about-timeline p,
body.dark-mode .about-page .about-founder-card blockquote,
body.dark-mode .about-page .about-section-heading > p {
  color: #c3d0e2 !important
}

/* Small labels + eyebrow */
html.dark-mode .about-page .about-card-label,
body.dark-mode .about-page .about-card-label { color: #93a6bf !important }

html.dark-mode .about-page .eyebrow.eyebrow-alt,
body.dark-mode .about-page .eyebrow.eyebrow-alt {
  background: rgba(19, 168, 255, .14);
  border-color: rgba(19, 168, 255, .28);
  color: #8fd0ff !important
}

html.dark-mode .about-page .about-eyebrow-dark,
body.dark-mode .about-page .about-eyebrow-dark {
  background: rgba(19, 168, 255, .14) !important;
  border: 1px solid rgba(19, 168, 255, .28);
  border-radius: 999px;
  color: #8fd0ff !important;
  padding: 7px 14px
}

/* Links */
html.dark-mode .about-page .about-profile-link,
html.dark-mode .about-page .about-text-link,
body.dark-mode .about-page .about-profile-link,
body.dark-mode .about-page .about-text-link { color: #8fd0ff !important }

html.dark-mode .about-page .about-profile-link:hover,
html.dark-mode .about-page .about-text-link:hover,
body.dark-mode .about-page .about-profile-link:hover,
body.dark-mode .about-page .about-text-link:hover { color: #ffb77c !important }

/* Quote mark */
html.dark-mode .about-page .about-quote,
body.dark-mode .about-page .about-quote { color: #35507a !important }

/* Timeline */
html.dark-mode .about-page .about-timeline > div,
body.dark-mode .about-page .about-timeline > div { border-color: #33486a }

html.dark-mode .about-page .about-timeline > div:before,
body.dark-mode .about-page .about-timeline > div:before {
  border-color: #172235;
  box-shadow: 0 0 0 2px #4a7ab0, 0 8px 18px rgba(8, 125, 232, .4)
}

/* Hero + CTA already dark-on-dark; lock text to bright */
html.dark-mode .about-page .about-hero h1,
html.dark-mode .about-page .about-cta h2,
body.dark-mode .about-page .about-hero h1,
body.dark-mode .about-page .about-cta h2 { color: #ffffff !important }

html.dark-mode .about-page .about-hero p,
html.dark-mode .about-page .about-cta p,
body.dark-mode .about-page .about-hero p,
body.dark-mode .about-page .about-cta p { color: #d3e2f7 !important }

/* ============================================================
   MOBILE NAV — SLIDE-IN-FROM-LEFT DRAWER (phones only)
   Overrides Bootstrap's top-down collapse on small screens.
   ============================================================ */
@media (max-width: 767.98px) {

  /* The collapse panel becomes a fixed off-canvas drawer */
  .main-navbar .navbar-collapse,
  .main-navbar .navbar-collapse.collapsing,
  .main-navbar .navbar-collapse.show {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1050;
    width: min(82vw, 330px);
    max-width: 330px;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0;
    padding: 18px 16px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    background: linear-gradient(160deg, #071a38 0%, #102d55 62%, #193b63 100%);
    border-right: 1px solid rgba(226, 185, 99, .4);
    box-shadow: 22px 0 55px rgba(3, 12, 30, .5);
    display: block;
    transition: transform .32s cubic-bezier(.22, .8, .28, 1), visibility .32s;
    will-change: transform;
  }

  /* Collapsed (default on phones when js collapses it) — off-screen left */
  .main-navbar .navbar-collapse.collapse:not(.show) {
    display: block;
    visibility: hidden;
    transform: translateX(-100%);
  }

  /* Avoid Bootstrap's height animation fighting the slide */
  .main-navbar .navbar-collapse.collapsing {
    height: 100dvh !important;
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.22, .8, .28, 1), visibility .s;
  }

  .main-navbar .navbar-collapse.show,
  .main-navbar .navbar-collapse.collapsing.show {
    visibility: visible;
    transform: translateX(0);
  }

  /* Search + links stack vertically inside the drawer */
  .main-navbar .navbar-collapse .searchbar {
    margin: 4px 0 18px !important;
    width: 100%;
  }

  .main-navbar .navbar-collapse .navbar-nav {
    align-items: stretch !important;
    gap: 2px;
    flex-direction: column;
  }

  .main-navbar .navbar-collapse .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 11px 12px !important;
    color: #e7edf7 !important;
    border-radius: 10px;
    font-size: .95rem;
  }

  .main-navbar .navbar-collapse .nav-link:hover,
  .main-navbar .navbar-collapse .nav-link:focus-visible {
    background: rgba(255, 255, 255, .08);
    color: #f2c879 !important;
  }

  .main-navbar .navbar-collapse .nav-link .profile-label {
    display: inline !important;
  }

  .main-navbar .navbar-collapse .language-nav-item {
    width: 100%;
  }

  .main-navbar .navbar-collapse .language-menu {
    position: static;
    width: 100%;
    margin-top: 6px;
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
  }

  .main-navbar .navbar-collapse .language-menu button {
    color: #e7edf7;
  }

  .main-navbar .navbar-collapse .language-menu button:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
  }

  /* Dimmed backdrop behind the open drawer */
  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(4, 12, 26, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: navBackdropIn .25s ease both;
  }

  body.nav-open {
    overflow: hidden;
  }
}

@keyframes navBackdropIn {
  from { opacity: 0 }
  to { opacity: 1 }
}

/* ============================================================
   HOMEPAGE MOBILE POLISH  (phones + small tablets)
   Tightens the hero, banners, stats, categories, trust strip
   and footer so the home page reads well on small screens.
   ============================================================ */
@media (max-width: 767.98px) {

  /* --- Navbar: stop the logo/strip overlapping page content --- */
  .main-navbar .container {
    min-height: 64px;
    align-items: center;
    gap: 10px;
  }

  .main-navbar .brand-image {
    width: 150px;
    height: 50px;
  }

  .main-navbar .navbar-toggler {
    margin-left: auto;
  }

  .market-nav-strip .container {
    min-height: 40px;
    gap: 12px;
  }

  .market-browse {
    padding: 9px 13px;
    font-size: .74rem;
  }

  .market-links a {
    font-size: .72rem;
  }

  /* --- Hero carousel: comfortable, framed, readable --- */
  .homepage-hero {
    padding: 14px 0 26px;
  }

  .homepage-campaign {
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(7, 32, 84, .14);
  }

  .homepage-campaign img {
    width: 100%;
    height: auto;
  }

  .homepage-campaign .carousel-indicators {
    margin-bottom: 8px;
  }

  .homepage-campaign .carousel-indicators button {
    width: 22px;
    height: 3px;
  }

  .homepage-campaign .carousel-control-prev-icon,
  .homepage-campaign .carousel-control-next-icon {
    width: 1.7rem;
    height: 1.7rem;
    padding: 6px;
  }

  /* --- Community banner: clean vertical stack --- */
  .community-banner {
    padding: 16px 0 20px;
  }

  .community-banner-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding: 20px 18px;
    border-radius: 18px;
  }

  .community-banner-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    align-self: flex-start;
  }

  .community-banner-copy {
    min-width: 0;
    width: 100%;
  }

  .community-banner-button {
    width: 100%;
    justify-content: center;
    padding: 12px 18px;
  }

  /* --- Referral banner: readable stack, room for actions --- */
  .referral-earn-banner {
    padding: 8px 0 22px;
  }

  .referral-earn-inner {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 18px;
    border-radius: 18px;
  }

  .referral-earn-inner h2 {
    font-size: 1.35rem;
    line-height: 1.22;
  }

  .referral-earn-actions {
    justify-content: stretch;
    margin-top: 4px;
  }

  .referral-earn-actions .btn {
    width: 100%;
  }

  /* --- Stats: 2x2 instead of four cramped columns --- */
  .stats-band {
    margin-bottom: 8px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .stat-box {
    border-radius: 16px;
    padding: 16px 12px;
  }

  .stat-number {
    font-size: 1.7rem;
  }

  .stat-label {
    font-size: .74rem;
    text-align: center;
  }

  /* --- Feature panel --- */
  .market-features-wrap {
    padding: 20px 16px;
    border-radius: 20px;
  }

  /* --- Category cards: compact, no dead space --- */
  .homepage-categories {
    --bs-gutter-x: .7rem;
  }

  .category-card {
    min-height: 0;
    padding: 14px 8px;
    border-radius: 14px;
    gap: 8px;
    justify-content: center;
  }

  .homepage-categories .category-icon {
    margin: 0;
  }

  .category-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .homepage-categories .category-card .fw-bold {
    font-size: .78rem;
    line-height: 1.2;
  }

  /* --- Products heading row --- */
  .homepage-products-heading {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 12px;
    padding: 14px 0 12px;
  }

  .homepage-products-heading .btn {
    width: 100%;
  }

  /* --- Product cards: kill the dead space, pin actions to the bottom --- */
  .homepage-catalog .catalog-card {
    display: flex;
    flex-direction: column;
  }

  .homepage-catalog .catalog-card .product-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 13px 13px 15px;
  }

  .homepage-catalog .catalog-card h5 {
    font-size: .92rem;
    line-height: 1.3;
    min-height: 0;
  }

  .homepage-catalog .catalog-card .product-body > .d-flex.gap-2 {
    margin-top: auto;
  }

  .homepage-catalog .catalog-card .price {
    font-size: 1rem;
  }

  /* --- Trust strip: 2x2 grid on mobile --- */
  .trust-strip.row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-item {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    padding: 18px 12px;
  }

  .trust-item:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, .14) !important;
  }

  .trust-item:nth-child(n + 3) {
    border-bottom: 0;
  }

  /* --- Keep the floating WhatsApp button out of the content --- */
  .floating-whatsapp {
    width: 50px;
    height: 50px;
    left: 14px;
    bottom: 14px;
  }
}

/* ============================================================
   FOOTER — MOBILE LAYOUT
   Compact, well-spaced columns; smaller logo; tidy bottom bar.
   ============================================================ */
@media (max-width: 767.98px) {
  .footer {
    margin-top: 26px !important;
  }

  .footer-back-top {
    min-height: 42px;
    font-size: .72rem;
  }

  .footer > .container {
    padding-top: 30px !important;
    padding-bottom: 24px !important;
  }

  /* Service strip: compact rows inside a card-like band */
  .footer-service-strip {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 22px;
  }

  .footer-service-strip > div {
    gap: 11px;
    padding: 0;
  }

  .footer-service-strip > div > i {
    flex: 0 0 38px;
    height: 38px;
    font-size: 1rem;
  }

  .footer-service-strip strong {
    font-size: .84rem;
  }

  .footer-service-strip small {
    font-size: .74rem;
  }

  /* Brand block */
  .footer .brand-logo {
    margin-bottom: 14px;
  }

  .footer .brand-image {
    width: 168px;
    height: 56px;
  }

  .footer-description {
    font-size: .86rem;
    line-height: 1.6;
    max-width: 100%;
  }

  .footer-contact {
    margin-top: 16px;
  }

  .footer-email {
    width: 100%;
    justify-content: center;
    word-break: break-word;
  }

  .footer .social-icons {
    gap: 10px !important;
    margin-top: 16px !important;
  }

  .community-whatsapp-link {
    width: 100%;
    justify-content: center;
    margin-top: 14px;
  }

  /* Link columns: two per row (grid) so the footer stays short */
  .footer-main-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 20px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }

  /* The brand block spans the full width; the three link columns pair up */
  .footer-main-grid > .footer-brand-column {
    grid-column: 1 / -1;
  }

  .footer-main-grid > .footer-column {
    width: auto;
    max-width: none;
    flex: none;
    padding-left: 0;
    padding-right: 0;
  }

  .footer h6 {
    margin-bottom: 12px;
    font-size: .76rem;
  }

  .footer-links {
    gap: 8px;
  }

  .footer .footer-links a {
    font-size: .85rem;
  }

  .footer-divider {
    margin: 24px 0 16px;
  }

  /* Bottom bar: stacked, centered, easy to tap */
  .footer-bottom {
    align-items: center !important;
    text-align: center;
    gap: 14px !important;
    font-size: .78rem;
  }

  .footer-bottom-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
  }

  .footer-bottom > span {
    width: 100%;
  }

  .footer-bottom > span:last-child {
    order: 3;
  }
}

/* --- Small phones: tighten further --- */
@media (max-width: 400px) {
  .main-navbar .brand-image {
    width: 132px;
    height: 46px;
  }

  .community-banner h2 {
    font-size: 1.15rem;
  }

  .referral-earn-inner h2 {
    font-size: 1.22rem;
  }

  .stat-number {
    font-size: 1.5rem;
  }

  .footer .brand-image {
    width: 150px;
    height: 50px;
  }
}

/* ============================================================
   HOMEPAGE + FOOTER — DARK MODE
   ============================================================ */
html.dark-mode .homepage-campaign,
body.dark-mode .homepage-campaign {
  box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
}

html.dark-mode .category-card,
body.dark-mode .category-card {
  background: #172235;
  border-color: #2b3b54;
}

html.dark-mode .homepage-categories .category-card .fw-bold,
body.dark-mode .homepage-categories .category-card .fw-bold {
  color: #e7edf7 !important;
}

html.dark-mode .category-icon,
body.dark-mode .category-icon {
  background: #20334e;
  border-color: #33486a;
  color: #cfe4ff;
}

html.dark-mode .stat-box,
body.dark-mode .stat-box {
  background: linear-gradient(180deg, #172235, #1b2a41);
  border-color: #2b3b54;
}

html.dark-mode .stat-number,
body.dark-mode .stat-number {
  color: #f4f7fb;
}

html.dark-mode .stat-label,
body.dark-mode .stat-label {
  color: #b6c2d3;
}

/* "Why shop here" feature panel: dark surfaces so the light text is readable */
html.dark-mode .market-features-wrap,
body.dark-mode .market-features-wrap {
  background: linear-gradient(135deg, #111c2d, #16233a);
  border-color: #2b3b54;
}

html.dark-mode .mini-feature,
body.dark-mode .mini-feature {
  background: #172235;
  border-color: #2b3b54;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .28);
}

html.dark-mode .mini-feature:hover,
body.dark-mode .mini-feature:hover {
  box-shadow: 0 18px 32px rgba(0, 0, 0, .4);
}

html.dark-mode .mini-feature h3,
html.dark-mode .feature-intro h2,
body.dark-mode .mini-feature h3,
body.dark-mode .feature-intro h2 {
  color: #f4f7fb !important;
}

html.dark-mode .mini-feature p,
body.dark-mode .mini-feature p {
  color: #b6c2d3 !important;
}

html.dark-mode .mini-feature-icon,
body.dark-mode .mini-feature-icon {
  background: linear-gradient(135deg, #2a2113, #3a2c16);
}

/* Homepage body + product/category surfaces must go dark so the light
   dark-mode text is never painted on a light background. */
html.dark-mode,
html.dark-mode body,
html body.dark-mode {
  background: #0e1626 !important;
  color: #e7edf7 !important;
}

html.dark-mode .homepage-catalog,
html.dark-mode .homepage-hero,
body.dark-mode .homepage-catalog,
body.dark-mode .homepage-hero {
  background: #0e1626 !important;
}

html.dark-mode .homepage-catalog .catalog-card,
html.dark-mode .product-card,
body.dark-mode .homepage-catalog .catalog-card,
body.dark-mode .product-card {
  background: #172235 !important;
  border-color: #2b3b54 !important;
}

html.dark-mode .homepage-catalog .catalog-card .product-body h5,
html.dark-mode .homepage-catalog .catalog-card .price,
html.dark-mode .section-title,
body.dark-mode .homepage-catalog .catalog-card .product-body h5,
body.dark-mode .homepage-catalog .catalog-card .price,
body.dark-mode .section-title {
  color: #f4f7fb !important;
}

html.dark-mode .homepage-products-heading,
body.dark-mode .homepage-products-heading {
  border-color: #2b3b54 !important;
}

html.dark-mode .category-card,
body.dark-mode .category-card {
  background: #172235 !important;
  border-color: #2b3b54 !important;
}

html.dark-mode .category-card .fw-bold,
body.dark-mode .category-card .fw-bold {
  color: #e7edf7 !important;
}

html.dark-mode .stat-box,
body.dark-mode .stat-box {
  background: linear-gradient(180deg, #172235, #1b2a41) !important;
  border-color: #2b3b54 !important;
}

html.dark-mode .stat-number,
body.dark-mode .stat-number {
  color: #f4f7fb !important;
}

@keyframes navBackdropIn {
  from { opacity: 0 }
  to { opacity: 1 }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Preserve the original NelStore logo colors in the dark navigation bar. */
.main-navbar .brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.22), 0 0 0 3px rgba(255,255,255,.06);
}

.main-navbar .brand-image {
  width: 168px;
  height: 62px;
  padding: 0;
  border-radius: 8px;
  background: #fff;
  filter: none !important;
  object-fit: contain;
  object-position: center;
}

.main-navbar .brand-logo:hover,
.main-navbar .brand-logo:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.28), 0 0 0 3px rgba(242,200,121,.18);
}

@media (max-width: 575px) {
  .main-navbar .brand-logo { padding: 3px 6px; border-radius: 11px; }
  .main-navbar .brand-image { width: 136px; height: 50px; }
}


/* Keep the password icon clear of the text and restore the input outline after JS wraps it. */
.auth-input .pw-wrap { display: block; width: 100%; min-width: 0; }
.auth-input .pw-wrap > input { display: block; width: 100%; min-height: 52px; padding: 0 56px 0 52px; border: 1px solid #dce7f3; border-radius: 12px; background: #fbfdff; }

/* Keep the mobile drawer above its dimming backdrop so menu items stay clear and tappable. */
@media (max-width: 767.98px) {
  .main-navbar { z-index: 1041 !important; }
    .main-navbar .navbar-collapse { z-index: 1050; }
    }