@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');

* { box-sizing: border-box; }

.header {
  width: 100%;
  padding: 25px 20px;
  background-color: #00ff0000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0; left: 0;
  z-index: 1000;
  transition: transform .3s cubic-bezier(.4,0,.2,1), background-color .4s ease, box-shadow .4s ease;
}
.header-solid { background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.08); }
.header.menu-open { background:#fff; box-shadow:0 4px 15px rgba(0,0,0,.08); }
.hide { transform: translateY(-100%); display:flex!important; }

.left-buttons { display:flex; align-items:center; gap:15px; }

.btn {
  padding: 8px 20px; border-radius:10px; font-size:12px; font-weight:500;
  letter-spacing:.5px; text-transform:uppercase; cursor:pointer; border:none;
  transition: all .3s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden;
}
.btn::before {
  content:''; position:absolute; inset:0; left:-100%; background:
  linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
  transition:left .5s ease;
}
.btn:hover::before { left:100%; }

.btn-menu {
  display:inline-flex; align-items:center; justify-content:center; column-gap:6px;
  background:#6e3600; color:#fff; padding:15px 30px; border-radius:10px;
  box-shadow:0 2px 8px rgba(110,54,0,.15);
}
.btn-menu .label { position:relative; display:block; line-height:1; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.btn-menu .label::before {
  content:attr(data-text); position:absolute; top:50px; left:0; width:100%;
  box-shadow:0 2px 8px rgba(110,54,0,.15); transform:translateY(0);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.btn-menu:hover .label { transform: translateY(-180%); }
.btn-menu:hover .label::before { transform: translateY(-130%); }
.btn-menu.open .caret { transform: rotate(-180deg); }

.btn-wishlist {
  background:#fff; color:#8B4513; border:1px solid rgba(139,69,19,.1);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.btn-wishlist:hover {
  background:#f8f8f8; color:#6e3600; transform: translateY(-1px);
  box-shadow:0 4px 16px rgba(0,0,0,.12); border-color:rgba(139,69,19,.2);
}

.logo-container { position:absolute; left:50%; transform:translateX(-50%); max-width:150px; }
.logo { height:40px; width:auto; display:block; margin:0 auto; }

.right-section {
  display:flex; align-items:center; gap:20px; color:#8B4513; font-size:12px;
  font-weight:500; letter-spacing:.5px; text-transform:uppercase;
}
.right-section a { color:inherit; text-decoration:none; transition: color .3s ease; }
.right-section a:hover { color:#6B3410; }

.brand-link { display:inline-block; transition: opacity .3s ease; }
.brand-link:hover { opacity:.8; }
.brand-logo { height:45px; width:auto; max-width:120px; object-fit:contain; }

.rolex-clock-container { display:inline-flex; align-items:center; overflow:visible; }
.rolex-iframe { width:200px!important; height:65px!important; }

.fullscreen-menu {
  position:fixed; top:90px; left:0; width:100%; height:auto; max-height:calc(100vh - 90px);
  overflow-y:auto; background:#fff; box-shadow:0 4px 15px rgba(0,0,0,.08);
  z-index:999; transform: translateY(-100%); opacity:0;
  transition: transform .5s ease, opacity .5s ease; pointer-events:none;
}
.fullscreen-menu.active { transform: translateY(0); opacity:1; pointer-events:auto; }
.fullscreen-menu .menu-close { display:none; }
.fullscreen-menu .menu-inner { display:flex; width:100%; height:100%; gap:12px; }

.menu-items {
  flex:0 0 40%; padding:40px 5%; list-style:none; margin:0; display:flex;
  flex-direction:column; border-right:1px solid #f0f0f0;
}
.menu-items li {
  position:relative; display:flex; justify-content:space-between; align-items:center;
  font-size:20px; font-family:'Montserrat',sans-serif; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:#000; padding:16px 0; border-bottom:1px solid #f0f0f0;
  transition: opacity .4s ease;
}
.menu-items li::after{
  content:""; position:absolute; bottom:0; left:0; height:1px; width:100%;
  background:#000; transform:scaleX(0); transform-origin:left; transition: transform .3s ease;
}
.menu-items li:hover::after { transform:scaleX(1); }

.fullscreen-menu.active .menu-items li { opacity:1; color:#000; }
.fullscreen-menu.active .menu-items:hover li { opacity:.4; }
.fullscreen-menu.active .menu-items li:hover { opacity:1; color:#000; }
.menu-items a { color:inherit; text-decoration:none; flex:1; }
.menu-items .arrow {
  width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent;
  border-left:5px solid #000; margin-left:8px;
}

.overlay {
  position:fixed; top:90px; left:0; width:100%; height:calc(100% - 90px);
  background:rgba(0,0,0,.5); z-index:998; opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .3s ease;
}
.overlay.active { opacity:1; visibility:visible; pointer-events:auto; }

.menu-right {
  flex:0 0 clamp(280px,32vw,520px); max-width:clamp(280px,32vw,520px);
  display:flex; align-items:flex-start; opacity:0; transform:translateX(14px);
  pointer-events:none; transition: opacity .28s ease, transform .32s ease;
}
.fullscreen-menu.show-submenu .menu-right { opacity:1; transform:translateX(0); pointer-events:auto; }

.submenu-items {
  list-style:none; margin:0; padding:45px 20px 24px 12px; height:100%;
  display:flex; flex-direction:column; width:100%; max-height:none; overflow:visible;
}
.submenu-items li{
  position:relative; display:flex; justify-content:space-between; align-items:center;
  font-size:15px; font-family:'Montserrat',sans-serif; font-weight:400; letter-spacing:.05em;
  text-transform:uppercase; color:#000; padding:12px 0; border-bottom:1px solid #f0f0f0;
  transition: opacity .24s ease, transform .24s ease; opacity:0; transform:translateX(8px);
}
.submenu-items:hover li { opacity:.4; }
.submenu-items li:hover { opacity:1; }
.submenu-items li::after{
  content:""; position:absolute; bottom:0; left:0; height:1px; width:100%;
  background:#000; transform:scaleX(0); transform-origin:left; transition: transform .3s ease;
}
.submenu-items li:hover::after{ transform:scaleX(1); transform-origin:right; }

.fullscreen-menu.show-submenu .submenu-items li { opacity:1; transform:translateX(0); }
.fullscreen-menu.show-submenu .submenu-items li:nth-child(1){transition-delay:.02s}
.fullscreen-menu.show-submenu .submenu-items li:nth-child(2){transition-delay:.04s}
.fullscreen-menu.show-submenu .submenu-items li:nth-child(3){transition-delay:.06s}
.fullscreen-menu.show-submenu .submenu-items li:nth-child(4){transition-delay:.08s}
.fullscreen-menu.show-submenu .submenu-items li:nth-child(5){transition-delay:.10s}
.fullscreen-menu.show-submenu .submenu-items li:nth-child(6){transition-delay:.12s}
.fullscreen-menu.show-submenu .submenu-items li:nth-child(7){transition-delay:.14s}
.fullscreen-menu.show-submenu .submenu-items li:nth-child(8){transition-delay:.16s}

@media (max-width:1280px){ .rolex-iframe{width:200px!important;height:65px!important;} }
@media (max-width:768px){
  .header{ padding:20px 15px; }
  .btn{ padding:6px 15px; font-size:11px; }
  .logo-container{ max-width:250px; }
  .logo{ height:35px; }
  .right-section{ gap:15px; font-size:11px; }
  .brand-logo{ height:30px; max-width:100px; }
  .rolex-iframe{ width:100px; height:30px; }
  .fullscreen-menu{ top:75px; }
  .overlay{ top:75px; height:calc(100% - 75px); }
}
@media (max-width:480px){
  .right-section{ display:none; }
  .logo-container{ position:static; transform:none; max-width:none; display:flex; justify-content:center; flex:1; }
}