/* =============================================================
   VALENORA — LUXURY NAVIGATION BAR
   assets/css/navbar.css
   ============================================================= */

   @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap');

   /* --- Variables --- */
   :root {
	   --nav-black:      #050505;
	   --nav-ivory:      #F5F1E8;
	   --nav-cream:      #C5BBA7;
	   --nav-gold:       #D8B36A;
	   --nav-gold-line:  rgba(216, 179, 106, 0.25);
	   --nav-bg-scrolled: rgba(5, 5, 5, 0.85);
	   --nav-height:     90px;
	   --nav-height-mob: 70px;
   }
   
   /* --- Base Navbar --- */
   .vp-navbar {
	   position: fixed;
	   top: 0;
	   left: 0;
	   width: 100%;
	   height: var(--nav-height);
	   z-index: 1000;
	   transition: background-color 0.4s ease, backdrop-filter 0.4s ease, border-bottom 0.4s ease;
	   font-family: 'Outfit', sans-serif;
	   border-bottom: 1px solid transparent;
   }
   
   .vp-navbar.scrolled {
	   background-color: var(--nav-bg-scrolled);
	   backdrop-filter: blur(10px);
	   -webkit-backdrop-filter: blur(10px);
	   border-bottom: 1px solid var(--nav-gold-line);
   }
   
   .vp-navbar-inner {
	   display: flex;
	   align-items: center;
	   justify-content: space-between;
	   height: 100%;
	   padding: 0 4rem;
	   max-width: 1600px;
	   margin: 0 auto;
   }
   
   /* --- Logo --- */
   .vp-navbar-logo {
	   text-decoration: none;
	   display: flex;
	   align-items: center;
   }
   
   .vp-logo-text {
	   font-family: 'Cormorant Garamond', serif;
	   font-size: 1.5rem;
	   font-weight: 400;
	   letter-spacing: 0.2em;
	   color: var(--nav-ivory);
	   text-transform: uppercase;
	   transition: color 0.3s ease;
   }
   
   .vp-navbar-logo:hover .vp-logo-text {
	   color: var(--nav-gold);
   }
   
   /* --- Desktop Nav Links --- */
   .vp-desktop-nav {
	   display: block;
   }
   
   .vp-nav-list {
	   display: flex;
	   gap: 3rem;
	   list-style: none;
	   margin: 0;
	   padding: 0;
   }
   
   .vp-nav-list a {
	   text-decoration: none;
	   font-size: 0.85rem;
	   font-weight: 300;
	   letter-spacing: 0.15em;
	   text-transform: uppercase;
	   color: var(--nav-cream);
	   position: relative;
	   padding-bottom: 0.4rem;
	   transition: color 0.3s ease;
   }
   
   .vp-nav-list a::after {
	   content: '';
	   position: absolute;
	   bottom: 0;
	   left: 0;
	   width: 0;
	   height: 1px;
	   background-color: var(--nav-gold);
	   transition: width 0.3s ease;
   }
   
   .vp-nav-list a:hover {
	   color: var(--nav-ivory);
   }
   
   .vp-nav-list a:hover::after {
	   width: 100%;
   }
   
   /* --- Right Icons --- */
   .vp-navbar-right {
	   display: flex;
	   align-items: center;
	   gap: 1.5rem;
   }
   
   .vp-navbar-icons {
	   display: flex;
	   align-items: center;
	   gap: 1.5rem;
   }
   
   .vp-nav-icon-btn {
	   background: none;
	   border: none;
	   color: var(--nav-ivory);
	   cursor: pointer;
	   padding: 0;
	   display: flex;
	   align-items: center;
	   position: relative;
	   transition: color 0.3s ease;
   }
   
   .vp-nav-icon-btn:hover {
	   color: var(--nav-gold);
   }
   
   .vp-cart-link {
	   text-decoration: none;
   }
   
   .vp-cart-count {
	   font-size: 0.75rem;
	   font-weight: 400;
	   margin-left: 0.3rem;
	   margin-top: -0.5rem;
   }
   
   /* --- Mobile Hamburger Toggle --- */
   .vp-hamburger-toggle {
	   display: none;
	   background: none;
	   border: none;
	   cursor: pointer;
	   padding: 0.5rem;
	   z-index: 2000;
	   position: relative;
   }
   
   .vp-hamburger-line {
	   display: block;
	   width: 24px;
	   height: 1px;
	   background-color: var(--nav-ivory);
	   margin: 5px 0;
	   transition: transform 0.4s ease, opacity 0.4s ease, background-color 0.3s ease;
   }
   
   .vp-hamburger-toggle:hover .vp-hamburger-line {
	   background-color: var(--nav-gold);
   }
   
   .vp-hamburger-toggle.active .vp-hamburger-line:nth-child(1) {
	   transform: translateY(6px) rotate(45deg);
   }
   
   .vp-hamburger-toggle.active .vp-hamburger-line:nth-child(2) {
	   transform: translateY(-6px) rotate(-45deg);
   }
   
   /* --- Mobile Full-Screen Overlay --- */
   .vp-mobile-overlay {
	   position: fixed;
	   top: 0;
	   left: 0;
	   width: 100%;
	   height: 100vh;
	   background-color: var(--nav-black);
	   z-index: 1500;
	   opacity: 0;
	   visibility: hidden;
	   transition: opacity 0.5s ease, visibility 0.5s ease;
	   display: flex;
	   flex-direction: column;
	   justify-content: center;
	   align-items: center;
   }
   
   .vp-mobile-overlay.active {
	   opacity: 1;
	   visibility: visible;
   }
   
   .vp-mobile-overlay-inner {
	   width: 100%;
	   padding: 2rem;
	   display: flex;
	   flex-direction: column;
	   align-items: center;
	   transform: translateY(20px);
	   transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
   }
   
   .vp-mobile-overlay.active .vp-mobile-overlay-inner {
	   transform: translateY(0);
   }
   
   .vp-mobile-nav-list {
	   list-style: none;
	   margin: 0;
	   padding: 0;
	   text-align: center;
	   display: flex;
	   flex-direction: column;
	   gap: 2rem;
   }
   
   .vp-mobile-nav-list a {
	   text-decoration: none;
	   font-family: 'Cormorant Garamond', serif;
	   font-size: 2.2rem;
	   font-weight: 300;
	   letter-spacing: 0.15em;
	   color: var(--nav-ivory);
	   text-transform: uppercase;
	   transition: color 0.3s ease;
   }
   
   .vp-mobile-nav-list a:hover {
	   color: var(--nav-gold);
   }
   
   .vp-mobile-bottom-actions {
	   margin-top: 4rem;
	   display: flex;
	   flex-direction: column;
	   align-items: center;
	   gap: 1.5rem;
   }
   
   .vp-mobile-action-link {
	   text-decoration: none;
	   background: none;
	   border: none;
	   cursor: pointer;
	   font-family: 'Outfit', sans-serif;
	   font-size: 0.9rem;
	   font-weight: 300;
	   letter-spacing: 0.2em;
	   text-transform: uppercase;
	   color: var(--nav-cream);
	   transition: color 0.3s ease;
	   display: flex;
	   align-items: center;
	   gap: 0.5rem;
   }
   
   .vp-mobile-action-link:hover {
	   color: var(--nav-gold);
   }
   
   .vp-cart-count-mobile {
	   font-size: 0.8rem;
   }
   
   /* --- Responsive Adjustments --- */
   @media (max-width: 1024px) {
	   .vp-navbar-inner {
		   padding: 0 2rem;
	   }
	   
	   .vp-nav-list {
		   gap: 2rem;
	   }
   }
   
   @media (max-width: 768px) {
	   .vp-navbar {
		   height: var(--nav-height-mob);
	   }
	   
	   .vp-desktop-nav,
	   .vp-navbar-icons {
		   display: none;
	   }
	   
	   .vp-hamburger-toggle {
		   display: block;
	   }
	   
	   .vp-navbar-inner {
		   padding: 0 1.5rem;
	   }
   }