/* Minimal black-and-white theme overrides */
:root{
  --black:#000;
  --white:#fff;
  --muted:#666;
}
body{background:var(--white);color:var(--black)}
a{color:var(--black)}
.header.scrolled, .page-header.scrolled{background:var(--white)!important}
.header .logo img, .logo{color:var(--black)}
.btn, button{border-radius:6px}
.add-btn{background:var(--black);color:var(--white)}
.buy-btn{background:transparent;color:var(--black);border-color:var(--black)}
.wishlist-btn, .qty-btn{background:var(--white);border:1px solid #111;color:#111}
.share-menu{background:var(--white);color:var(--black)}
/* Global link hover */
a:hover{color:#111}
/* Ensure cards/backgrounds remain white */
.modern-product-card, .product-meta, .panel-inner{background:var(--white)}
/* Minimal adjustments for nav */
.header__menu a{color:var(--black)}
.header__right__widget .fa, .header-icons a{color:var(--black)}
/* Footer overrides */
footer{background:var(--white);color:var(--black)}

/* Page header exact styling to match provided design */
.page-header{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
  background:var(--white);
  transition:background .28s ease,box-shadow .28s ease,color .2s ease,padding .2s ease;
  border-bottom:1px solid rgba(0,0,0,0.06);
  padding:0 28px;
}
.page-header .header-left{position:absolute;left:28px}
.page-header .header-left a{color:var(--black);font-size:13px;letter-spacing:0.04em;text-transform:uppercase;text-decoration:none}
.page-header .logo{font-family:Playfair Display,serif;font-size:20px;letter-spacing:0.65em;text-transform:uppercase;color:var(--black)}
.page-header .header-icons{position:absolute;right:28px;display:flex;gap:18px}
.page-header .header-icons a{color:var(--black);font-size:18px}

/* Transparent header variant for hero overlay */
.page-header.transparent-header{background:transparent;border-bottom:0}
.page-header.transparent-header .header-left a,
.page-header.transparent-header .header-icons a,
.page-header.transparent-header .logo{color:#fff}

/* When header gets scrolled, force white background and black icons/text */
.page-header.scrolled{
  background:var(--white) !important;
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
  padding:12px 28px;
}
.page-header.scrolled .logo,
.page-header.scrolled .header-icons a,
.page-header.scrolled .header-left a{
  color:var(--black) !important;
}

@media(max-width:800px){
  .page-header{height:56px;padding:0 16px}
  .page-header .logo{letter-spacing:0.45em;font-size:18px}
  .page-header .header-left{left:16px}
  .page-header .header-icons{right:16px;gap:12px}
}