/* rueloli.com — shared site header + cart, used on every customer-facing page
   so the menu, cart, and login link never change shape from page to page.
   Classes are prefixed rl- to avoid colliding with any page's own leftover
   header CSS from before this was unified. Relies on the color variables
   every page already defines: --canvas --deep --paper --steel --steel-dim
   --signal --good --font-display --font-body --font-mono --edge */

.rl-header{
  position:sticky; top:0; z-index:500;
  height:72px; display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--edge); background:var(--canvas);
  border-bottom:1px solid rgba(241,238,231,0.08);
}
.rl-wordmark{
  font-family:var(--font-display); font-weight:800; font-size:20px;
  letter-spacing:0.02em; text-decoration:none; color:var(--paper); flex-shrink:0;
}
.rl-wordmark span{color:var(--signal);}
.rl-nav{display:flex; align-items:center; gap:28px; margin-inline:auto; padding-left:40px;}
.rl-nav a{
  color:var(--steel); text-decoration:none; font-size:14px; font-weight:500;
}
.rl-nav a:hover, .rl-nav a.rl-active{color:var(--paper);}
.rl-right{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.rl-login-link{
  color:var(--paper); text-decoration:none; font-size:13.5px; font-weight:600;
  padding:9px 16px; border-radius:999px; border:1px solid rgba(241,238,231,0.18);
  white-space:nowrap;
}
.rl-login-link:hover{border-color:var(--signal); background:rgba(255,77,46,0.08);}
.rl-cart-wrap{position:relative;}
.rl-cart-btn{
  position:relative; width:40px; height:40px; border-radius:999px;
  border:1.5px solid rgba(241,238,231,0.4); background:rgba(241,238,231,0.06); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.rl-cart-btn:hover{border-color:var(--signal); background:rgba(255,77,46,0.1);}
.rl-cart-btn:active{transform:scale(0.94);}
.rl-cart-btn svg{width:19px; height:19px; display:block;}
.rl-cart-badge{
  position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:var(--signal); color:var(--canvas);
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.rl-cart-panel{
  position:absolute; top:calc(100% + 12px); right:0; width:400px; max-width:calc(100vw - 32px);
  background:var(--deep); border:1px solid rgba(241,238,231,0.1); border-radius:16px;
  padding:22px; box-shadow:0 20px 60px rgba(0,0,0,0.5);
  opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.rl-cart-panel.rl-open{opacity:1; transform:translateY(0); pointer-events:auto;}
.rl-cart-panel h3{font-family:var(--font-display); font-weight:700; font-size:1.05rem; margin:0 0 14px; color:var(--paper);}
.rl-cart-empty{color:var(--steel); font-size:13.5px; margin:0;}
.rl-cart-item{display:flex; gap:12px; padding:10px 0; border-bottom:1px solid rgba(241,238,231,0.06);}
.rl-cart-item:last-of-type{border-bottom:none;}
.rl-cart-thumb{
  width:52px; height:52px; border-radius:8px; flex-shrink:0; position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--deep-2), var(--deep));
}
.rl-cart-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.rl-cart-item-body{flex:1; min-width:0;}
.rl-cart-item-title{font-size:13.5px; font-weight:600; color:var(--paper); margin:0 0 4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rl-cart-item-row{display:flex; align-items:center; justify-content:flex-start; gap:8px;}
.rl-cart-item-price{font-family:var(--font-mono); font-size:12.5px; color:var(--paper);}
.rl-cart-item-price-was{font-family:var(--font-mono); font-size:11px; color:var(--steel-dim); text-decoration:line-through;}
.rl-cart-remove{background:none; border:none; color:var(--steel-dim); cursor:pointer; font-size:12px; text-decoration:underline; padding:0;}
.rl-cart-remove:hover{color:var(--signal);}
.rl-cart-total{
  display:flex; justify-content:space-between; align-items:center; margin-top:14px;
  padding-top:14px; border-top:1px solid rgba(241,238,231,0.1);
  font-family:var(--font-mono); font-size:14px; color:var(--paper); font-weight:600;
}
.rl-cart-cta{
  display:block; width:100%; text-align:center; margin-top:14px; padding:12px;
  border-radius:999px; background:var(--signal); color:var(--canvas);
  font-size:13.5px; font-weight:700; text-decoration:none; box-sizing:border-box;
}
.rl-suggest-label{font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel-dim); margin:20px 0 10px;}
.rl-suggest-item{display:flex; gap:10px; padding:8px 0; align-items:center;}
.rl-suggest-thumb{
  width:44px; height:44px; border-radius:7px; flex-shrink:0; position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--deep-2), var(--deep));
}
.rl-suggest-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.rl-suggest-body{flex:1; min-width:0;}
.rl-suggest-title{font-size:12.5px; font-weight:600; color:var(--paper); margin:0 0 2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rl-suggest-blurb{font-size:11px; color:var(--steel); margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rl-suggest-add{
  flex-shrink:0; background:none; border:1px solid rgba(241,238,231,0.18); color:var(--paper);
  border-radius:999px; padding:5px 12px; font-size:11.5px; cursor:pointer;
}
.rl-suggest-add:hover{border-color:var(--signal); color:var(--signal);}

.rl-menu-btn{
  display:none; width:40px; height:40px; border-radius:8px;
  border:1.5px solid rgba(241,238,231,0.4); background:rgba(241,238,231,0.06); cursor:pointer;
  align-items:center; justify-content:center; flex-shrink:0;
}
.rl-menu-btn:hover{border-color:var(--signal); background:rgba(255,77,46,0.1);}
.rl-menu-btn svg{width:18px; height:18px; display:block;}
.rl-mobile-nav{
  display:none; position:fixed; left:16px; right:16px; top:88px;
  background:var(--deep); border:1px solid rgba(241,238,231,0.1); border-radius:16px;
  padding:10px; flex-direction:column; gap:2px;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; z-index:499;
}
.rl-mobile-nav.rl-open{opacity:1; transform:translateY(0); pointer-events:auto;}
.rl-mobile-nav a{
  color:var(--paper); text-decoration:none; font-size:15px; font-weight:600;
  padding:12px 14px; border-radius:10px;
}
.rl-mobile-nav a:hover, .rl-mobile-nav a.rl-active{background:rgba(241,238,231,0.06); color:var(--signal);}

@media (max-width: 720px){
  .rl-header{padding-inline:20px;}
  .rl-nav{display:none;}
  .rl-menu-btn{display:flex;}
  .rl-mobile-nav{display:flex;}
  .rl-cart-panel{position:fixed; left:16px; right:16px; top:76px; width:auto; max-width:none;}
  .rl-login-link{padding:8px 12px; font-size:12.5px;}
}