/* ============================================================
   Her Home — Spike Ventures nav frame (synced with the studio system)
   Slim teal Spike wrapper (mall) + Her Home-branded nav bar (store)
   ============================================================ */
:root{ --spike-h:38px; --hhnav-h:64px; }

body{padding-top:calc(var(--spike-h) + var(--hhnav-h)) !important}
.hero{padding-top:44px !important}

/* Her Home hero product shot (legacy) */
.hh-shot{margin-top:46px;border:1px solid rgba(42,35,32,.14);border-radius:6px;overflow:hidden;
  box-shadow:0 36px 72px -36px rgba(42,35,32,.34)}
.hh-shot img{display:block;width:100%;height:auto}

/* Full-bleed cinematic product band under the hero */
.hh-hero-shot{border-bottom:1px solid rgba(42,35,32,.14);background:#EFE6D8;line-height:0}
.hh-hero-shot img{display:block;width:100%;height:clamp(340px,54vh,620px);object-fit:cover;object-position:center 44%}

/* Spike wrapper bar — identical across all ventures */
.spike-bar{position:fixed;top:0;left:0;right:0;height:var(--spike-h);z-index:60;
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;
  background:linear-gradient(180deg,#557b78,#456b68);border-bottom:1px solid rgba(0,0,0,.18);
  font-family:'Jost',sans-serif;color:#16211f}
.spike-bar .l{display:flex;align-items:center;gap:14px}
.spike-bar .swm{font-size:12px;font-weight:600;letter-spacing:.2em;color:#16211f;text-decoration:none}
.spike-bar .crumb{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(15,30,30,.55);font-weight:500}
.spike-bar .crumb a{color:rgba(15,30,30,.62);text-decoration:none;transition:color .15s}
.spike-bar .crumb a:hover{color:#16211f}
.spike-bar .crumb b{color:#16211f}
.spike-bar .r{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(15,30,30,.6);font-weight:500}
.spike-bar .exit{border:1px solid rgba(15,30,30,.35);padding:4px 11px;color:#16211f;text-decoration:none;transition:.2s}
.spike-bar .exit:hover{background:#16211f;color:#e7efec}
@media(max-width:600px){.spike-bar .crumb,.spike-bar .clk{display:none}}

/* Her Home nav bar — the store's own brand */
.hh-nav{position:fixed;top:var(--spike-h);left:0;right:0;height:var(--hhnav-h);z-index:55;
  display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,48px);
  background:#F5F0E8;border-bottom:1px solid rgba(42,35,32,.12)}
.hh-nav .brandmark{font-family:'Playfair Display',serif;font-size:23px;font-weight:500;color:#2A2320;letter-spacing:-.01em;text-decoration:none}
.hh-nav .brandmark .co{font-size:.5em;letter-spacing:.24em;color:#9C7B4D;text-transform:uppercase;margin-left:.4em;font-family:'Jost',sans-serif;font-weight:500}
.hh-nav .links{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px)}
.hh-nav .links a{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#6a5f56;font-weight:500;text-decoration:none;position:relative;padding:6px 0;transition:color .18s}
.hh-nav .links a:hover{color:#2A2320}
.hh-nav .links a.active{color:#2A2320}
.hh-nav .links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:#B15C3C}
.hh-nav .right{display:flex;align-items:center;gap:16px}
.hh-nav .cta{font-family:'Jost',sans-serif;background:#2A2320;color:#F5F0E8;font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:10px 18px;border-radius:100px;text-decoration:none;transition:.2s;white-space:nowrap}
.hh-nav .cta:hover{background:#B15C3C}
.hh-nav .menu-btn{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:4px;padding:6px}
.hh-nav .menu-btn span{width:22px;height:2px;background:#2A2320}

@media(max-width:820px){
  .hh-nav .links{position:fixed;top:calc(var(--spike-h) + var(--hhnav-h));left:0;right:0;flex-direction:column;align-items:flex-start;
    background:#F5F0E8;border-bottom:1px solid rgba(42,35,32,.12);padding:6px 0;gap:0;display:none;
    box-shadow:0 20px 30px -20px rgba(42,35,32,.3)}
  body.navopen .hh-nav .links{display:flex}
  .hh-nav .links a{padding:14px clamp(20px,5vw,48px);width:100%}
  .hh-nav .links a.active::after{display:none}
  .hh-nav .links a.active{color:#B15C3C}
  .hh-nav .cta{display:none}
  .hh-nav .menu-btn{display:flex}
}