/* ==========================================================================
   Jamil Perfumery House — Luxury Heritage Brand Refactor
   Est. 1947 | Raja Bazar, Rawalpindi
   Version: luxury-refactor-v1 | 2026-09
   ========================================================================== */

/* --- 0. DESIGN TOKENS --- */
:root {
  --jph-gold:          #c5a86a;
  --jph-gold-light:    #e6c387;
  --jph-gold-hover:    #b8924e;
  --jph-emerald:       #0B3B2C;
  --jph-emerald-mid:   #1a5c44;
  --jph-emerald-light: #d1fae5;
  --jph-slate:         #111827;
  --jph-slate-mid:     #374151;
  --jph-slate-soft:    #6b7280;
  --jph-cream:         #fdfbf7;
  --jph-cream-border:  #e7e5e4;
  --jph-white:         #ffffff;
  --jph-red:           #dc2626;
  --jph-wa-green:      #128c7e;
  --radius-pill:       999px;
  --radius-card:       12px;
  --shadow-card:       0 2px 12px rgba(0,0,0,0.08);
  --shadow-hover:      0 12px 32px rgba(0,0,0,0.13);
  --transition:        all 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* --- 1. NAVBAR / HEADER --- */
.top-notification-strip {
  background: var(--jph-slate) !important;
  border-bottom: 1px solid rgba(197,168,106,0.3) !important;
  font-family: "Montserrat", "Inter", sans-serif !important;
  letter-spacing: 0.07em !important;
  font-size: 0.71rem !important;
  padding-top: max(0.4rem, env(safe-area-inset-top, 0px)) !important;
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
}
.header-main {
  background: var(--jph-white) !important;
  border-bottom: 1px solid #ece8e1 !important;
  box-shadow: 0 1px 0 rgba(197,168,106,0.12), 0 2px 8px rgba(0,0,0,0.04) !important;
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
}
.brand-centered {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.brand-crest {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  color: var(--jph-gold) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.brand-name {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  color: var(--jph-slate) !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
}
.brand-subline {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.52rem !important;
  font-weight: 600 !important;
  color: var(--jph-slate-soft) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.search-input-wrapper {
  width: 300px !important;
  border: 1px solid #d4cfc8 !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.9rem !important;
  background: #faf9f7 !important;
  transition: var(--transition) !important;
  box-shadow: none !important;
}
.search-input-wrapper:focus-within {
  border-color: var(--jph-gold) !important;
  background: var(--jph-white) !important;
  box-shadow: 0 0 0 3px rgba(197,168,106,0.12) !important;
}
.search-input-wrapper input {
  font-family: "Inter", sans-serif !important;
  font-size: 0.83rem !important;
  color: var(--jph-slate) !important;
}
.search-input-wrapper input::placeholder {
  color: #b0a898 !important;
  font-style: italic !important;
  font-size: 0.82rem !important;
}
.action-btn {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--jph-slate-mid) !important;
  transition: var(--transition) !important;
}
.action-btn:hover { color: var(--jph-gold) !important; }
.category-nav-bar {
  background: var(--jph-cream) !important;
  border-top: 1px solid #ece8e1 !important;
  border-bottom: 1px solid #ece8e1 !important;
}
.nav-item {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.73rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--jph-slate-mid) !important;
  padding: 0.85rem 1.35rem !important;
  transition: var(--transition) !important;
  position: relative !important;
}
.nav-item::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--jph-gold) !important;
  transition: width 0.22s ease !important;
}
.nav-item:hover { color: var(--jph-slate) !important; background: transparent !important; }
.nav-item:hover::after, .nav-item.router-link-active::after { width: 60% !important; }
.nav-item.router-link-active { color: var(--jph-slate) !important; background: transparent !important; font-weight: 800 !important; }
.pill-icon { display: none !important; }

/* --- 2. HERO SECTION --- */
.luxury-hero {
  background: linear-gradient(160deg, #0d1f15 0%, #0B3B2C 45%, #143d28 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.hero-content {
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
  padding: 4rem 2rem 3.5rem !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}
.hero-crest-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--jph-gold) !important;
  border: 1px solid rgba(197,168,106,0.4) !important;
  padding: 0.4rem 1.1rem !important;
  border-radius: 2px !important;
  background: rgba(197,168,106,0.06) !important;
  margin-bottom: 1rem !important;
}
.crest-icon { display: none !important; }
.hero-heading {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 3.2rem !important;
  font-weight: 900 !important;
  color: var(--jph-white) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.15 !important;
  margin: 0 0 1rem !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.3) !important;
}
.hero-tagline {
  font-family: "Inter", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.72) !important;
  line-height: 1.65 !important;
  margin: 0 auto 2rem !important;
  max-width: 560px !important;
  letter-spacing: 0.01em !important;
}
.hero-cta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}
.btn-hero-shop {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0 !important; /* Hide raw emoji */
  background: var(--jph-gold) !important;
  color: #1a0f00 !important;
  border: none !important;
  padding: 0.85rem 2rem !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: var(--transition) !important;
  box-shadow: 0 4px 18px rgba(197,168,106,0.35) !important;
  min-height: 44px !important;
}
.btn-hero-shop::after {
  content: "EXPLORE BESTSELLERS" !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #1a0f00 !important;
}
.btn-hero-shop:hover {
  background: var(--jph-gold-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(197,168,106,0.45) !important;
}
.btn-hero-shop:hover::after {
  color: #fff !important;
}
.btn-hero-wa {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0 !important; /* Hide raw emoji */
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.45) !important;
  padding: 0.82rem 1.85rem !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: var(--transition) !important;
  min-height: 44px !important;
}
.btn-hero-wa::after {
  content: "ORDER ON WHATSAPP" !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255,255,255,0.92) !important;
}
.btn-hero-wa:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.75) !important;
}
.btn-hero-wa:hover::after {
  color: #fff !important;
}

/* --- 3. TRUST STRIP --- */
.trust-strip {
  background: #081912 !important; /* Rich deep luxury emerald */
  border-top: 1px solid rgba(197,168,106,0.3) !important;
  border-bottom: 1px solid rgba(197,168,106,0.18) !important;
  padding: 1.25rem 1.5rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1.75rem !important;
}
.trust-badge {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  text-align: left !important;
}
.trust-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: rgba(197, 168, 106, 0.12) !important;
  border: 1px solid rgba(197, 168, 106, 0.3) !important;
  flex-shrink: 0 !important;
}
.trust-text strong {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  color: #f7e7ce !important; /* Soft warm gold / cream */
  display: block !important;
  margin-bottom: 0.15rem !important;
}
.trust-text span {
  font-family: "Inter", sans-serif !important;
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.75) !important;
  display: block !important;
  line-height: 1.3 !important;
}

/* --- 4. HOME CATALOG SECTION --- */
.section-subtitle {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--jph-gold) !important;
  display: block !important;
  margin-bottom: 0.35rem !important;
}
.section-title {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: var(--jph-slate) !important;
  letter-spacing: 0.03em !important;
  margin: 0 !important;
}
.category-pills-row {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  margin: 1.25rem 0 !important;
  padding: 0 1rem !important;
}
.category-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.77rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: var(--radius-pill) !important;
  border: 1.5px solid #e5e7eb !important;
  background: var(--jph-white) !important;
  color: var(--jph-slate-mid) !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  gap: 0 !important;
}
.category-pill-btn:hover {
  border-color: var(--jph-gold) !important;
  background: #fdfbf7 !important;
  color: var(--jph-slate) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
.category-pill-btn.active {
  background: var(--jph-emerald) !important;
  border-color: var(--jph-emerald) !important;
  color: var(--jph-white) !important;
  box-shadow: 0 4px 14px rgba(11,59,44,0.3) !important;
}

/* --- 5. HOME PAGE PRODUCT CARDS --- */
.products-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 20px !important;
}
.product-card {
  background: var(--jph-white) !important;
  border: 1px solid #ede8e0 !important;
  border-radius: var(--radius-card) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: var(--transition) !important;
  box-shadow: var(--shadow-card) !important;
  animation: jph-fade-up 0.4s ease both !important;
}
.product-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: rgba(197,168,106,0.35) !important;
}
.card-image-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  background: var(--jph-cream) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
.product-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1) !important;
  display: block !important;
}
.product-card:hover .product-img { transform: scale(1.07) !important; }
.image-hover-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(11,59,44,0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
}
.product-card:hover .image-hover-overlay { opacity: 1 !important; }
.btn-quick-view {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--jph-white) !important;
  background: rgba(255,255,255,0.15) !important;
  border: 1.5px solid rgba(255,255,255,0.6) !important;
  padding: 0.45rem 1rem !important;
  border-radius: 2px !important;
  backdrop-filter: blur(4px) !important;
}
.card-badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  background: var(--jph-red) !important;
  color: var(--jph-white) !important;
  padding: 3px 9px !important;
  border-radius: 3px !important;
  z-index: 2 !important;
}
.organic-badge { background: var(--jph-slate) !important; color: var(--jph-gold) !important; }
.card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 14px 14px 16px !important;
}
.product-category-label {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.64rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--jph-gold) !important;
  margin-bottom: 4px !important;
  display: block !important;
}
.product-title {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--jph-slate) !important;
  line-height: 1.4 !important;
  margin: 0 0 8px !important;
  cursor: pointer !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.6em !important;
  transition: color 0.18s !important;
}
.product-title:hover { color: var(--jph-emerald) !important; }
.product-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
  flex-wrap: wrap !important;
}
.price-strike { font-size: 0.82rem !important; color: #9ca3af !important; text-decoration: line-through !important; font-weight: 500 !important; }
.price-active { font-family: "Inter", sans-serif !important; font-size: 1.05rem !important; font-weight: 800 !important; color: var(--jph-emerald) !important; }
.price-on-demand-tag { font-family: "Montserrat", sans-serif !important; font-size: 0.8rem !important; font-weight: 700 !important; color: var(--jph-gold) !important; }
.size-chips-wrap {
  margin-bottom: 10px !important;
  min-height: 56px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
.size-label {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--jph-slate-soft) !important;
  display: block !important;
  margin-bottom: 5px !important;
}
.size-buttons-group { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; }
.size-chip {
  font-family: "Inter", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 3px !important;
  border: 1.5px solid #d4cfc8 !important;
  background: var(--jph-white) !important;
  color: var(--jph-slate-mid) !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  min-height: 28px !important;
  min-width: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.size-chip:hover { border-color: var(--jph-emerald) !important; color: var(--jph-emerald) !important; }
.size-chip.active { background: var(--jph-emerald) !important; border-color: var(--jph-emerald) !important; color: var(--jph-white) !important; }
.card-actions-row {
  display: flex !important;
  gap: 8px !important;
  margin-top: auto !important;
  padding-top: 12px !important;
  align-items: stretch !important;
}
.btn-action-cart {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: var(--jph-slate) !important;
  color: var(--jph-white) !important;
  border: none !important;
  padding: 0.6rem 0.75rem !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  line-height: 1.2 !important;
  text-align: center !important;
}
.btn-action-cart:hover:not(:disabled) { background: var(--jph-emerald) !important; transform: translateY(-1px) !important; }
.btn-action-cart:disabled { background: #e5e7eb !important; color: #9ca3af !important; cursor: not-allowed !important; }
.btn-action-wa {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: var(--jph-wa-green) !important;
  border: 1.5px solid var(--jph-wa-green) !important;
  padding: 0.6rem 0.75rem !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: var(--transition) !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
.btn-action-wa:hover { background: var(--jph-wa-green) !important; color: var(--jph-white) !important; transform: translateY(-1px) !important; }
.btn-action-inquire-solid {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: var(--jph-wa-green) !important;
  border: 1.5px solid var(--jph-wa-green) !important;
  padding: 0.65rem 1rem !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: var(--transition) !important;
}
.btn-action-inquire-solid:hover { background: var(--jph-wa-green) !important; color: var(--jph-white) !important; }

/* --- 6. CATALOG PAGE --- */
.catalog-top-banner {
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 100%) !important;
  border-bottom: 1px solid #ece8e1 !important;
}
.catalog-kicker {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--jph-gold) !important;
}
.catalog-top-banner h1 {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 2.1rem !important;
  font-weight: 800 !important;
  color: var(--jph-slate) !important;
  letter-spacing: 0.04em !important;
}
.catalog-search-input {
  max-width: 440px !important;
  width: 100% !important;
  border: 1.5px solid #d4cfc8 !important;
  border-radius: 6px !important;
  background: var(--jph-white) !important;
  padding: 0.55rem 1rem !important;
  box-shadow: none !important;
  transition: var(--transition) !important;
}
.catalog-search-input:focus-within { border-color: var(--jph-gold) !important; box-shadow: 0 0 0 3px rgba(197,168,106,0.12) !important; }
.catalog-search-input input { font-family: "Inter", sans-serif !important; font-size: 0.85rem !important; color: var(--jph-slate) !important; }
.catalog-search-input input::placeholder { color: #b0a898 !important; font-style: italic !important; }
.toggle-box-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.5rem 1.2rem !important;
  border-radius: var(--radius-pill) !important;
  border: 1.5px solid #e5e7eb !important;
  background: var(--jph-white) !important;
  color: var(--jph-slate-mid) !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
.toggle-box-btn:hover {
  border-color: var(--jph-gold) !important;
  background: var(--jph-cream) !important;
  color: var(--jph-slate) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.07) !important;
}
.toggle-box-btn.active {
  background: var(--jph-emerald) !important;
  border-color: var(--jph-emerald) !important;
  color: var(--jph-white) !important;
  box-shadow: 0 4px 14px rgba(11,59,44,0.28) !important;
}
.product-image-box {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  background: var(--jph-cream) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
.product-details { display: flex !important; flex-direction: column !important; flex: 1 !important; padding: 14px !important; }
.product-cat {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.63rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--jph-gold) !important;
  margin-bottom: 4px !important;
}
.product-price {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--jph-emerald) !important;
  margin-bottom: 10px !important;
  font-family: "Inter", sans-serif !important;
}
.price-strike-home { font-size: 0.82rem !important; color: #9ca3af !important; text-decoration: line-through !important; font-weight: 500 !important; }
.price-active-home { color: var(--jph-emerald) !important; font-weight: 800 !important; }
.price-contact-tag { font-size: 0.82rem !important; color: var(--jph-gold) !important; font-weight: 700 !important; }
.vol-btn {
  font-family: "Inter", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 3px !important;
  border: 1.5px solid #d4cfc8 !important;
  background: var(--jph-white) !important;
  color: var(--jph-slate-mid) !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.vol-btn:hover, .vol-btn.active { border-color: var(--jph-emerald) !important; color: var(--jph-emerald) !important; }
.vol-btn.active { background: var(--jph-emerald) !important; color: var(--jph-white) !important; }
.card-footer-actions { display: flex !important; gap: 8px !important; margin-top: auto !important; padding-top: 12px !important; align-items: stretch !important; }
.btn-card-cart {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: var(--jph-slate) !important;
  color: var(--jph-white) !important;
  border: none !important;
  padding: 0.6rem 0.75rem !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
}
.btn-card-cart:hover { background: var(--jph-emerald) !important; }
.btn-card-wa {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: var(--jph-wa-green) !important;
  border: 1.5px solid var(--jph-wa-green) !important;
  padding: 0.6rem 0.75rem !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: var(--transition) !important;
  white-space: nowrap !important;
}
.btn-card-wa:hover { background: var(--jph-wa-green) !important; color: var(--jph-white) !important; }
.home-discount-badge, .home-pure-badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 3px 9px !important;
  border-radius: 3px !important;
  z-index: 2 !important;
}
.home-discount-badge { background: var(--jph-red) !important; color: var(--jph-white) !important; }
.home-pure-badge { background: var(--jph-slate) !important; color: var(--jph-gold) !important; }

/* --- 7. MODAL --- */
.modal-category { font-family: "Montserrat", sans-serif !important; font-size: 0.68rem !important; font-weight: 800 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--jph-gold) !important; }
.modal-title { font-family: "Cinzel", Georgia, serif !important; font-size: 1.5rem !important; font-weight: 800 !important; color: var(--jph-slate) !important; }
.modal-price { font-size: 1.3rem !important; font-weight: 800 !important; color: var(--jph-emerald) !important; font-family: "Inter", sans-serif !important; }
.btn-modal-cart {
  font-family: "Montserrat", sans-serif !important; font-size: 0.82rem !important; font-weight: 800 !important;
  letter-spacing: 0.07em !important; text-transform: uppercase !important;
  background: var(--jph-slate) !important; color: var(--jph-white) !important;
  border: none !important; padding: 0.85rem 1.25rem !important; border-radius: 4px !important;
  cursor: pointer !important; transition: var(--transition) !important; flex: 1 !important;
}
.btn-modal-cart:hover { background: var(--jph-emerald) !important; }
.btn-modal-wa {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
  font-family: "Montserrat", sans-serif !important; font-size: 0.82rem !important; font-weight: 700 !important;
  letter-spacing: 0.06em !important; text-transform: uppercase !important;
  background: transparent !important; color: var(--jph-wa-green) !important;
  border: 1.5px solid var(--jph-wa-green) !important; padding: 0.85rem 1.25rem !important;
  border-radius: 4px !important; text-decoration: none !important; text-align: center !important;
  transition: var(--transition) !important; flex: 1 !important;
}
.btn-modal-wa:hover { background: var(--jph-wa-green) !important; color: var(--jph-white) !important; }
.btn-modal-inquire-solid {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
  font-family: "Montserrat", sans-serif !important; font-size: 0.85rem !important; font-weight: 800 !important;
  letter-spacing: 0.07em !important; text-transform: uppercase !important;
  background: var(--jph-wa-green) !important; color: var(--jph-white) !important;
  border: none !important; padding: 0.9rem 1.25rem !important;
  border-radius: 4px !important; text-decoration: none !important; width: 100% !important;
  transition: var(--transition) !important;
}
.btn-modal-inquire-solid:hover { background: #0a7a5e !important; }

/* --- 8. MOBILE FLOATING BAR --- */
.mobile-bar-btn-wa {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: var(--jph-wa-green) !important;
  border-radius: 6px !important;
}

/* --- 9. MISC UTILITY --- */
.btn-reset {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: var(--jph-emerald) !important;
  color: var(--jph-white) !important;
  border: none !important;
  padding: 0.7rem 1.5rem !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  margin-top: 1rem !important;
}
.btn-reset:hover { background: var(--jph-emerald-mid) !important; }
.visit-us-bar { background: var(--jph-emerald) !important; border-top: 1px solid rgba(197,168,106,0.2) !important; }
.pin-icon { display: none !important; }
.drawer-nav-item {
  font-family: "Montserrat", sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--jph-slate-mid) !important;
  padding: 0.65rem 0.85rem !important;
  border-radius: 4px !important;
}
.drawer-nav-item:hover { background: var(--jph-cream) !important; color: var(--jph-slate) !important; }

/* --- 10. ANIMATIONS --- */
@keyframes jph-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.products-grid .product-card:nth-child(2),
.products-grid-modern .product-card:nth-child(2) { animation-delay: 0.05s !important; }
.products-grid .product-card:nth-child(3),
.products-grid-modern .product-card:nth-child(3) { animation-delay: 0.10s !important; }
.products-grid .product-card:nth-child(4),
.products-grid-modern .product-card:nth-child(4) { animation-delay: 0.15s !important; }
.products-grid .product-card:nth-child(5),
.products-grid-modern .product-card:nth-child(5) { animation-delay: 0.20s !important; }
.products-grid .product-card:nth-child(6),
.products-grid-modern .product-card:nth-child(6) { animation-delay: 0.25s !important; }
.products-grid .product-card:nth-child(7),
.products-grid-modern .product-card:nth-child(7) { animation-delay: 0.30s !important; }
.products-grid .product-card:nth-child(8),
.products-grid-modern .product-card:nth-child(8) { animation-delay: 0.35s !important; }

/* --- 11. RESPONSIVE OVERRIDES --- */
@media (max-width: 768px) {
  .hero-heading { font-size: 2rem !important; letter-spacing: 0.02em !important; }
  .hero-content { padding: 2.5rem 1.25rem 2.25rem !important; }
  .hero-cta-row { flex-direction: column !important; gap: 10px !important; max-width: 300px !important; margin: 0 auto !important; }
  .btn-hero-shop, .btn-hero-wa { width: 100% !important; }
  .category-pills-row { flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-start !important; scrollbar-width: none !important; }
  .category-pills-row::-webkit-scrollbar { display: none !important; }
  .category-pill-btn { flex-shrink: 0 !important; white-space: nowrap !important; }
}
@media (max-width: 640px) {
  .products-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .card-body { padding: 10px 10px 12px !important; }
  .product-title { font-size: 0.82rem !important; }
  .btn-action-cart, .btn-action-wa { font-size: 0.65rem !important; padding: 0.55rem 0.5rem !important; letter-spacing: 0.04em !important; }
}
@media (max-width: 400px) {
  .products-grid { grid-template-columns: 1fr !important; }
  .hero-heading { font-size: 1.7rem !important; }
}

/* --- 12. SCROLLBAR --- */
* { scrollbar-width: thin; scrollbar-color: rgba(197,168,106,0.35) transparent; }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-thumb { background: rgba(197,168,106,0.4); border-radius: 99px; }
*::-webkit-scrollbar-track { background: transparent; }

/* --- 13. MOBILE FLOATING ACTION BAR --- */
.mobile-floating-bar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  padding-top: 8px !important;
  padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  padding-bottom: max(12px, calc(8px + env(safe-area-inset-bottom, 0px))) !important;
  background: rgba(8, 25, 18, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid rgba(197, 168, 106, 0.35) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45) !important;
}
.mobile-bar-btn-wa {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 0 !important;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
  color: #fff !important;
  padding: 11px 16px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35) !important;
  box-sizing: border-box !important;
}
.mobile-bar-btn-wa::after {
  content: "ORDER VIA WHATSAPP (0333-5126340)" !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: #ffffff !important;
}

/* --- 14. COMPREHENSIVE IPHONE NOTCH & CUTOUT ADAPTATION --- */
@supports (padding: max(0px)) {
  .top-notification-strip {
    padding-top: max(0.45rem, env(safe-area-inset-top, 0px)) !important;
  }
  .navbar-root {
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }
  body {
    padding-bottom: max(76px, calc(72px + env(safe-area-inset-bottom, 0px))) !important;
  }
  .cart-drawer-card,
  .mobile-drawer {
    padding-top: max(1.25rem, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
  }
}

/* Mobile Screen Cutout & Overflow Protection */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* Header Brand Text never clips or truncates awkwardly */
  .brand-centered {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .brand-link {
    max-width: 100% !important;
    overflow: hidden !important;
    gap: 6px !important;
  }
  .brand-crest {
    font-size: 0.52rem !important;
    letter-spacing: 0.08em !important;
    line-height: 1.1 !important;
  }
  .brand-name {
    font-size: clamp(0.78rem, 3.8vw, 1.05rem) !important;
    letter-spacing: 0.03em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  .brand-subline {
    font-size: 0.44rem !important;
    letter-spacing: 0.03em !important;
    line-height: 1.2 !important;
  }

  /* Hero Crest Badge Never Cuts Off */
  .hero-crest-badge {
    font-size: 0.60rem !important;
    letter-spacing: 0.07em !important;
    padding: 0.35rem 0.75rem !important;
    max-width: 95% !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.35 !important;
    display: inline-block !important;
  }

  .hero-heading {
    font-size: clamp(1.65rem, 6.5vw, 2.35rem) !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
    padding: 0 0.25rem !important;
  }

  .hero-tagline {
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
    padding: 0 0.5rem !important;
  }

  /* Trust Strip Mobile Flow */
  .trust-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 1.25rem 1.25rem !important;
    gap: 1.15rem !important;
  }
  .trust-badge {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  /* Category pills horizontal smooth scroll without clipping */
  .category-pills-row,
  .category-toggle-container {
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
  }
}