/* Overrides to refine the navbar look (purple glow for active item, logo sizing) */
.header.navbar, header.navbar{position: absolute;left:0;right:0;top:14px;display:flex;justify-content:center;pointer-events:auto}
.navbar-inner{width:min(1200px,calc(100% - 48px));background:#fff;border-radius:44px;padding:12px 20px;display:flex;align-items:center;gap:18px;margin:0 auto;box-shadow:0 14px 40px rgba(84,89,105,0.06);}
.navbar .navbar-left{justify-content:center}
.navbar-left nav ul{display:flex;gap:30px;align-items:center;margin:0;padding:0 8px;list-style:none}
.navbar-left nav ul li a{padding:12px 20px;border-radius:34px;font-weight:600;color:#4b5563;text-decoration:none;min-width:76px;display:inline-flex;align-items:center;justify-content:center}
.navbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.navbar-search-input{min-width:180px}
.navbar-left nav ul li a.active {
  background: #f7e29a; /* slightly brighter pale yellow */
  color: #5b2b1b;
  box-shadow: 0 14px 36px rgba(118,58,175,0.18), 0 2px 6px rgba(91,43,27,0.06) inset;
  transform: translateY(-2px);
}

.navbar-left nav ul li a.active::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px;
  width: 36px;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(150,98,230,0.22), rgba(255,224,120,0.2));
  filter: blur(6px);
  pointer-events: none;
}

/* Ensure active link keeps relative positioning for pseudo element */
.navbar-left nav ul li { position: relative; }

/* Slightly increase logo prominence to match image */
.navbar .logo picture,
.navbar .logo img { height: 58px; width: auto; display: block; object-fit: contain; }

/* subtle outer halo on navbar inner (soft purple vignette) */
.navbar-inner {
  box-shadow: 0 18px 46px rgba(118, 58, 175, 0.06), 0 6px 18px rgba(0,0,0,0.06);
}

@media (max-width: 920px) {
  .navbar .logo img { height: 48px; }
}

/* Stronger pill style and search/wishlist layout to match screenshot */
.navbar-inner { padding: 14px 36px; border-radius: 56px; }
.navbar-left nav ul li a { transition: box-shadow 200ms, transform 160ms, color 160ms; }
.navbar-left nav ul li a.active { position: relative; z-index: 3; }
.navbar-left nav ul li a.active::before { content: ''; position: absolute; inset: -6px; border-radius: 34px; background: radial-gradient(closest-side, rgba(150,98,230,0.12), transparent 60%); filter: blur(8px); z-index: -1; }

.navbar-search { background: #fff; border-radius: 28px; padding: 6px 8px; border: 1px solid rgba(200,180,170,0.6); box-shadow: 0 8px 22px rgba(118,58,175,0.03); }
.navbar-search-input { padding: 8px 14px; border-radius: 22px; border: none; outline: none; }
.navbar-search-btn svg { width:18px; height:18px; color:#b36b6b }

.navbar-right .icon.heart { display:flex; align-items:center; gap:8px; color:#b45a5a; }
.navbar-right .wishlist-text { display:inline-block; font-size:0.95rem; color:#b45a5a; }

@media (max-width: 920px) {
  .navbar-inner { padding: 10px 20px; border-radius: 42px; }
}

/* Hero & layout overrides to better match the provided image */
.hero {
  min-height: 580px; /* larger hero area */
  padding: 120px 56px; /* give breathing room */
  background: radial-gradient(circle at 70% 20%, rgba(247,245,250,0.55) 0%, rgba(248,251,250,0.9) 45%, rgba(255,255,255,1) 100%), linear-gradient(180deg, rgba(255,250,240,0.6), rgba(255,255,255,0));
  overflow: visible;
}
.hero .subtitle {
  color: #6d2e2e; /* warmer accent */
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero h1 {
  font-size: 3.6rem;
  line-height: 1.06;
  margin-bottom: 20px;
  color: #2a2a2a;
  font-weight: 800;
  text-wrap: balance;
}
.hero .desc {
  font-size: 1.18rem;
  color: #444;
  max-width: 720px;
  margin-bottom: 28px;
}
.hero-buttons .btn-primary {
  padding: 14px 34px;
  border-radius: 999px;
  font-size: 1.02rem;
  box-shadow: 0 10px 30px rgba(118,58,175,0.12);
}
.hero-buttons .btn-outline {
  padding: 12px 28px;
  border-radius: 999px;
  font-weight:700;
}

/* Slightly tighter content container to visually match screenshot */
.container, .hero > .container { max-width: 1220px; padding-left: 28px; padding-right: 28px; }

@media (max-width:1024px){
  .hero{min-height:520px;padding:90px 36px}
  .hero h1{font-size:2.8rem}
  .hero .desc{font-size:1.05rem}
}
@media (max-width:768px){
  .hero{padding:70px 20px;min-height:420px}
  .hero h1{font-size:2.2rem}
  .navbar .logo img{height:48px}
}

/* Keep the navbar in a single row on desktop/tablet widths so the labels do not wrap under the logo */
@media (min-width: 769px){
  .navbar{flex-wrap:nowrap}
  .navbar-inner{flex-wrap:nowrap;min-height:84px}
  .navbar .navbar-left{display:flex!important;flex:1 1 auto!important;justify-content:center!important;align-items:center!important;order:0!important;width:auto!important;margin-top:0!important}
  .navbar .navbar-left nav{display:block!important;width:auto!important;height:auto!important;overflow:visible!important;padding-right:0!important}
  .navbar .navbar-left nav ul{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:22px!important;align-items:center!important;width:auto!important;padding:0!important;margin:0!important}
  .navbar .navbar-left nav ul li{width:auto!important;opacity:1!important;transform:none!important;display:block!important}
  .navbar .navbar-left nav ul li a{white-space:nowrap}
  .navbar-right{flex:0 0 auto!important}
}

@media (min-width:769px) and (max-width:1100px){
  .navbar-inner{width:min(1220px,calc(100% - 28px));padding:12px 18px}
  .navbar .logo img{height:54px}
  .navbar-left nav ul{gap:16px!important}
  .navbar-left nav ul li a{padding:10px 16px!important;min-width:auto!important;font-size:.92rem}
  .navbar-right{gap:8px}
  .navbar-search-input{min-width:150px}
}

/* Shared hero offset for secondary pages that use the floating navbar */
.hero-faqs{padding-top:150px}

/* Small utility to nudge the first content block down so header overlaps like the reference */
.page-top-spacer{height:36px}

/* Additional focused hero + layout tweaks: larger logo, stronger active pill halo, spacing refinements */
.hero{padding:150px 40px 80px;min-height:520px;background-position:center right}
.hero h1{font-size:4rem;line-height:1.05;letter-spacing:-1px;font-weight:800;color:#3a1a1a}
.hero .desc{font-size:1.25rem;color:#5a5a5a;max-width:720px}
.navbar .navbar-inner{box-shadow:0 18px 40px rgba(118,58,175,0.12),0 6px 18px rgba(0,0,0,0.06);padding:12px 28px;border-radius:64px}
.navbar .logo picture,
.navbar .logo img{height:64px;width:auto;display:block;object-fit:contain}
.navbar .navbar-left nav ul li a.active{background:linear-gradient(135deg,#f7e29a 0,#f4d67a 100%);color:#5b2b1b;box-shadow:0 10px 30px rgba(118,58,175,0.18);transform:translateY(-4px);padding:14px 28px}
.hero-buttons .btn-primary{padding:14px 36px;font-size:1.05rem}
@media (max-width:768px){
  .hero{padding:60px 20px;min-height:420px}
  .navbar .logo picture,
  .navbar .logo img{height:48px}
  .hero h1{font-size:2.2rem}
}