/* -- DESIGN TOKENS (GNP-PREMIUM-PALETTE-V1) -- */
:root {
  /* Premium Forest & Gilt Palette */
  --primary:    #2F6E4C;   /* forest -- primary brand */
  --primary-lt: #7C9A78;   /* sage -- hover / highlights */
  --primary-xs: #DCE7D6;   /* sage-light tint -- backgrounds */
  --accent:     #B99A4B;   /* gilt gold -- CTAs */
  --accent-lt:  #E8D9AE;   /* gilt-light -- subtle accents */
  --white:      #FFFFFF;
  --off-white:  #EEF6EC;   /* ivory-2 tint */
  --border:     #DCE9D8;   /* line */
  --border-dk:  #C3D9BC;   /* darker line */
  --text:       #22261F;   /* ink */
  --text-md:    #5B6154;   /* ink-soft */
  --text-lt:    #8B9184;   /* muted ink */
  --red:        #E53E3E;
  --gold:       #B99A4B;   /* gilt */
  --gold-lt:    #E8D9AE;
  --forest:     #2F6E4C;   /* alias */
  --forest-deep:#1D3F2E;   /* deep forest -- dark sections */
  --green:      #2F6E4C;   /* alias for existing references */
  --green-lt:   #7C9A78;   /* alias */
  --ivory:      #EEF6EC;   /* alias */
  --ivory-dk:   #DCE9D8;   /* alias */
  --slate:      #1D3F2E;   /* alias -- now maps to forest-deep for dark sections */
  --slate-lt:   #5B6154;   /* alias */

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Manrope', system-ui, sans-serif;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 8px rgba(29,63,46,.08);
  --shadow-md: 0 8px 24px rgba(29,63,46,.14);
  --shadow-lg: 0 20px 60px rgba(29,63,46,.20);
  --transition: .25s cubic-bezier(.4,0,.2,1);
}

/* -- RESET -- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 17.5px; }
/* GNP-SITEWIDE-TEXT-SIZE-V1 — base font-size bumped from the 16px browser
   default so every rem-based size across the site (product names, nav,
   section text, etc.) scales up together instead of hand-tuning each
   class individually. */
@media (max-width: 768px){ html { font-size: 16px; } }
body { font-family: var(--font-body); background: var(--white); color: var(--text); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img  { display: block; max-width: 100%; }
a    { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* -- TOP BAR -- */
.topbar {
  background: linear-gradient(135deg, var(--forest-deep) 0%, #0f2e1f 100%);
  color: rgba(255,255,255,.88);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: .015em;
  padding: .55rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar a { color: rgba(255,255,255,.88); transition: color var(--transition); }
.topbar a:hover { color: var(--white); }
.topbar-contact { display: flex; align-items: center; gap: .9rem; }
.topbar-item { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.topbar-item svg { flex-shrink: 0; opacity: .8; }
.topbar-divider { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.45); flex-shrink: 0; }
.topbar-right { display: flex; gap: 1.75rem; align-items: center; }

/* Language switcher (EN / नेपाली) — Implementation Plan Phase 9 */
.lang-switch-form { display: flex; gap: .35rem; margin: 0; }
.lang-switch-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.35);
  color: rgba(255,255,255,.88);
  font-size: 0.82rem;
  font-weight: 600;
  padding: .15rem .55rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.lang-switch-btn:hover { border-color: rgba(255,255,255,.7); }
.lang-switch-btn.active { background: var(--white); color: var(--primary); border-color: var(--white); }
.lang-switch-form--mobile { padding: 0 1.5rem 1rem; }
.lang-switch-form--mobile .lang-switch-btn {
  border-color: var(--border);
  color: var(--text-md);
}
.lang-switch-form--mobile .lang-switch-btn.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

/* -- NAV -- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 16px rgba(26,107,60,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.75rem;
  gap: 1.4rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--primary);
  flex-shrink: 0;
}
.nav-logo-img { height: 50px; width: auto; display: block; flex-shrink: 0; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.nav-logo-main {
  font-family: 'Anton', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--primary);
}
.nav-logo-sub {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-lt);
  margin-top: 2px;
  white-space: nowrap;
}
.nav-links {
  display: flex;
  list-style: none;
  gap: .95rem;
  font-size: .85rem;
  font-weight: 500;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  color: var(--text-md);
  transition: color var(--transition);
  position: relative;
  padding-bottom: 2px;
  white-space: nowrap;
}
.nav-link-icon { opacity: .7; flex-shrink: 0; transition: opacity var(--transition); }
.nav-links a:hover .nav-link-icon, .nav-links .active .nav-link-icon { opacity: 1; }
.live-badge {
  background: var(--red);
  color: var(--white);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--primary);
  transition: width var(--transition);
}
.nav-links a:hover { color: var(--primary); }
.nav-links a:hover::after { width: 100%; }
.nav-links .active { color: var(--primary); font-weight: 700; }
.nav-links .active::after { width: 100%; }
.nav-actions {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.nav-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--off-white);
  border: 1.5px solid var(--border);
  border-radius: 99px;
  padding: .42rem .85rem;
  font-size: .85rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  flex-shrink: 1;
  min-width: 0;
  max-width: 160px;
  position: relative;
}
.nav-search form { display: flex; flex: 1 1 auto; min-width: 0; }
.nav-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,107,60,.1); }
.nav-search input { border: none; background: none; outline: none; font-family: inherit; font-size: .85rem; flex: 1 1 auto; width: auto; min-width: 40px; max-width: 90px; color: var(--text); }

.nav-search-dropdown {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  width: 320px;
  max-width: 80vw;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  z-index: 200;
}
.nav-search-result {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem .9rem;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.nav-search-result:last-of-type { border-bottom: none; }
.nav-search-result:hover { background: var(--off-white); }
.nav-search-result-thumb {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--off-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  overflow: hidden;
}
.nav-search-result-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nav-search-result-info { min-width: 0; flex: 1 1 auto; }
.nav-search-result-name { font-size: .85rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-search-result-meta { font-size: 0.83rem; color: var(--text-lt); }
.nav-search-result-price { font-size: 0.88rem; font-weight: 700; color: var(--primary); white-space: nowrap; }
.nav-search-seeall {
  display: block;
  text-align: center;
  padding: .7rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  background: var(--off-white);
}
.nav-search-seeall:hover { text-decoration: underline; }
.nav-search-empty { padding: .9rem; font-size: 0.88rem; color: var(--text-lt); text-align: center; }
.nav-icon-btn {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
  color: var(--text-md);
}
.nav-icon-btn:hover { background: var(--primary-xs); color: var(--primary); }
.nav-account-link {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  border-radius: 99px;
  border: 1.5px solid var(--border);
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-md);
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.nav-account-link:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-xs); }
.badge {
  position: absolute;
  top: 2px; right: 2px;
  width: 17px; height: 17px;
  background: var(--red);
  color: var(--white);
  border-radius: 50%;
  font-size: 0.73rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-dealer {
  background: linear-gradient(135deg, var(--primary), var(--primary-lt));
  color: var(--white);
  padding: .55rem 1.2rem;
  border-radius: 99px;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: .2rem;
  transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 12px rgba(26,107,60,.3);
}
.btn-dealer:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(26,107,60,.35); }
.nav-hamburger { display: none; }

/* Roomier spacing once there's plenty of width to spare */
@media (min-width: 1600px) {
  .nav { padding: .85rem 3rem; gap: 2rem; }
  .nav-logo { gap: .8rem; }
  .nav-links { gap: 1.5rem; font-size: .9rem; }
  .nav-actions { gap: 1.1rem; }
  .nav-search { padding: .45rem 1rem; max-width: 220px; }
  .nav-search input { max-width: 140px; }
  .btn-dealer { margin-left: .35rem; }
}

/* -- COMPANY BANNER -- */
.company-banner {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-lt) 50%, #42B874 100%);
  min-height: 420px;
  display: flex;
  align-items: center;
}
.company-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(255,255,255,.07) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(255,255,255,.05) 0%, transparent 40%);
}
.banner-bg-pattern {
  position: absolute;
  inset: 0;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.banner-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.banner-shapes::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 80px solid rgba(255,255,255,.06);
  top: -150px; right: -100px;
}
.banner-shapes::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 50px solid rgba(255,255,255,.05);
  bottom: -80px; left: 10%;
}
.company-banner-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3.5rem 2.5rem;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
}
.banner-content {}
.banner-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 99px;
  padding: .4rem 1.1rem;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(6px);
}
.banner-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: #7EE8A2;
  border-radius: 50%;
  display: inline-block;
}
.banner-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.banner-title em {
  font-style: italic;
  color: #A8F0C0;
}
.banner-subtitle {
  color: rgba(255,255,255,.82);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 440px;
}
.banner-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.banner-stats {
  display: flex;
  gap: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.15);
}
.banner-stat { text-align: center; }
.banner-stat-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: #A8F0C0;
  display: block;
  line-height: 1;
  margin-bottom: .2rem;
}
.banner-stat-lbl {
  font-size: 0.8rem;
  color: rgba(255,255,255,.6);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.banner-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.banner-card-stack {
  position: relative;
  width: 320px;
  height: 280px;
}
.banner-card {
  position: absolute;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  padding: 1.5rem;
  color: white;
}
.banner-card-main {
  width: 280px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.banner-card-float {
  width: 180px;
  top: 0;
  right: 0;
  padding: 1rem 1.25rem;
}
.banner-card-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.banner-card-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.7); margin-bottom: .25rem; }
.banner-card-val { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: #fff; }
.banner-card-float .banner-card-icon { font-size: 1.8rem; margin-bottom: .5rem; }
.banner-card-float .banner-card-val { font-size: 1rem; }
.banner-trust-dots {
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .4rem;
}
.banner-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3); }
.banner-dot.active { background: #7EE8A2; width: 18px; border-radius: 3px; }

/* -- HERO SLIDER (admin-managed, multiple slides) -- */
.hero-slider {
  position: relative;
  width: 100%;
  min-height: 480px;
  overflow: hidden;
}
.hero-slides { position: relative; width: 100%; height: 100%; min-height: 480px; }
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-lt) 50%, #42B874 100%);
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease;
}
.hero-slide.active { opacity: 1; visibility: visible; position: relative; }
.hero-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(13,46,28,.82) 0%, rgba(13,46,28,.55) 55%, rgba(13,46,28,.25) 100%);
}
.hero-slide-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0;
  padding: 4.5rem 2.5rem;
  width: 100%;
  text-align: left;
}
.hero-slide-inner .banner-subtitle { max-width: 560px; }
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.hero-arrow:hover { background: rgba(255,255,255,.25); }
.hero-arrow-prev { left: 1.5rem; }
.hero-arrow-next { right: 1.5rem; }
.hero-slide-dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: .5rem;
}
.hero-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  padding: 0;
  transition: width var(--transition), background var(--transition);
}
.hero-dot.active { background: #7EE8A2; width: 22px; border-radius: 4px; }
@media (max-width: 640px) {
  .hero-slide-inner { padding: 3rem 1.25rem; }
  .hero-arrow { width: 34px; height: 34px; font-size: 1.1rem; }
  .hero-arrow-prev { left: .75rem; }
  .hero-arrow-next { right: .75rem; }
}

/* -- HERO (legacy kept for non-banner pages) -- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 88vh;
  overflow: hidden;
}
.hero-left {
  background: var(--primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 4rem 5rem 5rem;
  position: relative;
  overflow: hidden;
}
.hero-left::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  border: 60px solid rgba(255,255,255,.06);
}
.hero-left::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  border: 40px solid rgba(42,143,82,.18);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.12);
  color: #A8F0C0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 99px;
  padding: .35rem 1rem;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  width: fit-content;
}
.hero-eyebrow span { width: 6px; height: 6px; background: #7EE8A2; border-radius: 50%; }
.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
.hero-h1 em { font-style: normal; color: #A8F0C0; }
.hero-sub {
  color: rgba(255,255,255,.7);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  max-width: 400px;
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero-stat-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: #A8F0C0;
  display: block;
}
.hero-stat-lbl {
  font-size: 0.86rem;
  color: rgba(255,255,255,.55);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hero-right {
  position: relative;
  background: linear-gradient(135deg, var(--primary-xs) 0%, #C8EFDA 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(26,107,60,.1) 0%, transparent 60%);
}
.hero-product-placeholder {
  width: 220px; height: 220px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
  box-shadow: 0 20px 40px rgba(26,107,60,.15);
  animation: float 4s ease-in-out infinite;
  position: relative; z-index: 1;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.hero-badge {
  position: absolute; top: 2rem; right: 2rem;
  width: 90px; height: 90px;
  background: var(--white);
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  font-size: 0.73rem; font-weight: 700;
  text-align: center; color: var(--primary);
  text-transform: uppercase; letter-spacing: .04em; gap: 2px;
}
.hero-badge strong { font-size: 1rem; color: var(--primary); }
.hero-leaf { position: absolute; opacity: .12; font-size: 8rem; bottom: -1rem; left: -1rem; transform: rotate(-20deg); }
.hero-cat-pills {
  position: absolute; bottom: 2rem;
  left: 50%; transform: translateX(-50%);
  display: flex; gap: .5rem; z-index: 2;
}
.cat-pill {
  background: var(--white);
  border-radius: 99px;
  padding: .4rem 1rem;
  font-size: 0.86rem; font-weight: 600;
  color: var(--primary);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.cat-pill:hover { background: var(--primary); color: var(--white); }

/* -- BUTTONS -- */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-lt));
  color: var(--white);
  padding: .85rem 2rem;
  border-radius: 99px;
  font-size: .95rem;
  font-weight: 600;
  transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  box-shadow: 0 4px 16px rgba(26,107,60,.35);
}
.btn-primary:hover { opacity: .92; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,107,60,.4); }
.btn-outline {
  color: var(--white);
  padding: .85rem 2rem;
  border-radius: 99px;
  font-size: .95rem;
  font-weight: 600;
  border: 2px solid rgba(255,255,255,.4);
  transition: border-color var(--transition), background var(--transition);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,.1); }
.btn-outline-green {
  color: var(--primary);
  padding: .85rem 2rem;
  border-radius: 99px;
  font-size: .95rem;
  font-weight: 600;
  border: 2px solid var(--primary);
  transition: background var(--transition), color var(--transition);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.btn-outline-green:hover { background: var(--primary); color: var(--white); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--primary);
  font-weight: 600;
  font-size: .9rem;
  border: 1.5px solid var(--primary);
  border-radius: 99px;
  padding: .65rem 1.8rem;
  transition: background var(--transition), color var(--transition);
}
.btn-ghost:hover { background: var(--primary); color: var(--white); }
.btn-secondary {
  background: var(--off-white);
  color: var(--text);
  border: 1.5px solid var(--border);
  padding: .7rem 1.3rem;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.btn-secondary:hover { border-color: var(--primary); background: var(--white); }
.btn-gold {
  background: var(--gold);
  color: var(--white);
  padding: .85rem 2rem;
  border-radius: 99px;
  font-size: .95rem;
  font-weight: 700;
  transition: opacity var(--transition), transform var(--transition);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.btn-gold:hover { opacity: .9; transform: translateY(-2px); }
.btn-full { width: 100%; justify-content: center; margin-top: .5rem; }

/* -- SECTION COMMONS -- */
section { padding: 5rem 2.5rem; }
.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-eyebrow {
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .75rem;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.section-sub {
  color: var(--text-lt);
  margin-top: .75rem;
  font-size: .95rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* -- TRUST STRIP -- */
.trust-strip {
  background: var(--primary);
  padding: 1.5rem 2.5rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--white);
  justify-content: center;
}
.trust-icon {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.trust-text strong { display: block; font-size: .85rem; font-weight: 600; }
.trust-text span   { font-size: 0.8rem; color: rgba(255,255,255,.65); }

/* ================= GNP-CATEGORY-DASHBOARD-V1 =================
   "What are you looking for?" — large clickable category cards between the
   hero and the mini-promo row. Desktop only: #gnpMobileHome already has its
   own equivalent (m-cat-section, the circular icon rail + tap flyout), so
   this is hidden under 768px same as the other desktop-only sections
   (see GNP-MOBILE-V4-CLEANUP-V2 further down). Whole card is one <a> —
   clicking anywhere opens the category, not just the "Shop Now" pill. */
.cat-dashboard{ background: var(--white); padding: 44px 0 8px; }
.cat-dashboard-inner{ max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; }
.cat-dashboard-head{ text-align: center; max-width: 640px; margin: 0 auto 32px; }
.cat-dashboard-head h2{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem); color: var(--text); margin: 6px 0 0;
}

/* GNP-CAT-DASH-UNIFORM-SCROLL-V1: every category is the same size card now
   — one horizontally scrollable row, no more "2 big + smaller rail" split.
   Adding categories in admin just extends the scroll. */
.cat-dashboard-grid{
  display: flex; gap: 24px; align-items: stretch;
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: 4px;
}
.cat-dashboard-grid::-webkit-scrollbar{ display: none; }
.cat-dash-card{
  position: relative; display: flex; flex-direction: column; justify-content: flex-start;
  flex: 0 0 min(400px, 84vw); scroll-snap-align: start;
  min-height: 460px; border-radius: var(--radius-lg); overflow: hidden;
  padding: 32px 30px 84px; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm); isolation: isolate;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.cat-dash-card:hover, .cat-dash-card:focus-visible{ transform: translateY(-7px); box-shadow: var(--shadow-lg); outline: none; }
.cat-dash-card:focus-visible{ outline: 3px solid var(--card-accent-dk, var(--forest-deep)); outline-offset: 3px; }

/* per-card accent triad, cycling every 3 cards — kept inside the GNP
   natural palette (forest / amber / muted teal) rather than Amazon's
   literal green/orange/blue */
.cat-dash-card:nth-child(3n+1){ --card-bg-a:#EAF3EA; --card-bg-b:#F7FBF6; --card-accent:#2F6E4C; --card-accent-dk:#1D3F2E; }
.cat-dash-card:nth-child(3n+2){ --card-bg-a:#FBEEDC; --card-bg-b:#FDF8EE; --card-accent:#C07A2E; --card-accent-dk:#8F5A1F; }
.cat-dash-card:nth-child(3n+3){ --card-bg-a:#E9F1F0; --card-bg-b:#F6FAF9; --card-accent:#3E7A72; --card-accent-dk:#28524C; }
.cat-dash-card{ background: linear-gradient(160deg, var(--card-bg-a) 0%, var(--card-bg-b) 60%); }

.cat-dash-top{ position: relative; z-index: 2; max-width: 100%; }
.cat-dash-top h3{
  font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; line-height: 1.12;
  color: var(--forest-deep); margin: 0 0 10px;
}
.cat-dash-top p{ font-size: .96rem; color: var(--text-md); line-height: 1.5; margin: 0 0 18px; max-width: 26ch; }
.cat-dash-cta{
  display: inline-flex; align-items: center; gap: 8px; background: var(--card-accent); color: #fff;
  font-weight: 700; font-size: .88rem; padding: 11px 20px; border-radius: 999px;
  transition: background .25s, gap .25s;
}
.cat-dash-card:hover .cat-dash-cta{ background: var(--card-accent-dk); gap: 11px; }

/* product art: centered, anchored to the bottom of the card, floats up
   slightly on hover — heading/description stay pinned at the top */
.cat-dash-media{
  position: absolute; left: 0; right: 0; bottom: 64px; z-index: 1;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 20px; pointer-events: none;
}
.cat-dash-media img{
  /* GNP-CAT-DASH-PHOTO-FILL-V1: image itself is now a c_fill,g_auto Cloudinary
     crop (no more letterboxed padding baked in), and it's sized to actually
     fill most of its floating area instead of floating small with a big gap
     around it. */
  max-width: 92%; max-height: 260px; width: auto; height: auto; object-fit: contain;
  border-radius: 14px;
  filter: drop-shadow(0 18px 26px rgba(29,63,46,.16));
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.cat-dash-card:hover .cat-dash-media img{ transform: translateY(-8px) scale(1.045); }
.cat-dash-icon-fallback{ font-size: 4.5rem; opacity: .75; }

.cat-dash-stat{
  position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 3;
  display: flex; align-items: center; gap: 12px; background: var(--white); border-radius: 999px;
  padding: 10px 12px; box-shadow: var(--shadow-sm);
}
.cat-dash-stat-ic{
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  background: var(--off-white); color: var(--card-accent-dk);
  background: color-mix(in srgb, var(--card-accent) 18%, white);
}
.cat-dash-stat-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cat-dash-stat-body b{ font-size: .86rem; font-weight: 800; color: var(--text); }
.cat-dash-stat-body small{ font-size: .74rem; color: var(--text-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* the "View" affordance — a round chevron button that expands into a
   labeled pill on hover, per your ask for a hover/view treatment */
.cat-dash-view{
  flex-shrink: 0; display: flex; align-items: center; gap: 0; overflow: hidden;
  height: 32px; width: 32px; border-radius: 999px; background: var(--off-white); color: var(--card-accent-dk);
  transition: width .3s cubic-bezier(.16,1,.3,1), background .3s, padding .3s; padding: 0; justify-content: center;
}
.cat-dash-view-label{ font-size: .78rem; font-weight: 800; white-space: nowrap; opacity: 0; max-width: 0; transition: opacity .2s, max-width .3s; }
.cat-dash-card:hover .cat-dash-view{ width: 82px; background: var(--card-accent); color: #fff; padding: 0 12px 0 14px; gap: 5px; }
.cat-dash-card:hover .cat-dash-view-label{ opacity: 1; max-width: 50px; }

@media (prefers-reduced-motion: reduce){
  .cat-dash-card, .cat-dash-media img, .cat-dash-view, .cat-dash-view-label, .cat-dash-cta{ transition: none !important; }
}
@media (max-width: 768px){
  /* #gnpMobileHome has its own category rail — no duplicate here */
  .cat-dashboard{ display: none !important; }
}

/* GNP-MINI-PROMO-V2 — "Today's promotions": horizontally scrollable row of
   admin-editable promo cards (was a fixed 3-up grid capped at exactly 3
   cards; now scrolls, so any number can be added from admin). */
.mini-promo-row{
  display: none;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 14px;
  gap: 20px;
}
@media (min-width: 769px){
  .mini-promo-row{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mini-promo-row::-webkit-scrollbar{ display: none; }
  .mini-promo-row .mini-promo-card{ flex: 0 0 280px; scroll-snap-align: start; }
}
/* GNP-MINI-PROMO-MOBILE-V1 — these were desktop-only (display:none below
   769px) with no mobile equivalent ever built, so the cards just never
   showed up on phones. Horizontal snap-scroll row, Daraz/Amazon-style,
   matching the swipe pattern already used for categories/bestsellers. */
@media (max-width: 768px){
  .mini-promo-row{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    max-width: 100%;
    margin: 18px 0 0;
    padding: 0 16px 4px;
  }
  .mini-promo-row::-webkit-scrollbar{ display: none; }
  .mini-promo-card{
    flex: 0 0 76%;
    scroll-snap-align: start;
  }
  .mini-promo-card-title{ font-size: .92rem; }
}

/* GNP-MOBILE-PROMO-ROW-V1 — Shop / Dr Appointment / Enjoy Discount cards,
   duplicated into #gnpMobileHome (see home.html) so they sit directly under
   the hero on mobile. Previously the only copy was the desktop
   .mini-promo-row above, which lives outside #gnpMobileHome — on mobile it
   rendered *after* the whole #gnpMobileHome block (hero, categories,
   appointment, bestsellers, daraz grid, features, certs), i.e. right at the
   bottom of the page. That original is now hidden on mobile
   (GNP-MOBILE-V4-CLEANUP-V2 below); desktop is untouched. Reuses the same
   snap-scroll treatment as .mini-promo-row above. */
#gnpMobileHome .m-promo-row{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 12px;
  padding: 14px 16px 4px;
}
#gnpMobileHome .m-promo-row::-webkit-scrollbar{ display: none; }
#gnpMobileHome .m-promo-card{
  position: relative;
  flex: 0 0 58%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #DCE9D8;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(20,60,40,.04);
}
#gnpMobileHome .m-promo-badge{
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: #1D3F2E; color: #fff; font-size: .62rem; font-weight: 800;
  padding: 4px 8px; border-radius: 999px;
}
#gnpMobileHome .m-promo-card-img{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11.5;
  background: #F7F9F5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#gnpMobileHome .m-promo-card-img img,
#gnpMobileHome .m-promo-card-img video{ width: 100%; height: 100%; object-fit: cover; }
#gnpMobileHome .m-promo-card-img iframe{ width: 100%; height: 100%; border: 0; }
#gnpMobileHome .m-promo-video-tag{
  position: absolute; bottom: 7px; left: 7px; z-index: 2;
  display: flex; align-items: center; gap: 4px;
  background: rgba(13,33,27,.72); color: #fff; font-size: .58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; padding: 3px 7px; border-radius: 5px;
}
#gnpMobileHome .m-promo-card-body{ padding: 10px 12px 12px; }
#gnpMobileHome .m-promo-card-eyebrow{
  font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #B99A4B; margin: 0 0 4px;
}
#gnpMobileHome .m-promo-card-title{
  font-size: 12px;
  font-weight: 700;
  color: #1D3F2E;
  margin: 0 0 6px;
  line-height: 1.3;
}
#gnpMobileHome .m-promo-card-foot{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#gnpMobileHome .m-promo-card-price{ font-size: 12px; font-weight: 800; color: #1D3F2E; }
#gnpMobileHome .m-promo-card-link{
  font-size: 12.5px;
  font-weight: 700;
  color: #B99A4B;
}

/* GNP-MOBILE-CATEGORY-DASHBOARD-V1 — swipeable row mirroring the desktop
   "What are you looking for?" cards (.cat-dashboard above, hidden on mobile
   via GNP-MOBILE-V4-CLEANUP-V2 below). Same accent-color language per card,
   letters pinned top / product image anchored bottom-center per spec. */
#gnpMobileHome .m-cat-dash{ padding: 22px 0 4px; }
#gnpMobileHome .m-cat-dash-head{ padding: 0 16px; margin-bottom: 14px; }
#gnpMobileHome .m-cat-dash-eyebrow{
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #B99A4B; margin: 0 0 4px;
}
#gnpMobileHome .m-cat-dash-head h2{
  font-family: var(--font-display, serif); font-size: 1.18rem; font-weight: 600;
  color: #1D3F2E; margin: 0; line-height: 1.3;
}
#gnpMobileHome .m-cat-dash-scroll{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 12px;
  padding: 2px 16px 8px;
}
#gnpMobileHome .m-cat-dash-scroll::-webkit-scrollbar{ display: none; }
#gnpMobileHome .m-cat-dash-card{
  position: relative;
  flex: 0 0 80%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 18px;
  overflow: hidden;
  min-height: 320px;
  box-shadow: 0 3px 14px rgba(20,60,40,.06);
}
#gnpMobileHome .m-cat-dash-card:nth-child(3n+1){ --card-bg-a:#EAF3EA; --card-bg-b:#F7FBF6; --card-accent:#2F6E4C; --card-accent-dk:#1D3F2E; }
#gnpMobileHome .m-cat-dash-card:nth-child(3n+2){ --card-bg-a:#FBEEDC; --card-bg-b:#FDF8EE; --card-accent:#C07A2E; --card-accent-dk:#8F5A1F; }
#gnpMobileHome .m-cat-dash-card:nth-child(3n+3){ --card-bg-a:#E9F1F0; --card-bg-b:#F6FAF9; --card-accent:#3E7A72; --card-accent-dk:#28524C; }
#gnpMobileHome .m-cat-dash-card{ background: linear-gradient(160deg, var(--card-bg-a, #EAF3EA) 0%, var(--card-bg-b, #F7FBF6) 60%); }
#gnpMobileHome .m-cat-dash-top{ position: relative; z-index: 2; padding: 18px 16px 0; }
#gnpMobileHome .m-cat-dash-top h3{
  font-family: var(--font-display, serif); font-size: 1.12rem; font-weight: 600;
  color: #1D3F2E; margin: 0 0 4px;
}
#gnpMobileHome .m-cat-dash-top p{ font-size: .8rem; color: #4B5B50; line-height: 1.4; margin: 0 0 10px; }
#gnpMobileHome .m-cat-dash-cta{
  display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 800;
  color: #fff; background: var(--card-accent, #2F6E4C); padding: 7px 12px; border-radius: 999px;
}
#gnpMobileHome .m-cat-dash-media{
  position: absolute; left: 0; right: 0; bottom: 58px; height: 168px;
  display: flex; align-items: flex-end; justify-content: center; z-index: 1;
}
#gnpMobileHome .m-cat-dash-media img{
  /* GNP-CAT-DASH-PHOTO-FILL-V1: same fill fix as desktop — no more baked-in
     padding, image fills more of its floating area. */
  max-width: 94%; max-height: 100%; object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.12));
}
#gnpMobileHome .m-cat-dash-icon-fallback{ font-size: 3.4rem; opacity: .75; }
#gnpMobileHome .m-cat-dash-stat{
  position: relative; z-index: 2; margin-top: auto;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.88);
  padding: 10px 12px;
  border-top: 1px solid rgba(0,0,0,.05);
}
#gnpMobileHome .m-cat-dash-stat-ic{
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
  background: color-mix(in srgb, var(--card-accent, #2F6E4C) 16%, #fff);
}
#gnpMobileHome .m-cat-dash-stat-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#gnpMobileHome .m-cat-dash-stat-body b{ font-size: .78rem; font-weight: 800; color: #1D3F2E; }
#gnpMobileHome .m-cat-dash-stat-body small{
  font-size: .66rem; color: #6B7A6E; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
#gnpMobileHome .m-cat-dash-view{
  flex: none; display: flex; align-items: center; gap: 3px;
  font-size: .68rem; font-weight: 800; color: var(--card-accent-dk, #1D3F2E);
}
@media (prefers-reduced-motion: reduce){
  #gnpMobileHome .m-cat-dash-scroll{ scroll-behavior: auto; }
}

/* GNP-MOBILE-DEDUPE-CATEGORY-SECTIONS-V2: keep the .m-cat-dash cards above
   (large, "what are you looking for" style) AND the .m-cat-section circular
   icon rail ("Browse the Range / Find what your body needs") further down
   — both stay. Hiding the "Today's promotions" mini-promo cards instead
   (.m-promo-row), per latest direction. */
#gnpMobileHome .m-promo-row{ display: none !important; }

.promo-section{ padding: 3.5rem 0 0; }
.promo-section .section-header{ max-width: 1280px; margin: 0 auto 28px; padding: 0 24px; }

.mini-promo-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid #EEF1EA;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 2px 10px rgba(20,60,40,0.04);
}
.mini-promo-row.visible .mini-promo-card{ opacity: 1; transform: translateY(0); }
.mini-promo-row.visible .mini-promo-card:nth-child(2){ transition-delay: .08s; }
.mini-promo-row.visible .mini-promo-card:nth-child(3){ transition-delay: .16s; }
.mini-promo-card:hover{
  border-color: #DCE7DE;
  box-shadow: 0 10px 26px rgba(20,60,40,0.10);
  transform: translateY(-3px);
}
.mini-promo-badge{
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: var(--forest-deep, #1D3F2E); color: #fff;
  font-size: .7rem; font-weight: 800; letter-spacing: .02em;
  padding: 5px 10px; border-radius: 999px;
}
.mini-promo-card-img{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #F7F9F5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mini-promo-card-img img,
.mini-promo-card-img video{ width: 100%; height: 100%; object-fit: cover; }
.mini-promo-card-img iframe{ width: 100%; height: 100%; border: 0; }
.mini-promo-video-tag{
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  background: rgba(13,33,27,.72); color: #fff;
  font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px;
}
.mini-promo-card-body{ padding: 14px 18px 18px; }
.mini-promo-card-eyebrow{
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #B99A4B; margin: 0 0 5px;
}
.mini-promo-card-title{
  font-size: .95rem;
  font-weight: 700;
  color: var(--forest-deep, #1D3F2E);
  margin: 0 0 10px;
  line-height: 1.3;
}
.mini-promo-card-foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mini-promo-card-price{ font-size: .92rem; font-weight: 800; color: var(--forest-deep, #1D3F2E); }
.mini-promo-card-link{
  font-size: 0.88rem;
  font-weight: 600;
  color: #B99A4B;
}
.mini-promo-card:hover .mini-promo-card-link{ text-decoration: underline; }

/* GNP-CERTS-WHITE-V1 — certifications section switched from a dark
   forest-green card to a clean white background per request, matching
   the light, airy treatment used elsewhere on the homepage. */
.certs-section-white{
  background:var(--white);
  background-image: radial-gradient(circle, rgba(26,107,60,0.03) 1px, transparent 1px);
  background-size: 22px 22px;
  border:1px solid var(--border);
  border-radius:20px;
  padding:3rem 1.5rem;
  max-width:1200px;
  margin:3rem auto;
}
.certs-eyebrow-white{ text-align:center; font-size: 13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 6px; }
.certs-title-white{ text-align:center; font-family:var(--font-display); font-size:26px; color:var(--forest-deep); margin:0 0 32px; }
.certs-grid-white{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:20px; max-width:800px; margin:0 auto; }
.cert-card-white{
  text-align:center; background:var(--white); border:1px solid var(--border); border-radius:16px;
  padding:28px 16px; box-shadow:0 16px 30px -20px rgba(15,60,40,.18);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.cert-card-white:hover{ transform:translateY(-5px); box-shadow:0 22px 40px -18px rgba(15,60,40,.28); border-color:var(--primary); }
.cert-badge-white{
  width:100%; height:64px; margin:0 auto 14px;
  background:transparent; border:none;
  display:flex; align-items:center; justify-content:center;
}
.cert-badge-white img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.cert-badge-white span{ font-size:24px; color:var(--primary); }
.cert-name-white{ font-size: 13.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--text); }

/* GNP-HOMEPAGE-VIDEOS-V1 — social video grid, driven by blog Posts that
   have a video_url set. Thumbnail + play button, opens the video off-site. */
.videos-grid{
  display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
  gap: 14px; padding: .25rem 0 .75rem; -webkit-overflow-scrolling: touch;
}
.video-card{ flex: 0 0 200px; scroll-snap-align: start; }
.video-hidden{ display: none; }
@media (max-width: 960px){ .video-card{ flex-basis: 180px; } }
@media (max-width: 560px){
  .videos-grid{ margin: 0 -1.5rem; padding: .25rem 1.5rem .75rem; }
  .video-card{ flex: 0 0 60%; }
}
.video-card{
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #EEF1EA;
  background: var(--white);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.video-card:hover{
  box-shadow: 0 14px 30px rgba(20,60,40,0.12);
  transform: translateY(-3px);
  border-color: #DCE7DE;
}
.video-card-thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #F7F9F5;
  overflow: hidden;
}
.video-card-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.video-card:hover .video-card-thumb img{ transform: scale(1.06); }
.video-card-thumb-fallback{
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
}
.video-card-play{
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(14,51,38,0.72);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s ease, transform .25s ease;
}
.video-card:hover .video-card-play{ background: #1F8452; transform: scale(1.08); }
.video-card-body{ padding: 12px 14px 14px; }
.video-card-tag{
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1F8452;
  background: #E3F0E7;
  padding: 2px 8px;
  border-radius: 100px;
  margin-bottom: 6px;
}
.video-card-title{
  font-size: .85rem;
  font-weight: 600;
  color: var(--forest-deep, #1D3F2E);
  margin: 0;
  line-height: 1.35;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.cat-card {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 3/4;
  cursor: pointer;
  transition: transform var(--transition);
}
.cat-card:hover { transform: translateY(-6px); }
.cat-card:hover .cat-card-overlay { opacity: .85; }
.cat-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,107,60,.9) 0%, rgba(26,107,60,.3) 60%, transparent 100%);
  transition: opacity var(--transition);
}
.cat-card-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; color: var(--white); }
.cat-card-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #A8F0C0; margin-bottom: .3rem;
}
.cat-card-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; line-height: 1.2; margin-bottom: .75rem; }
.cat-card-cta { display: inline-flex; align-items: center; gap: .4rem; font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,.8); transition: gap var(--transition); }
.cat-card:hover .cat-card-cta { gap: .7rem; }
.cat-card-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 5rem; }
.cat-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-1 { background: linear-gradient(135deg, #0D4A27, #1A6B3C); }
.cat-2 { background: linear-gradient(135deg, #1A6B3C, #2A8F52); }
.cat-3 { background: linear-gradient(135deg, #0A3D1F, #1A6B3C); }
.cat-4 { background: linear-gradient(135deg, #1A6B3C, #3DAA68); }

/* -- PRODUCTS -- */
.products-section { background: var(--off-white); }
.products-tabs {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}
.tab-btn {
  padding: .55rem 1.4rem;
  border-radius: 99px;
  font-size: .85rem; font-weight: 600;
  border: 1.5px solid var(--border);
  color: var(--text-lt);
  background: var(--white);
  transition: all var(--transition);
}
.tab-btn.active, .tab-btn:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-lt));
  border-color: var(--primary);
  color: var(--white);
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.product-img-wrap {
  position: relative;
  background: linear-gradient(135deg, var(--primary-xs), #C8EFDA);
  aspect-ratio: 2/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-icon-placeholder {
  font-size: 4rem;
  transition: transform .4s ease;
  filter: drop-shadow(0 8px 20px rgba(26,107,60,.12));
}
.product-card:hover .product-icon-placeholder { transform: scale(1.08); }
.product-sticker {
  position: absolute;
  top: .75rem; left: .75rem;
  background: var(--primary);
  color: var(--white);
  border-radius: 4px;
  padding: .25rem .6rem;
  font-size: 0.73rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.product-sticker.sale { background: var(--red); }
.product-sticker.new  { background: var(--accent); }
.product-sticker.top  { background: var(--gold); color: var(--white); }
.product-wishlist {
  position: absolute; top: .75rem; right: .75rem;
  width: 32px; height: 32px;
  background: var(--white);
  border: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  color: var(--text-md);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition), background var(--transition), color var(--transition);
}
.product-card:hover .product-wishlist { opacity: 1; }
.product-wishlist:hover { background: var(--red); color: var(--white); }
.product-wishlist.is-wishlisted { color: var(--red); opacity: 1; }
.product-wishlist.is-wishlisted svg { fill: var(--red); }
.product-info { padding: 1.1rem 1.2rem 1.3rem; }
.product-category {
  font-size: 0.78rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--primary); margin-bottom: .3rem;
}
.product-name {
  font-family: var(--font-body);
  font-size: .92rem; font-weight: 700;
  color: var(--text); line-height: 1.3; margin-bottom: .6rem;
}
.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .75rem; gap: .5rem;
}
.product-price { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.product-price-old { font-size: 0.88rem; color: var(--text-lt); text-decoration: line-through; margin-left: .3rem; }
.btn-cart {
  background: var(--primary);
  color: var(--white);
  border-radius: 99px;
  padding: .45rem 1rem;
  font-size: 0.86rem; font-weight: 600;
  transition: background var(--transition), transform var(--transition);
  display: flex; align-items: center; gap: .35rem;
  white-space: nowrap;
}
.btn-cart:hover { background: var(--primary-lt); transform: scale(1.03); }
.view-all-wrap { text-align: center; margin-top: 3rem; }

/* MOBILE BOTTOM NAV -- hidden on desktop */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    background: var(--white);
    border-top: 1px solid #eee;
    box-shadow: 0 -2px 10px rgba(0,0,0,.06);
    padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
  }
  /* stop content/footer hiding behind the bar */
  body { padding-bottom: 60px; }
}

.mbn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--slate-lt);
  text-decoration: none;
  font-size: 0.73rem;
  font-weight: 600;
  position: relative;
  padding: 2px 0;
}
.mbn-item svg { stroke: currentColor; }
.mbn-item.active { color: var(--primary); }

.mbn-badge {
  position: absolute;
  top: -2px;
  right: 22%;
  background: var(--primary);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
}

/* -- COMPACT APP-STYLE PRODUCT CARDS (mobile) -- */
@media (max-width: 768px) {
  .products-grid, .shop-products-grid { gap: .6rem; }
  .product-card { border-radius: 10px; }
  .product-info { padding: .6rem .7rem .8rem; }
  .product-category { font-size: 0.66rem; margin-bottom: .2rem; }
  .product-name { font-size: 0.88rem; margin-bottom: .35rem; line-height: 1.25; }
  .product-footer { margin-top: .45rem; gap: .3rem; }
  .product-price { font-size: .92rem; }
  .product-price-old { font-size: 0.76rem; margin-left: .2rem; }
  .btn-cart { padding: .32rem .65rem; font-size: 0.76rem; }
  .product-sticker { top: .5rem; left: .5rem; padding: .16rem .42rem; font-size: 0.64rem; }
  .product-wishlist {
    width: 24px; height: 24px; font-size: 0.78rem;
    top: .5rem; right: .5rem; opacity: 1; /* always visible -- no hover on touch */
  }
  .product-oos-overlay span { font-size: 0.68rem; padding: .26rem .6rem; }
  .product-icon-placeholder { font-size: 2.6rem; }
}

/* -- LIVE SEARCH DROPDOWN -- shop page toolbar variant -- */
.shop-search-box { position: relative; }
.shop-search-box .nav-search-dropdown {
  width: 100%;
  max-width: none;
  left: 0;
  right: 0;
  top: calc(100% + .5rem);
}

/* -- GLOBAL MOBILE SEARCH BAR (site-wide, mobile only) -- */
.mobile-search-bar {
  display: none;
}
@media (max-width: 768px) {
  .mobile-search-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    position: relative;
    margin: .6rem 1.25rem;
    background: var(--off-white);
    border: 1.5px solid var(--border);
    border-radius: 99px;
    padding: .55rem 1rem;
    color: var(--text-lt);
  }
  .mobile-search-bar input {
    border: none;
    background: none;
    outline: none;
    font-family: inherit;
    font-size: .9rem;
    flex: 1 1 auto;
    color: var(--text);
  }
  .mobile-search-bar .nav-search-dropdown {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
}

/* -- PRODUCT CAROUSELS (swipeable, per-category) -- */
.cat-carousel-section { padding: 3rem 3.5rem; }
.cat-carousel-section:nth-of-type(even) { background: var(--off-white); }
.cat-carousel-inner { max-width: 1200px; margin: 0 auto; }
.cat-carousel-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
.cat-carousel-heading .section-eyebrow { margin-bottom: .35rem; }
.cat-carousel-heading .section-title { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 0; }
.carousel-controls { display: flex; align-items: center; gap: .6rem; }
.carousel-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.carousel-btn:hover { background: var(--primary); border-color: var(--primary); color: var(--white); }
.view-all-chip {
  font-size: 0.88rem; font-weight: 600;
  color: var(--primary);
  padding: .55rem 1.1rem;
  border: 1.5px solid var(--primary);
  border-radius: 99px;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.view-all-chip:hover { background: var(--primary); color: var(--white); }
.carousel-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
  cursor: grab;
  margin: 0 -2.5rem;
  padding: .5rem 2.5rem 1rem;
}
.carousel-viewport::-webkit-scrollbar { display: none; }
.carousel-viewport.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.carousel-track { display: flex; gap: 1.25rem; width: max-content; }
.carousel-slide { flex: 0 0 auto; width: 195px; scroll-snap-align: start; }
@media (max-width: 900px) {
  .cat-carousel-section { padding: 2.5rem 1.5rem; }
  .carousel-viewport { margin: 0 -1.5rem; padding: .5rem 1.5rem 1rem; }
}
/* -- HOMEPAGE "EXPLORE BY CATEGORY" -- single tabbed grid, no repeated sections -- */
.home-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.75rem;
}
.home-cat-tab {
  padding: .55rem 1.1rem;
  border-radius: 99px;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text-md);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
}
.home-cat-tab:hover { border-color: var(--primary); color: var(--primary); }
.home-cat-tab.active { background: var(--primary); border-color: var(--primary); color: var(--white); }
.home-category-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .home-category-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (max-width: 640px) {
  .home-cat-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -1.5rem 1.5rem; padding: 0 1.5rem 4px; }
  .home-cat-tabs::-webkit-scrollbar { display: none; }
  .home-cat-tab { flex: 0 0 auto; padding: .45rem .9rem; font-size: 0.86rem; }
  .home-category-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
}

@media (max-width: 560px) {
  .carousel-slide { width: 168px; }
  .cat-carousel-header .view-all-chip { display: none; }
}

/* -- PROMO BANNER -- */
.promo-banner {
  background: linear-gradient(135deg, var(--primary), var(--primary-lt), #3DAA68);
  margin: 0; padding: 0;
  position: relative; overflow: hidden;
}
.promo-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; gap: 2rem;
}
.promo-text .label {
  font-size: 0.83rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #A8F0C0; margin-bottom: .75rem;
}
.promo-text h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: 700; color: var(--white);
  line-height: 1.2; margin-bottom: 1rem;
}
.promo-text p { color: rgba(255,255,255,.75); max-width: 480px; }
.promo-cta { display: flex; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.promo-cosmetic-placeholder {
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 6rem;
}
.promo-bg-circle {
  position: absolute; right: -100px; top: -100px;
  width: 400px; height: 400px;
  border-radius: 50%;
  border: 60px solid rgba(255,255,255,.06);
}

/* -- CERTIFICATIONS (premium, GNP-PREMIUM-CERTS-V1) -- */
.certs-section {
  background: linear-gradient(180deg, var(--slate) 0%, #0F2419 100%);
  padding: 4.5rem 1.5rem;
}
.certs-section .section-eyebrow { color: var(--gold-lt) !important; }
.certs-section .section-title { color: var(--white); }
.certs-inner {
  max-width: 1100px; margin: 2.75rem auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.75rem;
}
.cert-item {
  text-align: center; opacity: 1; filter: none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(95,196,132,.18);
  border-radius: var(--radius-lg);
  padding: 2rem 1.25rem;
  transition: var(--transition);
}
.cert-item:hover {
  opacity: 1; filter: none;
  transform: translateY(-4px);
  background: rgba(255,255,255,.06);
  border-color: var(--gold);
}
.cert-logo {
  width: 74px; height: 74px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .9rem; font-size: 2rem;
  background: linear-gradient(160deg, rgba(95,196,132,.16), rgba(212,160,23,.10));
  border: 1.5px dashed rgba(212,160,23,.5);
}
.cert-logo--img img { max-width: 46px; max-height: 46px; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
.cert-name { font-size: 0.86rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--white); margin-top: .25rem; }
.certs-inner .cert-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.certs-inner.visible .cert-item {
  opacity: 1;
  transform: none;
}
.certs-inner.visible .cert-item:nth-child(1) { transition-delay: 0s; }
.certs-inner.visible .cert-item:nth-child(2) { transition-delay: .11s; }
.certs-inner.visible .cert-item:nth-child(3) { transition-delay: .22s; }
.certs-inner.visible .cert-item:nth-child(4) { transition-delay: .33s; }
.certs-inner.visible .cert-item:nth-child(5) { transition-delay: .44s; }
.certs-inner.visible .cert-item:nth-child(6) { transition-delay: .55s; }

/* -- BLOG -- */
.blog-section { background: var(--off-white); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1200px; margin: 0 auto; }
.blog-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-img {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--primary), var(--primary-lt));
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
}
.blog-body { padding: 1.5rem; }
.blog-meta { display: flex; align-items: center; gap: .75rem; font-size: 0.83rem; color: var(--text-lt); margin-bottom: .75rem; }
.blog-tag { background: var(--primary-xs); color: var(--primary); border-radius: 4px; padding: .15rem .5rem; font-weight: 600; }
.blog-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--text); line-height: 1.4; margin-bottom: .6rem; }
.blog-excerpt { font-size: .85rem; color: var(--text-lt); line-height: 1.7; }
.blog-read-more { display: inline-flex; align-items: center; gap: .35rem; color: var(--primary); font-size: 0.88rem; font-weight: 600; margin-top: 1rem; transition: gap var(--transition); }
.blog-card:hover .blog-read-more { gap: .6rem; }
@media (max-width: 640px){
  .blog-grid{ grid-template-columns: 1fr; gap: 1.1rem; }
  .blog-img{ aspect-ratio: 16/9; font-size: 2rem; }
  .blog-body{ padding: 1rem 1.1rem; }
  .blog-meta{ font-size: .75rem; gap: .5rem; margin-bottom: .5rem; }
  .blog-title{ font-size: .92rem; margin-bottom: .4rem; }
  .blog-excerpt{ font-size: .78rem; line-height: 1.55; }
  .blog-read-more{ font-size: .8rem; margin-top: .6rem; }
}

/* -- NEWSLETTER -- */
.newsletter {
  background: linear-gradient(135deg, var(--primary), var(--primary-lt));
  padding: 4rem 2.5rem; text-align: center;
}
.newsletter h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 2.5vw, 2.2rem); color: var(--white); margin-bottom: .5rem; }
.newsletter p { color: rgba(255,255,255,.75); margin-bottom: 2rem; }
.newsletter-form { display: flex; gap: .5rem; max-width: 480px; margin: 0 auto; }
.newsletter-form input {
  flex: 1; padding: .8rem 1.25rem;
  border-radius: 99px; border: none; outline: none;
  font-family: inherit; font-size: .9rem;
  box-shadow: 0 2px 8px rgba(26,107,60,.2);
}
.newsletter-form button {
  background: var(--white);
  color: var(--primary);
  padding: .8rem 1.8rem;
  border-radius: 99px; font-weight: 700; font-size: .9rem;
  white-space: nowrap; transition: background var(--transition), transform var(--transition);
  cursor: pointer; border: none;
}
.newsletter-form button:hover { background: var(--off-white); transform: translateY(-1px); }

/* -- FOOTER -- */
.footer {
  background: #0D3D1F;
  color: rgba(255,255,255,.8);
  padding: 4rem 2.5rem 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto 3rem;
}
.footer-brand h3 { font-family: var(--font-display); font-size: 1.4rem; color: var(--white); margin-bottom: .75rem; }
.footer-logo-img { height: 52px; width: auto; margin-bottom: 1rem; }
.footer-brand p { font-size: .85rem; line-height: 1.8; color: rgba(255,255,255,.5); margin-bottom: 1.25rem; }
.footer-socials { display: flex; gap: .75rem; }
.social-btn {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; transition: background var(--transition);
  color: rgba(255,255,255,.7);
}
.social-btn:hover { background: var(--primary-lt); color: var(--white); }
.footer-col h4 {
  font-size: 0.88rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #7EE8A2; margin-bottom: 1.25rem;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.footer-links a { font-size: .85rem; color: rgba(255,255,255,.5); transition: color var(--transition); display: inline-flex; align-items: center; gap: .4rem; }
.footer-links a:hover { color: var(--white); }
.footer-contact-item { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; color: rgba(255,255,255,.5); margin-bottom: .75rem; }
.footer-divider { border: none; border-top: 1px solid rgba(255,255,255,.08); max-width: 1200px; margin: 0 auto 1.5rem; }
.footer-bottom {
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.88rem; color: rgba(255,255,255,.35);
  flex-wrap: wrap; gap: 1rem;
}
.footer-bottom a { color: rgba(255,255,255,.35); transition: color var(--transition); }
.footer-bottom a:hover { color: var(--white); }
.footer-legal { display: flex; gap: 1.5rem; }

/* -- MOBILE NAV DRAWER -- */
.mobile-nav-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 999;
  opacity: 0; transition: opacity .3s;
}
.mobile-nav-drawer {
  position: fixed; top: 0; right: -320px;
  width: 300px; height: 100%;
  background: var(--white); z-index: 1000;
  padding: 2rem; transition: right .3s var(--ease-out-expo, cubic-bezier(.4,0,.2,1));
  overflow-y: auto;
}
.mobile-nav-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.mobile-nav-brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; color: var(--primary); font-size: 1.2rem; }
.mobile-nav-logo-img { height: 36px; width: auto; }
.mobile-nav-links { list-style: none; }
.mobile-nav-links li { border-bottom: 1px solid var(--border); }
.mobile-nav-links a { display: block; padding: 1rem 0; font-size: 1rem; font-weight: 500; color: var(--text-md); transition: color var(--transition); }
.mobile-nav-links a:hover { color: var(--primary); }
/* GNP-MOBILE-NAV-CATEGORY-LABEL-V1 */
.mobile-nav-links li.mobile-nav-label{
  border-bottom: none;
  padding: 1.1rem 0 .2rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold, #B99A4B);
}

/* -- COMING SOON -- */
.coming-soon { min-height: 55vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem; }
.coming-soon-icon { font-size: 3rem; }
.coming-soon h1 { font-family: var(--font-display); color: var(--text); font-size: clamp(1.8rem, 3vw, 2.4rem); }
.coming-soon p { color: var(--text-lt); max-width: 420px; }

/* -- SHOP / PRODUCT LISTING PAGE -- */
.shop-banner {
  background: linear-gradient(120deg, var(--primary), #0F4D24 60%, var(--primary-lt));
  padding: 3rem 2.5rem 3.5rem;
}
.shop-banner-inner { max-width: 1200px; margin: 0 auto; }
.shop-breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: 0.88rem; color: rgba(255,255,255,.7); margin-bottom: 1rem; }
.shop-breadcrumb a { color: rgba(255,255,255,.7); opacity: .8; transition: opacity var(--transition); }
.shop-breadcrumb a:hover { opacity: 1; }
.shop-breadcrumb span:last-child { color: var(--white); font-weight: 600; }
.shop-banner h1 { font-family: var(--font-display); color: var(--white); font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: .6rem; }
.shop-banner p { color: rgba(255,255,255,.78); max-width: 640px; font-size: .95rem; }
/* -- Voucher & offers section (shop / category pages) -- */
.voucher-section { background: var(--off-white); border-bottom: 1px solid var(--border, #e8ede9); padding: 2.25rem 2.5rem; }
.voucher-section-inner { max-width: 1200px; margin: 0 auto; }
.voucher-section-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.voucher-section-head h2 { font-family: var(--font-display); font-size: 1.25rem; color: var(--text); margin: 0; display: flex; align-items: center; gap: .5rem; }
.voucher-section-head p { color: var(--text-lt); font-size: .85rem; margin: 0; }

.voucher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }

.voucher-card {
  position: relative; display: flex; background: var(--white);
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: 0 2px 10px rgba(20,40,30,.07); border: 1px solid #eef2ef;
  transition: box-shadow .2s, transform .2s;
}
.voucher-card:hover { box-shadow: 0 8px 24px rgba(20,40,30,.12); transform: translateY(-2px); }

.voucher-card-value {
  flex: 0 0 108px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .25rem; padding: .75rem .5rem;
  background: linear-gradient(160deg, var(--gold), var(--gold-lt)); color: #fff;
}
.voucher-card-value--gift { background: linear-gradient(160deg, var(--primary), var(--primary-lt)); }
.voucher-card-amount { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; line-height: 1.15; }
.voucher-card-gift-icon { font-size: 1.8rem; line-height: 1; }
.voucher-card-min { font-size: 0.76rem; font-weight: 600; opacity: .92; line-height: 1.2; }

/* Ticket "perforation" -- dashed divider with punched-out circles */
.voucher-card::after {
  content: ""; position: absolute; left: 108px; top: 10px; bottom: 10px;
  border-left: 2px dashed rgba(0,0,0,.14);
}
.voucher-card-notch { position: absolute; left: 108px; width: 16px; height: 16px; background: var(--off-white); border-radius: 50%; transform: translateX(-50%); z-index: 2; }
.voucher-card-notch--top { top: -8px; }
.voucher-card-notch--bottom { bottom: -8px; }

.voucher-card-details { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; min-width: 0; }
.voucher-card-info { min-width: 0; }
.voucher-card-label { font-weight: 700; font-size: .88rem; color: var(--text); margin: 0 0 .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voucher-card-code { font-size: 0.8rem; font-family: monospace; letter-spacing: .03em; color: var(--text-md); margin: 0 0 .15rem; }
.voucher-card-expiry { font-size: 0.8rem; color: var(--text-lt); margin: 0; }
.voucher-card-auto { font-size: 0.8rem; font-weight: 700; color: var(--primary); white-space: nowrap; }

.voucher-card-claim {
  flex-shrink: 0; background: var(--gold); color: #fff; border: none; border-radius: 999px;
  padding: .45rem 1.1rem; font-size: 0.86rem; font-weight: 700; cursor: pointer;
  text-decoration: none; text-align: center; transition: background .15s, transform .15s; white-space: nowrap;
}
.voucher-card-claim:hover { background: #b5860f; transform: translateY(-1px); }
.voucher-card-claim:disabled { cursor: default; transform: none; }
.voucher-card-claim.is-loading { opacity: .7; }
.voucher-card-claim.is-claimed { background: var(--primary); }
.voucher-card-claim--link { background: var(--text); }

.voucher-toast {
  display: none; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #1a1a1a; color: #fff; padding: 12px 22px; border-radius: 12px;
  font-size: .9rem; font-weight: 500; z-index: 9999; box-shadow: 0 4px 20px rgba(0,0,0,.25);
  opacity: 0; transition: opacity .3s; max-width: min(90vw, 380px); text-align: center;
}
.voucher-toast.is-visible { display: block; opacity: 1; }
.voucher-toast--success { background: #14532d; }
.voucher-toast--error { background: #7f1d1d; }

@media (max-width: 640px) {
  .voucher-section { padding: 1.5rem 1.25rem; }
  .voucher-grid { grid-template-columns: 1fr; }
  .voucher-card-value { flex-basis: 92px; }
  .voucher-card::after, .voucher-card-notch { left: 92px; }
}

.shop-layout { max-width: 1200px; margin: 0 auto; padding: 3rem 2.5rem; display: grid; grid-template-columns: 250px 1fr; gap: 2.5rem; align-items: start; }
.shop-sidebar { background: var(--off-white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; position: sticky; top: 6.5rem; }
.shop-sidebar h3 { font-family: var(--font-display); color: var(--text); font-size: 1rem; margin-bottom: 1rem; }
.shop-cat-filter { list-style: none; display: flex; flex-direction: column; gap: .25rem; }
.shop-cat-filter a { display: block; padding: .6rem .75rem; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 500; color: var(--text-md); transition: background var(--transition), color var(--transition); }
.shop-cat-filter a:hover { background: var(--border); }
.shop-cat-filter a.active { background: var(--primary); color: var(--white); font-weight: 600; }
.shop-main { min-width: 0; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-bottom: 1.75rem; }
.shop-result-count { font-size: .88rem; color: var(--text-lt); }
.shop-result-count strong { color: var(--text); }
.shop-toolbar-controls { display: flex; gap: .6rem; flex-wrap: wrap; }
.shop-search-box { display: flex; align-items: center; gap: .5rem; border: 1.5px solid var(--border); border-radius: 99px; padding: .5rem 1rem; color: var(--text-lt); background: var(--off-white); }
.shop-search-box input { border: none; background: none; outline: none; font-size: .85rem; font-family: inherit; color: var(--text); width: 200px; }
.shop-sort-select { border: 1.5px solid var(--border); border-radius: 99px; padding: .5rem 1rem; font-size: .85rem; font-family: inherit; color: var(--text); background: var(--off-white); }
.shop-search-btn { padding: .5rem 1.4rem; font-size: .85rem; }
.shop-products-grid { grid-template-columns: repeat(3, 1fr); margin: 0; max-width: none; }
.product-img { width: 100%; height: 100%; object-fit: cover; }
.product-name-link { display: block; }
.product-oos-overlay { position: absolute; inset: 0; background: rgba(26,107,60,.45); display: flex; align-items: center; justify-content: center; }
.product-oos-overlay span { background: var(--white); color: var(--text); font-size: 0.8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .35rem .8rem; border-radius: 99px; }
.btn-cart:disabled { background: var(--text-lt); cursor: not-allowed; }
.btn-cart:disabled:hover { background: var(--text-lt); transform: none; }
.shop-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; }
.shop-empty-icon { font-size: 2.5rem; margin-bottom: .75rem; }

/* -- PAGINATION -- */
.pagination { display: flex; justify-content: center; align-items: center; gap: .4rem; margin-top: 3rem; flex-wrap: wrap; }
.page-btn { min-width: 38px; height: 38px; padding: 0 .5rem; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: .85rem; font-weight: 600; color: var(--text-md); background: var(--white); transition: background var(--transition), color var(--transition), border-color var(--transition); }
.page-btn:hover:not(.disabled):not(.page-current):not(.page-ellipsis) { border-color: var(--primary); color: var(--primary); }
.page-btn.page-current { background: var(--primary); border-color: var(--primary); color: var(--white); }
.page-btn.disabled { color: var(--border); cursor: not-allowed; }
.page-btn.page-ellipsis { border: none; background: none; cursor: default; }

/* -- SCROLL-REVEAL -- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* -- AUTH PAGES -- */
.auth-page { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 120px); }
.auth-card { padding: 4rem 3.5rem; display: flex; flex-direction: column; justify-content: center; max-width: 480px; width: 100%; margin: 0 auto; }
.auth-header { margin-bottom: 2rem; }
.auth-header h2 { font-family: var(--font-display); font-size: 2rem; color: var(--text); margin: .4rem 0 .6rem; }
.auth-sub { color: var(--text-lt); font-size: .95rem; line-height: 1.6; }
.auth-aside { background: var(--primary); display: flex; align-items: center; justify-content: center; padding: 4rem 3rem; }
.auth-aside-inner { max-width: 360px; }
.auth-aside-inner h3 { font-family: var(--font-display); font-size: 1.6rem; color: var(--white); margin: .75rem 0 1.5rem; line-height: 1.3; }
.auth-benefits { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.auth-benefits li { display: flex; align-items: flex-start; gap: .85rem; color: rgba(255,255,255,.85); font-size: .95rem; line-height: 1.5; }
.benefit-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: .05rem; }
.auth-alert { padding: .75rem 1rem; border-radius: var(--radius-sm); font-size: .9rem; margin-bottom: 1rem; border-left: 3px solid; }
.auth-alert--error   { background: #fef2f2; color: #b91c1c; border-color: #b91c1c; }
.auth-alert--success { background: #f0fdf4; color: #065f46; border-color: #10b981; }
.auth-form { display: flex; flex-direction: column; gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group label { font-size: 0.9rem; font-weight: 600; color: var(--text-md); text-transform: uppercase; letter-spacing: .06em; }
.form-group input { padding: .75rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: .95rem; color: var(--text); background: var(--off-white); transition: border-color var(--transition), box-shadow var(--transition); width: 100%; }
.form-group input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,107,60,.1); background: var(--white); }
.form-group input::placeholder { color: var(--text-lt); }
.form-hint { font-size: 0.88rem; color: var(--text-lt); }
.form-hint a { color: var(--primary); }
.auth-switch { text-align: center; margin-top: 1.5rem; color: var(--text-lt); font-size: .9rem; }
.auth-switch a { color: var(--primary); font-weight: 600; }
.verify-icon { font-size:2.5rem; margin-bottom:.5rem; }

/* -- TOAST NOTIFICATIONS -- */
.toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1000; display: flex; flex-direction: column; gap: .6rem; max-width: 320px; }
.toast { background: var(--text); color: var(--white); padding: .85rem 1.1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-size: .85rem; font-weight: 500; opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast--success { background: var(--primary); }
.toast--error   { background: var(--red); }
.toast--info    { background: var(--primary); }

/* -- CART PAGE -- */
.cart-layout { max-width: 1200px; margin: 0 auto; padding: 3rem 2.5rem; display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: 1rem; }
.cart-item { display: grid; grid-template-columns: 72px 1fr 132px 90px 100px 36px; align-items: center; gap: 1.1rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.1rem; }
.cart-item-img { width: 72px; height: 72px; border-radius: var(--radius-sm); background: var(--off-white); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-icon { font-size: 2rem; }
.cart-item-info { min-width: 0; }
.cart-item-category { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-lt); margin-bottom: .2rem; }
.cart-item-variant { font-size: 0.86rem; color: var(--primary); font-weight: 600; margin-top: .15rem; }
.cart-item-name { font-weight: 600; color: var(--text); display: block; }
.cart-item-oos { display: inline-block; margin-top: .3rem; font-size: 0.8rem; font-weight: 700; color: var(--red); }
.cart-item-oos--low { color: var(--gold); }
.cart-item-price-mobile { display: none; font-size: 0.9rem; color: var(--text-lt); margin-top: .3rem; }
.cart-qty-form { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 99px; overflow: hidden; width: fit-content; }
.qty-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; color: var(--text-md); background: var(--off-white); transition: background var(--transition), color var(--transition); }
.qty-btn:hover:not(:disabled) { background: var(--primary); color: var(--white); }
.qty-btn:disabled { color: var(--border); cursor: not-allowed; }
.qty-input { width: 38px; text-align: center; border: none; background: none; font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--text); -moz-appearance: textfield; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-item-price { font-size: .88rem; color: var(--text-lt); text-align: right; }
.cart-item-total { font-weight: 700; color: var(--text); text-align: right; }
.cart-remove-form { display: flex; justify-content: center; }
.cart-remove-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--text-lt); transition: background var(--transition), color var(--transition); }
.cart-remove-btn:hover { background: #fef2f2; color: var(--red); }
.cart-summary { background: var(--off-white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; position: sticky; top: 6.5rem; }
.cart-summary h3 { font-family: var(--font-display); color: var(--text); margin-bottom: 1.25rem; }
.cart-summary-row { display: flex; justify-content: space-between; font-size: .9rem; color: var(--text-md); margin-bottom: .85rem; }
.cart-free { color: var(--primary); font-weight: 600; }
.cart-summary-divider { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
.cart-summary-total { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 1.5rem; }
.cart-continue-link { display: block; text-align: center; margin-top: 1rem; font-size: .85rem; font-weight: 600; color: var(--primary); }
.cart-empty { max-width: 480px; margin: 0 auto; padding: 5rem 1.5rem; text-align: center; }
.cart-empty-icon { font-size: 3.5rem; margin-bottom: 1rem; }
.cart-empty h2 { font-family: var(--font-display); color: var(--text); margin-bottom: .75rem; }
.cart-empty p { color: var(--text-lt); margin-bottom: 1.75rem; }

/* -- PRODUCT DETAIL -- */
.shop-banner--slim { padding: 1.5rem 2.5rem; }
.pdp-layout { max-width: 1200px; margin: 0 auto; padding: 3rem 2.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
.pdp-media { position: sticky; top: 6.5rem; }
.pdp-img-wrap { position: relative; background: linear-gradient(135deg, var(--primary-xs), #C8EFDA); border-radius: var(--radius-lg); aspect-ratio: 2/3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pdp-icon-placeholder { font-size: 7rem; filter: drop-shadow(0 12px 28px rgba(26,107,60,.15)); }
.pdp-img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumbs { display: flex; gap: .6rem; margin-top: .9rem; flex-wrap: wrap; }
.pdp-thumb { width: 64px; height: 64px; padding: 0; border-radius: var(--radius-md); border: 2px solid transparent; background: var(--primary-xs); overflow: hidden; cursor: pointer; flex-shrink: 0; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb.is-active { border-color: var(--primary); }
.pdp-thumb:hover { border-color: var(--primary); opacity: .9; }
.pdp-slide-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.9); color: var(--ink, #1a1a1a);
  font-size: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: background .15s, opacity .15s;
  z-index: 2;
}
.pdp-slide-arrow:hover { background: #fff; }
.pdp-slide-arrow--prev { left: 14px; }
.pdp-slide-arrow--next { right: 14px; }

/* -- Product image zoom: hover magnifier + fullscreen lightbox -- */
.pdp-zoom-btn {
  position: absolute; right: 14px; bottom: 14px; z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.92); color: var(--primary);
  font-size: 1.15rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.18);
  transition: transform .15s, background .15s;
}
.pdp-zoom-btn:hover { background: #fff; transform: scale(1.08); }

.pdp-zoom-lens {
  display: none; position: absolute; width: 160px; height: 160px;
  border: 2px solid var(--primary); background: rgba(255,255,255,.25);
  pointer-events: none; z-index: 4; border-radius: 8px;
}
.pdp-zoom-panel {
  display: none; position: fixed; top: 0; left: 0;
  background-color: var(--white);
  background-repeat: no-repeat; border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,.18); z-index: 30; border: 1px solid #eef2ef;
  pointer-events: none;
}

.pdp-lightbox {
  display: none; position: fixed; inset: 0; z-index: 5000;
  background: rgba(10, 20, 15, .94);
  align-items: center; justify-content: center;
}
.pdp-lightbox.is-open { display: flex; }
.pdp-lb-stage {
  position: relative; width: min(92vw, 900px); height: min(86vh, 900px);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: zoom-in;
}
.pdp-lb-stage.is-dragging { cursor: grabbing; }
.pdp-lb-img {
  max-width: 100%; max-height: 100%; object-fit: contain; user-select: none;
  transform-origin: center center; transition: transform .06s linear;
  will-change: transform;
}
.pdp-lb-img.is-zoomed { cursor: grab; }
.pdp-lb-close {
  position: absolute; top: 18px; right: 22px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.12); color: #fff; font-size: 1.8rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s;
}
.pdp-lb-close:hover { background: rgba(255,255,255,.22); }
.pdp-lb-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.12); color: #fff; font-size: 2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s;
}
.pdp-lb-arrow:hover { background: rgba(255,255,255,.22); }
.pdp-lb-arrow--prev { left: 18px; }
.pdp-lb-arrow--next { right: 18px; }
.pdp-lb-counter {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.75); font-size: .85rem; font-weight: 600; letter-spacing: .02em;
}
.pdp-lb-hint {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.85); font-size: 0.9rem; background: rgba(255,255,255,.1);
  padding: .45rem 1rem; border-radius: 999px; opacity: 0; transition: opacity .4s;
  pointer-events: none; white-space: nowrap;
}
.pdp-lb-hint.is-visible { opacity: 1; }
@media (max-width: 640px) {
  .pdp-lb-arrow { width: 40px; height: 40px; font-size: 1.5rem; }
  .pdp-lb-close { top: 10px; right: 10px; }
  .pdp-lb-hint { font-size: 0.8rem; padding: .35rem .8rem; }
}
.pdp-info { min-width: 0; }
.pdp-title { font-family: var(--font-display); color: var(--text); font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: .4rem 0 .8rem; line-height: 1.25; }
.pdp-short-desc { color: var(--text-lt); font-size: .98rem; margin-bottom: 1.5rem; }
.pdp-price-row { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 1.25rem; }
.pdp-price { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--text); }
.pdp-variants { margin-bottom: 1.5rem; }
.pdp-variants-label { font-size: 0.9rem; font-weight: 600; color: var(--text-md); margin-bottom: .6rem; }
.pdp-variant-options { display: flex; flex-wrap: wrap; gap: .6rem; }
.pdp-variant-pill { border: 1.5px solid var(--border); border-radius: 99px; padding: .55rem 1.1rem; font-size: .85rem; font-weight: 600; color: var(--text-md); cursor: pointer; transition: border-color var(--transition), background var(--transition), color var(--transition); display: flex; align-items: center; gap: .4rem; position: relative; }
.pdp-variant-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pdp-variant-pill:hover { border-color: var(--primary-lt); }
.pdp-variant-pill.selected { border-color: var(--primary); background: var(--primary-xs); color: var(--text); }
.pdp-variant-pill.disabled { opacity: .5; cursor: not-allowed; }
.pdp-variant-pill.disabled:hover { border-color: var(--border); }
.pdp-variant-pill small { font-size: 0.76rem; color: var(--red); font-weight: 600; }
.pdp-stock-status { font-size: .85rem; margin-bottom: 1.5rem; }
.pdp-stock-ok { color: var(--primary); font-weight: 600; }
.pdp-stock-oos { color: var(--red); font-weight: 600; }
.pdp-qty-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.pdp-qty-label { font-size: .85rem; font-weight: 600; color: var(--text-md); }
.pdp-qty-form { width: fit-content; }
.pdp-actions { display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.pdp-add-btn { flex: 1; justify-content: center; min-width: 200px; }
.pdp-add-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.pdp-buynow-btn {
  flex: 1;
  justify-content: center;
  min-width: 200px;
  background: linear-gradient(135deg, var(--gold), var(--gold-lt));
  box-shadow: 0 4px 16px rgba(212,160,23,.35);
}
.pdp-buynow-btn:hover { opacity: .92; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,160,23,.4); }
.pdp-buynow-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.pdp-wishlist-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.75rem;
  border-radius: 99px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--white);
  border: 1.5px solid var(--border-dk);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.pdp-wishlist-btn:hover { border-color: var(--primary); background: var(--primary-xs); }
.pdp-wishlist-btn.is-saved { background: var(--primary-xs); border-color: var(--primary); }
.pdp-cart-link { display: inline-flex; align-items: center; justify-content: center; padding: .85rem 1.75rem; border-radius: 99px; font-size: .95rem; font-weight: 600; border: 1.5px solid var(--border); color: var(--text); transition: border-color var(--transition), background var(--transition); }
.pdp-cart-link:hover { border-color: var(--primary); background: var(--primary-xs); }
.pdp-description { border-top: 1px solid var(--border); padding-top: 1.75rem; margin-bottom: 1rem; }
.pdp-description h3 { font-family: var(--font-display); color: var(--text); font-size: 1.1rem; margin-bottom: .6rem; }
.pdp-description p { color: var(--text-lt); font-size: .92rem; line-height: 1.75; }
.pdp-sku { font-size: 0.86rem; color: var(--text-lt); }

/* GNP-PDP-INGREDIENTS-SAFETY-V1 */
.pdp-facts { border-top: 1px solid var(--border); padding-top: 1.5rem; margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.pdp-facts-block h3 { font-family: var(--font-display); color: var(--text); font-size: 1rem; margin-bottom: .5rem; }
.pdp-facts-block p { color: var(--text-lt); font-size: .9rem; line-height: 1.7; white-space: pre-line; }
.pdp-facts-safety { background: var(--off-white, #F7F9F5); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.pdp-facts-safety h3 { font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-lt); margin-bottom: .4rem; }
.pdp-facts-safety p { font-size: .82rem; }

/* GNP-PDP-FAQ-V1 — per-product FAQ accordion (SEO/GEO audit, Section 8.6/13) */
.pdp-faq-section { padding: 2.5rem 2.5rem 3rem; }
.pdp-faq-inner { max-width: 820px; margin: 0 auto; }
.pdp-faq-title { font-family: var(--font-display); font-size: 1.4rem; color: var(--text); margin-bottom: 1.25rem; }
.pdp-faq-section .faq-item { border: 1px solid var(--border); border-radius: 10px; margin-bottom: .75rem; background: var(--paper, #fff); overflow: hidden; }
.pdp-faq-section .faq-item summary { cursor: pointer; list-style: none; padding: 1rem 1.25rem; font-weight: 600; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.pdp-faq-section .faq-item summary::-webkit-details-marker { display: none; }
.pdp-faq-section .faq-icon { flex-shrink: 0; font-size: 1.1rem; color: var(--primary, #2f9e58); transition: transform .2s ease; }
.pdp-faq-section .faq-item[open] .faq-icon { transform: rotate(45deg); }
.pdp-faq-section .faq-item[open] { border-color: var(--primary, #2f9e58); }
.pdp-faq-section .faq-answer { padding: 0 1.25rem 1.1rem; color: var(--text-lt); line-height: 1.7; font-size: .92rem; }

/* -- CHECKOUT -- */
.checkout-layout { max-width: 1200px; margin: 0 auto; padding: 3rem 2.5rem 5rem; display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: start; }
.checkout-form-card, .checkout-summary { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; }
.checkout-form-card h3, .checkout-summary h3 { font-family: var(--font-display); color: var(--text); margin-bottom: 1.25rem; font-size: 1.15rem; }
.checkout-field { margin-bottom: 1.1rem; }
.checkout-field label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text-md); margin-bottom: .4rem; }
.checkout-field input, .checkout-field textarea { width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: .7rem .9rem; font-family: inherit; font-size: .92rem; color: var(--text); transition: border-color var(--transition); }
.checkout-field input:focus, .checkout-field textarea:focus { outline: none; border-color: var(--primary); }
.checkout-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* GNP-DELIVERY-GEO-MAP-CSS-V1 */
.checkout-map-toggle { display: flex; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; }
.checkout-map-toggle-btn {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-md);
  font-size: 0.9rem;
  font-weight: 600;
  padding: .5rem .9rem;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.checkout-map-toggle-btn:hover { border-color: var(--primary); color: var(--primary); }
.checkout-map-wrap { margin-top: .8rem; }
.checkout-map {
  width: 100%;
  height: 320px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.checkout-map-hint {
  font-size: 0.86rem;
  color: var(--text-md);
  margin-top: .5rem;
}


.addr-picker { margin-bottom: 1.5rem; }
.addr-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.addr-picker-head > span { font-size: 0.9rem; font-weight: 600; color: var(--text-md); }
.addr-picker-manage { font-size: 0.88rem; color: var(--primary); text-decoration: none; font-weight: 600; }
.addr-picker-manage:hover { text-decoration: underline; }
.addr-picker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.addr-card { position: relative; display: flex; gap: .6rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: .85rem .9rem; cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.addr-card:hover { border-color: var(--primary); }
.addr-card input[type="radio"] { position: absolute; top: .85rem; right: .9rem; margin: 0; width: 16px; height: 16px; accent-color: var(--primary); }
.addr-card--selected { border-color: var(--primary); background: var(--ivory); }
.addr-card-body { width: 100%; padding-right: 1.4rem; }
.addr-card-top { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.addr-card-top strong { font-size: .88rem; color: var(--text); }
.addr-card-default { font-size: 0.73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: #f0fdf4; color: #15803d; padding: .1rem .4rem; border-radius: 999px; }
.addr-card-edit { font-size: 0.83rem; color: var(--primary); text-decoration: none; margin-left: auto; }
.addr-card-edit:hover { text-decoration: underline; }
.addr-card-text { font-size: 0.88rem; color: var(--text-md); line-height: 1.45; }
.addr-card--new .addr-card-top strong { color: var(--primary); }

.checkout-payment-option { border: 1.5px solid var(--primary); background: var(--primary-xs); border-radius: var(--radius-sm); padding: 1rem 1.1rem; display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.checkout-payment-option .pay-icon { font-size: 1.4rem; }
.checkout-payment-option strong { display: block; color: var(--text); font-size: .92rem; }
.checkout-payment-option span { font-size: 0.88rem; color: var(--text-lt); }
.checkout-coupon-field { margin-top: -.2rem; }
.checkout-coupon-row { display: flex; gap: .6rem; }
.checkout-coupon-row input { flex: 1; }
.checkout-coupon-feedback { font-size: 0.88rem; margin-top: .5rem; min-height: 1rem; }
.checkout-coupon-feedback--ok { color: var(--primary); font-weight: 600; }
.checkout-coupon-feedback--error { color: #c0392b; font-weight: 600; }
.checkout-summary-items { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 1.25rem; max-height: 320px; overflow-y: auto; }
.checkout-summary-item { display: flex; align-items: center; gap: .8rem; }
.checkout-summary-item-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--primary-xs), #C8EFDA); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; overflow: hidden; }
.checkout-summary-item-icon img { width: 100%; height: 100%; object-fit: cover; }
.checkout-summary-item-info { flex: 1; min-width: 0; }
.checkout-summary-item-name { font-size: .85rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.checkout-summary-item-meta { font-size: 0.84rem; color: var(--text-lt); }
.checkout-summary-item-total { font-size: .85rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.checkout-summary-row { display: flex; justify-content: space-between; font-size: .9rem; color: var(--text-md); margin-bottom: .85rem; }
.checkout-summary-divider { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
.checkout-summary-total { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 1.5rem; }

/* -- ORDER CONFIRMATION -- */
.confirmation-wrap { max-width: 640px; margin: 0 auto; padding: 4.5rem 1.5rem 5rem; text-align: center; }
.confirmation-icon { width: 86px; height: 86px; border-radius: 50%; background: var(--primary-xs); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; margin: 0 auto 1.5rem; }
.confirmation-wrap h1 { font-family: var(--font-display); color: var(--text); margin-bottom: .6rem; font-size: 1.9rem; }
.confirmation-wrap p { color: var(--text-lt); margin-bottom: .25rem; }
.confirmation-order-number { display: inline-block; background: var(--primary-xs); color: var(--text); font-weight: 700; padding: .5rem 1.25rem; border-radius: 99px; margin: 1.25rem 0 2rem; letter-spacing: .03em; }
.confirmation-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; text-align: left; margin-bottom: 2rem; }
.confirmation-card h3 { font-family: var(--font-display); color: var(--text); font-size: 1.05rem; margin-bottom: 1rem; }
.confirmation-items { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; }
.confirmation-item { display: flex; justify-content: space-between; font-size: .88rem; color: var(--text-md); }
.confirmation-item span:first-child { color: var(--text-lt); }
.confirmation-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* -- ORDER HISTORY / DETAIL -- */
.orders-list-wrap { max-width: 900px; margin: 0 auto; padding: 3rem 1.5rem 5rem; }
.order-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.25rem; }
.order-card-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.order-card-number { font-weight: 700; color: var(--text); }
.order-card-date { font-size: 0.88rem; color: var(--text-lt); }
.order-status-badge { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .3rem .75rem; border-radius: 99px; background: var(--primary-xs); color: var(--primary); }
.order-status-badge.cancelled, .order-status-badge.status-cancelled { background: #fef2f2; color: var(--red); }
.order-status-badge.status-confirmed  { background: #eff6ff; color: #1d4ed8; }
.order-status-badge.status-shipped    { background: #fffbeb; color: #b45309; }
.order-status-badge.status-delivered  { background: #f0fdf4; color: #15803d; }
.order-status-badge.status-pending    { background: var(--off-white); color: var(--text-lt); }
.order-status-badge.status-requested  { background: var(--off-white); color: var(--text-lt); }
.order-status-badge.status-pickup_scheduled { background: #eff6ff; color: #1d4ed8; }
.order-status-badge.status-picked_up  { background: #fffbeb; color: #b45309; }
.order-status-badge.status-inspecting { background: #f5f3ff; color: #6d28d9; }
.order-status-badge.status-approved   { background: #f0fdf4; color: #15803d; }
.order-status-badge.status-rejected   { background: #fef2f2; color: var(--red); }
.order-status-badge.status-refunded   { background: #ecfdf5; color: #047857; }
.order-status-badge.status-completed  { background: #f0fdf4; color: #15803d; }

/* -- ORDER TRACKING -- */
.track-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.75rem; margin-bottom: 1.25rem; }
.track-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 1.75rem; }
.track-steps { display: flex; flex-direction: column; gap: 0; }
.track-step { display: flex; align-items: flex-start; gap: 1rem; opacity: .35; }
.track-step.active { opacity: 1; }
.track-step.done   { opacity: 1; }
.track-icon-wrap { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.track-icon { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border); background: var(--white); display: flex; align-items: center; justify-content: center; color: var(--text-lt); transition: var(--transition); flex-shrink: 0; }
.track-step.done .track-icon { background: var(--primary); border-color: var(--primary); color: var(--white); }
.track-step.active .track-icon { background: var(--white); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px rgba(26,107,60,.12); }
.track-line { width: 2px; height: 40px; background: var(--border); margin: 4px 0; }
.track-step.done .track-line { background: var(--primary); }
.track-step.last .track-line { display: none; }
.track-text { display: flex; flex-direction: column; padding-top: .6rem; padding-bottom: 1.5rem; }
.track-step.last .track-text { padding-bottom: 0; }
.track-label { font-weight: 700; font-size: .9rem; color: var(--text); }
.track-sub { font-size: 0.88rem; color: var(--text-lt); margin-top: .15rem; }
.track-step.active .track-label { color: var(--primary); }
.track-cancelled { display: flex; align-items: center; gap: 1rem; color: var(--red); }
.track-cancelled .track-label { color: var(--red); font-weight: 700; font-size: .9rem; }
.track-cancelled .track-sub   { color: var(--text-lt); font-size: 0.88rem; }
.order-card-items { font-size: .85rem; color: var(--text-lt); margin-bottom: .75rem; }
.order-card-bottom { display: flex; justify-content: space-between; align-items: center; }
.order-card-total { font-weight: 700; color: var(--text); }
.orders-empty { text-align: center; padding: 4rem 1.5rem; color: var(--text-lt); }
.btn-track { display: inline-flex; align-items: center; gap: .4rem; font-size: 0.88rem; font-weight: 600; padding: .45rem 1rem; border-radius: var(--radius-sm); background: var(--primary-xs); color: var(--primary); border: 1.5px solid var(--border); text-decoration: none; transition: var(--transition); }
.btn-track:hover { background: var(--primary); color: var(--white); border-color: var(--primary); }

/* -- CAMPAIGNS -- */
.campaigns-section { padding: 3rem 0 1rem; background: var(--white); }
.campaigns-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.25rem; }
.campaigns-section-title { font-family: var(--font-display); font-size: 1.6rem; color: var(--text); margin: 0; line-height: 1.2; }
.campaigns-see-all { font-size: .9rem; font-weight: 600; color: var(--primary); text-decoration: none; white-space: nowrap; }
.campaigns-see-all:hover { text-decoration: underline; }
.campaigns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; margin-bottom: 1rem; }
.campaign-strip-card { position: relative; border-radius: var(--radius-md); overflow: hidden; min-height: 180px; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.campaign-strip-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.campaign-strip-bg { position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--campaign-color) 85%, #000), color-mix(in srgb, var(--campaign-color) 60%, #000)); z-index: 0; }
.campaign-strip-bg--img { background-size: cover; background-position: center; }
.campaign-strip-badge { position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,.95); color: var(--campaign-color); font-weight: 800; font-size: 0.88rem; padding: .3rem .75rem; border-radius: 999px; letter-spacing: .02em; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.campaign-strip-body { position: relative; z-index: 2; padding: 1.25rem 1.25rem .5rem; color: #fff; }
.campaign-strip-emoji { font-size: 2.2rem; margin-bottom: .4rem; }
.campaign-strip-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: #fff; line-height: 1.25; margin-bottom: .2rem; }
.campaign-strip-tagline { font-size: 0.88rem; color: rgba(255,255,255,.85); margin-bottom: .5rem; }
.campaign-strip-countdown { font-size: 0.86rem; font-weight: 700; color: rgba(255,255,255,.9); letter-spacing: .05em; }
.campaign-strip-cta { position: relative; z-index: 2; display: block; background: rgba(255,255,255,.15); border-top: 1px solid rgba(255,255,255,.2); color: #fff; font-weight: 700; font-size: .85rem; padding: .6rem 1.25rem; text-align: right; backdrop-filter: blur(4px); transition: background .2s; }
.campaign-strip-card:hover .campaign-strip-cta { background: rgba(255,255,255,.25); }
.campaign-card { display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; background: var(--white); }
.campaign-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.campaign-card-banner { position: relative; height: 160px; background: linear-gradient(135deg, color-mix(in srgb, var(--campaign-color) 85%, #000), color-mix(in srgb, var(--campaign-color) 55%, #000)); display: flex; align-items: center; justify-content: center; }
.campaign-card-banner img { width: 100%; height: 100%; object-fit: cover; }
.campaign-card-emoji { font-size: 3.5rem; }
.campaign-badge { position: absolute; top: .75rem; left: .75rem; background: rgba(255,255,255,.95); color: var(--campaign-color); font-weight: 800; font-size: 0.86rem; padding: .25rem .7rem; border-radius: 999px; }
.campaign-status-pill { position: absolute; top: .75rem; right: .75rem; font-size: 0.8rem; font-weight: 700; padding: .2rem .65rem; border-radius: 999px; }
.campaign-status-pill.live     { background: #dcfce7; color: #16a34a; }
.campaign-status-pill.upcoming { background: #dbeafe; color: #2563eb; }
.campaign-status-pill.ended    { background: #f1f5f9; color: #64748b; }
.campaign-card-body { padding: 1.1rem 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .35rem; }
.campaign-card-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text); line-height: 1.25; }
.campaign-card-tagline { font-size: .85rem; color: var(--text-lt); }
.campaign-card-countdown { display: flex; align-items: center; gap: .2rem; font-size: 0.86rem; font-weight: 700; color: var(--campaign-color); margin-top: .25rem; }
.cntd-unit { display: flex; flex-direction: column; align-items: center; }
.cntd-n    { font-size: .9rem; font-weight: 800; }
.cntd-l    { font-size: 0.7rem; font-weight: 500; color: var(--text-lt); }
.cntd-sep  { font-weight: 800; color: var(--campaign-color); align-self: flex-start; margin-top: .05rem; }
.campaign-card-cta { display: inline-block; font-size: 0.9rem; font-weight: 700; color: var(--campaign-color); margin-top: auto; padding-top: .5rem; }
.campaign-hero { position: relative; min-height: 340px; overflow: hidden; display: flex; align-items: stretch; }
.campaign-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.campaign-hero-gradient { background: linear-gradient(135deg, color-mix(in srgb, var(--campaign-color) 90%, #000 20%), color-mix(in srgb, var(--campaign-color) 65%, #000 40%)); }
.campaign-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 70%, transparent); }
.campaign-hero-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 3rem 2rem; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.campaign-hero-left { flex: 1; max-width: 580px; }
.campaign-hero-emoji { font-size: 3rem; margin-bottom: .75rem; }
.campaign-hero-discount-badge { display: inline-block; background: var(--campaign-color); color: #fff; font-weight: 800; font-size: .85rem; padding: .35rem 1rem; border-radius: 999px; letter-spacing: .04em; margin-bottom: .75rem; }
.campaign-hero-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; color: #fff; line-height: 1.15; margin: 0 0 .75rem; text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.campaign-hero-tagline { font-size: 1.05rem; color: rgba(255,255,255,.88); margin: 0 0 1.25rem; line-height: 1.5; }
.campaign-coupon-box { display: inline-flex; align-items: center; gap: .75rem; background: rgba(255,255,255,.15); border: 1.5px dashed rgba(255,255,255,.6); border-radius: var(--radius-sm); padding: .6rem 1rem; margin-bottom: 1.25rem; backdrop-filter: blur(6px); }
.campaign-coupon-label { font-size: 0.86rem; color: rgba(255,255,255,.8); }
.campaign-coupon-code { font-family: monospace; font-size: 1.05rem; font-weight: 800; color: #fff; letter-spacing: .08em; }
.campaign-coupon-copy { background: rgba(255,255,255,.9); color: var(--campaign-color); border: none; border-radius: var(--radius-sm); padding: .25rem .7rem; font-size: 0.86rem; font-weight: 700; cursor: pointer; transition: background .2s; }
.campaign-coupon-copy:hover { background: #fff; }
.campaign-hero-cta { display: inline-flex; align-items: center; gap: .5rem; }
.campaign-hero-right { flex-shrink: 0; }
.campaign-countdown-wrapper { background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.25); border-radius: var(--radius-md); padding: 1.5rem 1.75rem; text-align: center; backdrop-filter: blur(8px); }
.campaign-countdown-title { font-size: 0.9rem; font-weight: 700; color: rgba(255,255,255,.85); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1rem; }
.campaign-countdown { display: flex; align-items: flex-start; gap: .5rem; }
.countdown-unit { display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 52px; background: rgba(255,255,255,.15); border-radius: var(--radius-sm); padding: .5rem .4rem .35rem; }
.countdown-n { font-family: var(--font-display); font-size: 1.8rem; font-weight: 900; color: #fff; line-height: 1; }
.countdown-l { font-size: 0.7rem; font-weight: 600; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .05em; }
.countdown-sep { font-size: 1.6rem; font-weight: 900; color: rgba(255,255,255,.6); line-height: 1; margin-top: .4rem; }

/* -- PRODUCT REVIEWS -- */
.pdp-reviews-section { background: var(--off-white); padding: 3rem 0; margin-top: 2rem; }
.pdp-reviews-inner { max-width: 860px; margin: 0 auto; padding: 0 1.5rem; }
.pdp-reviews-header { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 2rem; border-bottom: 1.5px solid var(--border); padding-bottom: 1.25rem; }
.pdp-reviews-title { font-size: 1.4rem; font-weight: 700; color: var(--text); margin: 0; }
.pdp-reviews-summary { display: flex; align-items: center; gap: .5rem; }
.pdp-stars-display .star, .pdp-review-stars .star { font-size: 1.2rem; color: #d1d5db; }
.pdp-stars-display .star.filled, .pdp-review-stars .star.filled { color: #f59e0b; }
.pdp-avg-label { color: var(--text-lt); font-size: .9rem; }
.pdp-review-form-wrap { margin-bottom: 2rem; }
.pdp-review-gate { color: var(--text-lt); font-size: .95rem; }
.pdp-review-gate a { color: var(--primary); font-weight: 600; }
.pdp-review-gate-ok { color: var(--primary); font-weight: 600; font-size: .9rem; margin-bottom: .5rem; }
.pdp-review-error { color: #dc2626; font-size: .9rem; margin-bottom: .75rem; }
.pdp-review-form-card { background: var(--white); border: 1.5px solid var(--border); border-radius: 12px; padding: 1.5rem; }
.pdp-review-form-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 0 0 1rem; }
.pdp-review-form-card textarea { width: 100%; padding: .75rem; border: 1.5px solid var(--border); border-radius: 8px; font-family: inherit; font-size: .92rem; color: var(--text-md); resize: vertical; box-sizing: border-box; margin-bottom: 1rem; }
.pdp-review-form-card .btn-primary { width: 100%; }
.pdp-star-picker { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .25rem; margin-bottom: 1rem; }
.pdp-star-picker input { display: none; }
.pdp-star-picker label { font-size: 2rem; color: #d1d5db; cursor: pointer; transition: color .15s; }
.pdp-star-picker label:hover, .pdp-star-picker label:hover ~ label, .pdp-star-picker input:checked ~ label { color: #f59e0b; }
.pdp-review-list { display: flex; flex-direction: column; gap: 1rem; }
.pdp-review-card { background: var(--white); border: 1.5px solid var(--border); border-radius: 10px; padding: 1.1rem 1.25rem; }
.pdp-review-card--yours { border-color: #bbf7d0; background: #f0fdf4; }
.pdp-review-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.pdp-review-author { font-weight: 600; font-size: .92rem; color: var(--text); }
.pdp-review-date { font-size: 0.9rem; color: #9ca3af; }
.pdp-review-body { margin: .5rem 0 0; font-size: .92rem; color: var(--text-md); line-height: 1.6; }
.pdp-review-empty { color: #9ca3af; font-size: .95rem; text-align: center; padding: 2rem 0; }

/* -- RESPONSIVE -- */
@media (max-width: 1320px) {
  .nav { padding: .75rem 1.5rem; gap: 1rem; }
  .nav-links { gap: .7rem; font-size: 0.88rem; }
  .nav-search { max-width: 120px; padding: .4rem .75rem; }
  .nav-search input { max-width: 70px; }
  .nav-actions { gap: .6rem; }
}

@media (max-width: 1195px) {
  .nav { padding: .65rem 1.25rem; gap: .8rem; }
  .nav-links { gap: .55rem; font-size: 0.86rem; }
  .nav-search { display: none; }
  .nav-actions { gap: .5rem; }
}

@media (max-width: 1024px) {
  .nav { padding: .6rem 1.1rem; gap: .7rem; }
  .nav-links { gap: .5rem; font-size: 0.84rem; }
  .nav-search { display: none; }
  .nav-account-link span { display: none; }
  .nav-account-link { padding: .5rem; }
  .products-grid, .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .trust-strip { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-right { display: none; }
  .hero-left { padding: 4rem 3rem; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-sidebar { position: static; min-width: 0; }
  .shop-products-grid { grid-template-columns: repeat(2, 1fr); }
  .company-banner-inner { grid-template-columns: 1fr; }
  .banner-visual { display: none; }
  .checkout-layout { grid-template-columns: 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}
@media (max-width: 900px) {
  .nav { padding: .55rem .9rem; gap: .5rem; }
  .nav-links { gap: .3rem; font-size: 0.78rem; }
  .nav-actions { gap: .35rem; }
}
@media (max-width: 910px) {
  .nav-links, .btn-dealer { display: none; }
  .nav-hamburger { display: flex; }
  .topbar { display: none; }
}
@media (max-width: 768px) {
  .topbar { display: none; }
  .nav { padding: .8rem 1.25rem; }
  .nav-links, .btn-dealer, .nav-search { display: none; }
  .nav-hamburger { display: flex; }
  .nav-logo-img { height: 38px; }
  .nav-logo-sub { display: none; }
  .nav-logo-main { font-size: 1.3rem; }
  section { padding: 3.5rem 1.25rem; }
  .hero-slider { height: auto !important; aspect-ratio: 4 / 3; }
  .hero-slides { min-height: 0 !important; }
  .hero-slide-content { padding: 0 6% !important; justify-content: flex-start !important; }
  .hero-slide-inner { max-width: 82% !important; margin: 0 !important; text-align: left !important; }
  .hero-slide-eyebrow { font-size: 0.76rem !important; margin-bottom: 8px !important; }
  .hero-slide-title { font-size: 1.5rem !important; margin-bottom: 8px !important; }
  .hero-slide-sub { font-size: 0.9rem !important; margin-bottom: 16px !important; }
  .hero-slide-btn { padding: 10px 18px !important; font-size: 0.9rem !important; }
  .hero-slide-btn--ghost { display: none !important; } /* one clear CTA on mobile, not two competing buttons */
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .blog-grid { grid-template-columns: 1fr; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); padding: 1.5rem 1.25rem; }
  .trust-item:last-child { grid-column: span 2; }
  .newsletter-form { flex-direction: column; }
  .promo-inner { grid-template-columns: 1fr; }
  .promo-cosmetic-placeholder { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .hero-stats { gap: 1.5rem; }
  .hero-h1 { font-size: 2.2rem; }
  .hero-cat-pills { display: none; }
  .shop-banner {
    background: var(--white);
    padding: 1.1rem 1.25rem .85rem;
    border-bottom: 1px solid var(--border);
  }
  .shop-banner h1 { color: var(--text); font-size: 1.3rem; margin-bottom: 0; }
  .shop-banner p, .shop-banner .section-eyebrow { display: none; }
  .shop-breadcrumb { display: none; }
  .shop-layout { padding: 1.25rem 1.25rem 2rem; gap: 1rem; }  .shop-toolbar { flex-direction: column; align-items: stretch; border: none; background: none; box-shadow: none; padding: 0; margin-bottom: 1.1rem; gap: .6rem; }
  .shop-result-count { font-size: 0.9rem; color: var(--text-lt); }
  .shop-toolbar-controls { flex-direction: row; flex-wrap: wrap; }
  .shop-search-box { flex: 1 1 100%; background: var(--white); }
  .shop-search-box input { width: 100%; }
  .shop-sort-select { flex: 1 1 auto; background: var(--white); }
  .shop-search-btn { flex: 0 0 auto; }
  .shop-products-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .voucher-section { padding: 1.1rem 1.25rem; }

  /* Category filter: vertical stacked box -> clean horizontal chip scroller on mobile */
  .shop-sidebar { padding: .7rem 0 .9rem; border: none; background: none; margin-bottom: .25rem; }
  .shop-sidebar h3 { display: none; }
  .shop-cat-filter {
    flex-direction: row;
    overflow-x: auto;
    gap: .5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -1.25rem;
    padding: 0 1.25rem 4px;
  }
  .shop-cat-filter::-webkit-scrollbar { display: none; }
  .shop-cat-filter li { flex: 0 0 auto; }
  .shop-cat-filter a {
    white-space: nowrap;
    padding: .5rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 99px;
    background: var(--white);
  }
  .shop-cat-filter a:hover { background: var(--border); }
  .shop-cat-filter a.active { background: var(--primary); border-color: var(--primary); color: var(--white); }
  .company-banner { min-height: auto; }
  .company-banner-inner { padding: 2.5rem 1.25rem; }
  .banner-title { font-size: 1.9rem; }
  .banner-stats { gap: 1.25rem; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-card { padding: 2.5rem 1.5rem; }
  .form-row { grid-template-columns: 1fr; }
  .pdp-layout { grid-template-columns: 1fr; padding: 2rem 1.25rem; gap: 2rem; }
  .pdp-media { position: static; }
  .checkout-layout { padding: 2rem 1.25rem; }
  .checkout-field-row { grid-template-columns: 1fr; }
  .cart-layout { padding: 2rem 1.25rem; }
  .cart-item { grid-template-columns: 60px 1fr auto; grid-template-areas: "img info remove" "img qty qty" "img total total"; row-gap: .6rem; }
  .cart-item-img { grid-area: img; width: 60px; height: 60px; }
  .cart-item-info { grid-area: info; }
  .cart-qty-form { grid-area: qty; }
  .cart-item-total { grid-area: total; text-align: left; }
  .cart-remove-form { grid-area: remove; }
  .cart-item-price { display: none; }
  .cart-item-price-mobile { display: block; }
  .campaign-hero-inner { flex-direction: column; padding: 2rem 1.25rem; }
  .campaign-hero-right { width: 100%; }
  .campaign-countdown { justify-content: center; }
  .campaigns-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .campaigns-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr 1fr; }
}

/* -- PROFILE PAGE -- */
.profile-page { max-width: 900px; margin: 0 auto; padding: 3rem 2.5rem 5rem; }
.profile-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2.5rem; padding: 2rem; background: linear-gradient(135deg, var(--primary), var(--primary-lt)); border-radius: var(--radius-lg); }
.profile-avatar { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--white); flex-shrink: 0; }
.profile-header-info { flex: 1; }
.profile-header-info h1 { font-family: var(--font-display); color: var(--white); font-size: 1.8rem; margin-bottom: .25rem; }
.profile-header-info p { color: rgba(255,255,255,.75); font-size: .95rem; }
.profile-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; margin-bottom: 1.5rem; }
.profile-card h3 { font-family: var(--font-display); color: var(--text); font-size: 1.1rem; margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.profile-info-row { display: flex; justify-content: space-between; font-size: .9rem; padding: .65rem 0; border-bottom: 1px solid var(--off-white); }
.profile-info-row:last-child { border-bottom: none; }
.profile-info-label { color: var(--text-lt); font-weight: 500; }
.profile-info-val { color: var(--text); font-weight: 600; }

/* -- CONTACT PAGE -- */
.contact-hero { background: linear-gradient(135deg, var(--primary), var(--primary-lt)); padding: 4rem 2.5rem; }
.contact-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 2.8rem); color: var(--white); margin-bottom: .75rem; }
.contact-hero p { color: rgba(255,255,255,.75); font-size: 1.05rem; max-width: 540px; }
.contact-layout { max-width: 1200px; margin: 0 auto; padding: 4rem 2.5rem 5rem; display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; align-items: start; }
.contact-info-card { background: var(--off-white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; }
.contact-info-card h3 { font-family: var(--font-display); color: var(--text); margin-bottom: 1.5rem; }
.contact-item { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.25rem; }
.contact-icon { width: 40px; height: 40px; background: var(--primary-xs); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; }
.contact-item-text strong { display: block; color: var(--text); font-size: .9rem; margin-bottom: .15rem; }
.contact-item-text span { color: var(--text-lt); font-size: .85rem; }
.contact-form-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow-sm); }
.contact-form-card h3 { font-family: var(--font-display); color: var(--text); margin-bottom: 1.75rem; }

/* -- Shared photo upload buttons (Gallery / Camera) -- */
/* Used on: return-request photo, review photo, profile photo, etc. */
.return-photo-btns { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.return-photo-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: 8px; font-size: .85rem; font-weight: 500; cursor: pointer;
  border: 1.5px solid var(--border-color, #d1d5db); background: #f9fafb; color: var(--slate, #374151);
  transition: border-color .15s, background .15s; font-family: inherit;
}
.return-photo-btn:hover { border-color: var(--green-dark, #2d6a4f); background: #f0fdf4; }
.return-photo-btn--camera { border-color: #f59e0b; background: #fffbeb; color: #92400e; }
.return-photo-btn--camera:hover { background: #fef3c7; }

/* -- Modern drag-and-drop upload zone -- */
.gnp-upload {
  position: relative;
  width: 100%;
  max-width: 260px;
  min-height: 150px;
  border: 1.5px dashed #cbd5c0;
  border-radius: 16px;
  background: #fafbf8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.gnp-upload:hover { border-color: var(--green-dark, #2d6a4f); background: #f3f9f0; }
.gnp-upload:active { transform: scale(.98); }
.gnp-upload--dragover {
  border-color: var(--green-dark, #2d6a4f);
  background: #eafbe7;
  box-shadow: 0 0 0 4px rgba(45,106,79,.12);
}
.gnp-upload--has-image { border-style: solid; border-color: #e2e5df; }
.gnp-upload__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 1.4rem 1rem;
  color: #7c8577;
  text-align: center;
  pointer-events: none;
}
.gnp-upload__icon {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #eef3ea;
  font-size: 1.15rem;
  transition: background .18s ease, transform .18s ease;
}
.gnp-upload--dragover .gnp-upload__icon { background: #d7f3d1; transform: translateY(-2px) scale(1.08); }
.gnp-upload__title { font-size: 0.9rem; font-weight: 600; color: #3d4638; }
.gnp-upload__hint { font-size: 0.8rem; color: #97a08c; }
.gnp-upload__img {
  width: 100%; height: 150px;
  object-fit: cover;
  display: block;
}
.gnp-upload__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 45%);
  opacity: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: .5rem;
  transition: opacity .16s ease;
}
.gnp-upload--has-image:hover .gnp-upload__overlay,
.gnp-upload--has-image:focus-within .gnp-upload__overlay { opacity: 1; }
.gnp-upload__change {
  font-size: 0.8rem; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.18);
  border: none; border-radius: 8px;
  padding: .3rem .55rem;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.gnp-upload__remove {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.92);
  color: #c0392b;
  font-size: .85rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform .12s ease;
}
.gnp-upload__remove:hover { transform: scale(1.1); }
.gnp-upload__camera-btn {
  position: absolute; top: .5rem; right: .5rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.92);
  font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  transition: transform .12s ease;
}
.gnp-upload__camera-btn:hover { transform: scale(1.08); }
.gnp-upload--has-image .gnp-upload__camera-btn { top: .5rem; right: .5rem; }

/* GNP-SIDEBAR-BUG-FIX-V1 */
/* The block above this marker used to be broken CSS: it LOOKED commented
   out (opening /* then a second /* ... *​/ that fooled the eye) but CSS
   comments don't nest, so the real comment closed after the header line
   and the whole @media (max-width: 900px) sidebar block was silently
   live — forcing a permanent 240px left sidebar + "Menu" label on every
   mobile visit. Replaced with a clean rule: on mobile, .nav-links (the
   desktop horizontal list) is hidden entirely — mobile navigation is the
   drawer (#navDrawer) + bottom tab bar, which already work correctly. */
@media (max-width: 900px) {
  .nav-links { display: none !important; }
}

/* -- Animated GNP logo letters (nav + mobile drawer) -- */
.nav-logo-main { display: inline-flex; }
.nav-logo-main span {
  display: inline-block;
  transition: color var(--transition), transform var(--transition);
}
.nav-logo-main span:nth-child(2) { color: var(--accent); }
.nav-logo:hover .nav-logo-main span:nth-child(1) { transform: translateY(-2px); }
.nav-logo:hover .nav-logo-main span:nth-child(2) { transform: translateY(-4px); color: var(--accent-lt); }
.nav-logo:hover .nav-logo-main span:nth-child(3) { transform: translateY(-2px); }
.mobile-nav-brand-letters span:nth-child(2) { color: #1F8452; }

/* -- Illustrated hero-right art (replaces emoji placeholder) -- */
.hero-art {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 20px 40px rgba(26,107,60,.15));
  animation: float 4s ease-in-out infinite;
}

/* GNP logo letter colors: G=blue, N=green, P=blue */
.nav-logo-main span:nth-child(1) { color: #2E8CD1; }
.nav-logo-main span:nth-child(2) { color: var(--primary); }
.nav-logo-main span:nth-child(3) { color: #2E8CD1; }
.mobile-nav-brand-letters span:nth-child(1) { color: #2E8CD1; }
.mobile-nav-brand-letters span:nth-child(3) { color: #2E8CD1; }

/* FINAL OVERRIDE — force horizontal top nav, kill sidebar layout for good */
@media (min-width: 911px) {
  body { padding-left: 0 !important; }
  .nav-links {
    position: static !important;
    width: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: .95rem !important;
    padding: 0 !important;
    background: none !important;
    border-right: none !important;
    overflow: visible !important;
  }
  .nav-links::before { content: none !important; }
  .nav-links a {
    width: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
}

/* ============================================================
   GNP 2026 REDESIGN — Anton display type + pill/chip system
   Matches the "gnp_shop-2" mockup. Appended block, sits on top
   of the design tokens above so it cascades to every page that
   already uses var(--font-display) / .btn-primary / .product-card
   etc. Shop-page-specific rules are grouped at the bottom.
   ============================================================ */

/* -- Anton headlines need caps + tighter tracking to read well -- */
.nav-logo-main, .banner-title, .banner-stat-num, .hero-h1, .hero-stat-num,
.section-title, .blog-title, .newsletter h2, .footer-brand h3,
.mobile-nav-brand, .coming-soon h1, .shop-banner h1, .voucher-section-head h2,
.voucher-card-amount, .shop-sidebar h3, .auth-header h2, .auth-aside-inner h3,
.cart-summary h3, .cart-empty h2, .pdp-title, .pdp-description h3,
.checkout-form-card h3, .checkout-summary h3, .confirmation-wrap h1,
.confirmation-card h3, .campaigns-section-title, .campaign-strip-name,
.campaign-card-name, .campaign-hero-title, .profile-header-info h1,
.profile-card h3, .contact-hero h1, .contact-info-card h3,
.contact-form-card h3, .cat-card-title {
  text-transform: uppercase;
  letter-spacing: .01em;
  font-weight: 400; /* Anton is already a black weight */
}

/* -- Buttons: full pill shape everywhere, mockup style -- */
.btn-primary, .btn-dealer {
  border-radius: 100px;
}

/* -- Nav: circular bordered icon buttons + pill cart, per mockup -- */
.nav-icon-btn {
  width: 38px; height: 38px;
  border: 1.4px solid var(--text);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  position: relative;
  background: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.nav-icon-btn:hover { background: var(--primary); border-color: var(--primary); color: var(--white); }
.nav-icon-btn .badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--accent); color: var(--white);
  font-size: 0.7rem; font-weight: 800;
  width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--white);
}
a.nav-icon-btn[title="Cart"] {
  width: auto; border-radius: 100px; border: none;
  background: var(--text); color: var(--white);
  padding: 6px 14px 6px 8px; gap: 8px;
}
a.nav-icon-btn[title="Cart"]::before {
  content: "Cart";
  font-size: 0.86rem; font-weight: 700;
  order: 2;
}
a.nav-icon-btn[title="Cart"] svg { order: 1; }
a.nav-icon-btn[title="Cart"] .badge {
  order: 3; position: static; margin-left: 2px;
  background: var(--accent); border: none;
}
a.nav-icon-btn[title="Cart"]:hover { background: var(--primary-lt); color: var(--white); }
.nav-account-link {
  display: flex; align-items: center; gap: .4rem;
  border: 1.4px solid var(--text); border-radius: 100px;
  padding: 6px 14px 6px 6px;
  color: var(--text); font-size: 0.9rem; font-weight: 700;
}
.nav-account-link svg { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--primary-xs); }
.nav-account-link:hover { border-color: var(--primary); color: var(--primary); }
.nav-hamburger { border-radius: 50%; }

/* -- Voucher / misc pill buttons -- */
.voucher-card-claim { border-radius: 100px; }

/* ============================================================
   SHOP PAGE — chip row, accordion filters, mockup product tiles
   ============================================================ */

/* Quick category chip row (horizontal scroll pills) */
.shop-chip-row {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 0 0 1.5rem;
  max-width: 1200px; margin: 0 auto;
  -ms-overflow-style: none; scrollbar-width: none;
}
.shop-chip-row::-webkit-scrollbar { display: none; }
.shop-chip {
  flex: none;
  border: 1.4px solid var(--border);
  background: var(--primary-xs);
  border-radius: 100px;
  padding: 9px 18px;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--text-md);
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.shop-chip:hover { border-color: var(--primary); color: var(--primary); }
.shop-chip.active { background: var(--text); border-color: var(--text); color: var(--white); }

/* Sidebar as accordion cards, mockup style */
.shop-sidebar { background: none; border: none; padding: 0; }
.shop-sidebar-group summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .95rem; font-weight: 800; color: var(--text);
  padding: 1rem 0; border-bottom: 1px solid var(--border);
}
.shop-sidebar-group summary::-webkit-details-marker { display: none; }
.shop-sidebar-group summary::after {
  content: "›"; font-size: 1.1rem; color: var(--text-lt);
  transform: rotate(90deg); transition: transform .15s;
}
.shop-sidebar-group[open] summary::after { transform: rotate(270deg); }
.shop-cat-filter { padding: .9rem 0 .4rem; gap: .35rem; }
.shop-cat-filter a { border-radius: 6px; }

/* Product tiles: flat card background + pill tag, per mockup */
.product-img-wrap {
  background: var(--primary-xs);
  aspect-ratio: 2/3;
}
.product-sticker {
  border-radius: 100px;
  padding: .3rem .7rem;
}
.product-card { border-radius: var(--radius-md); }

@media (max-width: 960px) {
  .shop-chip-row { padding: 0 0 1rem; }
}

/* GNP-FULL-FIX-V1 */
/* Hide the duplicate top-nav cart/account icons on mobile —
   the bottom mobile nav already has its own cart/wishlist/account icons,
   so showing both was cluttered and not how a real shop app looks. */
@media (max-width: 900px) {
  .nav-account-link,
  a.nav-icon-btn[title="Cart"] {
    display: none !important;
  }
}

/* Circular bordered icon buttons + pill-shaped cart, matching the mockup */
.nav-icon-btn {
  border: 1.4px solid var(--text) !important;
  background: none !important;
  color: var(--text) !important;
}
.nav-icon-btn:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
a.nav-icon-btn[title="Cart"] {
  width: auto !important;
  border-radius: 100px !important;
  border: none !important;
  background: var(--text) !important;
  color: #fff !important;
  padding: 6px 14px 6px 8px !important;
  gap: 8px !important;
  display: flex !important;
  align-items: center !important;
}
a.nav-icon-btn[title="Cart"]::before {
  content: "Cart";
  font-size: 0.86rem;
  font-weight: 700;
  order: 2;
}
a.nav-icon-btn[title="Cart"] svg { order: 1; }
a.nav-icon-btn[title="Cart"] .badge {
  order: 3;
  position: static !important;
  background: var(--accent) !important;
  border: none !important;
  margin-left: 2px;
}
.nav-account-link {
  border: 1.4px solid var(--text) !important;
  border-radius: 100px !important;
  color: var(--text) !important;
}
.nav-account-link:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Pill-shaped buttons sitewide, matching the mockup */
.btn-primary, .btn-dealer {
  border-radius: 100px !important;
}

/* GNP-TOPBAR-ICONS-V1 */
/* Replaces the old "hide on mobile" rule. Instead: show Account + Cart as
   small icon-only circular buttons in the top bar next to the hamburger
   (matching the reference screenshot), hide their text labels, hide the
   inline search bar and Get Dealership button on mobile (search already
   has its own dedicated mobile bar; dealership stays in the drawer menu). */
.cart-pill { border-radius: 100px !important; }

@media (max-width: 900px) {
  .nav-search, .btn-dealer { display: none !important; }

  .nav-account-link, .cart-pill {
    display: flex !important;
    width: 38px; height: 38px;
    padding: 0 !important;
    justify-content: center; align-items: center;
    border-radius: 50% !important;
    background: none !important;
    border: 1.4px solid var(--text);
    color: var(--text);
    font-size: 0; /* collapses text labels/nodes without touching the icons */
  }
  .nav-account-link span { display: none !important; }
  .cart-pill-bag { background: none !important; width: auto; height: auto; }
  .cart-pill { position: relative; }
  .cart-pill-badge {
    font-size: 12px !important;
    position: absolute !important;
    top: -4px; right: -4px;
  }
  .nav-actions { gap: .5rem !important; }
}

/* GNP-BADGE-ANCHOR-FIX-V1 */
/* Badge now anchors to .cart-pill directly (position:relative added on the
   icon itself), not the whole .nav-actions bar — that's why the "0" badge
   was floating over the hamburger instead of sitting on the cart icon. */

/* GNP-MOCKUP-REAL-V1 */
/* Nav: center the logo, links left, actions right — matches mockup layout.
   CSS-only reorder via grid-column; DOM order untouched so no JS breaks. */
@media (min-width: 901px) {
  .nav {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .nav-links { grid-column: 1; justify-self: start; }
  .nav-logo { grid-column: 2; justify-self: center; }
  .nav-actions { grid-column: 3; justify-self: end; }
}

/* GNP-HERO-NO-WHITE-WASH-V2 — FOUND THE REAL SOURCE. This whole section
   used to force .hero-slide-bg's background-image to a PALE CREAM/WHITE
   gradient (#F3F8F4 / #E7F3EA / #DCEEE2) via !important, layered directly
   behind the photo. !important always wins regardless of source order, so
   this silently overrode the proper dark-green fallback that home.html's
   own <style> block defines for .hero-slide-bg — meaning ANY time the
   photo layer didn't fully paint (still loading, a gap, etc.) this pale
   wash showed through instead of a photo-friendly fallback. That's the
   "white shadow" people kept seeing. Deleted entirely — home.html's own
   .hero-slide-bg rule (dark green + subtle dot pattern fallback, no
   !important) now applies uncontested, and the real photo layer paints on
   top of it exactly as before. If the banner still doesn't show your
   actual photo after this deploy, the most likely cause left is that the
   active Hero Slide's "Image" field in Admin → Hero Slides is empty —
   worth double-checking there. */
/* GNP-HERO-NO-WHITE-WASH-V1 — the block above was left over from an
   abandoned "light green" hero reskin and was force-overriding the
   overlay to a WHITE gradient (via !important), which washed out every
   hero photo with a pale haze — that's the "white shadow" people were
   seeing. Also removed a matching dark-text override that fought the
   real (white) hero text color. Both deleted — the inline styles in
   home.html already set the correct dark overlay + white text combo.
   The overlay div only renders at all when a slide has text on it
   (clean_photo unchecked in admin) — for a pure, unwashed photo, check
   "Clean Photo" on that slide in Hero Slides admin, which skips the
   overlay (and any text) entirely. */
.hero-slide-btn {
  border-radius: 100px !important;
  background: var(--text) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.hero-slide-btn--ghost {
  background: transparent !important;
  border: 1.4px solid var(--text) !important;
  color: var(--text) !important;
}

/* Static category chip row over the hero, matching mockup */
.hero-chip-row {
  position: absolute;
  top: 24px; left: 6%;
  z-index: 5;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.hero-chip {
  font-size: 13.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text);
  background: #fff; border: 1.4px solid var(--text);
  border-radius: 100px; padding: 8px 16px; text-decoration: none;
  white-space: nowrap;
}
.hero-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
@media (max-width: 768px) {
  .hero-chip-row { position: static; padding: 12px 6%; overflow-x: auto; flex-wrap: nowrap; }
}

/* GNP-SEARCHBOX-WIDTH-FIX */
@media (min-width: 901px) {
  .nav-search { max-width: 300px; }
  .nav-search input { max-width: 200px; }
}

/* GNP-KILL-STUCK-SIDEBAR-FINAL */
@media (max-width: 900px) {
  .nav-links { display: none !important; }
}

/* GNP-HERO-DEEP-FIX-V1 */
/* Root fix, not a patch: hero_slides banner IMAGES are pre-designed
   graphics with their own text/button baked into the pixels. The template
   ALSO renders a separate HTML text overlay (heading/subtitle/button from
   admin fields) on top — that's the real cause of the overlapping,
   unreadable mess, not a styling bug. Since the images are self-contained,
   the HTML overlay is hidden entirely: the banner speaks for itself. */
.hero-slide-content { display: none !important; }

/* Chip row: no longer absolutely positioned over the banner (was landing
   on top of the logo artwork). Now a clean bar above the slider. */
.hero-chip-row {
  position: static !important;
  background: var(--paper-dk, #EAF3EC);
  padding: 14px 6%;
  margin: 0;
}

/* GNP-NAV-DEEP-MATCH-CSS-V1 */
/* Styling for the restructured nav (base.html GNP-NAV-DEEP-MATCH-V1):
   wishlist + account as plain circular icon buttons, search as its own
   centered pill row below the nav — matching the mockup's arrangement. */
.nav-icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.4px solid var(--text);
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  background: none;
  flex: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.nav-icon-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.nav-account-link span { display: none; }
.cart-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--text); color: #fff;
  border-radius: 100px; padding: 8px 8px 8px 18px;
  font-size: 13px; font-weight: 700;
}
.cart-pill-bag {
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; color: var(--text);
  display: flex; align-items: center; justify-content: center;
}

.nav-search-row {
  display: flex; justify-content: center;
  padding: 14px 60px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.nav-search-pill {
  display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 560px;
  border: 1.4px solid var(--text);
  border-radius: 100px;
  padding: 11px 20px;
  font-size: 13px; color: var(--text-lt);
  background: var(--white);
}
.nav-search-pill svg { flex: none; color: var(--text-lt); }
.nav-search-pill form { flex: 1; }
.nav-search-pill input {
  border: none; outline: none; background: none;
  font: inherit; color: var(--text); width: 100%;
}

@media (max-width: 900px) {
  .nav-search-row { display: none; }
}

/* GNP-CART-COLOR-FIX-V1 */
/* Cart pill: brand green instead of black, matching the site's theme. */
.cart-pill { background: var(--primary) !important; }
.cart-pill-bag { color: var(--primary) !important; }

/* GNP-CART-MOBILE-ICON-FINAL-V1 */
/* Final, authoritative mobile top-bar cart state. This does NOT touch
   .mbn-item or the bottom tab bar in any way — only the .cart-pill inside
   the TOP nav (.nav-actions). Placed last in the file so it wins over any
   earlier conflicting rules regardless of specificity quirks. */
@media (max-width: 900px) {
  .nav-actions .cart-pill {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    font-size: 0 !important;
    overflow: visible !important;
    position: relative !important;
  }
  .nav-actions .cart-pill-bag {
    width: 20px !important;
    height: 20px !important;
    background: none !important;
    color: #fff !important;
  }
  .nav-actions .cart-pill-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    font-size: 12px !important;
  }
}

/* GNP-SHOP-REDESIGN-V1 */
/* Shop page reskin to match new mockup design: bold Anton title, pill
   chips, light-green product tiles, clean sidebar filter list.
   Targets the EXISTING shop template classes — no HTML changed. */

/* --- Banner --- */
/* GNP-SCOPE-DESKTOP-V1: scoped to desktop only so this stops overriding
   the mobile .shop-banner h1 rule (1.3rem) earlier in this file. */
@media (min-width: 769px) {
.shop-banner { padding: 44px 60px 10px !important; background: var(--paper, #fff) !important; box-shadow:none !important; }
.shop-banner-inner { max-width: 900px; }
.shop-breadcrumb { font-size: 14.5px; font-weight: 500; color: var(--primary-lt, #6B8A76); margin-bottom: 10px; }
.shop-breadcrumb a { color: inherit; text-decoration: none; }
.shop-banner-inner .section-eyebrow { color: var(--primary, #1A6B3C) !important; font-weight:700; font-size: 13.5px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; }
.shop-banner-inner h1 {
  font-family: var(--font-display), sans-serif;
  font-weight: 400;
  font-size: 46px;
  text-transform: uppercase;
  color: var(--text, #161F19);
  margin: 6px 0 14px;
  line-height:1;
}
.shop-banner-inner > p:last-child { color: var(--primary-lt, #6B8A76); font-size:14px; max-width:600px; margin-bottom:20px; }
}

/* --- Category chip row --- */
.shop-chip-row { display:flex; gap:10px; overflow-x:auto; padding:6px 60px 20px; }
.shop-chip {
  flex:none; border:1.4px solid var(--paper-dk,#EAF3EC); background:var(--card,#E7F3EA);
  border-radius:100px; padding:9px 18px; font-size: 13.5px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; color:var(--text,#3D5246);
  white-space:nowrap; text-decoration:none; transition:.15s;
}
.shop-chip.active, .shop-chip:hover { background:var(--text,#161F19); border-color:var(--text,#161F19); color:#fff; }

/* --- Sidebar --- */
.shop-sidebar { padding-right: 10px; }
.shop-sidebar h3 { font-family:var(--font-display),sans-serif; font-weight:400; text-transform:uppercase; font-size:15px; letter-spacing:.02em; margin-bottom:12px; color:var(--text,#161F19); }
.shop-cat-filter { list-style:none; margin:0; padding:0; }
.shop-cat-filter li { border-bottom:1px solid var(--paper-dk,#EAF3EC); }
.shop-cat-filter a {
  display:block; padding:12px 4px; font-size:13.5px; font-weight:700;
  color:var(--primary-lt,#6B8A76); text-decoration:none; transition:.15s;
}
.shop-cat-filter a.active, .shop-cat-filter a:hover { color:var(--primary,#1A6B3C); }

/* --- Toolbar --- */
.shop-toolbar { gap:14px; }
.shop-search-box { border:1.4px solid var(--text,#161F19) !important; border-radius:100px !important; padding:10px 18px !important; }
.shop-sort-select { border-radius:100px; border:1.4px solid var(--paper-dk,#EAF3EC); padding:10px 16px; font-size:13px; }
.shop-search-btn { border-radius:100px !important; }

/* --- Product cards: light tile behind real product photo --- */
.product-img-wrap {
  background: var(--card, #E7F3EA) !important;
  border-radius: 4px !important;
  aspect-ratio: 2/3;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.product-img { max-height:82%; width:auto; object-fit:contain; filter:drop-shadow(0 14px 16px rgba(0,0,0,.12)); }
.product-icon-placeholder { font-size:48px; }
.product-sticker {
  position:absolute; top:12px; left:12px; z-index:2;
  font-size: 11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 10px; border-radius:100px; color:#fff;
}
.product-sticker.new { background:var(--primary,#1A6B3C); }
.product-sticker.top { background:#0B4227; }
.product-sticker.sale { background:#C1442B; }
.product-category { font-size: 12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-lt,#6B8A76); margin-bottom:2px; margin-top:12px; }
.product-name { font-size:14px; font-weight:700; color:var(--text,#161F19); margin-bottom:6px; }
.product-price { font-size:13.5px; font-weight:800; color:var(--text,#161F19); }
.btn-cart {
  border-radius:100px !important; background:var(--text,#161F19) !important;
  color:#fff !important; box-shadow:none !important;
}

/* GNP-SHOP-BANNER-TEXT-FIX-V1 */
/* The shop-banner was originally styled for a dark background (white
   text). GNP-SHOP-REDESIGN-V1 switched it to a light background but
   didn't force text colors — so the title/breadcrumb/subtitle were
   likely invisible (white-on-white), not missing. This forces them
   dark so they're visible against the new light banner. */
.shop-banner-inner, .shop-banner-inner * { color: var(--text, #161F19) !important; text-shadow: none !important; }
.shop-banner-inner .section-eyebrow { color: var(--primary, #1A6B3C) !important; }
.shop-breadcrumb, .shop-breadcrumb a { color: var(--primary-lt, #6B8A76) !important; }

/* GNP-SHOP-BANNER-TEXT-FIX-V2 */
/* Missed spot from V1: the breadcrumb's current-page span (e.g. "Shop")
   was still hardcoded white via .shop-breadcrumb span:last-child, which
   the earlier fix's wildcard selector didn't catch precisely enough to
   guarantee it wins. Force it dark explicitly. */
.shop-breadcrumb span:last-child { color: var(--text, #161F19) !important; }

/* GNP-FILTERS-CSS-V1 */
.shop-filter-form { display: contents; }
.shop-filters h3 { font-family: var(--font-display), sans-serif; font-weight: 400; text-transform: uppercase; font-size: 15px; margin-bottom: 12px; color: var(--text, #161F19); }
.filter-group summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; font-weight: 700; color: var(--text, #161F19); padding: 12px 0; border-bottom: 1px solid var(--paper-dk, #EAF3EC); }
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary::after { content: "›"; font-size: 16px; transform: rotate(90deg); color: var(--primary-lt, #6B8A76); }
.filter-group[open] summary::after { transform: rotate(270deg); }
.filter-body { padding: 10px 0 6px; }
.price-range-row { display: flex; align-items: center; gap: 8px; }
.price-range-row input { width: 100%; border: 1.4px solid var(--paper-dk, #EAF3EC); border-radius: 6px; padding: 8px 10px; font-size: 13px; font-family: inherit; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text, #3D5246); margin-bottom: 10px; cursor: pointer; }
.check-row input { width: 16px; height: 16px; accent-color: var(--primary, #1A6B3C); }
.shop-filter-apply { width: 100%; border-radius: 100px !important; margin-top: 16px; background: var(--text, #161F19) !important; }
.shop-filter-clear { display: block; text-align: center; font-size: 14px; color: var(--primary-lt, #6B8A76); margin-top: 10px; text-decoration: underline; }
@media (max-width: 900px) {
  .shop-layout { grid-template-columns: 1fr !important; }
  .shop-filters { order: 2; margin-top: 24px; }
}

/* GNP-CART-BADGE-ANCHOR-FIX-V2 */
/* .cart-pill { position: relative } was only defined inside a mobile
   media query, so on desktop widths the badge's position:absolute had
   no local anchor and escaped to the page/viewport instead of sitting
   on the cart icon. Force it unconditionally at all widths. */
.cart-pill { position: relative !important; }

/* GNP-FOOTER-LIGHT-V1 */
/* Footer redesign: light background (readable, matches reference site)
   instead of dark green. Overrides original dark-theme footer rules. */
.footer { background: #F7FAF8 !important; color: var(--text, #161F19) !important; border-top: 1px solid #E5EDE8; }
.footer-brand h3 { color: var(--text, #161F19) !important; }
.footer-brand p { color: var(--text-lt, #6B8A76) !important; }
.footer-col h4 { color: var(--text, #161F19) !important; }
.footer-links a { color: var(--text-lt, #6B8A76) !important; }
.footer-links a:hover { color: var(--primary, #1A6B3C) !important; }
.footer-contact-item { color: var(--text-lt, #6B8A76) !important; }
.footer-divider { border-top: 1px solid #E5EDE8 !important; }
.footer-bottom { color: var(--text-lt, #6B8A76) !important; }
.footer-bottom a { color: var(--text-lt, #6B8A76) !important; }
.footer-bottom a:hover { color: var(--primary, #1A6B3C) !important; }
.footer-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* Real circular icon buttons instead of text abbreviations (f/ig/tt/in) */
.social-btn {
  width: 38px !important; height: 38px !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center; justify-content: center;
  background: #fff !important; border: 1.4px solid #E5EDE8 !important;
  color: var(--primary, #1A6B3C) !important;
  font-size: 0 !important; /* hide old text labels (f, ig, tt, in) */
}
.social-btn:hover { background: var(--primary, #1A6B3C) !important; border-color: var(--primary, #1A6B3C) !important; }
.social-btn:hover svg { stroke: #fff !important; fill: #fff !important; }
.social-btn svg { width: 17px; height: 17px; }

/* GNP-SHARE-BUTTON-CSS-V1 */
.pdp-share-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.4px solid var(--paper-dk, #E5EDE8); background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--text, #161F19); cursor: pointer;
}
.pdp-share-btn:hover { background: var(--card, #E7F3EA); border-color: var(--primary, #1A6B3C); }
.pdp-share-menu {
  position: absolute; top: 46px; right: 0; z-index: 20;
  background: #fff; border: 1px solid var(--paper-dk, #E5EDE8); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20,40,30,.12); padding: 6px; min-width: 160px;
}
.pdp-share-option {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 10px; border-radius: 6px; border: none; background: none;
  font-size: 13.5px; color: var(--text, #161F19); text-decoration: none;
  cursor: pointer; text-align: left;
}
.pdp-share-option:hover { background: var(--card, #E7F3EA); }

/* GNP-AMAZON-STYLE-V1 */
/* Amazon/Daraz-style density pass: tighter grid, flatter cards (no
   decorative hover-lift), always-visible wishlist icon, star ratings. */
.products-grid {
  grid-template-columns: repeat(5, 1fr) !important;
  gap: .9rem !important;
}
.product-card {
  border-radius: 6px !important;
  box-shadow: none !important;
  border: 1px solid #E3E8E5 !important;
  transition: border-color .15s ease !important;
}
.product-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--primary, #1A6B3C) !important;
}
.product-wishlist {
  opacity: 1 !important;
  box-shadow: none !important;
  border: 1px solid #E3E8E5 !important;
  width: 28px !important; height: 28px !important;
}
.product-info { padding: .75rem .8rem .9rem !important; }
.product-name {
  font-size: .85rem !important;
  line-height: 1.35 !important;
  min-height: 2.3em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-rating {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.8rem; color: var(--text-lt, #6B8A76); margin: .2rem 0 .35rem;
}
.product-rating .stars { color: #E8A93B; letter-spacing: 1px; }
.product-rating .count { color: var(--text-lt, #6B8A76); }
.pdp-rating { font-size: .88rem; margin: .3rem 0 .8rem; }
.pdp-rating .stars { font-size: 1rem; }

@media (max-width: 1200px) { .products-grid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 900px)  { .products-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px)  { .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .6rem !important; } }

/* GNP-DEAL-GRID-RESPONSIVE-V1 */
@media (max-width: 900px) {
  .gnp-deal-grid { grid-template-columns: 1fr !important; }
}

/* GNP-REDESIGN-PHASE1-COLOR-PILL-V1 */
/* Redesign Phase 1: yellow CTA accent + pill-shaped rounding, layered
   on top of existing --primary/--accent greens. Additive only — no
   existing rule is overridden except where explicitly targeted below. */
:root {
  --gnp-yellow: #facc15;
  --gnp-yellow-text: #713f12;
}

/* Pill-shaped nav search button + hero CTA, matching mockup's yellow accent */
.nav-search button,
.hero-cta,
.search-bar button {
  background: var(--gnp-yellow) !important;
  color: var(--gnp-yellow-text) !important;
}

/* Rounded pill treatment for badges/tags across cards */
.badge, .cat-pill, .cart-pill-badge {
  border-radius: 100px !important;
}

/* Category + product cards: consistent pill radius on containers */
.card, .product-card, .gnp-deal-card {
  border-radius: 16px !important;
}

/* GNP-REDESIGN-PHASE2-GRID-IMG-V1 */
/* Shop grid: 4 per row instead of 5 (overrides earlier 5-col rule) */
.products-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 900px)  { .products-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px)  { .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .6rem !important; } }

/* GNP-REDESIGN-PHASE3-NAV-SEARCH-V1 */
.nav-search-row {
  background: var(--primary, #1A6B3C) !important;
  padding: 14px 24px !important;
}
.nav-search-pill {
  background: #fff !important;
  border-radius: 100px !important;
  border: none !important;
  padding: 4px 6px 4px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 640px;
  margin: 0 auto;
}
.nav-search-pill svg { display: none; }

/* GNP-NAV-SEARCH-DROPDOWN-CENTER-FIX */
.nav-search-row .nav-search-dropdown {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: 100%;
  max-width: 640px;
}

/* GNP-NAV-MOCKUP-MATCH-V1 */
.topnav {
  background: #0f3d24;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.topnav-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.topnav-logo-img { height: 50px; width: auto; display: block; }
.topnav-logo-text { font-weight: 700; font-size: 19px; letter-spacing: .3px; font-family: var(--font-body); }
.topnav-logo-text .g, .topnav-logo-text .p { color: #4ade80; }
.topnav-logo-text .n { color: #60a5fa; }

.topnav-search { flex: 1; max-width: 520px; position: relative; }
.topnav-search form { display: flex; }
.topnav-search input {
  flex: 1; border: none; border-radius: 0;
  padding: 10px 16px; font-size: 14px; outline: none; font-family: inherit;
}
.topnav-search button {
  background: #facc15; border: none; border-radius: 0 20px 20px 0;
  padding: 0 16px; cursor: pointer; display: flex; align-items: center; color: #1c2b22;
}

.topnav-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.topnav-actions a { color: #fff; text-decoration: none; font-size: 13px; white-space: nowrap; }
.topnav-actions a:hover { color: #4ade80; }
.topnav-cart { position: relative; display: flex; }
.topnav-cart-badge {
  position: absolute; top: -8px; right: -10px;
  background: var(--red); color: #fff; font-size: 0.7rem; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.topnav-hamburger { color: #fff; display: none; }

.subnav {
  background: var(--forest-deep, #1D3F2E);
  padding: 9px 24px;
  display: flex;
  gap: 22px;
  font-size: 13px;
  flex-wrap: wrap;
}
.subnav a {
  color: #eafbe7;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.subnav a:hover, .subnav a.active { color: #fff; font-weight: 600; }
.subnav-right { margin-left: auto; }

@media (max-width: 900px) {
  .topnav-search { display: none; }
  .topnav-actions a:not(.topnav-cart) { display: none; }
  .topnav-hamburger { display: flex; }
}
@media (max-width: 640px) {
  .subnav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .subnav-right { margin-left: 0; }
}

/* GNP-NAV-WHITE-V1 */
.topnav {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border);
}
.topnav-logo-text .g,
.topnav-logo-text .n,
.topnav-logo-text .p {
  color: var(--primary);
}
.topnav-logo-sub {
  color: var(--text-lt) !important;
}
.topnav-search input {
  background: var(--off-white);
  border: 1px solid var(--border);
}
.topnav-actions a {
  color: var(--text-md) !important;
}
.topnav-actions a:hover {
  color: var(--primary) !important;
}
.topnav-cart svg {
  color: var(--text-md);
}
.topnav-hamburger {
  color: var(--text-md) !important;
}

/* GNP-PRODUCT-GRID-FINAL-V1 — supersedes all earlier grid/image rules above */
.products-grid,
.shop-products-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.25rem !important;
}
@media (max-width: 1100px) {
  .products-grid, .shop-products-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 760px) {
  .products-grid, .shop-products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .75rem !important; }
}

.product-img-wrap {
  aspect-ratio: 2/3 !important;
  background: var(--off-white, #F7FAF8) !important;
}
.product-img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  filter: none !important;
}

/* GNP-CATEGORY-SIZE-FIX-V2 — final, supersedes earlier reverted attempt */
.gnp-cat-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
.gnp-cat-img {
  height: 200px !important;
  aspect-ratio: unset !important;
  background: var(--off-white, #F7FAF8) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.gnp-cat-img img {
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
}
@media (max-width: 760px) {
  .gnp-cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .gnp-cat-img { height: 160px !important; }
}

/* GNP-CATEGORY-PREMIUM-V1 — final authoritative category card styling */
.gnp-cat-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
.gnp-cat-card {
  background: #fff !important;
  border: 1px solid var(--border, #d3e8c8) !important;
  border-radius: 18px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
}
.gnp-cat-img {
  height: 220px !important;
  aspect-ratio: unset !important;
  border-radius: 12px !important;
  background: var(--off-white, #F7FAF8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}
.gnp-cat-img img {
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  transition: transform .4s cubic-bezier(.4,0,.2,1) !important;
}
.gnp-cat-card:hover {
  box-shadow: 0 12px 32px rgba(26,107,60,.14) !important;
  transform: translateY(-4px) !important;
  border-color: var(--primary, #1A6B3C) !important;
}
.gnp-cat-card:hover .gnp-cat-img img {
  transform: scale(1.06) !important;
}
.gnp-cat-card h3 {
  font-size: 17px !important;
  margin-bottom: 6px !important;
}
.gnp-cat-link {
  margin-top: auto !important;
}

@media (max-width: 900px) {
  .gnp-cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .gnp-cat-img { height: 180px !important; }
}
@media (max-width: 560px) {
  .gnp-cat-grid { grid-template-columns: 1fr !important; }
}

/* GNP-HERO-CAROUSEL-V1 */
.gnp-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 380px;
  margin: 20px 0;
}
.gnp-hero-track {
  position: relative;
  height: 100%;
  min-height: 380px;
}
.gnp-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease;
  display: flex;
  align-items: center;
}
.gnp-hero-slide.active {
  opacity: 1;
  visibility: visible;
  position: relative;
}
.gnp-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gnp-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%);
}
.gnp-hero-content {
  position: relative;
  z-index: 2;
  padding: 40px 60px;
  max-width: 520px;
  color: #fff;
}
.gnp-hero-eyebrow {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
  opacity: .9;
}
.gnp-hero-content h1 {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 14px;
}
.gnp-hero-highlight {
  color: #7BE39A;
  font-style: italic;
}
.gnp-hero-content p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 22px;
  opacity: .92;
}
.gnp-hero-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.gnp-hero-btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 26px;
  border-radius: 100px;
  text-decoration: none;
  transition: transform .2s ease;
}
.gnp-hero-btn:hover { transform: translateY(-2px); }
.gnp-hero-btn.primary { background: var(--primary, #1A6B3C); color: #fff; }
.gnp-hero-btn.secondary { background: rgba(255,255,255,.15); color: #fff; border: 1.5px solid rgba(255,255,255,.6); }

.gnp-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: var(--primary, #1A6B3C);
  z-index: 3;
  transition: background .2s ease;
}
.gnp-hero-arrow:hover { background: #fff; }
.gnp-hero-arrow.left { left: 20px; }
.gnp-hero-arrow.right { right: 20px; }

.gnp-hero-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.gnp-hero-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, width .2s ease;
}
.gnp-hero-dot.active {
  background: #fff;
  width: 24px;
  border-radius: 4px;
}

@media (max-width: 700px) {
  .gnp-hero { min-height: 480px; }
  .gnp-hero-track { min-height: 480px; }
  .gnp-hero-content { padding: 28px; max-width: 100%; }
  .gnp-hero-content h1 { font-size: 28px; }
  .gnp-hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.65) 100%); }
}

/* GNP-LOGO-STACK-V1 */
.topnav-logo-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.15 !important;
}
.topnav-logo-main {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: .3px !important;
}
.topnav-logo-sub {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin-top: 1px !important;
}

/* GNP-HERO-FULLBLEED-V1 */
.gnp-hero {
  border-radius: 0 !important;
  margin: 0 0 24px !important;
  min-height: 520px !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.gnp-hero-track {
  min-height: 520px !important;
}
.gnp-hero-content {
  max-width: 640px !important;
  padding: 60px 80px !important;
}
.gnp-hero-content h1 {
  font-size: 46px !important;
}
@media (max-width: 700px) {
  .gnp-hero {
    min-height: 460px !important;
  }
  .gnp-hero-track {
    min-height: 460px !important;
  }
  .gnp-hero-content {
    padding: 32px !important;
  }
  .gnp-hero-content h1 {
    font-size: 30px !important;
  }
}

/* GNP-HAMBURGER-ALWAYS-VISIBLE-V1 */
.topnav-hamburger {
  display: flex !important;
}

/* GNP-HERO-ACTIVE-SLIDE-FIX-V1 */
.gnp-hero-slide.active {
  position: absolute !important;
  inset: 0 !important;
}

/* GNP-CATEGORY-FULL-BLEED-IMG-V1 */
.gnp-cat-img {
  height: 300px !important;
}
.gnp-cat-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
@media (max-width: 900px) {
  .gnp-cat-img { height: 240px !important; }
}

/* GNP-CERTIFICATION-BADGES-SIZE-FIX-V1 */
.gnp-cert-img {
  height: 48px !important;
  width: auto !important;
  max-width: 80px !important;
  object-fit: contain !important;
}
.gnp-cert-emoji {
  font-size: 32px !important;
}
.gnp-cert-item {
  width: 90px !important;
}
@media (max-width: 640px) {
  .gnp-cert-img { height: 36px !important; max-width: 60px !important; }
}

/* GNP-CERTIFICATION-BADGES-FINAL-V1 — authoritative, overrides all previous cert badge rules */
.gnp-cert-strip {
  background: #fff !important;
  border: none !important;
  border-top: 1px solid var(--border, #e5e7eb) !important;
  border-bottom: 1px solid var(--border, #e5e7eb) !important;
  border-radius: 0 !important;
  padding: 18px 20px !important;
  margin: 0 0 28px !important;
  text-align: center !important;
}
.gnp-cert-label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--text-lt, #9ca3af) !important;
  margin: 0 0 12px !important;
}
.gnp-cert-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 28px !important;
}
.gnp-cert-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
}
.gnp-cert-img {
  height: 32px !important;
  width: auto !important;
  max-width: 60px !important;
  object-fit: contain !important;
  opacity: .85 !important;
}
.gnp-cert-emoji {
  font-size: 22px !important;
}
.gnp-cert-name {
  display: none !important;
}
@media (max-width: 640px) {
  .gnp-cert-row { gap: 18px !important; }
  .gnp-cert-img { height: 26px !important; max-width: 48px !important; }
}

/* GNP-TOPBAR-HELP-DROPDOWN-V1 */
.topbar-help { position: relative; }
.topbar-help-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  color: rgba(255,255,255,.88); font: inherit; letter-spacing: inherit;
  background: none; border: none; cursor: pointer; padding: 0;
}
.topbar-help-toggle:hover { color: var(--white); }
.topbar-help-chevron { transition: transform .15s ease; }
.topbar-help[data-open="true"] .topbar-help-chevron { transform: rotate(180deg); }
.topbar-help-panel {
  position: absolute; top: calc(100% + .85rem); right: 0;
  background: var(--white); color: var(--text);
  border-radius: 12px; box-shadow: var(--shadow-md, 0 12px 32px rgba(0,0,0,.18));
  padding: .5rem; min-width: 260px; z-index: 50;
}
.topbar-help-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .65rem; border-radius: 8px; color: var(--text);
}
.topbar-help-item:hover { background: var(--primary-xs, #E8F5EE); }
.topbar-help-icon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--primary); color: var(--primary); flex-shrink: 0;
}
.topbar-help-text { display: flex; flex-direction: column; line-height: 1.3; }
.topbar-help-label { font-size: 0.8rem; color: var(--text-lt); font-weight: 500; }
.topbar-help-value { font-size: .88rem; font-weight: 700; color: var(--text); }

/* GNP-SUBNAV-MEGA-MENU-V1 */
.subnav-all { position: relative; }
.subnav-all-toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  color: #eafbe7; font: inherit; font-weight: 600;
  background: none; border: none; cursor: pointer; padding: 0;
}
.subnav-all-toggle:hover { color: #fff; }
.subnav-all-chevron { transition: transform .15s ease; }
.subnav-all[data-open="true"] .subnav-all-chevron { transform: rotate(180deg); }
.mega-panel {
  position: absolute; top: calc(100% + .85rem); left: 0;
  background: var(--white); color: var(--text);
  border-radius: 12px; box-shadow: var(--shadow-md, 0 12px 32px rgba(0,0,0,.18));
  padding: 1.5rem; display: flex; gap: 2.5rem; z-index: 60;
  min-width: 620px;
}
.mega-panel[hidden] { display: none; }
.mega-col { display: flex; flex-direction: column; gap: .35rem; min-width: 160px; }
.mega-col-label {
  font-size: 0.82rem; font-weight: 600; color: var(--text-lt);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem;
}
.mega-col a {
  color: var(--text); font-size: .92rem; padding: .35rem 0;
}
.mega-col a:hover { color: var(--primary); }

/* GNP-MEGA-SUBTYPES-V1 */
.mega-cat-item { display: flex; flex-direction: column; }
.mega-cat-row { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.mega-cat-row a { flex: 1; }
.mega-cat-toggle {
  background: none; border: none; cursor: pointer; padding: .35rem;
  color: var(--text-lt); display: flex; align-items: center; justify-content: center;
}
.mega-cat-toggle svg { transition: transform .15s ease; }
.mega-cat-item--has-sub.open .mega-cat-toggle svg { transform: rotate(180deg); color: var(--primary); }
.mega-cat-sub {
  display: none; flex-direction: column; gap: .1rem;
  padding: .15rem 0 .5rem .75rem; margin-left: .15rem;
  border-left: 1px solid var(--line, #DEE9E1);
}
.mega-cat-item--has-sub.open .mega-cat-sub { display: flex; }
.mega-cat-sub a {
  font-size: .85rem; color: var(--text-lt); padding: .3rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.mega-cat-sub a:hover { color: var(--primary); }
.mega-cat-sub a .n { font-size: 0.86rem; color: var(--text-lt); font-weight: 500; }

.mega-lang-form { display: flex; align-items: center; justify-content: space-between; padding: .35rem 0; }
.mega-lang-label { font-size: .92rem; color: var(--text); }
.mega-lang-btns { display: flex; gap: .35rem; }
@media (max-width: 700px) {
  .mega-panel {
    position: fixed;
    min-width: 0;
    width: calc(100vw - 2rem);
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    flex-direction: column;
    gap: 1.25rem;
    left: 1rem;
    right: 1rem;
    top: var(--mega-panel-top, 120px);
  }
}

/* GNP-SEARCH-CATEGORY-DROPDOWN-V2 — matches native rounded-pill search bar */
.topnav-search form { border-radius: 20px; overflow: hidden; background: #fff; }
.topnav-search-category {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background-color: #EAF3EE;
  color: var(--text-dark, #1c2b22);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0 1.8rem 0 1rem;
  border-right: 1px solid #D1E8DA;
  cursor: pointer;
  max-width: 110px;
  text-overflow: ellipsis;
  height: 40px;
  transition: background-color .15s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231c2b22' stroke-width='1.5' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
}
.topnav-search-category:hover { background-color: #DCEEE3; }
.topnav-search-category:focus {
  outline: none;
  background-color: #DCEEE3;
  box-shadow: inset 0 0 0 2px #4ade80;
}
.topnav-search-category--mobile {
  border-right: none;
  border-bottom: none;
  max-width: 88px;
  flex-shrink: 0;
  height: 38px;
}
/* Style the native dropdown options list where supported */
.topnav-search-category option {
  background-color: #ffffff;
  color: #1c2b22;
  font-weight: 500;
}

/* GNP-CART-LOADING-V1 -- spinner shown inside Add to Cart / Buy Now buttons
   while the request is in flight, so slow connections don't look broken. */
@keyframes gnp-spin { to { transform: rotate(360deg); } }
.btn-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: gnp-spin .6s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 1.2s; }
}

/* GNP-SHOP-CHIP-SCROLL-FIX-V1 */
@media (max-width: 768px){
  .shop-chip-row{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding: 8px 16px 10px !important;
  }
  .shop-chip-row::-webkit-scrollbar{ display: none; }
  .shop-chip{ scroll-snap-align: start; }
}

/* GNP-MOBILE-HERO-CARD-V1 — reshapes existing hero slider into a
   contained rounded card on mobile, matching Daraz-mockup proportions.
   Uses the same slide data (photo, eyebrow, heading, button) — just
   restyled, nothing new to fill in from admin. */
@media (max-width: 768px){
  .hero-slider{
    aspect-ratio: 4 / 3 !important;
    border-radius: 20px !important;
    margin: 12px 4% 0 !important;
    width: 92% !important;
    overflow: hidden !important;
  }
  .hero-slide-bg--mobile{
    filter: brightness(0.72);
  }
  .hero-slide-overlay{
    background: linear-gradient(180deg, rgba(14,51,38,.15) 0%, rgba(14,51,38,.75) 100%) !important;
  }
  .hero-slide-content{
    padding: 0 20px !important;
    align-items: flex-end !important;
    padding-bottom: 44px !important;
  }
  .hero-slide-inner{ max-width: 100% !important; }
  .hero-slide-eyebrow{
    background: rgba(255,255,255,.92) !important;
    color: #0E3326 !important;
    border: none !important;
    font-size: 0.76rem !important;
    padding: 7px 14px 7px 10px !important;
  }
  .hero-slide-eyebrow span{ background: #1F8452 !important; }
  .hero-slide-title{
    font-size: 1.55rem !important;
    line-height: 1.12 !important;
    margin-bottom: 14px !important;
  }
  .hero-slide-sub{ display: none !important; }
  .hero-slide-btn{
    padding: 11px 22px !important;
    font-size: .85rem !important;
  }
  .hero-slide-btn.hero-slide-btn--ghost{ display: none !important; }
  .hero-seal{ width: 52px !important; height: 52px !important; font-size: 8.5px !important; top: 12px !important; right: 12px !important; }

  /* dots repositioned bottom-left, inside the card, matching mockup */
  .hero-slider > div[style*="bottom:18px"]{
    left: 24px !important;
    bottom: 18px !important;
    transform: none !important;
  }
}


/* GNP-MOBILE-HERO-CARD-V2 — fixes V1: explicit height instead of
   aspect-ratio (some mobile browsers ignore it in this context),
   which was letting the card grow to the full image height and
   pushing the bottom-aligned text off-screen. */
@media (max-width: 768px){
  .hero-slider{
    height: 380px !important;
    aspect-ratio: unset !important;
  }
  .hero-slide-bg--mobile{
    background-size: cover !important;
    background-position: center !important;
  }
}

/* GNP-DARAZ-CAROUSEL-V1 */
.daraz-section{
  --dz-white:#FFFFFF; --dz-paper:#F6F9F6; --dz-pine:#0E3326; --dz-pine-lt:#164A37;
  --dz-leaf:#1F8452; --dz-leaf-lt:#2FA968; --dz-mist:#E3F0E7; --dz-sage:#6E8B7B;
  --dz-ink:#16241C; --dz-line:#DEE9E1;
  padding:8px 0 34px; background:var(--dz-paper);
}
.daraz-head{ padding-top:26px; text-align:center; margin-bottom:16px; }
.daraz-eyebrow{ font-size: 12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--dz-leaf); margin:0 0 6px; }
.daraz-title{ font-family:var(--font-display,'Newsreader',Georgia,serif); font-style:italic; font-weight:500; font-size:1.4rem; color:var(--dz-pine); margin:0; }

.daraz-tabs{ display:flex; gap:8px; overflow-x:auto; padding:0 5% 14px; scrollbar-width:none; }
.daraz-tabs::-webkit-scrollbar{ display:none; }
.daraz-tab{
  flex:0 0 auto; font:inherit; font-size: 14px; font-weight:700; padding:9px 16px;
  border-radius:100px; background:var(--dz-white); border:1px solid var(--dz-line);
  color:var(--dz-ink); white-space:nowrap; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.daraz-tab:active{ transform:scale(.96); }
.daraz-tab.active{ background:var(--dz-leaf); border-color:var(--dz-leaf); color:#fff; }

.daraz-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 5%; }
.daraz-card{
  display:block; background:var(--dz-white); border-radius:14px; overflow:hidden;
  border:1px solid var(--dz-line); text-decoration:none; color:inherit;
  opacity:0; transform:translateY(16px);
  transition:opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1),
             box-shadow .2s ease, border-color .2s ease;
}
.daraz-card.dz-visible{ opacity:1; transform:translateY(0); }
.daraz-card.dz-hidden{ display:none; }
.daraz-card:active{ box-shadow:0 10px 22px -12px rgba(15,60,40,.35); border-color:var(--dz-leaf-lt); }
.daraz-card-img{ aspect-ratio:1; overflow:hidden; background:#fff; }
.daraz-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.daraz-card:active .daraz-card-img img{ transform:scale(1.04); }
.daraz-card-info{ padding:10px 10px 12px; }
.daraz-card-name{ font-size: 13.5px; font-weight:600; color:var(--dz-ink); line-height:1.35; margin-bottom:4px; }
.daraz-card-price{ font-size:13px; font-weight:800; color:var(--dz-pine); }
.daraz-empty{ grid-column:1/-1; text-align:center; color:var(--dz-sage); font-size:.9rem; padding:24px 0; }

@media (min-width:640px){
  .daraz-grid{ grid-template-columns:repeat(4,1fr); max-width:1100px; margin:0 auto; }
  .daraz-tabs{ justify-content:center; padding:0 0 14px; }
  .daraz-head{ margin-bottom:22px; }
}

/* GNP-DARAZ-CAROUSEL-V1 (icon fallback for products with no image) */
.daraz-card-icon{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.4rem; background:#F6F9F6; }

/* ===================== GNP-MOBILE-DARAZ-HOME-V1 ===================== */
/* Daraz-style mobile-only homepage block. #gnpMobileHome is hidden on
   desktop and shown only under 768px; the existing desktop hero-slider,
   promo-banner, categories, appointment section, daraz-section, topnav and
   mobile search bar are hidden on mobile to avoid duplicates. */

#gnpMobileHome{ display:none; background:#F6F9F6; }

@media (max-width:768px){
  #gnpMobileHome{ display:block; }
  .topnav,
  .mobile-search-bar,
  .hero-slider,
  .categories,
  #gnp-appt-section,
  [style*="linear-gradient(135deg,#145c2e"],
  #gnpDarazSection{ display:none !important; }
}

/* ---- header row 1: brand ---- */
#gnpMobileHome .m-top-white{ display:flex; align-items:center; gap:10px; padding:12px 16px 10px; background:#fff; }
#gnpMobileHome .m-brand{ display:flex; align-items:center; gap:9px; flex:1; min-width:0; text-decoration:none; }
#gnpMobileHome .m-brand-logo{ width:34px; height:34px; border-radius:50%; flex-shrink:0; object-fit:cover; }
#gnpMobileHome .m-brand-word{ line-height:1.15; min-width:0; }
#gnpMobileHome .m-brand-word b{ display:block; font-family:var(--font-display,'Newsreader',Georgia,serif); font-size:19px; font-weight:600; color:#2F6E4C; letter-spacing:.01em; }
#gnpMobileHome .m-brand-word span{ display:block; font-size: 10.5px; font-weight:800; letter-spacing:.11em; color:#5B6154; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#gnpMobileHome .m-top-icons{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
#gnpMobileHome .m-icon-btn{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#EEF6EC; color:#2F6E4C; }
#gnpMobileHome .m-icon-btn svg{ width:17px; height:17px; }
#gnpMobileHome .m-ham-btn{ width:34px; height:34px; border-radius:9px; background:#EEF6EC; border:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; flex-shrink:0; }
#gnpMobileHome .m-ham-btn span{ display:block; width:15px; height:2px; background:#2F6E4C; border-radius:2px; }

/* ---- header row 2: green nav ---- */
#gnpMobileHome .m-nav-green{ background:#1D3F2E; display:flex; align-items:stretch; padding:0 16px; overflow-x:auto; }
#gnpMobileHome .m-nav-all{ display:flex; align-items:center; gap:6px; padding:10px 14px 10px 0; margin-right:6px; border-right:1px solid rgba(255,255,255,.14); color:#fff; font-size: 14px; font-weight:800; white-space:nowrap; flex-shrink:0; background:none; border-top:none; border-bottom:none; border-left:none; }
#gnpMobileHome .m-nav-all .chev{ font-size: 11px; color:#BFE6C4; transition:transform .2s ease; }
#gnpMobileHome .m-nav-all.open .chev{ transform:rotate(180deg); }
#gnpMobileHome .m-nav-tabs{ display:flex; align-items:stretch; gap:22px; }
#gnpMobileHome .m-nav-tab{ padding:10px 0; font-size: 14px; font-weight:700; color:#B9C7BC; white-space:nowrap; border-bottom:2px solid transparent; text-decoration:none; }
#gnpMobileHome .m-nav-tab.active{ color:#fff; border-bottom-color:#4C8B57; }

/* ---- "All" dropdown panel ---- */
#gnpMobileHome .m-all-panel{ display:none; padding:0 16px; background:#fff; border-bottom:1px solid #DCE9D8; }
#gnpMobileHome .m-all-panel.open{ display:block; }
#gnpMobileHome .m-all-panel-inner{ padding:12px 0 14px; }
#gnpMobileHome .m-all-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 4px; font-size:13px; font-weight:700; color:#22261F; border-bottom:1px solid #DCE9D8; text-decoration:none; }
#gnpMobileHome .m-all-row:last-child{ border-bottom:none; }
#gnpMobileHome .m-all-row .n{ font-size: 12.5px; color:#5B6154; font-weight:600; }

/* ---- header row 3: search pill ---- */
#gnpMobileHome .m-search-row{ display:flex; align-items:center; gap:10px; padding:11px 16px 12px; background:#fff; border-bottom:1px solid #DCE9D8; }
#gnpMobileHome .m-search-pill{ flex:1; display:flex; align-items:center; gap:7px; background:#EEF6EC; border:1px solid #DCE9D8; border-radius:100px; padding:9px 14px; min-width:0; }
#gnpMobileHome .m-search-pill select{ border:none; background:none; font-size: 13.5px; font-weight:800; color:#2F6E4C; font-family:inherit; }
#gnpMobileHome .m-search-pill .sep{ opacity:.35; font-size: 12.5px; }
#gnpMobileHome .m-search-pill svg{ width:14px; height:14px; color:#5B6154; flex-shrink:0; }
#gnpMobileHome .m-search-pill input{ border:none; background:none; outline:none; font-size: 14px; color:#22261F; flex:1; min-width:0; font-family:inherit; }
#gnpMobileHome .m-cart-mini{ position:relative; width:36px; height:36px; border-radius:50%; background:#EEF6EC; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
#gnpMobileHome .m-cart-mini svg{ width:17px; height:17px; color:#2F6E4C; }
#gnpMobileHome .m-cart-mini .badge{ position:absolute; top:-3px; right:-3px; width:16px; height:16px; border-radius:50%; background:#4C8B57; color:#1D3F2E; font-size: 11px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff; }

/* ---- hero carousel ---- */
#gnpMobileHome .m-hero-section{ padding:0; }
#gnpMobileHome .m-hero{ position:relative; border-radius:20px; overflow:hidden; min-height:200px; }
#gnpMobileHome .m-hero-slide{ position:absolute; inset:0; padding:24px 20px; display:flex; flex-direction:column; justify-content:center; opacity:0; pointer-events:none; transition:opacity .5s ease; background-size:cover; background-position:center; }
#gnpMobileHome .m-hero-slide.active{ opacity:1; pointer-events:auto; position:relative; }
#gnpMobileHome .m-hero-slide.s1{ background:radial-gradient(ellipse 90% 90% at 82% 20%, rgba(191,230,196,.22), transparent 65%), linear-gradient(115deg, #16301F 0%, #0F251C 100%); }
#gnpMobileHome .m-hero-slide.s2{ background:radial-gradient(ellipse 90% 90% at 82% 20%, rgba(76,139,87,.30), transparent 60%), linear-gradient(135deg, #1D3F2E, #0F251C); }
/* GNP-MOBILE-HERO-PHOTO-FIX-V1 — an uploaded slide photo now always shows
   as the background (matches desktop behaviour); when text/button also
   sit on top (clean_photo unchecked) this gradient keeps them legible. */
#gnpMobileHome .m-hero-slide.m-hero-photo{ background-size:cover; background-position:center; }
#gnpMobileHome .m-hero-slide.m-hero-photo:not(.m-hero-photo-clean)::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,20,14,.15) 0%, rgba(9,20,14,.2) 40%, rgba(9,20,14,.72) 100%);
}
#gnpMobileHome .m-hero-slide.m-hero-photo > *{ position:relative; z-index:1; }
#gnpMobileHome .m-hero-tag{ display:inline-flex; align-items:center; gap:6px; background:#fff; color:#1D3F2E; font-size: 10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:100px; width:fit-content; margin-bottom:8px; }
#gnpMobileHome .m-hero-slide h1{ font-family:var(--font-display,'Newsreader',Georgia,serif); font-size:18px; line-height:1.18; color:#fff; font-weight:600; margin:0 0 9px; max-width:220px; }
#gnpMobileHome .m-hero-slide h1 em{ font-style:normal; color:#BFE6C4; font-weight:700; }
#gnpMobileHome .m-hero-btn{ display:inline-flex; background:#4C8B57; color:#0F251C; font-weight:800; font-size: 12px; padding:8px 16px; border-radius:100px; width:fit-content; text-decoration:none; }
#gnpMobileHome .m-hero-dots{ position:absolute; bottom:10px; left:16px; display:flex; gap:5px; z-index:5; }
#gnpMobileHome .m-hero-dots span{ width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; }
#gnpMobileHome .m-hero-dots span.on{ width:13px; border-radius:100px; background:#4C8B57; }

/* GNP-MOBILE-HERO-CONTROLS-V1 — prev/next + pause/play, matching the
   desktop hero controls (see .hero-nav-btn). Swipe still works underneath. */
#gnpMobileHome .m-hero-nav-btn{
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(9,20,14,.42);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
}
#gnpMobileHome .m-hero-nav-btn--prev{ left: 10px; }
#gnpMobileHome .m-hero-nav-btn--next{ right: 10px; }
#gnpMobileHome .m-hero-nav-btn--playpause{
  /* GNP-MOBILE-HERO-CONTROLS-V2: hidden per feedback (other sites don't show
     a manual pause control) — the pause behavior still works: autoplay
     already stops automatically on touch/swipe (see touchstart handler in
     the hero JS), that logic doesn't depend on this button being visible. */
  display: none;
}

/* ---- trust row ---- */
#gnpMobileHome .m-trust-row{ display:flex; gap:8px; overflow-x:auto; padding:12px 16px 4px; }
#gnpMobileHome .m-trust-chip{ flex:0 0 auto; display:flex; align-items:center; gap:6px; background:#fff; border:1px solid #DCE9D8; border-radius:100px; padding:7px 12px; }
#gnpMobileHome .m-trust-chip .ic{ width:18px; height:18px; border-radius:50%; background:#EEF6EC; display:flex; align-items:center; justify-content:center; font-size: 12px; color:#2F6E4C; }
#gnpMobileHome .m-trust-chip span{ font-size: 12px; font-weight:800; color:#22261F; white-space:nowrap; }

/* ---- categories: circular rail + flyout ---- */
#gnpMobileHome .m-cat-section{ padding:18px 0 14px; }
#gnpMobileHome .m-cat-head{ margin-bottom:12px; padding:0 16px; }
#gnpMobileHome .m-cat-head .eyebrow{ font-size: 12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#4C8B57; margin-bottom:4px; }
#gnpMobileHome .m-cat-head h2{ font-family:var(--font-display,'Newsreader',Georgia,serif); font-style:italic; font-weight:500; font-size:1.15rem; color:#1D3F2E; margin:0; }
#gnpMobileHome .m-cat-scroll{ display:flex; gap:14px; overflow-x:auto; padding:2px 16px 6px; }
#gnpMobileHome .m-cat-chip{ flex:0 0 auto; width:66px; text-align:center; position:relative; text-decoration:none; }
#gnpMobileHome .m-cat-chip .ring{ width:58px; height:58px; border-radius:50%; margin:0 auto 6px; display:flex; align-items:center; justify-content:center; background:#fff; border:1.5px solid #DCE9D8; }
#gnpMobileHome .m-cat-chip .ring img{ width:58%; height:58%; object-fit:contain; }
#gnpMobileHome .m-cat-chip.open .ring{ border-color:#4C8B57; background:#EEF6EC; }
#gnpMobileHome .m-cat-chip h4{ font-size: 11.5px; font-weight:700; color:#22261F; margin:0; line-height:1.25; }
#gnpMobileHome .m-cat-chip .leaf-badge{ position:absolute; top:-3px; right:2px; width:16px; height:16px; border-radius:50%; background:#4C8B57; display:flex; align-items:center; justify-content:center; color:#fff; font-size: 10.5px; z-index:2; }
#gnpMobileHome .m-scroll-hint{ padding:0 16px; font-size: 11.5px; color:#5B6154; margin-top:2px; }
#gnpMobileHome .m-flyout-wrap{ padding:0 16px; display:none; margin-top:10px; }
#gnpMobileHome .m-flyout-wrap.open{ display:block; }
#gnpMobileHome .m-flyout{ display:none; width:100%; background:#fff; border:1px solid #DCE9D8; border-radius:14px; padding:14px; box-shadow:0 12px 24px -12px rgba(15,60,40,.2); text-align:left; }
#gnpMobileHome .m-flyout.shown{ display:block; }
#gnpMobileHome .m-flyout-title{ font-size: 12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#4C8B57; margin-bottom:8px; }
#gnpMobileHome .m-flyout-list{ display:flex; flex-direction:column; gap:2px; }
#gnpMobileHome .m-flyout-list a{ display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; color:#22261F; padding:10px; border-radius:9px; min-height:40px; text-decoration:none; }
#gnpMobileHome .m-flyout-list a span.n{ font-size: 12.5px; color:#5B6154; font-weight:600; }
#gnpMobileHome .m-flyout-view-all{ display:block; text-align:center; margin-top:6px; padding-top:9px; border-top:1px solid #DCE9D8; font-size: 13.5px; font-weight:700; color:#4C8B57; text-decoration:none; }

/* ---- appointment ---- */
#gnpMobileHome .m-appt-section{ padding:4px 16px 6px; }
#gnpMobileHome .m-appt-banner{ display:flex; align-items:center; gap:12px; background:linear-gradient(120deg,#164A37,#0F251C 70%); border-radius:16px; padding:12px 14px; }
#gnpMobileHome .m-appt-banner .photo{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; overflow:hidden; border:2px solid rgba(255,255,255,.85); background:#164A37; }
#gnpMobileHome .m-appt-banner .photo img{ width:100%; height:100%; object-fit:cover; }
#gnpMobileHome .m-appt-banner .body{ flex:1; min-width:0; }
#gnpMobileHome .m-appt-banner .k{ font-size: 10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#c8e6c9; display:flex; align-items:center; gap:5px; margin-bottom:2px; }
#gnpMobileHome .m-appt-banner .k .dot{ width:5px; height:5px; border-radius:50%; background:#4ADE80; display:inline-block; }
#gnpMobileHome .m-appt-banner h3{ margin:0; font-size: 13.5px; font-weight:700; color:#fff; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#gnpMobileHome .m-appt-banner .cta{ flex:0 0 auto; background:#fff; color:#1D3F2E; font-weight:800; font-size: 12.5px; padding:9px 14px; border-radius:100px; white-space:nowrap; text-decoration:none; }

/* ---- daraz-style grid ---- */
#gnpMobileHome .m-daraz-section{ padding:14px 0 20px; background:#F6F9F6; }
#gnpMobileHome .m-daraz-head{ padding-top:20px; text-align:center; margin-bottom:14px; }
#gnpMobileHome .m-daraz-head .eyebrow{ font-size: 12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#4C8B57; margin-bottom:6px; }
#gnpMobileHome .m-daraz-head h2{ font-family:var(--font-display,'Newsreader',Georgia,serif); font-style:italic; font-weight:500; font-size:1.3rem; color:#1D3F2E; margin:0; }
#gnpMobileHome .m-daraz-tabs{ display:flex; gap:8px; overflow-x:auto; padding:0 16px 14px; }
#gnpMobileHome .m-daraz-tab{ flex:0 0 auto; font-size: 14px; font-weight:700; padding:9px 16px; border-radius:100px; background:#fff; border:1px solid #DCE9D8; color:#22261F; white-space:nowrap; }
#gnpMobileHome .m-daraz-tab.active{ background:#4C8B57; border-color:#4C8B57; color:#fff; }
#gnpMobileHome .m-daraz-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 16px; }
#gnpMobileHome .m-daraz-card{ background:#fff; border-radius:14px; overflow:hidden; border:1px solid #DCE9D8; text-decoration:none; color:inherit; display:block; }
#gnpMobileHome .m-daraz-card .thumb{ width:100%; aspect-ratio:1; background:#fff; display:flex; align-items:center; justify-content:center; padding:14px; }
#gnpMobileHome .m-daraz-card .thumb img{ width:100%; height:100%; object-fit:contain; }
#gnpMobileHome .m-daraz-card .info{ padding:2px 10px 12px; }
#gnpMobileHome .m-daraz-card .name{ font-size: 13.5px; font-weight:600; color:#22261F; line-height:1.35; margin-bottom:4px; }
#gnpMobileHome .m-daraz-card .price{ font-size:13px; font-weight:800; color:#2F6E4C; }
#gnpMobileHome .m-daraz-empty{ grid-column:1/-1; text-align:center; padding:30px 16px; font-size: 14px; color:#5B6154; font-weight:600; display:none; }
#gnpMobileHome .m-daraz-empty.show{ display:block; }

/* ---- feature strip ---- */
#gnpMobileHome .m-feat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:18px 16px 4px; background:#F6F9F6; }
#gnpMobileHome .m-feat{ background:#1D3F2E; border-radius:14px; padding:13px; display:flex; gap:10px; align-items:center; }
#gnpMobileHome .m-feat .ic{ width:32px; height:32px; border-radius:9px; background:rgba(191,230,196,.16); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
#gnpMobileHome .m-feat b{ display:block; font-size: 12.5px; color:#fff; font-weight:800; line-height:1.2; }
#gnpMobileHome .m-feat span{ font-size: 11px; color:#9FA994; font-weight:600; }

/* ---- certifications (unchanged) ---- */
#gnpMobileHome .m-certs{ background:linear-gradient(180deg, #1D3F2E 0%, #17301F 100%); padding:30px 16px 34px; text-align:center; }
#gnpMobileHome .m-certs-eyebrow{ display:inline-block; font-size: 12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#BFE6C4; background:rgba(255,255,255,.08); padding:5px 14px; border-radius:100px; margin-bottom:10px; }
#gnpMobileHome .m-certs h2{ font-family:var(--font-display,'Newsreader',Georgia,serif); font-weight:600; font-size:19px; color:#fff; margin-bottom:6px; }
#gnpMobileHome .m-certs-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px; }
#gnpMobileHome .m-cert-card{ background:rgba(255,255,255,0.04); border:1px solid rgba(191,230,196,0.14); border-radius:14px; padding:14px 6px; }
#gnpMobileHome .m-cert-badge{ width:34px; height:34px; border-radius:50%; background:#fff; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:16px; }
#gnpMobileHome .m-cert-badge img{ width:100%; height:100%; object-fit:cover; }
#gnpMobileHome .m-cert-card span{ font-size: 11px; font-weight:800; color:#fff; line-height:1.3; display:block; }


/* GNP-MOBILE-SEARCH-RATIO-FIX-V1 */
@media (max-width: 768px){
  .topnav-search-category--mobile{
    max-width: 62px !important;
    padding: 0 20px 0 10px !important;
    font-size: 0.8rem !important;
    background-position: right .5rem center !important;
  }
  .mobile-search-bar #mobileSearchInput{
    flex: 1 !important;
    font-size: .92rem !important;
  }
}

/* GNP-LOGO-COLOR-FIX-V1 — G and P blue, N green (overrides earlier
   uniform-color rule from GNP-NAV-WHITE-V1) */
.topnav-logo-text .g,
.topnav-logo-text .p{
  color: #2563eb !important;
}
.topnav-logo-text .n{
  color: #1F8452 !important;
}

/* GNP-MOBILE-V4-CLEANUP-V1 */
@media (max-width: 768px){
  /* 1. hide the standard site nav on the v4 mobile homepage only —
     v4 has its own brand row + nav bar that replace it */
  body:has(#gnpMobileHome) .topnav,
  body:has(#gnpMobileHome) .subnav,
  body:has(#gnpMobileHome) .mobile-search-bar{ display: none !important; }

  /* 2. fix the "All" select + search input ratio (targets the real
     v4 markup this time — #mSearchCat has no class, only an id) */
  #mSearchCat{
    max-width: 56px !important;
    font-size: 0.8rem !important;
    padding: 0 4px !important;
    flex: 0 0 auto !important;
  }
  #mSearchInput{
    flex: 1 1 auto !important;
    font-size: .95rem !important;
    min-width: 0 !important;
  }

  /* 3. restyle v4's own certs section: white bg, green accents */
  #gnpMobileHome .m-certs{ background: #fff !important; }
  #gnpMobileHome .m-certs-eyebrow{ color: #1F8452 !important; background: #E3F0E7 !important; }
  #gnpMobileHome .m-certs h2{ color: #0E3326 !important; }
  #gnpMobileHome .m-cert-card{
    opacity: 0; transform: translateY(18px);
    transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
  }
  #gnpMobileHome .m-cert-card.m-cert-show{ opacity: 1; transform: translateY(0); }

  /* hide the old leftover certs section so only v4's own one shows */
  .certs-section{ display: none !important; }
  .certs-section-white{ display: none !important; }
}

/* GNP-MOBILE-V4-CLEANUP-V2 — hides remaining old-desktop sections that
   leak through below #gnpMobileHome (trust-strip = the circled 5-item
   duplicate; cat-carousel-section = both the oversized Bestsellers
   carousel and the duplicate Explore-by-Category tabs+grid). Hiding
   .promo-section (not just .mini-promo-row inside it) — the row alone
   being display:none still left its "Today's promotions" header/padding
   showing above #gnpMobileHome's own promo cards, reading as a second,
   empty-looking promo banner. */
@media (max-width: 768px){
  body:has(#gnpMobileHome) .trust-strip,
  body:has(#gnpMobileHome) .cat-carousel-section,
  body:has(#gnpMobileHome) .promo-section{ display: none !important; }
}

/* GNP-MOBILE-V4-LEGIBILITY-V1 — several labels on the Daraz mobile
   homepage were sized for density over readability (9-10.5px). Bumping
   just the smallest/most-squinted-at text a notch; layout stays identical,
   nothing here changes spacing or wrapping. */
@media (max-width: 768px){
  #gnpMobileHome .m-hero-slide h1{ font-size: 20px !important; }
  #gnpMobileHome .m-hero-btn{ font-size: 13.5px !important; padding: 9px 18px !important; }
  #gnpMobileHome .m-trust-chip span{ font-size: 13px !important; }
  #gnpMobileHome .m-trust-chip .ic{ font-size: 13.5px !important; width: 20px !important; height: 20px !important; }
  #gnpMobileHome .m-cat-chip h4{ font-size: 12.5px !important; }
  #gnpMobileHome .m-appt-banner h3{ font-size: 13px !important; }
  #gnpMobileHome .m-daraz-card .name{ font-size: 13px !important; }
  #gnpMobileHome .m-daraz-card .price{ font-size: 14px !important; }
  #gnpMobileHome .m-best-card .name{ font-size: 13px !important; }
  #gnpMobileHome .m-best-card .price{ font-size: 14px !important; }
  #gnpMobileHome .m-feat b{ font-size: 13.5px !important; }
  #gnpMobileHome .m-feat span{ font-size: 12px !important; }
  #gnpMobileHome .m-cert-card span{ font-size: 12px !important; }
  #gnpMobileHome .m-brand-word b{ font-size: 23px !important; }
  #gnpMobileHome .m-brand-word span{ font-size: 12.5px !important; }
}

/* GNP-MOBILE-ALL-PANEL-COLUMNS-V1 */
@media (max-width: 768px){
  #mAllPanel .m-all-panel-inner{ margin-bottom: 14px; }
  #mAllPanel .m-all-col-label{
    font-size: 12px; font-weight: 700; color: #6E8B7B;
    text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px;
  }
}

/* GNP-MOBILE-LOGO-COLOR-FIX-V1 */
.m-brand-word .m-g,
.m-brand-word .m-p{ color: #2563eb !important; }
.m-brand-word .m-n{ color: #1F8452 !important; }

/* GNP-MOBILE-LOGO-INLINE-FIX-V1 — forces G/N/P to sit on one line;
   they were wrapping because the parent had no explicit inline layout */
.m-brand-word b{
  display: inline-flex !important;
  white-space: nowrap !important;
}
.m-brand-word .m-g,
.m-brand-word .m-n,
.m-brand-word .m-p{
  display: inline !important;
}

/* GNP-MOBILE-HIDE-SCROLL-HINT-V1 — removes the "swipe for more / tap
   for subtypes" caption text under categories, per request */
.m-scroll-hint{ display: none !important; }

/* GNP-BESTSELLER-CARD-COMPACT-V1 — Daraz-style small horizontal scroll cards */
.m-best-head h2{
  font-size: 1.15rem;
  margin: 2px 0 10px;
}
.m-best-head .eyebrow{
  font-size: 0.8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7d6e;
}

.m-best-scroll{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 16px 14px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.m-best-scroll::-webkit-scrollbar{ display: none; }

.m-best-card{
  flex: 0 0 132px;
  width: 132px;
  scroll-snap-align: start;
  border: 1px solid #e3e0d6;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.m-best-card .thumb{
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f5f3ec;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.m-best-card .thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}
.m-best-card .info{
  padding: 8px 10px 10px;
}
.m-best-card .name{
  font-size: 0.86rem;
  line-height: 1.25;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.2em;
  margin-bottom: 4px;
}
.m-best-card .price{
  font-size: .85rem;
  font-weight: 700;
  color: #1f4d2c;
}
.m-best-card .rating{
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 1px;
}
.m-best-card .star{
  font-size: 0.76rem;
  color: #d8d4c4;
}
.m-best-card .star.filled{
  color: #e8a33d;
}
.m-best-card .rating-count{
  font-size: 0.7rem;
  color: #8b8878;
  margin-left: 3px;
}
.m-best-card .sold-badge{
  font-size: 0.7rem;
  color: #6b7d6e;
  margin-top: 2px;
}

/* GNP-BESTSELLER-THUMB-TIGHTEN-V2 — less inner padding so the product
   fills more of the square instead of floating in white space */
.m-best-card .thumb img{
  padding: 3px;
}

/* GNP-SHOP-GRID-COMPACT-V1 — Daraz-style smaller shop/category grid cards,
   matching the bestseller row's compact feel */
.product-card{
  border-radius: 10px !important;
}
.product-img-wrap{
  aspect-ratio: 1 / 1 !important;
}
.product-img-wrap img{
  padding: 2px;
}
.product-info{
  padding: .55rem .6rem .7rem !important;
}
.product-category{
  font-size: 0.66rem !important;
  margin-bottom: .15rem !important;
}
.product-name{
  font-size: 0.86rem !important;
  margin-bottom: .3rem !important;
  min-height: 2.1em;
}
.product-price{
  font-size: .88rem !important;
}
.product-price-old{
  font-size: 0.72rem !important;
}
.btn-cart{
  padding: .3rem .6rem !important;
  font-size: 0.74rem !important;
}
.product-wishlist{
  width: 26px !important; height: 26px !important;
}
.product-sticker{
  padding: .14rem .38rem !important;
  font-size: 0.63rem !important;
}

/* GNP-DARAZ-CARD-RATING-V1 — reuse bestseller star styling for Shop the Range cards */
.m-daraz-card .rating{
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 1px;
}
.m-daraz-card .star{
  font-size: 0.76rem;
  color: #d8d4c4;
}
.m-daraz-card .star.filled{
  color: #e8a33d;
}
.m-daraz-card .rating-count{
  font-size: 0.7rem;
  color: #8b8878;
  margin-left: 3px;
}

/* GNP-EMPTY-RATING-STATE-V1 */
.product-rating .stars-empty{
  color: #d8d4c4;
}
.product-rating .count-empty{
  color: #a3a396;
  font-style: italic;
}

/* GNP-BESTSELLER-MATCH-DARAZ-V1 — copy Explore by Category's clean styling onto Bestsellers */
#gnpMobileHome .m-best-head{
  padding-top: 20px !important;
  text-align: center !important;
  margin-bottom: 14px !important;
}
#gnpMobileHome .m-best-head .eyebrow{
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #4C8B57 !important;
  margin-bottom: 6px !important;
}
#gnpMobileHome .m-best-head h2{
  font-family: var(--font-display,'Newsreader',Georgia,serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 1.3rem !important;
  color: #1D3F2E !important;
  margin: 0 !important;
}
#gnpMobileHome .m-best-card{
  background: #fff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid #DCE9D8 !important;
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
}
#gnpMobileHome .m-best-card .thumb{
  width: 100% !important;
  aspect-ratio: 1 !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
}
#gnpMobileHome .m-best-card .thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 0 !important;
}
#gnpMobileHome .m-best-card .info{
  padding: 2px 10px 12px !important;
}
#gnpMobileHome .m-best-card .name{
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #22261F !important;
  line-height: 1.35 !important;
  margin-bottom: 4px !important;
}
#gnpMobileHome .m-best-card .price{
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #2F6E4C !important;
}

/* GNP-HOME-LIVESEARCH-V1 */
.m-search-row{
  position: relative;
}
#mSearchResults{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
}