/* -- 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; }

/* GNP-GOOGLE-LOGIN-V1 */
.auth-divider {
  display: flex; align-items: center; gap: .9rem; margin: 1.3rem 0;
  color: var(--text-lt, #6b7a70); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.btn-google {
  background: var(--white); color: var(--text, #22261F);
  padding: .8rem 1.6rem; border-radius: 99px; font-size: .92rem; font-weight: 600;
  border: 1.5px solid var(--border);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
}
.btn-google:hover { border-color: #c7cdc9; background: var(--off-white); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.btn-google svg { flex-shrink: 0; }

/* -- 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-SCROLL-GALLERY-V1 =================
   Unified "Choose a category" + "Today's promotions" gallery styling —
   minimal, premium horizontal scroll-snap cards with a centered-card
   scale/dim effect, in the same restrained motion language Apple uses on
   its product pages. Mobile renders the two stacked full-width copies
   above (.gnp-gal-mobile-only, inside #gnpMobileHome); desktop renders one
   split section with categories and promotions side by side
   (.gnp-gal-desktop-only / .gnp-gal-split below). See the gallery <script>
   alongside the desktop markup for the scroll behaviour (click-drag,
   active-card tracking, dots — deliberately no wheel remapping). Whole
   card is one <a> — clicking anywhere opens it, not just the link text. */
.gnp-gal-section{ background: var(--white); padding: 3rem 0 2.75rem; }

/* desktop-only: categories on the left, a big autoplaying "mall screen"
   video panel on the right (falls back to categories alone, full width, if
   there's no video content). Today's Promotions is a separate full-width
   .gnp-gal-section below. Mobile keeps its own stacked .gnp-gal-section
   copies above (gnp-gal-mobile-only) — no video screen there. */
.gnp-gal-split-section{ background: var(--white); padding: 3rem 0 2.75rem; }
.gnp-gal-split{
  display: flex; align-items: stretch; gap: 3rem;
  max-width: 1280px; margin: 0 auto; padding: 0 2.5rem;
}
.gnp-gal-col{ flex: 1 1 0; min-width: 0; }
.gnp-gal-col .gnp-gal-intro{ max-width: none; margin: 0 0 1.6rem; padding: 0; text-align: left; }
.gnp-gal-col .gnp-gal-track{ padding: 0 .5rem .5rem 0; }
.gnp-gal-col .gnp-gal-card{ width: min(230px, 42vw); }
.gnp-gal-col .gnp-gal-dots{ justify-content: flex-start; margin-top: 1.6rem; }

/* the "big screen" — dark bezel + rounded corners + soft shadow reads as a
   premium mounted display (mall digital signage), rather than just another
   card. Slides cross-fade; only one is ever visible/playing at a time. */
.gnp-gal-screen-col{ flex: 1.15 1 0; min-width: 0; display: flex; align-items: stretch; }
.gnp-gal-screen{
  position: relative; width: 100%; align-self: center;
  background: #101014; border-radius: 22px; padding: 12px;
  box-shadow: 0 30px 60px -24px rgba(10,20,15,.35), 0 2px 8px rgba(10,20,15,.12);
}
.gnp-gal-screen-inner{
  position: relative; aspect-ratio: 16/10.5; border-radius: 13px; overflow: hidden; background: #000;
}
.gnp-gal-screen-slide{
  position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; will-change: opacity;
}
.gnp-gal-screen-slide.is-active{ opacity: 1; }
.gnp-gal-screen-slide video, .gnp-gal-screen-slide iframe{
  width: 100%; height: 100%; object-fit: cover; border: 0; display: block;
}
.gnp-gal-screen-caption{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.5rem 1.6rem 1.4rem;
  background: linear-gradient(to top, rgba(6,12,9,.82), rgba(6,12,9,0) 70%);
  text-decoration: none; display: block;
}
.gnp-gal-screen-eyebrow{
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #E8D9AE; margin-bottom: .35rem;
}
.gnp-gal-screen-title{
  display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600;
  color: #fff; margin-bottom: .5rem;
}
.gnp-gal-screen-link{
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .86rem; font-weight: 700; color: #fff;
}
.gnp-gal-screen-link svg{ width: 13px; height: 13px; }
.gnp-gal-screen-dots{ display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: 1rem; }
.gnp-gal-screen-dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--border); border: none; padding: 0;
  cursor: pointer; transition: background .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.gnp-gal-screen-dot.is-active{ background: var(--forest-deep); transform: scale(1.35); }

/* GNP-BEST-RAIL-V3-DESKTOP — mockup-approved: horizontal drag/arrow-scroll
   rail (matches the uploaded reference mockup's .rail/.p-card) instead of
   the plain 2-col grid from the previous round. Card visual DNA (badge on
   the thumb, category/name/rating/price) carried over unchanged from the
   grid version and from the mobile #gnpMobileHome .m-best-card it mirrors. */
.best-head{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 1.4rem; }
.best-head h2{ margin: 0; }
.gnp-best-tabs{ display: flex; gap: .5rem; flex-shrink: 0; }
.gnp-best-tab{
  flex: 0 0 auto; font-size: .78rem; font-weight: 700; padding: .5rem .95rem;
  border-radius: 100px; background: var(--off-white); border: 1px solid var(--border);
  color: var(--forest-deep); font-family: inherit; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.gnp-best-tab.active{ background: var(--forest-deep); border-color: var(--forest-deep); color: #fff; }

.rail-wrap{ position: relative; margin: 0 -4px; }
.rail-arrow{
  position: absolute; top: 38%; width: 42px; height: 42px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--border); display: flex;
  align-items: center; justify-content: center; color: var(--forest-deep);
  z-index: 2; box-shadow: 0 14px 28px -14px rgba(30,60,40,.32); cursor: pointer;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.rail-arrow:hover{ transform: translateY(-2px); }
.rail-arrow.prev{ left: -21px; } .rail-arrow.next{ right: -21px; }
.rail-arrow svg{ width: 14px; height: 14px; }

.gnp-best-rail{
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 4px 4px 10px; scrollbar-width: none; -ms-overflow-style: none; cursor: grab;
}
.gnp-best-rail.dragging{ cursor: grabbing; scroll-snap-type: none; }
.gnp-best-rail.is-autoplaying{ scroll-snap-type: none; }
.gnp-best-rail::-webkit-scrollbar{ display: none; }
#gnpBestGrid{ scroll-snap-type: none; }
/* GNP-BEST-CARD-SIZE-MATCH-V1: card box now matches .product-card (the
   Explore/Shop by Category grid card) — same width tier, corner radius,
   border instead of shadow, and 2:3 image aspect ratio — so the two
   product-card styles on the homepage read as one system instead of two
   different sizes. Still a horizontally-scrolling rail, not a grid. */
.gnp-best-card{
  scroll-snap-align: start; flex: 0 0 auto; width: 228px;
  display: block; background: var(--white); border-radius: 6px;
  border: 1px solid #E3E8E5; box-shadow: none; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color .15s ease;
}
.gnp-best-card:hover{ border-color: var(--primary, #1A6B3C); }
@media (max-width: 1200px){ .gnp-best-card{ width: 200px; } }
@media (max-width: 900px){ .gnp-best-card{ width: 180px; } }
.gnp-best-card .thumb{
  position: relative; aspect-ratio: 2 / 3; background: var(--white);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.gnp-best-card .thumb img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.gnp-best-card .badge{
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--forest-deep); color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px;
}
.gnp-best-card .badge.new{ background: var(--gold); color: var(--forest-deep); }
.gnp-best-card .info{ padding: .75rem .8rem .9rem; }
.gnp-best-card .cat{
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 4px;
}
.gnp-best-card .name{
  font-size: .85rem; font-weight: 600; color: var(--ink, #22261F);
  line-height: 1.35; margin-bottom: 5px;
}
.gnp-best-card .rating{ margin: 3px 0 5px; }
.gnp-best-card .star{ font-size: 12px; color: var(--border); }
.gnp-best-card .star.filled{ color: var(--gold); }
.gnp-best-card .rating-count{ font-size: 11px; color: #6b7a70; margin-left: 3px; }
.gnp-best-card .price{ display: block; font-size: 16px; font-weight: 800; color: var(--forest-deep); }
.gnp-best-viewall{ display: inline-flex; margin-top: 1.4rem; }

/* GNP-SCROLL-GALLERY-V1-HEROSCROLL — "Today's promotions" as big hero-sized
   banner cards in the same drag/swipe/snap horizontal gallery as Categories
   (.gnp-gal-hscroll/.gnp-gal-track/initGnpGallery — see the shared <script>
   below), just wider cards showing the landscape promo artwork instead of
   narrow portrait ones. Caption sits below the image (not overlaid) so
   object-fit:contain's white letterboxing never sits under a dark gradient
   meant for photos. */
.gnp-gal-card.gnp-hero-card{
  /* .gnp-gal-card (defined further below, wins on source order otherwise)
     sets width:min(270px,62vw) + display:block for the narrow portrait
     cards — the compound selector here beats that on specificity instead
     of relying on cascade order, so this doesn't quietly break if the
     stylesheet gets reordered later. */
  width: min(420px, 78vw); display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #fff;
}
.gnp-hero-card .gnp-hero-banner-img{
  position: relative; aspect-ratio: 1.9 / 1; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.gnp-hero-card .gnp-hero-banner-img img,
.gnp-hero-card .gnp-hero-banner-img video,
.gnp-hero-card .gnp-hero-banner-img iframe{
  width: 100%; height: 100%; object-fit: contain; border: 0; display: block;
}
.gnp-hero-card .gnp-hero-banner-caption{
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border-top: 1px solid var(--border); background: #fff;
}
.gnp-hero-card .gnp-hero-banner-caption .gnp-gal-name{ font-size: 1.05rem; }
.gnp-hero-card .gnp-hero-banner-caption .gnp-gal-link{ flex: 0 0 auto; }
.gnp-hero-card:hover{ box-shadow: 0 22px 44px -28px rgba(15,60,40,.3); }
.gnp-hero-card:hover .gnp-gal-link svg{ transform: translateX(3px); }

@media (min-width: 769px) and (max-width: 960px){
  /* two ~230px-card columns (or a card column + screen) get cramped on
     small laptop/tablet-landscape widths — stack instead of forcing side
     by side */
  .gnp-gal-split{ flex-direction: column; gap: 2.5rem; }
}

.gnp-gal-intro{ max-width: 640px; margin: 0 auto 2.25rem; padding: 0 1.25rem; text-align: center; }
.gnp-gal-eyebrow{
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); margin-bottom: .7rem;
}
.gnp-gal-intro h2{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 3.4vw, 2.2rem); letter-spacing: -0.01em; line-height: 1.18;
  color: var(--forest-deep); margin: 0;
}

.gnp-gal-hscroll{
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; cursor: grab;
}
.gnp-gal-hscroll.dragging{ cursor: grabbing; scroll-snap-type: none; }
.gnp-gal-hscroll::-webkit-scrollbar{ display: none; }

.gnp-gal-track{ display: flex; gap: 1.1rem; padding: 0 2.5rem .5rem; width: max-content; }

.gnp-gal-card{
  scroll-snap-align: center; flex: 0 0 auto; width: min(270px, 62vw);
  text-decoration: none; color: inherit; display: block;
  /* GNP-DRAG-FIX-V1: these cards are <a> links wrapping <img>/<video>, and
     browsers natively start their own "drag this link/image out" gesture
     the moment a mousedown+mousemove happens over one — which steals the
     gesture away from the custom scrollLeft-drag JS mid-swipe and reads as
     the gallery "not moving" / fighting the cursor. Disabling native
     drag-out and text/tap-callout selection on the card and everything
     inside it lets our own drag handler own the gesture uncontested. */
  -webkit-user-drag: none; user-drag: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.gnp-gal-card img, .gnp-gal-card video{
  -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none;
}
.gnp-gal-img{
  position: relative; aspect-ratio: 4/5; border-radius: 20px; overflow: hidden;
  background: var(--off-white);
  will-change: transform, opacity;
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .4s cubic-bezier(.16,1,.3,1);
  transform: scale(.94) translateZ(0); opacity: .55;
}
.gnp-gal-card.is-active .gnp-gal-img{ transform: scale(1) translateZ(0); opacity: 1; }
.gnp-gal-img img, .gnp-gal-img video{ width: 100%; height: 100%; object-fit: cover; display: block; }
.gnp-gal-img iframe{ width: 100%; height: 100%; border: 0; }
/* promo tiles are admin-uploaded marketing graphics (often with text baked
   into the edges of the image, e.g. "Top Selling" / a discount banner) —
   object-fit:cover as used above for category photography crops that text
   right off, so promo images get their own modifier: show the whole image,
   letterboxed on white, instead of cropping in. */
.gnp-gal-promoimg{ background: #fff; }
.gnp-gal-promoimg img, .gnp-gal-promoimg video{ object-fit: contain; }

.gnp-gal-c1{ background: #EAF3EA; }
.gnp-gal-c2{ background: #FBEEDC; }
.gnp-gal-c3{ background: #E9F1F0; }
.gnp-gal-icon{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3.4rem; opacity: .8; }

.gnp-gal-badge{
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--forest-deep); color: #fff; font-size: .66rem; font-weight: 800;
  letter-spacing: .02em; padding: 5px 10px; border-radius: 999px;
}
.gnp-gal-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: .64rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px;
}

.gnp-gal-caption{ padding: .95rem .1rem 0; transition: opacity .5s ease; }
.gnp-gal-card:not(.is-active) .gnp-gal-caption{ opacity: .5; }
.gnp-gal-card.is-active .gnp-gal-caption{ opacity: 1; }
.gnp-gal-eyebrow-tag{
  font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .3rem;
}
.gnp-gal-name{
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 600;
  letter-spacing: -0.005em; color: var(--forest-deep); margin: 0 0 .2rem; line-height: 1.25;
}
.gnp-gal-meta{ font-size: .83rem; font-weight: 600; color: var(--text-md); margin: 0 0 .25rem; }
.gnp-gal-tagline{ font-size: .82rem; color: var(--text-md); margin: 0 0 .6rem; line-height: 1.45; }
.gnp-gal-link{
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .86rem; font-weight: 700; color: var(--gold);
}
.gnp-gal-link svg{ width: 12px; height: 12px; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.gnp-gal-card:hover .gnp-gal-link svg{ transform: translateX(3px); }

.gnp-gal-dots{ display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: 2.1rem; }
.gnp-gal-dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--border); border: none; padding: 0;
  cursor: pointer; transition: background .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.gnp-gal-dot.is-active{ background: var(--forest-deep); transform: scale(1.35); }

@media (prefers-reduced-motion: reduce){
  .gnp-gal-img, .gnp-gal-caption, .gnp-gal-link svg, .gnp-gal-dot{ transition: none !important; }
}

/* the mobile copy lives inside #gnpMobileHome; the desktop copy lives in
   the regular desktop flow further down home.html — only one of each pair
   is ever shown, matching the show/hide pattern the rest of this file uses
   for #gnpMobileHome vs. its desktop equivalents. */
@media (max-width: 768px){
  .gnp-gal-desktop-only{ display: none !important; }
  .gnp-gal-section{ padding: 1.6rem 0 1.5rem; }
  .gnp-gal-intro{ margin-bottom: 1.4rem; padding: 0 16px; text-align: left; }
  .gnp-gal-card{ width: 64vw; }
  .gnp-gal-track{ gap: .9rem; padding: 0 16px .5rem; }
}
@media (min-width: 769px){
  .gnp-gal-mobile-only{ display: none !important; }
}

/* 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 CARDS (GNP-BLOG-REDESIGN-V1) — shared by the blog listing's
   "Latest Articles" grid and the article page's "Related Articles" strip.
   Desktop: a news-outlet-style overlay card (photo, dark gradient scrim,
   tag + title + excerpt over the image). Mobile: collapses to a compact
   thumbnail + title row instead of stacking full-size photo cards one
   after another — the previous mobile layout didn't scale once a
   category has more than a handful of posts. -- */
.blog-section { background: var(--off-white); }
/* Standalone tag pill, used outside cards (e.g. article-page byline row
   in post_detail.html) — distinct from .blog-card-tag, which is styled
   for sitting on top of a photo rather than a plain background. */
.blog-tag { display: inline-block; background: var(--primary-xs); color: var(--primary); border-radius: 4px; padding: .15rem .5rem; font-weight: 600; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; max-width: 1200px; margin: 0 auto; }
.blog-card {
  position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); aspect-ratio: 3/4.1;
  transition: transform var(--transition), box-shadow var(--transition);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.blog-card:hover .blog-card-img { transform: scale(1.06); }
.blog-card-img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  /* GNP-BLOG-CARD-IMG-FIX-V2: this used to be the `background:` shorthand,
     which resets background-size/background-position back to their initial
     values (auto / 0% 0%) even though this rule set cover/center just above.
     That's what made real photos render unscaled/uncropped instead of
     covering the card — invisible whenever the image's native top-left
     corner happened to be a plain/light area (e.g. a product photo shot on
     white). Using the background-image longhand keeps size/position intact
     for every post, real photo or fallback gradient alike. */
  background-image: linear-gradient(135deg, var(--primary), var(--primary-lt));
  display: flex; align-items: flex-start; justify-content: center; padding-top: 34%;
  transition: transform .6s ease;
}
/* GNP-BLOG-CARD-IMG-FIX-V1: fallback icon used to be centered in the whole
   card, which put it right behind the title/excerpt text for posts with no
   featured_image. Pushed it into the upper, text-free zone instead. The
   scrim below also got a light top wash added (not just the bottom
   gradient) so bright/white product photos don't look blown-out/washed-out
   against the card, and everything reads consistently regardless of the
   source photo's brightness. */
.blog-card-img svg { opacity: .45; }
.blog-card-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,20,14,.24) 0%, rgba(9,20,14,.1) 26%, rgba(9,20,14,.58) 68%, rgba(9,20,14,.92) 100%); }
.blog-card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.3rem 1.5rem; color: #fff; }
.blog-card-tag { display: inline-block; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .3rem .75rem; border-radius: 99px; margin-bottom: .7rem; }
.blog-card-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.32; margin-bottom: .5rem; }
.blog-card-excerpt { font-size: .82rem; color: rgba(255,255,255,.82); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card-meta { display: none; font-size: .78rem; color: var(--text-lt); }

@media (max-width: 640px){
  .blog-grid{ display: flex; flex-direction: column; gap: 0; max-width: none; }
  .blog-card{ position: static; display: flex; align-items: flex-start; gap: .85rem; aspect-ratio: auto; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--border); padding: .9rem 0; }
  .blog-card:hover{ transform: none; box-shadow: none; }
  .blog-card-img{ position: static; width: 78px; height: 78px; flex: none; border-radius: 12px; box-shadow: var(--shadow-sm); }
  .blog-card:hover .blog-card-img{ transform: none; }
  .blog-card-scrim, .blog-card-excerpt{ display: none; }
  .blog-card-body{ position: static; padding: 0; color: var(--text); flex: 1; min-width: 0; }
  .blog-card-tag{ background: none; border: none; backdrop-filter: none; color: var(--primary); padding: 0; margin-bottom: .25rem; font-size: .62rem; }
  .blog-card-title{ font-size: .9rem; margin-bottom: .25rem; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .blog-card-meta{ display: block; }
}

/* -- 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); }

/* GNP-PW-TOGGLE-V1: show/hide toggle button for password fields — see
   .pw-toggle handler in base.html. */
.pw-field { position: relative; }
.pw-field input[type="password"],
.pw-field input[type="text"] { padding-right: 2.6rem; }
.pw-toggle {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 6px; margin: 0; cursor: pointer;
  color: var(--text-lt, #6b7a70); display: flex; align-items: center; justify-content: center;
  border-radius: 6px; transition: color .15s ease, background .15s ease;
}
.pw-toggle:hover { color: var(--primary, var(--forest-deep, #1a3a2a)); background: rgba(0,0,0,.04); }
.pw-toggle svg { width: 18px; height: 18px; display: block; }
.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: var(--white, #fff); border-radius: var(--radius-lg); aspect-ratio: 1/1; 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: contain; padding: 1.25rem; box-sizing: border-box; }
.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; }

/* GNP-PDP-GALLERY-VIDEO-V1 -- video slides in the product gallery
   (thumbnail fallback tile + the main-image video container). */
.pdp-thumb--video { background: #1a1a1a; display: flex; align-items: center; justify-content: center; }
.pdp-thumb-video-fallback { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; }
.pdp-thumb-video-fallback svg { width: 18px; height: 18px; }
.pdp-thumb-video-label { font-size: 8.5px; text-transform: capitalize; letter-spacing: .03em; opacity: .85; }
.pdp-main-video { position: absolute; inset: 0; background: #000; z-index: 2; }
.pdp-main-video[hidden] { display: none; }
.pdp-main-video iframe { width: 100%; height: 100%; border: 0; 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; }
/* GNP-CAMPAIGN-STRIP-LAG-FIX-V1: backdrop-filter forces the browser to
   resample whatever's behind this element on every scroll frame (it isn't
   a fixed/sticky element, so its backdrop keeps changing as the page
   scrolls) — one of the more expensive things to put in a scrolling page,
   and up to 3 of these sit directly in the Trust Strip -> Bestsellers
   scroll path. Dropped in favor of a slightly more opaque flat background,
   which reads almost identically over the card's own gradient/photo. */
.campaign-strip-cta { position: relative; z-index: 2; display: block; background: rgba(20,20,20,.28); border-top: 1px solid rgba(255,255,255,.2); color: #fff; font-weight: 700; font-size: .85rem; padding: .6rem 1.25rem; text-align: right; 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: fixed; top: var(--help-panel-top, 60px); right: var(--help-panel-right, 2.5rem);
  left: auto;
  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; max-width: calc(100vw - 2rem); z-index: 250;
}
.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; }

/* GNP-MOBILE-NAV-SITEWIDE-V1: the mobile header (brand row + green nav row +
   search pill row) used to live only inside #gnpMobileHome, so it only
   rendered on the homepage — every other page fell back to the old
   desktop .topnav/.subnav squeezed into a mobile width, which is why Shop
   (and everything else) looked like a different, older site. It now lives
   in base.html as #gnpMobileNav, included on every page, so the toggle
   below is its own rule instead of piggybacking on #gnpMobileHome. */
#gnpMobileNav{ display:none; }

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

/* ---- header row 1: brand ---- */
#gnpMobileNav .m-top-white{ display:flex; align-items:center; gap:10px; padding:12px 16px 10px; background:#fff; }
#gnpMobileNav .m-brand{ display:flex; align-items:center; gap:9px; flex:1; min-width:0; text-decoration:none; }
#gnpMobileNav .m-brand-logo{ width:34px; height:34px; border-radius:50%; flex-shrink:0; object-fit:cover; }
#gnpMobileNav .m-brand-word{ line-height:1.15; min-width:0; }
#gnpMobileNav .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; }
#gnpMobileNav .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; }
#gnpMobileNav .m-top-icons{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
#gnpMobileNav .m-icon-btn{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#EEF6EC; color:#2F6E4C; }
#gnpMobileNav .m-icon-btn svg{ width:17px; height:17px; }
#gnpMobileNav .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; }
#gnpMobileNav .m-ham-btn span{ display:block; width:15px; height:2px; background:#2F6E4C; border-radius:2px; }

/* ---- header row 2: green nav ---- */
#gnpMobileNav .m-nav-green{ background:#1D3F2E; display:flex; align-items:stretch; padding:0 16px; overflow-x:auto; }
#gnpMobileNav .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; }
#gnpMobileNav .m-nav-all .chev{ font-size: 11px; color:#BFE6C4; transition:transform .2s ease; }
#gnpMobileNav .m-nav-all.open .chev{ transform:rotate(180deg); }
#gnpMobileNav .m-nav-tabs{ display:flex; align-items:stretch; gap:22px; }
#gnpMobileNav .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; }
#gnpMobileNav .m-nav-tab.active{ color:#fff; border-bottom-color:#4C8B57; }

/* ---- "All" dropdown panel ---- */
#gnpMobileNav .m-all-panel{ display:none; padding:0 16px; background:#fff; border-bottom:1px solid #DCE9D8; }
#gnpMobileNav .m-all-panel.open{ display:block; }
#gnpMobileNav .m-all-panel-inner{ padding:12px 0 14px; }
#gnpMobileNav .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; }
#gnpMobileNav .m-all-row:last-child{ border-bottom:none; }
#gnpMobileNav .m-all-row .n{ font-size: 12.5px; color:#5B6154; font-weight:600; }

/* ---- header row 3: search pill ---- */
#gnpMobileNav .m-search-row{ display:flex; align-items:center; gap:10px; padding:11px 16px 12px; background:#fff; border-bottom:1px solid #DCE9D8; }
#gnpMobileNav .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; }
#gnpMobileNav .m-search-pill select{ border:none; background:none; font-size: 13.5px; font-weight:800; color:#2F6E4C; font-family:inherit; }
#gnpMobileNav .m-search-pill .sep{ opacity:.35; font-size: 12.5px; }
#gnpMobileNav .m-search-pill svg{ width:14px; height:14px; color:#5B6154; flex-shrink:0; }
#gnpMobileNav .m-search-pill input{ border:none; background:none; outline:none; font-size: 14px; color:#22261F; flex:1; min-width:0; font-family:inherit; }
#gnpMobileNav .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; }
#gnpMobileNav .m-cart-mini svg{ width:17px; height:17px; color:#2F6E4C; }
#gnpMobileNav .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; }
/* GNP-MOBILE-HERO-CROP-FIX-V1: .m-hero used to have no fixed height, only a
   200px floor — and the *active* slide switched to position:relative,
   pulling it back into normal document flow so its own content (padding +
   however many lines the heading wrapped to) decided the container's real
   height. Every slide has different text length, so the same
   background-size:cover photo got cropped differently slide to slide —
   sometimes chopping off text baked into the image itself. Giving .m-hero a
   fixed aspect-ratio and keeping every slide (including .active) purely
   absolute/inset:0 means the box size — and therefore the crop — is now
   identical and predictable for every slide, no longer content-dependent. */
#gnpMobileHome .m-hero{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio: 4 / 3; 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; }
#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;
}

/* GNP-HERO-GALLERY-V1: the hero as a drag-scroll gallery — everything above
   this point (.m-hero-slide/.m-hero-nav-btn/.m-hero-dots/etc.) is now dead
   CSS from the old crossfade-with-arrows carousel, left in place rather
   than risk deleting something still referenced elsewhere; the new markup
   doesn't use any of those class names. This block is the real styling now,
   reusing the same .gnp-gal-hscroll/.gnp-gal-track/.gnp-gal-card/.gnp-gal-img
   base rules the categories gallery uses (scroll-snap, drag, the
   native-drag-suppression fix, the active-card scale/dim) — the #gnpMobileHome
   id prefix gives these overrides enough specificity to win over the shared
   base sizing without !important. */
#gnpMobileHome .m-hero-section{ padding:0; }
#gnpMobileHome .m-hero-hscroll{ padding-top:2px; }
#gnpMobileHome .m-hero-track{ padding:0 16px; gap:12px; }
#gnpMobileHome .m-hero-card{ width:88vw; max-width:420px; }
#gnpMobileHome .m-hero-img{
  aspect-ratio: 4 / 3; border-radius:22px;
  background:linear-gradient(135deg,#1D3F2E,#0F251C);
}
#gnpMobileHome .m-hero-img img,
#gnpMobileHome .m-hero-img video{ width:100%; height:100%; object-fit:cover; display:block; }
#gnpMobileHome .m-hero-gal-dots{ margin-top:12px; padding:0 16px; justify-content:flex-start; }

/* ---- 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; }

/* ---- "In motion" GIF tiles (GNP-GIF-PROMO-V1) ---- */
#gnpMobileHome .m-gif-section{ padding:18px 0 14px; }
#gnpMobileHome .m-gif-head{ margin-bottom:12px; padding:0 16px; }
#gnpMobileHome .m-gif-head .eyebrow{ font-size: 12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#4C8B57; margin-bottom:4px; }
#gnpMobileHome .m-gif-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-gif-scroll{ display:flex; gap:12px; overflow-x:auto; padding:2px 16px 6px; }
#gnpMobileHome .m-gif-card{
  flex:0 0 auto; width:150px; text-decoration:none; color:inherit;
  border-radius:18px; overflow:hidden; background:#fff; border:1px solid #DCE9D8;
}
#gnpMobileHome .m-gif-media{ position:relative; aspect-ratio:1/1.05; background:#EEF6EC; }
#gnpMobileHome .m-gif-media img{ width:100%; height:100%; object-fit:cover; display:block; }
#gnpMobileHome .m-gif-tag{
  position:absolute; top:8px; left:8px; z-index:2; background:rgba(255,255,255,.88);
  color:#1D3F2E; font-size: 9px; font-weight:800; letter-spacing:.05em;
  padding:3px 8px; border-radius:100px;
}
#gnpMobileHome .m-gif-info{ padding:9px 11px 11px; }
#gnpMobileHome .m-gif-info h4{ font-size: 12px; font-weight:700; color:#22261F; margin:0 0 2px; line-height:1.3; }
#gnpMobileHome .m-gif-info span{ font-size: 10.5px; color:#5B6154; }

/* ---- 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. the standard site nav (.topnav/.subnav/.mobile-search-bar) is now
     hidden sitewide on mobile — see GNP-MOBILE-NAV-SITEWIDE-V1 above —
     since #gnpMobileNav replaces it on every page, not just the homepage. */

  /* 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). The old
   .promo-section rule that used to live here is gone — "Today's
   promotions" is now GNP-SCROLL-GALLERY-V1 (.gnp-gal-desktop-only /
   .gnp-gal-mobile-only above), which handles its own viewport toggle. */
@media (max-width: 768px){
  body:has(#gnpMobileHome) .trust-strip,
  body:has(#gnpMobileHome) .cat-carousel-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-SHOP-GRID-QUICKADD-V1: same slide-up quick-add motion as the
   bestseller rail (GNP-BEST-QUICKADD-V1), applied to the regular shop/
   category grid cards. overflow:hidden on .product-card clips the bar
   while it's translated below the visible area; position:relative gives
   the bar something to anchor bottom:0 against. Only padding/font-size
   re-overridden with !important here, matching the property set the
   pre-existing global .btn-cart rule marks !important. */
.product-card{ position: relative; overflow: hidden; }
.product-card .product-footer{
  display: flex; align-items: center; justify-content: space-between; position: relative; min-height: 22px;
}
.product-card .product-footer .price{ transition: opacity .3s ease; }
.product-card:hover .product-footer .price{ opacity: 0; }
.product-card .btn-cart.quickadd{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; transform: translateY(100%);
  background: var(--forest-deep); color: #fff; padding: .6rem !important; font-size: 0.78rem !important; font-weight: 700;
  text-align: center; border: none; border-radius: 0; box-shadow: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform .4s cubic-bezier(.16,1,.3,1); font-family: inherit; text-decoration: none; white-space: nowrap;
}
.product-card .btn-cart.quickadd svg{ width: 12px; height: 12px; flex-shrink: 0; }
.product-card:hover .btn-cart.quickadd{ transform: translateY(0); }
.product-card .btn-cart.quickadd:hover{ background: var(--forest-deep); }
.product-card .btn-cart.quickadd[disabled],
.product-card .btn-cart.quickadd[aria-disabled="true"]{
  opacity: .55; cursor: not-allowed; pointer-events: none;
}

/* 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;
}

/* ============================================================
   GNP-MOBILE-SOFT-REDESIGN-V1 — remaining pieces of the finalized
   Mockup B4 (soft frosted) that hadn't shipped yet: header/search row,
   Today's Promotions as an auto-advancing story card, and the soft
   rounded/shadow card treatment for bestsellers/appointment/shop-grid/
   certifications. Appended last so it wins the cascade over the earlier
   flat/bordered rules above (several of which used !important) without
   having to touch every scattered declaration individually. The circular
   category rail (.m-cat-section/.m-cat-chip/.m-flyout*) that used to sit
   between the hero and the appointment banner was removed from the
   template as a duplicate of "Choose a category" above it — its CSS here
   is simply unused now, left in place rather than risk deleting a rule
   something else might reference.
   ============================================================ */

/* ---- header: brand row + nav row + search row, frosted/pill style ----
   GNP-NAV-COLOR-FIX-V1: this block had drifted the brand row and the green
   nav row to the same cream (#FBF9F3), which is what made the mobile
   header read as "all cream" with no green nav — reset here to white
   (brand/search rows) and the intended forest green (the nav row, per its
   own .m-nav-green class name) instead. */
#gnpMobileNav .m-top-white{
  background:#fff !important;
  padding:14px 20px 10px !important;
}
#gnpMobileNav .m-icon-btn{
  width:36px !important; height:36px !important;
  background:#fff !important; color:#1D3F2E !important;
  box-shadow:0 4px 14px -6px rgba(30,60,40,.22) !important;
}
#gnpMobileNav .m-icon-btn svg{ width:16px !important; height:16px !important; }
#gnpMobileNav .m-ham-btn{
  width:36px !important; height:36px !important; border-radius:50% !important;
  background:#fff !important;
  box-shadow:0 4px 14px -6px rgba(30,60,40,.22) !important;
}
#gnpMobileNav .m-ham-btn span{ background:#1D3F2E !important; }

/* GNP-NAV-COLOR-FIX-V2: per feedback — not a solid green bar, but the same
   pattern as the Bestsellers/New Arrivals pills right below it: a white
   bar, white pills for every item, and the CURRENTLY SELECTED one turns
   solid forest green (mirrors #gnpMobileNav .m-best-tab.active exactly). */
#gnpMobileNav .m-nav-green{
  background:#fff !important;
  display:flex !important; align-items:center !important; gap:10px !important;
  padding:0 20px 12px !important;
}
#gnpMobileNav .m-nav-all{
  padding:9px 14px !important; margin-right:0 !important;
  border-radius:100px !important; background:#fff !important;
  color:#1D3F2E !important;
  box-shadow:0 3px 10px -7px rgba(30,60,40,.18) !important;
  border-right:none !important;
}
#gnpMobileNav .m-nav-all .chev{ color:#2F6E4C !important; }
#gnpMobileNav .m-nav-tabs{ gap:6px !important; }
#gnpMobileNav .m-nav-tab{
  padding:9px 13px !important; border-radius:100px !important;
  color:#5B6154 !important; background:#fff !important;
  box-shadow:0 3px 10px -7px rgba(30,60,40,.18) !important;
  border-bottom:none !important;
}
#gnpMobileNav .m-nav-tab.active{
  color:#fff !important; background:#1D3F2E !important;
  border-bottom:none !important;
}

#gnpMobileNav .m-search-row{
  background:#fff !important;
  border-bottom:none !important;
  padding:4px 20px 16px !important;
}
#gnpMobileNav .m-search-pill{
  background:#fff !important; border:none !important;
  box-shadow:0 6px 20px -10px rgba(30,60,40,.2) !important;
  padding:11px 16px !important;
}
#gnpMobileNav .m-cart-mini{
  background:#fff !important;
  box-shadow:0 4px 14px -6px rgba(30,60,40,.22) !important;
}
#gnpMobileNav .m-cart-mini svg{ color:#1D3F2E !important; }
#gnpMobileNav .m-cart-mini .badge{ background:#B99A4B !important; color:#fff !important; }

/* ---- Today's Promotions: auto-advancing story card (GNP-STORY-PROMO-V1) ---- */
#gnpMobileHome .m-story-section{ padding:18px 0 14px; }
#gnpMobileHome .m-story-head{ margin-bottom:12px; padding:0 16px; }
#gnpMobileHome .m-story-head .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#4C8B57; margin-bottom:4px; display:block; }
#gnpMobileHome .m-story-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-story-wrap{ margin:0 16px; position:relative; }
#gnpMobileHome .m-story-progress{ position:absolute; top:16px; left:16px; right:16px; z-index:3; display:flex; gap:5px; }
#gnpMobileHome .m-story-progress .seg{ flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.32); overflow:hidden; }
#gnpMobileHome .m-story-progress .seg .fill{ display:block; height:100%; width:0%; background:#fff; border-radius:3px; }
#gnpMobileHome .m-story-progress .seg.done .fill{ width:100%; }
#gnpMobileHome .m-story-top{ position:absolute; top:32px; left:16px; right:16px; z-index:3; display:flex; align-items:center; justify-content:space-between; }
#gnpMobileHome .m-story-top .lbl{ display:flex; align-items:center; gap:6px; color:#fff; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; text-shadow:0 2px 10px rgba(0,0,0,.35); }
#gnpMobileHome .m-story-top .count{ color:rgba(255,255,255,.8); font-size:10px; font-weight:700; text-shadow:0 2px 10px rgba(0,0,0,.35); }
#gnpMobileHome .m-story-stage{ position:relative; aspect-ratio:4/5; border-radius:26px; overflow:hidden; box-shadow:0 30px 60px -24px rgba(20,40,28,.42); background:linear-gradient(155deg,#2F6E4C,#132a1c); }
#gnpMobileHome .m-story-slide{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; text-decoration:none; display:block; }
#gnpMobileHome .m-story-slide.is-active{ opacity:1; }
#gnpMobileHome .m-story-slide .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#gnpMobileHome .m-story-slide .shade{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,.1) 100%); }
#gnpMobileHome .m-story-badge{ position:absolute; top:66px; left:18px; z-index:2; background:#fff; color:#1D3F2E; font-size:10px; font-weight:800; padding:6px 12px; border-radius:100px; }
#gnpMobileHome .m-story-bottom{ position:absolute; left:20px; right:20px; bottom:22px; z-index:2; }
#gnpMobileHome .m-story-bottom .tag{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#E8D9AE; margin:0 0 6px; }
#gnpMobileHome .m-story-bottom h3{ font-family:var(--font-display,'Newsreader',Georgia,serif); font-size:24px; font-weight:600; color:#fff; margin:0 0 8px; line-height:1.1; }
#gnpMobileHome .m-story-bottom .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
#gnpMobileHome .m-story-bottom .price{ font-size:13px; color:rgba(255,255,255,.82); font-weight:600; }
#gnpMobileHome .m-story-bottom .cta{ display:inline-flex; align-items:center; gap:6px; background:#fff; color:#1D3F2E; font-size:11.5px; font-weight:800; padding:10px 16px; border-radius:100px; white-space:nowrap; }
#gnpMobileHome .m-story-tap{ position:absolute; top:70px; bottom:0; width:34%; z-index:4; }
#gnpMobileHome .m-story-tap.left{ left:0; }
#gnpMobileHome .m-story-tap.right{ right:0; }

/* ---- bestsellers: 2x2 soft-card grid + "See all" (GNP-BEST-GRID-V1) ---- */
#gnpMobileHome .m-best-head{
  display:flex !important; align-items:flex-end !important; justify-content:space-between !important;
  text-align:left !important; padding-top:20px !important; margin-bottom:14px !important; padding-left:16px !important; padding-right:16px !important;
}
#gnpMobileHome .m-best-viewall{ font-size:11px; font-weight:700; color:#2F6E4C; text-decoration:none; white-space:nowrap; flex-shrink:0; }
#gnpMobileHome .m-best-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 16px; }
#gnpMobileHome .m-best-card{
  background:#fff !important; border:none !important; border-radius:20px !important;
  box-shadow:0 14px 30px -20px rgba(30,60,40,.25) !important;
  padding:10px !important;
}
#gnpMobileHome .m-best-card .thumb{ border-radius:14px !important; }

/* ---- appointment: soft card instead of dark gradient banner ---- */
#gnpMobileHome .m-appt-section{ padding:8px 16px 6px; }
#gnpMobileHome .m-appt-banner{
  background:#fff; border-radius:22px; padding:16px;
  box-shadow:0 16px 34px -22px rgba(30,60,40,.26);
}
#gnpMobileHome .m-appt-banner .photo{
  background:linear-gradient(150deg,#E8D9AE,#B99A4B);
  border:none; width:50px; height:50px;
}
#gnpMobileHome .m-appt-banner .k{ color:#2F6E4C; }
#gnpMobileHome .m-appt-banner h3{ color:#22261F !important; }
#gnpMobileHome .m-appt-banner .cta{ background:#EEF6EC; color:#1D3F2E; }

/* ---- shop grid: left-aligned head + shadow cards instead of borders ---- */
#gnpMobileHome .m-daraz-section{ background:#fff; }
#gnpMobileHome .m-daraz-head{ text-align:left !important; padding:20px 16px 0; }
#gnpMobileHome .m-daraz-tab{ box-shadow:0 3px 10px -7px rgba(30,60,40,.18); border:none; }
#gnpMobileHome .m-daraz-tab.active{ background:#1D3F2E; border-color:#1D3F2E; }
#gnpMobileHome .m-daraz-card{
  border:none !important; border-radius:18px !important;
  box-shadow:0 10px 24px -18px rgba(30,60,40,.22) !important;
}

/* ---- certifications: floating gradient card, not edge-to-edge ---- */
#gnpMobileHome .m-certs{
  margin:16px 16px 0 !important; padding:26px 18px !important;
  border-radius:24px !important;
  background:linear-gradient(160deg,#fff,#EEF6EC) !important;
  box-shadow:0 18px 36px -24px rgba(30,60,40,.25) !important;
}
#gnpMobileHome .m-cert-badge{
  border-radius:14px !important; width:44px !important; height:44px !important;
  box-shadow:0 6px 14px -8px rgba(30,60,40,.2) !important;
}

/* ---- GNP-BEST-TABS-V2: rebuilt to mirror "Explore by Category" below —
   same pill-tabs row, same full 2-col shadow-card grid — instead of V1's
   cramped 156px horizontal-scroll cards. Badge + category label kept as
   the one addition over the plain daraz card. "See all products" stays a
   centered link under the grid so the full catalog is still one tap away. ---- */
#gnpMobileHome .m-best-tabs{
  display:flex; gap:8px; overflow-x:auto; padding:0 16px 14px;
}
#gnpMobileHome .m-best-tab{
  flex:0 0 auto; font-size:14px; font-weight:700; padding:9px 16px;
  border-radius:100px; background:#fff; border:none; color:#22261F;
  white-space:nowrap; box-shadow:0 3px 10px -7px rgba(30,60,40,.18);
  font-family:inherit; cursor:pointer;
  /* GNP-TAP-RELIABILITY-V1: these tabs sit in a horizontally-scrollable
     row (.m-best-tabs is overflow-x:auto) — manipulation tells the browser
     this is a tappable control, not a candidate for the drag/zoom gesture
     the scroll container also handles, so a quick tap always registers as
     a click instead of occasionally being swallowed as a scroll attempt. */
  touch-action: manipulation;
}
#gnpMobileHome .m-best-tab.active{ background:#1D3F2E; color:#fff; }

/* GNP-BEST-HSCROLL-V1: swapped back from a 2-col grid to a horizontal
   scroll row (drag/swipe, snap-to-card) so Bestsellers reads as a
   scrollable Daraz-style shelf instead of a tall block on the homepage. */
#gnpMobileHome .m-best-grid{
  display:flex !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none;
  gap:12px !important; padding:0 16px 4px !important;
}
#gnpMobileHome .m-best-grid::-webkit-scrollbar{ display:none; }
#gnpMobileHome .m-best-card{
  flex:0 0 42% !important; width:42% !important; min-width:150px; max-width:190px;
  scroll-snap-align:start; padding:0 !important;
  background:#fff !important; border:none !important; border-radius:18px !important;
  box-shadow:0 10px 24px -18px rgba(30,60,40,.22) !important;
  overflow:hidden;
}
#gnpMobileHome .m-best-card .thumb{
  position:relative !important; border-radius:0 !important;
  aspect-ratio:1/1; background:#fff !important;
  display:flex; align-items:center; justify-content:center; padding:14px;
}
#gnpMobileHome .m-best-card .thumb img{ padding:0; }
#gnpMobileHome .m-best-card .info{ padding:2px 12px 14px; }
#gnpMobileHome .m-best-card .badge{
  position:absolute; top:10px; left:10px; z-index:2;
  background:#1D3F2E; color:#fff; font-size:9px; font-weight:800;
  letter-spacing:.03em; text-transform:uppercase; padding:4px 8px; border-radius:6px;
}
#gnpMobileHome .m-best-card .badge.new{ background:#B99A4B; color:#1D3F2E; }
#gnpMobileHome .m-best-card .cat{
  font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:#B99A4B; margin-bottom:3px;
}
#gnpMobileHome .m-best-card .name{ font-size:13.5px !important; font-weight:600; color:#22261F; line-height:1.35; margin-bottom:4px; }
#gnpMobileHome .m-best-card .rating{ margin:2px 0 4px; }
#gnpMobileHome .m-best-card .price{ display:block; font-size:14px !important; font-weight:800; color:#2F6E4C; }

#gnpMobileHome .m-best-viewall{
  display:block; text-align:center; margin:14px 16px 0; padding:12px;
  font-size:12px; font-weight:700; color:#1D3F2E; text-decoration:none;
  border:1px solid #E4E9DE; border-radius:100px;
}

/* ============================================================
   GNP-NAV-V2 — desktop header restyle (mockup-approved). Restyles
   the EXISTING .topnav/.subnav markup in base.html (no HTML/JS
   structure changes beyond the small scroll-class script added
   alongside this) so search autosuggest, the mega "All" panel,
   cart badge, and language switch all keep working untouched.
   Mobile is unaffected — .topnav/.subnav are display:none below
   768px in favor of #gnpMobileNav (see GNP-MOBILE-NAV-V1 above).
   ============================================================ */
.topnav{
  position: sticky; top: 0; z-index: 200;
  transition: box-shadow .3s cubic-bezier(.16,1,.3,1), padding .3s cubic-bezier(.16,1,.3,1);
}
.topnav.gnp-nav-scrolled{
  box-shadow: 0 1px 0 var(--border), 0 20px 40px -30px rgba(20,40,28,.3);
}

.topnav-search form{
  border-radius: 100px !important; background: var(--off-white);
  border: 1px solid var(--border); padding: 4px 4px 4px 0;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.topnav-search form:focus-within{
  border-color: var(--forest-soft, #3F8A63);
  box-shadow: 0 0 0 3px rgba(63,138,99,.14);
}
.topnav-search-category{ background-color: transparent; border-right: 1px solid var(--border); border-radius: 100px 0 0 100px; }
.topnav-search-category:hover, .topnav-search-category:focus{ background-color: var(--off-white); box-shadow: none; }
.topnav-search input{ background: none !important; border: none !important; padding-left: 14px; }
.topnav-search button{
  background: var(--forest-deep) !important; border-radius: 50% !important;
  width: 38px; height: 38px; padding: 0 !important; margin-left: 6px;
  color: #fff !important; transition: background .25s ease;
}
.topnav-search button:hover{ background: var(--forest, #2F6E4C) !important; }

.topnav-actions{ gap: 8px; }
.topnav-actions a{
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 12px; border-radius: 12px; font-size: 11px !important; font-weight: 700;
  transition: background .25s ease;
}
.topnav-actions a:not(.topnav-cart):hover{ background: var(--off-white); }
.topnav-cart{
  width: 42px; height: 42px; border-radius: 50%; background: var(--forest-deep);
  align-items: center; justify-content: center; transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.topnav-cart:hover{ transform: translateY(-2px); }
.topnav-cart svg{ color: #fff !important; }
.topnav-cart-badge{ background: var(--gold, #B99A4B); top: -4px; right: -4px; }
.topnav-hamburger{
  width: 42px; height: 42px; border-radius: 12px; background: var(--forest-deep) !important;
  align-items: center; justify-content: center;
}
.topnav-hamburger svg{ color: #fff; }

.subnav{
  background: var(--white); border-bottom: 1px solid var(--border);
  padding: 0 24px; gap: 0; align-items: center;
  /* GNP-NAV-V2-NOWRAP-FIX: the base .subnav rule (top of this file) is
     flex-wrap:wrap, which let the last link (Campaigns) drop to an ugly
     second line once the "All" pill + all 11 links stopped fitting one
     row — nowrap + scroll instead, same horizontal-scroll pattern used
     everywhere else on the site (scrollbar hidden, content still
     reachable by drag/trackpad). */
  flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.subnav::-webkit-scrollbar{ display: none; }
.subnav-all{
  background: var(--forest-deep); color: #fff; padding: 13px 18px;
  margin-right: 26px; flex-shrink: 0;
}
.subnav-all-toggle{ color: #fff !important; font-size: 12.5px; }
.subnav-all-toggle:hover{ color: var(--gold-lt, #E8D9AE) !important; }
.subnav > a{
  position: relative; color: var(--text) !important; font-weight: 600; padding: 13px 0; margin-right: 24px;
  flex-shrink: 0; white-space: nowrap;
}
.subnav > a::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: 9px; height: 2px;
  background: var(--gold, #B99A4B); transition: right .35s cubic-bezier(.16,1,.3,1);
}
.subnav > a:hover::after, .subnav > a.active::after{ right: 0; }
.subnav > a:hover, .subnav > a.active{ color: var(--forest-deep) !important; font-weight: 600 !important; }
.subnav > a[href*="sale"]{ color: var(--gold-deep, #8C7233) !important; }
.subnav .live-badge{
  background: var(--gold); color: var(--forest-deep); font-size: 9px; font-weight: 800;
  text-transform: uppercase; padding: 2px 6px; border-radius: 100px; margin-left: 5px;
}

/* ============================================================
   GNP-CAT-3D-CAROUSEL-V1 — "Choose a category" as a full-width 3D
   rotary carousel, replacing the old categories-left/video-right
   split (mockup-approved). Own container width (mirrors
   .gnp-gal-split's 1280px/2.5rem rhythm) since this section isn't
   two columns any more.
   ============================================================ */
.cat3d-wrap .wrap{ max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; }
.cat3d-wrap .gnp-gal-intro{ max-width: none; margin: 0 0 2rem; padding: 0; text-align: left; }

.cat3d-stage-outer{ position: relative; height: 440px; perspective: 1600px; perspective-origin: 50% 45%; }
.cat3d-ring{ position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.22,.9,.25,1); }
.cat3d-item{ position: absolute; top: 50%; left: 50%; width: 280px; height: 340px; margin: -170px 0 0 -140px; transform-style: preserve-3d; }
.cat3d-card{
  display: flex; flex-direction: column; width: 100%; height: 100%; border-radius: 22px;
  overflow: hidden; background: var(--white); box-shadow: 0 30px 60px -30px rgba(20,40,28,.4);
  transition: opacity .7s ease, filter .7s ease; text-decoration: none; color: inherit;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.cat3d-img{ flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cat3d-img.g1{ background: linear-gradient(160deg,#fff,#DCEFDC); }
.cat3d-img.g2{ background: linear-gradient(160deg,#fff,#F3E4C6); }
.cat3d-img.g3{ background: linear-gradient(160deg,#fff,#E3DEF0); }
.cat3d-img.g4{ background: linear-gradient(160deg,#fff,#D8E9E4); }
.cat3d-img img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat3d-icon{ width: 40%; height: 40%; color: var(--forest-deep); opacity: .85; display: flex; align-items: center; justify-content: center; }
.cat3d-body{ padding: 16px 18px 20px; background: var(--white); }
.cat3d-body h3{ font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; margin: 0 0 4px; color: var(--text); }
.cat3d-body .meta{ font-size: 11px; color: var(--gold-deep, #8C7233); font-weight: 700; }

.cat3d-controls{ display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 24px; }
.cat3d-arrow{
  width: 42px; height: 42px; border-radius: 50%; background: var(--white); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--forest-deep); cursor: pointer;
  box-shadow: 0 12px 26px -14px rgba(30,60,40,.3); transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.cat3d-arrow:hover{ transform: translateY(-2px); }
.cat3d-arrow svg{ width: 14px; height: 14px; }
.cat3d-dots{ display: flex; gap: 8px; }
.cat3d-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--border); border: none; cursor: pointer; transition: background .3s, transform .3s; padding: 0; }
.cat3d-dot.on{ background: var(--forest-deep); transform: scale(1.4); }

@media (max-width: 1180px){
  .cat3d-stage-outer{ height: 400px; }
  .cat3d-item{ width: 240px; height: 300px; margin: -150px 0 0 -120px; }
}

/* ============================================================
   GNP-PROMO-BEST-V2 — "Today's promotions" (single cinematic
   tap-to-advance box) + "Bestsellers & New Arrivals" (rail),
   side by side. Own container/columns (split2/col) since the
   promo box no longer shares .gnp-gal-split's card-gallery
   assumptions (dots, .gnp-gal-track, etc).
   ============================================================ */
.split2-wrap .wrap{ max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; }
.split2{ display: flex; align-items: stretch; gap: 2.75rem; }
.split2 > .col{ flex: 1 1 0; min-width: 0; }
.split2 .gnp-gal-intro{ max-width: none; margin: 0 0 1.4rem; padding: 0; text-align: left; }

.promo-box{ position: relative; border-radius: 26px; overflow: hidden; min-height: 520px; isolation: isolate; background: var(--forest-deep); }
.promo-slide{ position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.promo-slide.is-active{ opacity: 1; }
.promo-slide .bg-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-slide .shade{ position: absolute; inset: 0; background: linear-gradient(0deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.05) 45%,transparent 60%); }
.promo-progress{ position: absolute; top: 22px; left: 24px; right: 24px; z-index: 4; display: flex; gap: 6px; }
.promo-progress .seg{ flex: 1; height: 2.5px; border-radius: 3px; background: rgba(255,255,255,.28); overflow: hidden; }
.promo-progress .seg .fill{ display: block; height: 100%; width: 0%; background: #fff; }
.promo-progress .seg.done .fill{ width: 100%; }
.promo-badge{ position: absolute; top: 46px; left: 24px; z-index: 4; background: #fff; color: var(--forest-deep); font-size: 11px; font-weight: 800; padding: 7px 14px; border-radius: 100px; }
.promo-taps{ position: absolute; inset: 0; display: flex; z-index: 3; }
.promo-taps span{ flex: 1; cursor: pointer; }
.promo-bottom{ position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 4; }
.promo-bottom .tag{ font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-lt, #E8D9AE); margin: 0 0 8px; }
.promo-bottom h3{ font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: #fff; margin: 0 0 14px; line-height: 1.08; }
.promo-bottom .row{ display: flex; align-items: center; gap: 16px; }
.promo-bottom .price{ font-size: 14px; color: rgba(255,255,255,.82); font-weight: 700; }
.promo-bottom .cta{
  display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--forest-deep);
  font-size: 13px; font-weight: 800; padding: 12px 20px; border-radius: 100px; text-decoration: none;
  position: relative; z-index: 5; pointer-events: auto;
}
.promo-bottom .cta svg{ width: 12px; height: 12px; }

@media (max-width: 900px){
  .split2{ flex-direction: column; }
  .promo-box{ min-height: 420px; }
}

/* ============================================================
   GNP-BEST-QUICKADD-V1 — mockup-approved: bestseller card restructured
   from a single wrapping <a> (which couldn't hold a real functional Add
   button without nested-anchor click conflicts) to a <div> with inner
   links for image/name plus a real .product-footer > .btn-cart (+ hidden
   .cart-add-form for simple products / plain <a> for variant products),
   mirroring shop/_product_card.html's exact pattern so the existing
   sitewide main.js AJAX add-to-cart handler
   (`document.querySelectorAll('.btn-cart')...btn.closest('.product-footer')`)
   binds these for real — no new JS needed here. Motion matches the
   uploaded reference mockup: bar slides up from the bottom on hover,
   price fades out while it's up.

   Note on !important: two pre-existing global `.btn-cart{...}` rules
   elsewhere in this file (GNP-SHOP-GRID-COMPACT-V1 and the shop toolbar
   section) set background/border-radius/padding/font-size with
   !important and apply to every .btn-cart sitewide, this one included —
   so those specific properties are re-overridden with !important here
   too, per this file's convention of only using !important where the
   rule being beaten also used it. Position/transition/etc. need no
   !important since neither side set those with !important. */
.gnp-best-card{ display: block; position: relative; }
.gnp-best-card .thumb{ text-decoration: none; }
.gnp-best-card .name{ display: block; text-decoration: none; }
.gnp-best-card .product-footer{
  display: flex; align-items: center; justify-content: space-between; min-height: 22px;
}
.gnp-best-card .product-footer .price{ transition: opacity .3s ease; }
.gnp-best-card:hover .product-footer .price{ opacity: 0; }
/* Anchored to .gnp-best-card (not .product-footer) and hidden via
   translateY(100%) rather than a fixed negative "bottom" pixel value —
   .gnp-best-rail is a flex row with the default align-items:stretch, so
   shorter cards get stretched to match the tallest card in the row
   (real product names vary in length/wrap). A fixed pixel offset measured
   from the footer would then sit at the wrong distance from the card's
   actual (stretched) bottom edge and peek out without hovering;
   translateY(100%) always moves the bar by exactly its own height, so it
   stays fully hidden regardless of how tall the card ends up. */
.gnp-best-card .btn-cart.quickadd{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; transform: translateY(100%);
  background: var(--forest-deep) !important; color: #fff; font-size: 12.5px !important; font-weight: 700;
  text-align: center; padding: 12px !important; border: none; border-radius: 0 !important; box-shadow: none !important;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: transform .4s cubic-bezier(.16,1,.3,1); font-family: inherit; text-decoration: none; white-space: nowrap;
}
.gnp-best-card .btn-cart.quickadd svg{ width: 13px; height: 13px; flex-shrink: 0; }
.gnp-best-card:hover .btn-cart.quickadd{ transform: translateY(0); }
.gnp-best-card .btn-cart.quickadd:hover{ background: var(--forest-deep) !important; }
.gnp-best-card .btn-cart.quickadd[disabled],
.gnp-best-card .btn-cart.quickadd[aria-disabled="true"]{
  opacity: .55; cursor: not-allowed; pointer-events: none;
}

/* ============================================================
   GNP-CAT-3D-FULLBLEED-V1 — mockup-approved redesign of .cat3d-card:
   image now fills the entire tile edge-to-edge (no separate white
   caption panel below), title/product-count overlaid on a bottom
   gradient scrim like Apple product tiles. Bigger tiles + tuned
   perspective/radius so neighbor cards peek in from both sides instead
   of leaving dead white margins either side of the stage (the exact
   issue called out as "that white plain... something is missing").
   Overrides the .cat3d-card rules from GNP-CAT-3D-CAROUSEL-V1 above by
   source order + equal-or-greater specificity, same pattern as every
   other override block in this file. */
.cat3d-stage-outer{ height: 520px; perspective: 1900px; margin-bottom: 64px; }
.cat3d-item{ width: 340px; height: 440px; margin: -220px 0 0 -170px; }
.cat3d-card{
  position: relative; background: var(--forest-deep); border-radius: 26px;
  box-shadow: 0 34px 70px -30px rgba(20,40,28,.45);
}
/* .cat3d-img was flex:1 (top portion of the card, white caption block
   below) — now absolute + inset:0 so the image fills the entire tile;
   its own <img> was already object-fit:cover from the base rule. */
.cat3d-img{ position: absolute; inset: 0; flex: none; }
.cat3d-img img{ transition: transform .6s cubic-bezier(.16,1,.3,1); }
.cat3d-item:hover .cat3d-img img{ transform: scale(1.05); }
.cat3d-card .scrim{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(10,20,14,.85) 0%, rgba(10,20,14,.25) 42%, transparent 62%);
}
/* .cat3d-body was a solid white block stacked below the image — now an
   overlay near the bottom of the full-bleed image, text recolored for
   the dark scrim beneath it. */
.cat3d-body{
  position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2; padding: 0; background: none; pointer-events: none;
}
.cat3d-body h3{ font-family: var(--font-display); font-weight: 600; font-size: 1.32rem; color: #fff; margin: 0 0 6px; line-height: 1.15; }
.cat3d-body .meta{ font-size: 11.5px; font-weight: 700; color: var(--gold-lt, #E8D9AE); }
.cat3d-hover-arrow{
  position: absolute; top: 18px; right: 18px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.16); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0; transform: translate(-6px,6px); transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.cat3d-hover-arrow svg{ width: 15px; height: 15px; }
.cat3d-item:hover .cat3d-hover-arrow{ opacity: 1; transform: translate(0,0); }

@media (max-width: 1180px){
  .cat3d-stage-outer{ height: 440px; margin-bottom: 48px; }
  .cat3d-item{ width: 270px; height: 360px; margin: -180px 0 0 -135px; }
}


/* GNP-MOBILE-BEST-QUICKADD-V1 — mobile bestseller card: unlike the desktop
   .gnp-best-card quickadd (hidden bar that slides up on :hover), touch has
   no hover state, so this button is always visible, stacked under the
   price, no animation. Shares .btn-cart / .cart-add-form / .product-footer
   class names with desktop so the existing sitewide main.js delegated
   handler binds it — no JS changes needed. */
#gnpMobileHome .m-best-card{ position:relative; }
#gnpMobileHome .m-best-card .thumb{ text-decoration:none; }
#gnpMobileHome .m-best-card .name{ display:block; text-decoration:none; }
#gnpMobileHome .m-best-card .product-footer{
  display:flex; flex-direction:column; gap:6px; margin-top:4px;
}
#gnpMobileHome .m-best-card .btn-cart.quickadd{
  width:100% !important; background:#1D3F2E !important; color:#fff !important;
  font-size:11px !important; font-weight:700 !important; padding:8px 6px !important;
  border:none !important; border-radius:100px !important; box-shadow:none !important;
  display:flex !important; align-items:center; justify-content:center; gap:5px;
  cursor:pointer; font-family:inherit; text-decoration:none; white-space:nowrap;
}
#gnpMobileHome .m-best-card .btn-cart.quickadd svg{ width:11px; height:11px; flex-shrink:0; }
#gnpMobileHome .m-best-card .btn-cart.quickadd[disabled],
#gnpMobileHome .m-best-card .btn-cart.quickadd[aria-disabled="true"]{
  opacity:.5; cursor:not-allowed; pointer-events:none;
}

/* GNP-MEGA-PANEL-CLIP-FIX-V1 — .subnav's overflow-x:auto implicitly forces
   overflow-y:auto per spec (if one axis is non-visible, browsers force the
   other to auto too), which silently clips the absolutely-positioned
   .mega-panel dropdown since it renders below .subnav's row height.
   Reset .subnav to overflow:visible and move the horizontal-scroll
   behavior to a new inner wrapper around just the nav links. */
.subnav { overflow-x: visible; overflow-y: visible; }
.subnav-links-scroll {
  display: flex; align-items: center; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.subnav-links-scroll::-webkit-scrollbar { display: none; }
.subnav-links-scroll > a {
  position: relative; color: var(--text) !important; font-weight: 600; padding: 13px 0; margin-right: 24px;
  flex-shrink: 0; white-space: nowrap;
}
.subnav-links-scroll > a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 9px; height: 2px;
  background: var(--gold, #B99A4B); transition: right .35s cubic-bezier(.16,1,.3,1);
}
.subnav-links-scroll > a:hover::after, .subnav-links-scroll > a.active::after { right: 0; }
.subnav-links-scroll > a:hover, .subnav-links-scroll > a.active { color: var(--forest-deep) !important; font-weight: 600 !important; }
.subnav-links-scroll > a[href*="sale"] { color: var(--gold-deep, #8C7233) !important; }

/* GNP-TOPNAV-ICON-RINGS-V1 — Track order / Wishlist / Sign in get circular
   icon badges + label underneath, matching the approved nav mockup.
   .topnav-actions a is already flex-column (line ~5298); this just adds
   the ring badge behind the icon and a "Shop now" CTA pill. */
.topnav-iconlink { text-decoration: none; }
.topnav-iconlink .ring {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
}
.topnav-iconlink:hover .ring { background: rgba(255,255,255,.24); transform: translateY(-2px); }
.topnav-iconlink .ring svg { width: 16px; height: 16px; stroke: #fff; }
.topnav-iconlink span.lbl { font-size: 10px; font-weight: 700; color: #fff; margin-top: 2px; }

.topnav-cta {
  background: var(--primary, #2F6E4C); color: #fff !important; font-size: 13.5px; font-weight: 700;
  padding: 11px 20px; border-radius: 999px; flex-shrink: 0; text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.topnav-cta:hover { background: var(--forest-deep, #1D3F2E) !important; transform: translateY(-2px); }

@media (max-width: 900px) {
  .topnav-cta { display: none; }
}

/* GNP-SUBNAV-CATEGORY-DROPDOWN-V1 — Supplements/Beverages/Daily Use show
   their subcategories on hover, reusing the same t.slug/t.name/t.product_count
   fields already proven in the mega-panel (.mega-cat-sub). */
.subnav-drop { position: relative; }
.subnav-drop-menu {
  display: none; position: fixed; top: var(--drop-top, 60px); left: var(--drop-left, 0);
  background: var(--white); border-radius: 12px; box-shadow: var(--shadow-md, 0 12px 32px rgba(0,0,0,.18));
  padding: .6rem; min-width: 220px; z-index: 60; flex-direction: column; gap: .1rem;
}
.subnav-drop:hover .subnav-drop-menu,
.subnav-drop:focus-within .subnav-drop-menu { display: flex; }
.subnav-drop-menu a {
  color: var(--text) !important; font-size: .88rem; padding: .5rem .6rem; border-radius: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; white-space: nowrap;
  font-weight: 500 !important;
}
.subnav-drop-menu a:hover { background: var(--off-white); color: var(--primary) !important; }
.subnav-drop-menu a .n { font-size: .8rem; color: var(--text-lt); font-weight: 500; }

/* GNP-TOPNAV-ICON-RINGS-WHITE-FIX-V1 — the ring/icon/label colors were
   built for a dark header, but GNP-NAV-WHITE-V1 (above) forces .topnav to
   a white background, making white-on-white icons invisible. Restyle for
   the white header using the existing off-white/text-md palette. */
.topnav-iconlink .ring { background: var(--off-white, #F1F6F3); }
.topnav-iconlink:hover .ring { background: var(--border, #DCE8E0); }
.topnav-iconlink .ring svg { stroke: var(--text-md, #4C5B68); }
.topnav-iconlink span.lbl { color: var(--text-md, #4C5B68); }
.topnav-iconlink:hover span.lbl { color: var(--primary); }

/* GNP-SUBNAV-DROP-TRIGGER-COLOR-FIX-V1 — Supplements/Beverages/Daily Use
   triggers live inside .subnav-drop, one level deeper than their sibling
   links, so they miss the .subnav-links-scroll > a direct-child rule and
   fall back to the old dark-header .subnav a color (#eafbe7 on white =
   invisible). Mirror the sibling link styling here instead. */
.subnav-drop > a {
  position: relative; color: var(--text) !important; font-weight: 600;
  padding: 13px 0; margin-right: 24px; flex-shrink: 0; white-space: nowrap;
  display: inline-flex; align-items: center;
}
.subnav-drop > a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 9px; height: 2px;
  background: var(--gold, #B99A4B); transition: right .35s cubic-bezier(.16,1,.3,1);
}
.subnav-drop > a:hover::after, .subnav-drop > a.active::after { right: 0; }
.subnav-drop > a:hover, .subnav-drop > a.active { color: var(--forest-deep) !important; font-weight: 600 !important; }

/* GNP-WISHLIST-FORCE-VISIBLE-V1 — appended last on purpose: guarantees the
   wishlist heart renders above the product image regardless of which of
   the earlier duplicate .product-wishlist / .product-img-wrap blocks wins
   the normal cascade. No animation, always visible, desktop + mobile. */
.product-card .product-img-wrap {
  position: relative !important;
  overflow: visible !important;
}
.product-card .product-wishlist {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: .6rem !important;
  right: .6rem !important;
  width: 30px !important;
  height: 30px !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 5 !important;
  background: #fff !important;
  border: 1px solid #E3E8E5 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
  color: var(--text-md, #444) !important;
  cursor: pointer !important;
  transition: none !important;
}
.product-card .product-wishlist:hover {
  background: var(--red, #E23744) !important;
  color: #fff !important;
}
.product-card .product-wishlist.is-wishlisted {
  color: var(--red, #E23744) !important;
}
.product-card .product-wishlist.is-wishlisted svg {
  fill: var(--red, #E23744) !important;
}

/* GNP-WISHLIST-FORCE-VISIBLE-V1 (bestseller rail variant) */
.m-best-card .thumb {
  position: relative !important;
}
.m-best-card .product-wishlist {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: .4rem !important;
  right: .4rem !important;
  width: 24px !important;
  height: 24px !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 5 !important;
  background: #fff !important;
  border: 1px solid #E3E8E5 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
  color: var(--text-md, #444) !important;
  cursor: pointer !important;
}
.m-best-card .product-wishlist.is-wishlisted {
  color: var(--red, #E23744) !important;
}
.m-best-card .product-wishlist.is-wishlisted svg {
  fill: var(--red, #E23744) !important;
}

/* GNP-DARAZ-STYLE-FINAL-V1 — appended last, deliberately: wins the cascade
   over every earlier duplicate .product-card / .m-best-card / .product-wishlist
   / .btn-cart / .product-sticker / .badge block above. No hover reveal
   animation anywhere — everything static/always-visible, Daraz-style. */

/* ---- kill ALL hover-driven reveal/animation on both card types ---- */
.product-card,
.product-card *,
.m-best-card,
.m-best-card * {
  transition: none !important;
  animation: none !important;
}
.product-card:hover,
.m-best-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ---- badge ("Best"/"New"/"Sale") always visible on both card types ---- */
.product-card .product-img-wrap,
.m-best-card .thumb {
  position: relative !important;
  overflow: visible !important;
}
.product-card .product-sticker,
.m-best-card .badge {
  position: absolute !important;
  top: .5rem !important;
  left: .5rem !important;
  z-index: 6 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
}

/* ---- add-to-cart button always visible, no slide-up, on both card types ---- */
.product-card .btn-cart.quickadd,
.m-best-card .btn-cart.quickadd {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
  justify-content: center !important;
}
.product-card:hover .btn-cart.quickadd,
.m-best-card:hover .btn-cart.quickadd,
.product-card .btn-cart.quickadd:hover,
.m-best-card .btn-cart.quickadd:hover {
  transform: none !important;
  opacity: 1 !important;
}

/* ---- wishlist icon: single source of truth for both card types ---- */
.product-card .product-wishlist,
.m-best-card .product-wishlist {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 6 !important;
}

/* ============================================================
   GNP-CARD-ACTIONS-UNIFY-V1 — appended last, deliberately (wins the
   cascade over everything above, same convention as GNP-DARAZ-STYLE-
   FINAL-V1 just above). Extends that fix to the two card types it
   missed — the desktop Bestsellers rail (.gnp-best-card) and the mobile
   "Shop the Range" grid (.m-daraz-card) — and closes a gap the original
   fix left open on .product-card itself: it made .btn-cart.quickadd
   width:100% and static, but never changed .product-footer off its
   original row-flex layout, so a full-width button and the price were
   still fighting for the same row. Every product card on the site now
   shares one behavior: price stacked above a full-width Add to Cart
   button, Wishlist pinned top-right of the image, nothing hidden or
   revealed by hover, on every breakpoint. */

/* -- footer layout: price on top, full-width action button below,
      on every card type (was only correct on the mobile cards already) -- */
.product-card .product-footer,
.gnp-best-card .product-footer,
.m-daraz-card .product-footer {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px;
}

/* -- price must never fade/hide on hover — transition:none (set above)
      only stops it animating smoothly, a :hover rule still snaps opacity
      to 0 instantly, so it needs an explicit, permanent override -- */
.product-card .product-footer .price,
.product-card:hover .product-footer .price,
.gnp-best-card .product-footer .price,
.gnp-best-card:hover .product-footer .price {
  opacity: 1 !important;
}

/* -- kill every remaining hover-driven transition/transform on the two
      card types the original fix didn't cover -- */
.gnp-best-card,
.gnp-best-card *,
.m-daraz-card,
.m-daraz-card * {
  transition: none !important;
  animation: none !important;
}
.gnp-best-card:hover,
.m-daraz-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* -- badge/thumb: same treatment as .product-card/.m-best-card above -- */
.gnp-best-card .thumb,
.m-daraz-card .thumb {
  position: relative !important;
  overflow: visible !important;
}
.gnp-best-card .badge {
  opacity: 1 !important;
  visibility: visible !important;
}

/* -- add-to-cart: always visible, static, full-width, no slide-up bar -- */
.gnp-best-card .btn-cart.quickadd,
.m-daraz-card .btn-cart.quickadd {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
  justify-content: center !important;
}
.gnp-best-card:hover .btn-cart.quickadd,
.gnp-best-card .btn-cart.quickadd:hover,
.m-daraz-card .btn-cart.quickadd:hover {
  transform: none !important;
  opacity: 1 !important;
}
/* pill shape to match the mobile cards now that this is a normal footer
   button instead of a flat bottom bar */
.product-card .btn-cart.quickadd,
.gnp-best-card .btn-cart.quickadd,
.m-daraz-card .btn-cart.quickadd {
  border-radius: 100px !important;
}

/* -- wishlist: .gnp-best-card and .m-daraz-card had no wishlist styling
      at all before (the button didn't exist in their markup) — base
      positioning + forced visibility, matching .product-card/.m-best-card
      exactly so it reads as the same control everywhere on the site -- */
.gnp-best-card .product-wishlist,
.m-daraz-card .product-wishlist {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: .5rem !important;
  right: .5rem !important;
  width: 26px !important;
  height: 26px !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 6 !important;
  background: #fff !important;
  border: 1px solid #E3E8E5 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
  color: var(--text-md, #444) !important;
  cursor: pointer !important;
}
.gnp-best-card .product-wishlist:hover,
.m-daraz-card .product-wishlist:hover {
  background: var(--red, #E23744) !important;
  color: #fff !important;
}
.gnp-best-card .product-wishlist.is-wishlisted,
.m-daraz-card .product-wishlist.is-wishlisted {
  color: var(--red, #E23744) !important;
}
.gnp-best-card .product-wishlist.is-wishlisted svg,
.m-daraz-card .product-wishlist.is-wishlisted svg {
  fill: var(--red, #E23744) !important;
}

/* -- .m-daraz-card: this card had zero footer/cart markup before this
      change (it was a plain thumb+name+price link) — same touch-friendly
      full-width pill button as #gnpMobileHome .m-best-card, same size,
      no animation, always visible (there's no hover state on touch). -- */
#gnpMobileHome .m-daraz-card .thumb { position: relative; text-decoration: none; display: block; }
#gnpMobileHome .m-daraz-card .name { display: block; text-decoration: none; }
#gnpMobileHome .m-daraz-card .info { padding: 2px 10px 12px; }
#gnpMobileHome .m-daraz-card .product-footer {
  display: flex; margin-top: 6px;
}
#gnpMobileHome .m-daraz-card .btn-cart.quickadd {
  width: 100% !important;
  background: #1D3F2E !important; color: #fff !important;
  font-size: 11px !important; font-weight: 700 !important; padding: 8px 6px !important;
  border: none !important; border-radius: 100px !important; box-shadow: none !important;
  display: flex !important; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; font-family: inherit; text-decoration: none; white-space: nowrap;
}
#gnpMobileHome .m-daraz-card .btn-cart.quickadd svg { width: 11px; height: 11px; flex-shrink: 0; }
#gnpMobileHome .m-daraz-card .btn-cart.quickadd[disabled],
#gnpMobileHome .m-daraz-card .btn-cart.quickadd[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}

/* -- .gnp-best-card: give the now-taller stacked footer a touch more
      breathing room above it, and match the pill's height on the desktop
      bestseller rail to the "Shop the Range" grid's button -- */
.gnp-best-card .product-footer { margin-top: 8px; }
.gnp-best-card .btn-cart.quickadd { padding: .55rem .9rem !important; }

/* GNP-DARAZ-STYLE-FINAL-V2 — kills remaining hover-only reveals the V1
   block missed: border highlight and the "VIEW" pill overlay. */
.product-card:hover,
.m-best-card:hover {
  border-color: inherit !important;
}
.product-view-badge {
  display: none !important;
}


/* GNP-MOBILE-SHOP-DROPDOWN-V1 */
#gnpMobileNav .m-nav-drop{ position: relative; flex-shrink: 0; }
#gnpMobileNav .m-nav-drop-menu{
  display: none; position: fixed; top: var(--mnav-drop-top, 90px); left: var(--mnav-drop-left, 16px);
  background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18);
  padding: .5rem; min-width: 200px; z-index: 260; flex-direction: column;
}
#gnpMobileNav .m-nav-drop-menu.open{ display: flex; }
#gnpMobileNav .m-nav-drop-menu a{
  color: #22261F; font-size: 13px; font-weight: 700; padding: 10px 8px; border-radius: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; white-space: nowrap;
}
#gnpMobileNav .m-nav-drop-menu a:hover{ background: #EEF6EC; }
#gnpMobileNav .m-nav-drop-menu a .n{ font-size: 11px; color: #5B6154; font-weight: 600; }

/* ============================================================
   GNP-SHOP-DROPDOWN-V1 (V2 — promo card removed per feedback, plain
   single-column category list matching the rest of the site's
   dropdowns) — desktop "Shop" nav link opens a category panel, reusing
   .subnav-drop / .subnav-drop-menu and the existing
   GNP-SUBNAV-DROP-POSITION-V1 script, same as the old per-category
   flyouts it replaces, instead of the flat "Dietary & Food Supplements /
   Natural Beverages / Daily Use" links that used to sit in the top nav
   row. */
.subnav-drop-menu--shop {
  min-width: 240px !important;
}
.shop-drop-cats {
  display: flex; flex-direction: column; gap: .1rem;
}
.shop-drop-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-lt); padding: .3rem .6rem .5rem;
}
.shop-drop-cats a {
  color: var(--text) !important; font-size: .88rem; font-weight: 500 !important;
  padding: .5rem .6rem; border-radius: 8px; white-space: nowrap;
}
.shop-drop-cats a:hover { background: var(--off-white); color: var(--primary) !important; }

/* Uniform product cards + consistent Add to Cart button */
.m-best-card,
.m-daraz-card {
  display: flex;
  flex-direction: column;
}

.m-best-card .thumb,
.m-daraz-card .thumb {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-best-card .thumb img,
.m-daraz-card .thumb img {
  max-height: 100%;
  object-fit: contain;
}

.m-best-card .name,
.m-daraz-card .name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-best-card .product-footer,
.m-daraz-card .product-footer {
  margin-top: .5rem;
}

.btn-cart.quickadd {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

/* Uniform desktop bestseller/new-arrivals cards */
.gnp-best-card {
  display: flex;
  flex-direction: column;
}

.gnp-best-card .thumb {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gnp-best-card .thumb img {
  max-height: 100%;
  object-fit: contain;
}

.gnp-best-card .info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.gnp-best-card .name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gnp-best-card .product-footer {
  margin-top: .5rem;
}

.gnp-best-card .btn-cart.quickadd {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}
/* ============================================================
   GNP-NAV-MOCKUP-EXACT-MATCH-V1 — the earlier GNP-NAV-V2 restyle used
   the site's own --off-white/--forest-deep/--primary tokens as
   "close enough" stand-ins for the approved mockup (gnpnavfinal_2.html)
   colors/sizes. Per direct feedback that the search bar and icon row
   still don't actually match the mockup, this block pins every value
   here to the mockup's literal CSS: search pill #F1F6F3 / border
   #DCE8E0 / 34px mid-green go button #2F8F5B; icon rings 38px mint
   #E7F5EC with deep-green #1B4332 strokes; cart restyled to match the
   other icon rings (ring + "Cart" label) instead of standing out as a
   solid dark circle, since the mockup treats all four icons the same
   way; CTA pill #2F8F5B / 12px 20px padding. Wins the cascade by
   source order (+ !important where the earlier blocks also used it). */

/* GNP-SEARCH-PILL-FIXED-HEIGHT-V1 — align-items:center alone wasn't enough
   because a native <select> renders with its own minimum height on some
   browsers/OS regardless of our font-size, which grows the whole pill
   taller than the 34px search button and leaves the button floating in
   the middle of extra space instead of hugging top/bottom evenly. Locking
   the form to one fixed height and every child to that exact same height
   (with box-sizing:border-box + matching line-height) removes that
   variable entirely — nothing can render taller than the pill anymore. */
.topnav-search form {
  background: #F1F6F3 !important;
  border: 1px solid #DCE8E0 !important;
  padding: 0 8px 0 18px !important;
  height: 54px !important;
  box-sizing: border-box !important;
  gap: 10px;
  align-items: center !important;
}
.topnav-search-category {
  height: 34px !important;
  line-height: 34px !important;
  box-sizing: border-box !important;
  max-width: 100px !important;
  flex: 0 0 auto !important;
  padding: 0 12px 0 0 !important;
  background-color: transparent !important;
  color: #1B4332 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  border-right: 1px solid #DCE8E0 !important;
  align-self: center !important;
}
.topnav-search-category:hover,
.topnav-search-category:focus {
  background-color: transparent !important;
  box-shadow: none !important;
}
.topnav-search input {
  height: 34px !important;
  line-height: 34px !important;
  box-sizing: border-box !important;
  font-size: 13.5px !important;
  padding-left: 14px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-self: center !important;
}
.topnav-search button {
  width: 34px !important;
  height: 34px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  margin-left: 0 !important;
  background: #2F8F5B !important;
}
.topnav-search button:hover { background: #26794A !important; }
.topnav-search button svg { width: 15px !important; height: 15px !important; }

.topnav-actions { gap: 18px !important; }
.topnav-actions a { padding: 0 !important; gap: 4px !important; }

.topnav-iconlink .ring {
  position: relative;
  width: 38px !important;
  height: 38px !important;
  background: #E7F5EC !important;
}
.topnav-iconlink:hover .ring { background: #DCE8E0 !important; transform: translateY(-2px); }
.topnav-iconlink .ring svg {
  width: 17px !important;
  height: 17px !important;
  stroke: #1B4332 !important;
}
.topnav-iconlink span.lbl {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #4C5B68 !important;
}
.topnav-iconlink:hover span.lbl { color: #1B4332 !important; }

/* Cart used to be a solid dark-green circle with no label — the mockup
   shows it as the exact same ring+label item as Track order/Wishlist/
   Sign in, with the count badge sitting on the ring's corner. */
.topnav-cart {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  flex-direction: column;
  align-items: center;
}
.topnav-cart:hover { transform: none !important; background: var(--off-white) !important; border-radius: 12px !important; }
.topnav-cart svg { color: #1B4332 !important; stroke: #1B4332 !important; }
.topnav-cart-badge {
  background: #F2A93B !important;
  color: #4A3103 !important;
  top: -2px !important;
  right: -2px !important;
}

.topnav-cta {
  background: #2F8F5B !important;
  padding: 12px 20px !important;
}
.topnav-cta:hover { background: #1B4332 !important; }

/* Uniform category-grid product cards */
.product-card {
  display: flex;
  flex-direction: column;
}

.product-img-wrap {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-img-wrap .product-img {
  max-height: 100%;
  object-fit: contain;
}

.product-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card .product-footer {
  margin-top: .5rem;
}

.product-card .btn-cart.quickadd {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}
/* GNP-TOPNAV-CTA-REMOVE-V1 — user asked to remove the "Shop now" pill
   between Cart and the hamburger button entirely. HTML element removed
   in base.html; this display:none is a safety net in case the class is
   still referenced anywhere else. */
.topnav-cta { display: none !important; }

/* GNP-SUBNAV-ACTIVE-COLOR-FIX-V1 — the "which page am I on" underline
   used the site's gold accent, which reads as an unrelated highlight
   rather than an active-page indicator; user wants it green. The active
   link's TEXT was already forest-deep/green (line ~5606) — only the
   underline itself was gold, so that's the only thing changed here.
   Sale's own gold/mustard TEXT color (line ~5607) is left as-is — that's
   a merchandising highlight, not the active-page indicator. */
.subnav-links-scroll > a::after { background: var(--primary, #2F6E4C) !important; }

/* Fix product image not filling the box (green gap on sides) */
.product-img-wrap {
  background: #ffffff;
}

.product-img-wrap .product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* FINAL OVERRIDE: force product image to fully fill its box, no gaps */
.product-card .product-img-wrap {
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.product-card .product-img-wrap .product-img {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  filter: none !important;
}

/* Fix "Shop" tab sitting higher than sibling tabs — .m-nav-drop wraps
   the Shop link+dropdown in an extra div, and .m-nav-tabs' align-items:
   stretch stretches that div's height without centering its child link
   inside it. Making the wrapper a flex container fixes the alignment. */
#gnpMobileNav .m-nav-drop {
  display: flex;
  align-items: center;
}

/* GNP-PDP-REDESIGN-V1 — visual refresh of the product detail page.
   Layered on top of existing .pdp-* rules; no markup structure changed
   for variants/reviews/wishlist/buy-now, so all existing JS still works. */
.pdp-layout { gap: 3rem; }
.pdp-media { position: sticky; top: 6.5rem; align-self: start; }
.pdp-img-wrap { box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05); border: 1px solid var(--border, #E5E9E7); }

.product-category { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin-bottom: .35rem; }
.pdp-title { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.2; font-weight: 700; color: var(--text); margin: 0 0 .5rem; }
.pdp-rating { margin-bottom: 1.1rem; }
.pdp-short-desc { color: var(--text-md); line-height: 1.6; margin-bottom: 1.5rem; }

.pdp-price-row { padding-bottom: 1.1rem; border-bottom: 1px solid var(--border, #E5E9E7); }
.pdp-price { font-size: 2.1rem; }
.product-price-old { font-size: 1.05rem; color: var(--text-md); text-decoration: line-through; }

.pdp-voucher-strip { margin: 1.1rem 0 1.5rem; border: 1px dashed var(--primary-lt, #6B8A76); border-radius: var(--radius-md); overflow: hidden; background: var(--primary-xs); }
.pdp-voucher-summary { display: flex; align-items: center; gap: .55rem; padding: .7rem .9rem; font-size: .85rem; font-weight: 600; color: var(--text); cursor: pointer; user-select: none; }
.pdp-voucher-summary svg:first-child { color: var(--primary); flex-shrink: 0; }
.pdp-voucher-chevron { margin-left: auto; transition: transform .2s ease; }
.pdp-voucher-summary.is-open .pdp-voucher-chevron { transform: rotate(180deg); }
.pdp-voucher-sheet { padding: 0 .9rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
.pdp-voucher-item { background: var(--white); border-radius: var(--radius-sm, 8px); padding: .6rem .75rem; font-size: .82rem; }
.pdp-voucher-item-info { display: flex; flex-direction: column; gap: .1rem; }
.pdp-voucher-item-info strong { color: var(--text); font-size: .85rem; }
.pdp-voucher-item-info span { color: var(--text-md); font-size: .78rem; }

.pdp-actions { gap: .7rem; }
.pdp-add-btn, .pdp-buynow-btn { border-radius: 100px !important; }
.pdp-wishlist-btn { border-radius: 100px; border: 1.5px solid var(--border, #E5E9E7); padding: .7rem 1.1rem; }
.pdp-cart-link { border-radius: 100px !important; }

@media (max-width: 860px) {
  .pdp-media { position: static; }
  .pdp-title { font-size: 1.5rem; }
  .pdp-price { font-size: 1.7rem; }
}

/* GNP-PDP-MOBILE-SWIPE-V1 — swipe between gallery images on mobile,
   arrows hidden there since thumbnails + dots handle nav on touch. */
@media (max-width: 768px) {
  .pdp-slide-arrow { display: none !important; }
  .pdp-img-wrap { touch-action: pan-y; }
  .pdp-gallery-dots { display: flex; justify-content: center; gap: 6px; margin-top: .6rem; }
  .pdp-gallery-dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--border-dk, #C3D9BC); transition: width .2s ease, background .2s ease;
  }
  .pdp-gallery-dots span.is-active { width: 16px; border-radius: 4px; background: var(--primary); }
}
@media (min-width: 769px) { .pdp-gallery-dots { display: none; } }

/* GNP-PDP-MOCKUP-V2 — mobile-only structural + visual layer matching the
   uploaded Noni mockup. Scoped under body.pdp-mockup-v2 (added by JS only
   on the product page) inside @media (max-width:768px), so desktop and
   every other page on the site are completely untouched. */
@media (max-width: 768px) {
  /* GNP-PDP-MOCKUP-V2-FULL-PALETTE-V1 */
  body.pdp-mockup-v2 {
    --primary: #276358;
    --gold: #B98F45;
    --text: #132420;
    --text-md: #54655F;
    --text-lt: #54655F;
    --border: #DCE6E2;
    --off-white: #E8EFEC;
    font-family: 'Inter', var(--font-body);
  }
  body.pdp-mockup-v2 .pdp-layout { background: #F3F6F5; }
  body.pdp-mockup-v2 .pdp-title,
  body.pdp-mockup-v2 .pdp-price { font-family: 'Sora', var(--font-display); }

  .pdp-mini-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 150;
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; padding: .7rem 1rem; background: rgba(255,255,255,.94);
    backdrop-filter: blur(8px); border-bottom: 1px solid var(--border, #E5E9E7);
    transform: translateY(-100%); transition: transform .2s ease;
  }
  .pdp-mini-topbar.is-visible { transform: translateY(0); }
  .pdp-mini-topbar-price { font-weight: 700; font-size: .95rem; opacity: 0; transition: opacity .2s ease; }
  .pdp-mini-topbar.is-visible .pdp-mini-topbar-price { opacity: 1; }
  .pdp-mini-topbar-icon {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border, #E5E9E7);
    background: var(--white); display: flex; align-items: center; justify-content: center;
    color: var(--text); font-size: .9rem; flex-shrink: 0;
  }
  .pdp-mini-topbar-icons { display: flex; gap: .5rem; }

  .pdp-quicknav-wrap {
    position: sticky; top: 0; z-index: 60; background: var(--white);
    border-bottom: 1px solid var(--border, #E5E9E7); margin: 0 -1.25rem 1rem; padding: 0 1.25rem;
  }
  .pdp-quicknav { display: flex; gap: .5rem; overflow-x: auto; padding: .7rem 0; scrollbar-width: none; }
  .pdp-quicknav::-webkit-scrollbar { display: none; }
  .pdp-quicknav button {
    flex-shrink: 0; font-family: inherit; font-size: .78rem; font-weight: 600;
    padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--border, #E5E9E7);
    background: var(--white); color: var(--text-md); cursor: pointer; white-space: nowrap;
  }
  .pdp-quicknav button.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

  .pdp-ing-list { display: flex; flex-direction: column; }
  .pdp-ing-row { display: flex; align-items: center; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--border, #E5E9E7); }
  .pdp-ing-row:last-child { border-bottom: none; }
  .pdp-ing-name { font-size: .85rem; font-weight: 600; color: var(--text); }

  .pdp-related-section .products-grid {
    display: flex; overflow-x: auto; gap: .9rem; margin: 0 -1.25rem; padding: 0 1.25rem .5rem;
    grid-template-columns: none; scrollbar-width: none;
  }
  .pdp-related-section .products-grid::-webkit-scrollbar { display: none; }
  .pdp-related-section .product-card { flex: 0 0 150px; }

  .pdp-sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 60px; z-index: 140;
    display: none; align-items: center; gap: .6rem;
    background: var(--white); border-top: 1px solid var(--border, #E5E9E7);
    padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(0,0,0,.06);
  }
  body.pdp-mockup-v2 .pdp-sticky-cta { display: flex; }
  body.pdp-mockup-v2 .pdp-actions { display: none; }
  body.pdp-mockup-v2.pdp-has-sticky-cta { padding-bottom: 130px; }
  .pdp-sticky-cta-fav {
    width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border, #E5E9E7);
    background: var(--off-white, #F7F9F5); display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 1rem; color: var(--text);
  }
  .pdp-sticky-cta-fav.is-saved { color: var(--red); border-color: var(--red); }
  .pdp-sticky-cta-fav.is-saved svg { fill: currentColor; }
  .pdp-mini-topbar-icon svg, .pdp-sticky-cta-fav svg { display: block; }
  .pdp-sticky-cta button.pdp-sticky-cta-btn {
    flex: 1; height: 42px; border-radius: 12px; font-family: inherit; font-weight: 700;
    font-size: .82rem; border: none; cursor: pointer;
  }
  .pdp-sticky-cta-btn.outline { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); }
  .pdp-sticky-cta-btn.solid { background: var(--primary); color: #fff; }
  .pdp-sticky-cta-btn:disabled { opacity: .5; }
}

/* GNP-PDP-DESKTOP-REDESIGN-V2 — desktop-only (>=1025px) enhancements:
   quick-jump nav, sticky "You Might Also Like" sidebar, gallery hover
   zoom, refined CTA buttons. Scoped to body.pdp-desktop-v2 so mobile
   (pdp-mockup-v2) and every other page are completely untouched. */
@media (min-width: 992px) {
  body.pdp-desktop-v2 .pdp-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 300px; }

  .pdp-quicknav-wrap-d {
    position: sticky; top: 0; z-index: 20; background: var(--white);
    padding: .9rem 0; border-bottom: 1px solid var(--border); margin: 1.5rem 0;
  }
  .pdp-quicknav-d { display: flex; gap: .5rem; }
  .pdp-quicknav-d button {
    font-family: var(--font-body); font-size: .85rem; font-weight: 600;
    padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--border);
    background: var(--white); color: var(--text-md); cursor: pointer; white-space: nowrap;
  }
  .pdp-quicknav-d button.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

  body.pdp-desktop-v2 .pdp-thumb { transition: transform .2s ease, border-color .2s ease; }
  body.pdp-desktop-v2 .pdp-thumb:hover { transform: translateY(-2px); }
  body.pdp-desktop-v2 .pdp-img { transition: transform .35s ease; }
  body.pdp-desktop-v2 .pdp-img-wrap:hover .pdp-img { transform: scale(1.035); }

  body.pdp-desktop-v2 #pdpAddBtn,
  body.pdp-desktop-v2 #pdpBuyNowBtn { border-radius: 14px; font-weight: 700; }

  .pdp-related-sidebar { position: sticky; top: 90px; align-self: start; }
  .pdp-related-sidebar.products-section { padding: 22px !important; background: var(--off-white); border: 1px solid var(--border); border-radius: var(--radius-lg); }
  .pdp-related-sidebar .section-header { margin-bottom: 1rem; }
  .pdp-related-sidebar .products-grid { display: flex; flex-direction: column; gap: .9rem; grid-template-columns: none; }
}

/* GNP-PDP-MOCKUP-EXACT-V1 — matches the approved Ganogin Green Tea desktop
   mockup's exact color tokens, fonts, and ingredient-icon-row treatment on
   the live PDP. Scoped to body.pdp-desktop-v2 (toggled by the existing
   GNP-PDP-DESKTOP-REDESIGN-V2 JS) inside @media (min-width:1025px), so
   mobile and every other page stay untouched. */
@media (min-width: 992px) {
  body.pdp-desktop-v2 {
    --primary: #276358;
    --gold: #B98F45;
    --text: #132420;
    --text-md: #54655F;
    --text-lt: #54655F;
    --border: #DCE6E2;
    --off-white: #E8EFEC;
    font-family: 'Inter', var(--font-body);
  }
  /* GNP-PDP-MOCKUP-COLORS-V1 — page background behind the whole desktop
     PDP, matching the mockup's --bg (#F3F6F5). Only the PDP template's
     outer wrapper is targeted, not body itself, so this never leaks onto
     any other page (body.pdp-desktop-v2 is only ever added on the PDP). */
  body.pdp-desktop-v2 .pdp-layout,
  body.pdp-desktop-v2 .pdp-related-sidebar.products-section {
    background: #F3F6F5;
  }
  body.pdp-desktop-v2 .pdp-title,
  body.pdp-desktop-v2 .pdp-price,
  body.pdp-desktop-v2 .pdp-quicknav-d button,
  body.pdp-desktop-v2 .pdp-description h3,
  body.pdp-desktop-v2 .pdp-facts-block h3 { font-family: 'Sora', var(--font-display); }

  /* Ingredient rows with leaf icons, matching the mockup's Ingredients card */
  body.pdp-desktop-v2 .pdp-ing-list-d { display: flex; flex-direction: column; }
  body.pdp-desktop-v2 .pdp-ing-row-d {
    display: flex; align-items: center; gap: .9rem; padding: .75rem 0;
    border-bottom: 1px solid var(--border);
  }
  body.pdp-desktop-v2 .pdp-ing-row-d:last-child { border-bottom: none; }
  body.pdp-desktop-v2 .pdp-ing-name-d { font-weight: 600; font-size: .92rem; color: var(--text); }

  /* Push "You Might Also Like" down instead of flush with the gallery top */
  body.pdp-desktop-v2 .pdp-related-sidebar { margin-top: 7rem; }
}

/* GNP-PDP-INGREDIENTS-TOP-V1 — spacing for the Ingredients block once
   it's relocated (via JS) to sit right under the title, above price/
   Add to Cart. Applies at all widths; mobile/desktop icon-row styling
   (.pdp-ing-list / .pdp-ing-list-d) is untouched and still applies. */
.pdp-ing-top {
  margin: 0 0 1.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}
.pdp-ing-top h3 { margin-bottom: .5rem; }

/* GNP-PDP-SAFETY-MERGE-V1 — spacing once .pdp-facts-safety is moved (via
   JS) inside the relocated Ingredients card. Its own background/border/
   typography from .pdp-facts-safety is untouched; this only adds the
   gap so it doesn't sit flush against the ingredient rows above it. */
.pdp-ing-safety-nested {
  margin-top: 1rem;
}

/* GNP-PDP-ING-LINKS-V1 — ingredient names are now <a> tags (Google
   search links) instead of plain text next to an icon (icon removed
   entirely). Resets default anchor styling so they read as normal
   text with a subtle hover cue, not a jarring blue underline. Applies
   to both mobile (.pdp-ing-name) and desktop (.pdp-ing-name-d). */
a.pdp-ing-name, a.pdp-ing-name-d {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dotted var(--border, #ccc);
  transition: border-color .15s ease, color .15s ease;
}
a.pdp-ing-name:hover, a.pdp-ing-name-d:hover {
  color: var(--primary, #3f6b4f);
  border-bottom-color: currentColor;
}

/* GNP-PDP-BADGE-ROW-V1 — generic product-agnostic badges under the
   price row. Same two badges on every product (no per-product data
   dependency). Desktop-only styling, matches mockup pill badges. */
body.pdp-desktop-v2 .pdp-badge-row {
  display: flex; gap: 9px; flex-wrap: wrap; margin: 14px 0 22px;
}
body.pdp-desktop-v2 .pdp-badge {
  font-size: 11.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-lt); background: var(--surface, #fff);
}

/* GNP-PDP-BUYROW-V1 — restyles the existing Add to Cart / Buy Now /
   Wishlist buttons + qty stepper into the mockup's outline+solid+icon
   layout. No JS/markup logic touched — pure visual restyle, desktop-only. */
body.pdp-desktop-v2 .pdp-actions {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
body.pdp-desktop-v2 .pdp-add-btn,
body.pdp-desktop-v2 .pdp-buynow-btn {
  height: 44px; padding: 0 26px; border-radius: 14px; font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
body.pdp-desktop-v2 .pdp-add-btn {
  background: transparent; border: 1.5px solid var(--primary); color: var(--primary);
}
body.pdp-desktop-v2 .pdp-buynow-btn {
  background: var(--primary); color: #fff; border: none;
}
body.pdp-desktop-v2 .pdp-wishlist-btn {
  width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--off-white, #F7F9F5); display: inline-flex; align-items: center;
  justify-content: center; padding: 0; font-size: 0; /* collapses "Wishlist" text, icon-only */
}
body.pdp-desktop-v2 .pdp-cart-link { margin-left: 4px; font-size: 13px; }
body.pdp-desktop-v2 .cart-qty-form.pdp-qty-form {
  display: flex; align-items: center; background: var(--surface, #fff);
  border: 1px solid var(--border); border-radius: 999px; overflow: hidden;
}
body.pdp-desktop-v2 .cart-qty-form.pdp-qty-form .qty-btn {
  width: 38px; height: 40px; border: none; background: transparent; font-size: 16px; cursor: pointer;
}
body.pdp-desktop-v2 .cart-qty-form.pdp-qty-form .qty-input {
  width: 32px; text-align: center; font-weight: 600; font-size: 14.5px; border: none; background: transparent;
}

/* GNP-PDP-FAQ-ROTATE-V1 — "+" rotates to "×" when a FAQ item is open.
   Applies to the native <details>/<summary> accordion on all widths. */
.faq-item .faq-icon {
  display: inline-block;
  transition: transform .2s ease;
}
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}

/* GNP-PDP-TWO-COL-V1 — real mockup-matching two-column layout: left
   column (~64%) holds gallery+info paired at top plus Product Details/
   Reviews/FAQ stacked below; right column (~340px) is the sticky "You
   Might Also Like" sidebar, now spanning the full left column's height
   instead of only the top block. Appended last so it wins over the
   earlier 3-column GNP-PDP-DESKTOP-REDESIGN-V2 rule at equal specificity.
   Desktop-only (>=1025px), scoped to body.pdp-desktop-v2. */
@media (min-width: 992px) {
  body.pdp-desktop-v2 .pdp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }
  body.pdp-desktop-v2 .pdp-left-col {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    min-width: 0;
  }
  body.pdp-desktop-v2 .pdp-top-row {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
  }
  body.pdp-desktop-v2 .pdp-top-row .pdp-media {
    flex: 0 0 46%;
    position: static;
  }
  body.pdp-desktop-v2 .pdp-top-row .pdp-info {
    flex: 1;
    min-width: 0;
  }
  body.pdp-desktop-v2 .pdp-related-sidebar {
    grid-column: 2;
    position: sticky;
    top: 90px;
    align-self: start;
  }
}

/* GNP-PDP-FULL-PALETTE-V1 — applies the approved mockup's full color
   set (not just brand accents) across the desktop PDP. Scoped to
   descendants of body.pdp-desktop-v2, not redefined as CSS custom
   properties at body level, so header/footer (which share --text,
   --border, etc. sitewide) are NOT affected. */
@media (min-width: 992px) {
  body.pdp-desktop-v2 .pdp-layout { background: #F3F6F5; }
  body.pdp-desktop-v2 .pdp-info,
  body.pdp-desktop-v2 .pdp-title { color: #132420; }
  body.pdp-desktop-v2 .pdp-short-desc,
  body.pdp-desktop-v2 .pdp-subtitle-d,
  body.pdp-desktop-v2 .pdp-facts-block p,
  body.pdp-desktop-v2 .pdp-facts-safety p { color: #54655F; }
  body.pdp-desktop-v2 .pdp-img-wrap,
  body.pdp-desktop-v2 .pdp-facts,
  body.pdp-desktop-v2 .pdp-ing-row-d,
  body.pdp-desktop-v2 .pdp-quicknav-wrap-d,
  body.pdp-desktop-v2 .pdp-facts-safety,
  body.pdp-desktop-v2 .pdp-related-sidebar.products-section { border-color: #DCE6E2; }
  body.pdp-desktop-v2 .pdp-facts-safety,
  body.pdp-desktop-v2 .pdp-related-sidebar.products-section { background: #E8EFEC; }
}

/* GNP-PDP-QUICKNAV-DEDUPE-V1 — the older mobile-era quicknav
   (.pdp-quicknav-wrap / .pdp-quicknav) builds unconditionally with no
   matchMedia gate, so on desktop widths BOTH it and the newer
   .pdp-quicknav-wrap-d bar were rendering stacked. Hiding the old one
   at desktop widths; mobile is untouched. */
@media (min-width: 992px) {
  .pdp-quicknav-wrap { display: none !important; }
}

/* GNP-PDP-SUBTITLE-DESKTOP-V1 — styles the EXISTING real subtitle
   (product.short_description, class .pdp-subtitle) for desktop, per
   the approved mockup. No new hardcoded text — this uses whatever the
   admin has actually entered for this product. */
@media (min-width: 992px) {
  body.pdp-desktop-v2 .pdp-subtitle {
    font-family: 'Inter', var(--font-body);
    font-size: .92rem;
    color: #54655F;
    margin: 0 0 .6rem;
  }
}

/* GNP-PDP-LAYOUT-FINAL-FIX-V1 -- appended last, deliberately, to win over
   every earlier .pdp-layout / .pdp-related-sidebar rule from this session
   (GNP-PDP-DESKTOP-REDESIGN-V2, MOCKUP-EXACT-V1, TWO-COL-V1, SIDEBAR-CAP-V1,
   etc.) which had accumulated into conflicting grid-column-count and
   position rules that caused the sidebar to overlap the left column
   instead of sitting beside it. This is the single source of truth for
   the desktop PDP layout going forward -- edit THIS block for any future
   layout change, not the older ones above it. */
@media (min-width: 992px) {
  body.pdp-desktop-v2 .pdp-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    grid-template-rows: auto 1fr !important;
    gap: 2.5rem !important;
    align-items: start !important;
  }
  body.pdp-desktop-v2 .pdp-top-row {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
  body.pdp-desktop-v2 .pdp-left-col {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2.5rem !important;
    min-width: 0 !important;
  }
  body.pdp-desktop-v2 .pdp-related-sidebar {
    grid-column: 2 !important;
    grid-row: 2 !important;
    position: sticky !important;
    top: 90px !important;
    align-self: start !important;
    margin-top: 0 !important;
  }
  body.pdp-desktop-v2 .pdp-related-sidebar .products-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }
}


/* GNP-GOOGLE-TRANSLATE-HIDE-UI-V1 */
.goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0px !important; }
.goog-te-gadget { height: 0; overflow: hidden; }
#google_translate_element { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }