/* === HEADER / NAV === */

/* ==========================
   TOP BAR
========================== */

.site-topbar{
	background:var(--primary-gold);
	color:var(--white);
	border-bottom:1px solid rgba(255,255,255,.08);
}

.site-topbar .container{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:42px;
	padding:0 20px;
}

.site-topbar p{
	margin:0;
	font-size:13px;
	font-weight:500;
	letter-spacing:.03em;
	line-height:1.5;
	text-align:center;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-light);
  transition: var(--transition);
}

.site-header.scrolled {
  box-shadow: var(--shadow);
}

.site-header.scrolled .nav-wrap {
  height: 76px;
}

.site-header.scrolled .brand img,
.site-header.scrolled .brand svg {
  	height: 62px;
  	max-height: 62px;
}

/* Nav Wrapper — 3-column grid */
.nav-wrap {
  height: 88px;
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  align-items: center;
  gap: 20px;
}

/* Brand / Logo */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--black);
}

.brand img,
.brand svg {
	height:72px;
  	max-height:72px;
  	width:auto;
  	object-fit:contain;
}

.brand-text {
  font-family: var(--font-main);
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--black);
}

.brand-text em {
  color: var(--primary-gold);
  font-style: normal;
}

/* Main Nav */
.main-nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 34px;
}

.main-nav a {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark);
  position: relative;
  transition: var(--transition);
}

.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--primary-gold);
  transition: var(--transition);
}

.main-nav a:hover,
.main-nav a.current-menu-item {
  color: var(--primary-gold);
}

.main-nav a:hover::after,
.main-nav a.current-menu-item::after {
  width: 100%;
}

/* Nav Actions (right side) */
.nav-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

.icon-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--black);
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  transition: color var(--transition);
  display: flex;
  align-items: center;
}

.icon-btn:hover {
  color: var(--primary-gold);
}

/* Cart count badge */
.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cart-count .count {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--primary-gold);
  color: var(--white);
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

/* Hamburger */
.hamburger {
  display: none;
  width: 36px;
  height: 30px;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}

.hamburger span {
  display: block;
  height: 1px;
  background: var(--black);
  transition: var(--transition);
}

.hamburger[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* === PRIMARY NAV DROPDOWN === */
.main-nav .menu-item{
  position:relative;
}

.main-nav .menu-item-has-children>a{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.main-nav .menu-item-has-children>a::before{
  content:'';
  width:6px;
  height:6px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  order:2;
  transition:transform var(--transition);
}

.main-nav .sub-menu{
  position:absolute;
  top:calc(100% + 24px);
  left:50%;
  z-index:120;
  width:max-content;
  min-width:230px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:12px 0;
  background:rgba(255,255,255,.98);
  border:1px solid var(--border-light);
  box-shadow:0 18px 45px rgba(0,0,0,.10);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
}

.main-nav .sub-menu::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:-25px;
  height:25px;
}

.main-nav .menu-item-has-children:hover>.sub-menu,
.main-nav .menu-item-has-children:focus-within>.sub-menu,
.main-nav .menu-item-has-children.submenu-open>.sub-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}

.main-nav .sub-menu li{
  width:100%;
}

.main-nav .sub-menu a{
  display:block;
  width:100%;
  padding:12px 20px;
  font-size:12px;
  line-height:1.45;
  letter-spacing:.11em;
  white-space:nowrap;
}

.main-nav .sub-menu a::after{
  left:20px;
  right:20px;
  bottom:7px;
}

.main-nav .current-menu-item>a,
.main-nav .current-menu-ancestor>a{
  color:var(--primary-gold);
}

.main-nav .current-menu-item>a::after,
.main-nav .current-menu-ancestor>a::after{
  width:100%;
}

.submenu-toggle{
  display:none;
}

/* === THIRD LEVEL: AUTOMATIC PERFUME CATEGORIES === */
@media (min-width:769px){
  .main-nav .sub-menu .menu-item-has-children>a{
    padding-right:42px;
  }
  .main-nav .sub-menu .menu-item-has-children>a::before{
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%) rotate(-45deg);
  }
  .main-nav .sub-menu .sub-menu{
    top:-13px;
    left:calc(100% + 10px);
    transform:translate(10px,0);
  }
  .main-nav .sub-menu .sub-menu::before{
    top:0;
    right:auto;
    bottom:0;
    left:-11px;
    width:11px;
    height:auto;
  }
  .main-nav .sub-menu .menu-item-has-children:hover>.sub-menu,
  .main-nav .sub-menu .menu-item-has-children:focus-within>.sub-menu,
  .main-nav .sub-menu .menu-item-has-children.submenu-open>.sub-menu{
    transform:translate(0,0);
  }
}

@media (max-width:768px){

	.site-topbar .container{
		min-height:48px;
		padding:8px 16px;
	}

	.site-topbar p{
		font-size:12px;
		line-height:1.45;
	}

}



/* FIX: submenu hover underline */
.main-nav .sub-menu > li > a::after{
	left:20px!important;
	right:20px!important;
	bottom:7px!important;
	width:auto!important;
	transform:scaleX(0)!important;
	transform-origin:left center!important;
	transition:transform .3s ease!important;
}

.main-nav .sub-menu > li > a:hover::after,
.main-nav .sub-menu > li:focus-within > a::after,
.main-nav .sub-menu > li.current-menu-item > a::after,
.main-nav .sub-menu > li.current-menu-ancestor > a::after{
	width:auto!important;
	transform:scaleX(1)!important;
}