/* ============================================================
   Theme tokens - replicating carven.com (DaisyUI-style)
   [data-theme=light]: --p (primary)=black, --pc (primary-content)=white
   [data-theme=dark]:  --p=white,           --pc=black
   ============================================================ */
:root, [data-theme="light"]{
  --p: 0 0% 0%;
  --pc: 0 0% 100%;
  --header: 53px;
  --window-height: 100vh;
}
[data-theme="dark"]{
  --p: 0 0% 100%;
  --pc: 0 0% 0%;
}
.text-primary{ color: hsl(var(--p)); }
.bg-primary-content{ background-color: hsl(var(--pc)); }

/* ---------- Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
@font-face{
  font-family:'Univers-55';
  src:url('/assets/Univers-55-Roman.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

body{
  position:relative;
  min-height:100vh;
  background:#fff;
  color:#000;
  font-family:'Univers-55', sans-serif;
  font-size:14px;
  line-height:20px;
  letter-spacing:.28px;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  flex-direction:column;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
ul{list-style:none}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;padding:0}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:30;
  width:100%;
  background-color:#fff;
  transition:background-color .3s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.site-header > *{ pointer-events:auto; }
@media (min-width:1024px){
  .site-header{
    background-color:transparent;
    mix-blend-mode:difference;
  }
}
.site-header.hidden-logo .header-logo{ opacity:0; transition:opacity .25s ease; }
.site-header.hidden-logo.is-animated .header-logo{ opacity:1; }
@media (max-width:1023px){
  .site-header.is-animated{
    background-color: hsl(var(--pc));
    color: hsl(var(--p));
  }
}

.desktop-bar{
  display:flex; justify-content:space-between; align-items:center;
  gap:24px; padding:14px 24px;
  color:#fff;
}
.nav-list{ display:flex; gap:16px; }
.nav-list > li{ position:relative; }
.nav-link:hover, .nav-btn:hover{ text-decoration:underline; }

.dropdown{
  position:absolute; top:100%; left:0;
  padding-top:10px; min-width:180px;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.nav-list > li:hover .dropdown,
.nav-list > li:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .18s ease, transform .18s ease, visibility 0s;
}
.dropdown ul{ display:flex; flex-direction:column; gap:2px; }
.dropdown a{ display:inline-block; }
.dropdown a:hover{ text-decoration:underline; }

.cart-trigger{ display:inline-flex; align-items:baseline; gap:0; }

.mobile-bar{
  display:none;
  position:relative;
  padding:20px 20px;
  border-top:1px solid #f6f6f6;
  align-items:center; justify-content:space-between; gap:16px;
}
.mobile-bar svg{ height:12px; width:auto; }
.mobile-bar .header-logo{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
}
.mobile-bar .header-logo svg{ height:12px; width:110px; display:block; }
@media (max-width:1023px){
  .desktop-bar{ display:none; }
  .mobile-bar{ display:flex; }
}

/* ============================================================
   Top-center small wordmark (desktop only) - shop / product / about
   ============================================================ */
.top-wordmark{ display:none; }
@media (min-width:1024px){
  .top-wordmark{
    display:block;
    position:fixed;
    z-index:30;
    top:20px; left:50%;
    transform:translateX(-50%);
  }
}
.top-wordmark svg{ width:100px; height:12px; }

/* ============================================================
   Fixed centered Carven wordmark (landing only)
   ============================================================ */
.fixed-wordmark-desktop{ display:none; }
@media (min-width:1024px){
  .fixed-wordmark-desktop{
    display:block;
    position:fixed;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    z-index:20;
    pointer-events:auto;
  }
}
.fixed-wordmark-desktop svg{ width:578px; height:auto; }

.fixed-wordmark-mobile{ display:none; }
@media (max-width:1023px){
  .fixed-wordmark-mobile{
    display:block;
    position:fixed;
    top:var(--vh-loading); left:50%;
    transform:translate(-50%,-50%);
    z-index:10;
  }
}
.fixed-wordmark-mobile svg{ width:244px; height:auto; }

/* ============================================================
   Main
   ============================================================ */
main{
  position:relative;
  margin-top: var(--header) !important;
  flex-grow:1;
}
@media (min-width:1024px){
  main{ margin-top:0 !important; }
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  position:relative;
  z-index:30;
  height: var(--footer-height-mobile);
  background: hsl(var(--pc));
  color: hsl(var(--p));
  display:flex; flex-direction:column; justify-content:flex-end;
}
@media (min-width:1024px){
  .site-footer{
    z-index:20;
    height: 100vh;
  }
}

.footer-address-desktop{ display:none; }
@media (min-width:1024px){
  .footer-address-desktop{
    display:block;
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
  }
  .footer-address-desktop svg{ width:673px; height:auto; }
}
.footer-address-mobile{ display:none; }
@media (max-width:1023px){
  .footer-address-mobile{
    display:block;
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
  }
  .footer-address-mobile svg{ width:311px; height:auto; max-width:80%; }
}

.footer-bottom{
  padding:16px;
  display:flex;
  justify-content:center;
  gap:16px;
}
@media (min-width:1024px){
  .footer-bottom{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
  }
}
.footer-nav-left, .footer-nav-right{ display:none; }
@media (min-width:1024px){
  .footer-nav-left, .footer-nav-right{ display:block; }
  .footer-nav-right{ justify-self:end; }
  .footer-nav-left ul, .footer-nav-right ul{
    display:flex; gap:16px;
  }
  .footer-nav-left a, .footer-nav-right a{
    line-height:16px;
  }
  .footer-nav-left a:hover, .footer-nav-right a:hover{ text-decoration:underline; }
}
.footer-locale{
  display:flex; gap:16px;
  line-height:16px;
}
.footer-locale button{ line-height:16px; }
.footer-locale button:hover{ text-decoration:underline; }
.mobile-only-dropdown{ display:none; }
@media (max-width:1023px){
  .footer-nav-left, .footer-nav-right{ display:none; }
  .mobile-only-dropdown{ display:block; }
  .mobile-only-dropdown .dropdown-top__btn{
    display:flex; align-items:center; gap:8px;
    border-bottom:1px solid rgba(255,255,255,.2);
    padding-bottom:0; line-height:16px;
  }
  .footer-locale .lg-only{ display:none; }
}
@media (min-width:1024px){
  .footer-locale .mobile-only{ display:none; }
}

/* ============================================================
   Mobile menu panel + click-catching overlay
   ============================================================ */
[theme-overlay]{
  pointer-events:none;
  position:fixed; top:0; right:0; bottom:0; left:0;
  background-color:#00000080;
  opacity:0;
  z-index:35;
}
[theme-overlay].is-visible{
  pointer-events:auto;
  cursor:pointer;
  opacity:1;
}

.panel{
  position:fixed; top:0;
  z-index:40;
  display:flex; flex-direction:column;
  width:100%;
  overflow:auto;
  background-color:#fff;
  height:var(--window-height);
}
.panel.panel--left{ left:0; transform:translateX(-100%); }
.panel.panel--right{ right:0; transform:translateX(100%); }
.panel.is-active{ transform:translateX(0); }
@media (min-width:1024px){
  .panel.panel--left{ max-width:480px; }
  .panel.panel--right{ max-width:50%; }
}

.panel__step{ display:none; flex-grow:1; flex-direction:column; }
.panel__step.is-active{ display:flex; }
.panel__step-wrapper{ display:flex; flex-grow:1; flex-direction:column; }

.panel__header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  background-color:#fff;
  padding:20px 16px;
  border-top:1px solid #f6f6f6;
}
.panel__header svg{ height:12px; width:auto; }
.panel__header .header-logo{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
}
.panel__header .header-logo svg{ height:12px; width:110px; display:block; }

.panel__body{
  display:flex; flex-grow:1; flex-direction:column;
  padding:16px;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.panel__body .panel-section-heading{
  font-size:14px; line-height:16px; letter-spacing:.28px; font-weight:500;
  color:hsl(0 0% 46.7%);
  margin-top:40px;
  margin-bottom:10px;
}
.panel__body > :first-child{ margin-top:0; }
.panel__body nav ul{ display:flex; flex-direction:column; gap:10px; }
.panel__body nav a{
  text-decoration:underline;
  text-decoration-color:rgba(0,0,0,.15);
  text-underline-offset:3px;
}
.panel__body nav a:hover{ text-decoration-color:#000; }

.panel__footer{
  position:sticky; bottom:0;
  background:#fff;
  border-top:1px solid #eeeeee;
  display:flex;
}
.panel__footer > *{
  flex:1 1 0;
  padding:20px 0;
  display:flex; align-items:center; justify-content:center;
}
.panel__footer > *:first-child{ border-right:1px solid #eeeeee; }
.panel__footer a{
  text-decoration:underline;
  text-decoration-color:rgba(0,0,0,.15);
  text-underline-offset:3px;
}

body.is-panel-open{ overflow:hidden; }