/* ============================================================
   URHOM — floating header pill
   Reference geometry @1774 artboard:
     pill   x 256 → 1518  (14.43vw → 85.57vw)   y 22, h 68
     logo   Ø 52, 15px from the pill's left edge
     button 176 x 48, 12px from the pill's right edge
   ============================================================ */

.site-header{
  position:fixed;
  top:clamp(12px,1.24vw,26px);              /* 22 / 1774 */
  left:0; right:0;
  margin-inline:auto;                       /* centred without a transform,
                                               so [data-reveal] owns transform */
  /* The reference pill is 1262/1774 wide. Three more controls had to fit
     inside it, so it is allowed a little more room before the cap rather
     than letting its contents spill past the rounded edge. */
  width:min(92vw,1460px);
  z-index:60;
}

.nav-pill{
  display:flex;
  align-items:center;
  gap:clamp(12px,1.6vw,30px);
  height:clamp(56px,3.83vw,74px);           /* 68 / 1774 */
  padding-left:clamp(7px,.85vw,16px);       /* 15 / 1774 */
  padding-right:clamp(7px,.68vw,13px);      /* 12 / 1774 */
  border-radius:999px;
  background:var(--pill-bg);
  border:1px solid var(--pill-border);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  backdrop-filter:blur(18px) saturate(1.35);
  box-shadow:
    0 1px 1px rgba(30,25,15,.04),
    0 10px 30px -14px rgba(40,34,20,.26);
  transition:box-shadow var(--t-med) var(--ease-soft),
             background var(--t-med) var(--ease-soft);
}

.site-header.is-stuck .nav-pill{
  background:rgba(255,255,255,.92);
  box-shadow:
    0 1px 1px rgba(30,25,15,.05),
    0 16px 40px -18px rgba(40,34,20,.34);
}

/* ---------------- brand ---------------- */

.brand{
  display:flex; align-items:center;
  gap:clamp(6px,.62vw,12px);
  flex:0 0 auto;
}
.brand__mark{
  width:clamp(36px,2.93vw,56px);            /* 52 / 1774 */
  height:auto;
  border-radius:50%;
  transition:transform .5s var(--ease-soft);
}
.brand:hover .brand__mark{ transform:rotate(-6deg) scale(1.04); }

.brand__name{
  font-size:clamp(16px,1.3vw,25px);
  font-weight:800;
  letter-spacing:-.018em;
  color:var(--ink);
}

/* ---------------- links ---------------- */

.nav{ flex:1 1 auto; display:flex; justify-content:center; }

.nav__list{
  display:flex; align-items:center;
  gap:clamp(11px,1.32vw,26px);              /* tightened to seat the actions */
}

.nav__link{
  position:relative;
  display:block;
  padding-block:6px;
  font-size:clamp(12px,.817vw,16px);        /* 14.5 / 1774 */
  font-weight:500;
  letter-spacing:-.004em;
  color:var(--ink-soft);
  transition:color var(--t-fast) var(--ease-out);
}
.nav__link::after{
  content:"";
  position:absolute; left:0; bottom:-1px;
  width:100%; height:2px;
  border-radius:2px;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--t-med) var(--ease-soft);
}
.nav__link:hover{ color:var(--ink); }
.nav__link:hover::after{ transform:scaleX(1); }

.nav__link.is-active{ color:var(--ink); font-weight:600; }
.nav__link.is-active::after{ transform:scaleX(1); }

/* ---------------- actions ---------------- */

.nav-actions{
  display:flex; align-items:center;
  gap:clamp(8px,1.1vw,22px);
  flex:0 0 auto;
}

.icon-btn{
  display:grid; place-items:center;
  width:clamp(32px,2.2vw,42px);
  aspect-ratio:1;
  border-radius:50%;
  color:var(--ink-soft);
  transition:color var(--t-fast) var(--ease-out),
             background var(--t-fast) var(--ease-out),
             transform var(--t-med) var(--ease-soft);
}
.icon-btn svg{ width:62%; height:62%; }
.icon-btn:hover{
  color:var(--ink);
  background:rgba(18,18,18,.055);
  transform:scale(1.06);
}

/* ---------------- mobile toggle / drawer ---------------- */

.nav-toggle{
  display:none;
  width:40px; height:40px;
  border-radius:50%;
  position:relative;
}
.nav-toggle span{
  position:absolute; left:11px; width:18px; height:1.8px;
  border-radius:2px; background:var(--ink);
  transition:transform var(--t-med) var(--ease-soft),
             opacity var(--t-fast) var(--ease-out);
}
.nav-toggle span:nth-child(1){ top:17px; }
.nav-toggle span:nth-child(2){ top:23px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

.mobile-menu{
  margin-top:10px;
  padding:20px 22px 24px;
  border-radius:26px;
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 20px 50px -22px rgba(40,34,20,.42);
  transform-origin:top center;
  opacity:0;
  transform:translateY(-8px) scale(.985);
  transition:opacity var(--t-med) var(--ease-out),
             transform var(--t-med) var(--ease-out);
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu.is-open{ opacity:1; transform:none; }

.mobile-menu__list li + li{ margin-top:2px; }
.mobile-menu__list a{
  display:block;
  padding:11px 2px;
  font-size:17px; font-weight:500;
  color:var(--ink-soft);
  transition:color var(--t-fast) var(--ease-out);
}
/* the rule belongs on the row, not the link: once Furniture/Furnishing/
   Interiors became flex rows with a chevron beside them, a border on the <a>
   only underlined the word and stopped short of the chevron. */
.mobile-menu__list > li{ border-bottom:1px solid rgba(18,18,18,.08); }
.mobile-menu__list > li:last-child{ border-bottom:0; }
.mobile-menu__list a:hover{ color:var(--ink); }
.mobile-menu__cta{ margin-top:18px; width:100%; height:50px; font-size:16px; }


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* laptop — tighten the link row before anything breaks */
@media (max-width:1180px){
  .nav__list{ gap:clamp(12px,1.5vw,22px); }
  .site-header{ width:min(92vw,1100px); }
}

/* tablet & below — links collapse into the drawer */
@media (max-width:980px){
  .site-header{
    width:calc(100% - 32px);
    top:12px;
  }
  .nav-pill{
    height:62px;
    padding-left:10px; padding-right:10px;
    gap:10px;
  }
  .nav{ display:none; }
  .nav-actions{ margin-left:auto; gap:4px; }
  .nav-toggle{ display:block; }
  .brand__mark{ width:44px; }
  .brand__name{ font-size:20px; }
  .btn--sm{ height:42px; padding-inline:16px; font-size:14px; }
}

@media (max-width:560px){
  .site-header{ width:calc(100% - 24px); }
  .nav-pill{ height:58px; }
  .brand__mark{ width:40px; }
  .brand__name{ font-size:18px; }
  .icon-btn{ display:none; }
  .nav-actions .btn--sm{ height:38px; padding-inline:14px; font-size:13px; }
  .nav-actions .btn--sm .btn__arrow{ display:none; }
}


/* ============================================================
   NARROW HEADER
   With the wishlist/account/cart group added, the logo, search,
   three controls, CTA and burger no longer fit the pill on a phone.
   The CTA is the one item already duplicated inside the drawer, so
   it steps aside there rather than any navigation being dropped.
   ============================================================ */

@media (max-width:620px){
  .nav-actions > .btn--primary{ display:none; }
  .nav-pill{ gap:clamp(8px,2vw,16px); }
}
@media (max-width:420px){
  .nav-actions > .icon-btn{ display:none; }   /* search also lives in the overlay via "/" and the drawer */
}