/* ---------- 導覽列 ---------- */

.nav{

  position:relative;

  z-index:100;

  background:rgba(253,252,250,.92);

  backdrop-filter:blur(14px);

  border-bottom:1px solid var(--mint-line);

  transition:box-shadow .3s;

}

.nav.is-scrolled{ box-shadow:0 8px 30px rgba(43,35,32,.07); }

.nav-inner{

  display:flex; align-items:center; justify-content:space-between;

  height:76px; gap:12px;

}

.nav-inner > nav{ flex-shrink:0; }

/* Mobile-first: hide desktop link row (was in React src.css; base.html no longer loads it). */
[data-site-nav-root] .site-nav-desktop{
  display:none;
}

@media (min-width: 861px){
  .nav-inner > nav.site-nav-desktop.nav-menu-col{ flex-shrink:1; min-width:0; }
}



/* Desktop: isolated columns — logo | menu | CTAs never share the same space */

@media (min-width: 861px){

  [data-site-nav-root] .site-nav-desktop{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    min-width:0;
    max-width:100%;
  }

  .nav-inner.container{

    width:min(1360px, 98vw);

    display:grid;

    grid-template-areas:"nav-brand nav-menu nav-cta";

    /* Logo + CTAs keep their width; menu fills only the gap between them */

    grid-template-columns:auto minmax(0, 1fr) auto;

    column-gap:16px;

    align-items:center;

  }

  .nav-inner > .nav-brand{

    grid-area:nav-brand;

    justify-self:start;

    min-width:0;

    max-width:min(240px, 38vw);

  }

  .nav-inner > .nav-menu-col{

    grid-area:nav-menu;

    justify-self:stretch;

    align-self:center;

    min-width:0;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

  }

  .nav-inner > .nav-cta-col{

    grid-area:nav-cta;

    justify-self:end;

    flex-shrink:0;

    min-width:0;

  }

  .nav-inner > .site-nav-mobile{ display:none !important; }



  .nav-brand .brand-mark{ width:52px; height:26px; }

  .nav-brand .brand-name .zh{

    font-size:17px;

    letter-spacing:.14em;

  }

  .nav-brand .brand-name .en{

    font-size:9px;

    letter-spacing:.22em;

  }



  .site-nav-desktop.nav-menu-col{

    width:100%;

    min-width:0;

    max-width:100%;

  }

  .site-nav-desktop .nav-menu{

    justify-content:center;

    align-items:center;

    gap:0;

    width:100%;

    max-width:100%;

    min-width:0;

    margin:0;

    padding:0;

  }

  .site-nav-desktop .nav-item > a,
  .site-nav-desktop .nav-item > .nav-label{
    display:block;
    padding:10px 9px;
    font-size:15px;
    letter-spacing:.05em;
    white-space:nowrap;
    transition:color .25s;
  }
  .site-nav-desktop .nav-item > a:hover{ color:var(--mint-deep); }
  .site-nav-desktop .nav-item > .nav-label{ cursor:default; }
}



.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; min-width:0; }

.brand-mark{ width:60px; height:30px; flex:none; }

.brand-name{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }

.brand-name .zh{ font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:.3em; }

.brand-name .en{ font-size:9.5px; letter-spacing:.32em; color:var(--ink-faint); }



/* Desktop + mobile nav menus */

.site-nav-desktop .nav-menu,

.site-nav-mobile .nav-menu,

.nav-inner > nav:not(.site-nav-desktop) .nav-menu{ display:flex; gap:4px; flex-shrink:0; }

.site-nav-desktop .nav-item,

.site-nav-mobile .nav-item,

.nav-inner > nav:not(.site-nav-desktop) .nav-item{ position:relative; flex-shrink:0; }

.site-nav-mobile .nav-item > a,

.nav-inner > nav:not(.site-nav-desktop) .nav-item > a{

  display:block; padding:12px 14px; font-size:16px; letter-spacing:.12em;

  white-space:nowrap;

  transition:color .25s;

}

.site-nav-mobile .nav-item > a:hover,

.nav-inner > nav:not(.site-nav-desktop) .nav-item > a:hover{ color:var(--mint-deep); }

.site-nav-desktop .dropdown,

.site-nav-mobile .dropdown,

.nav-inner > nav:not(.site-nav-desktop) .dropdown{

  position:absolute; top:calc(100% + 6px); left:50%; transform:translate(-50%, 8px);

  min-width:210px; background:#fff; border:1px solid var(--mint-line);

  box-shadow:var(--shadow-soft); border-radius:3px; padding:10px 0;

  opacity:0; visibility:hidden; transition:all .3s var(--ease);

  z-index:120;

}

.site-nav-desktop .nav-item:hover .dropdown,

.site-nav-desktop .nav-item:focus-within .dropdown,

.site-nav-desktop .nav-item.is-open .dropdown,

.site-nav-mobile .nav-item:hover .dropdown,

.site-nav-mobile .nav-item:focus-within .dropdown,

.site-nav-mobile .nav-item.is-open .dropdown,

.nav-inner > nav:not(.site-nav-desktop) .nav-item:hover .dropdown,

.nav-inner > nav:not(.site-nav-desktop) .nav-item:focus-within .dropdown,

.nav-inner > nav:not(.site-nav-desktop) .nav-item.is-open .dropdown{

  opacity:1; visibility:visible; transform:translate(-50%, 0);

}

.site-nav-desktop .dropdown a,

.site-nav-mobile .dropdown a,

.nav-inner > nav:not(.site-nav-desktop) .dropdown a{

  display:block; padding:10px 26px; font-size:13.5px; letter-spacing:.1em;

  color:var(--ink-soft); transition:all .2s;

}

.site-nav-desktop .dropdown a:hover,

.site-nav-mobile .dropdown a:hover,

.nav-inner > nav:not(.site-nav-desktop) .dropdown a:hover{ background:var(--mint-soft); color:var(--ink); padding-left:32px; }

.site-nav-desktop .dropdown .dd-label,

.site-nav-mobile .dropdown .dd-label,

.nav-inner > nav:not(.site-nav-desktop) .dropdown .dd-label{

  font-size:11px; letter-spacing:.28em; color:#9FB8B8; padding:10px 26px 4px;

}

.site-nav-desktop .dd-toggle,

.nav-inner > nav:not(.site-nav-desktop) .dd-toggle{ display:none; }

.nav-cta{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

.nav-cta .btn{

  padding:10px 16px;

  font-size:12.5px;

  white-space:nowrap;

  flex-shrink:0;

}



/* Progressive CTA reveal — phone is already in the topbar */

@media (min-width: 861px) and (max-width: 1399px){

  .nav-cta .btn-line,

  .nav-cta .btn-contact{ display:none; }

}

@media (min-width: 861px) and (max-width: 1199px){

  .nav-cta .btn-dark{ display:none; }

  .site-nav-desktop .nav-item > a{

    padding:10px 6px;

    font-size:14px;

  }

  .nav-inner.container{

    column-gap:14px;

  }

  .nav-brand .brand-name .en{ display:none; }

}



/* SSR cart icon + badge (HTMX; login-gated via /htmx/nav-cart) */
.nav-cart-link{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; color:var(--ink); text-decoration:none; margin-right:4px;
  flex-shrink:0;
}
.nav-cart-icon{
  display:block; width:22px; height:22px;
}
.nav-cart-badge{
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:transparent; color:#fff; font-size:11px; font-weight:700;
  line-height:18px; text-align:center; display:inline-block;
}
.nav-cart-badge.is-hot{ background:var(--mint-deep, #2a9d9d); }
.nav-cart-link .nav-cart-badge{
  position:absolute; top:1px; right:-2px; display:none;
}
.nav-cart-link .nav-cart-badge.is-hot{ display:inline-block; }
.nav-cart-mobile-link{
  position:relative; display:inline-flex; align-items:center; gap:10px;
}
.nav-cart-mobile-link .nav-cart-badge:not(.is-hot){ display:none; }

/* Account menu — migrated from frontend/src/index.css (was public/react/src.css) */
.account-menu{
  position:relative;
  margin-left:4px;
}
.account-menu-trigger{
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 8px 5px 12px;
  border:1px solid rgba(94,207,207,.28);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 18px rgba(43,35,32,.08);
  cursor:pointer;
  max-width:168px;
  min-width:0;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.account-menu-trigger:hover{
  border-color:rgba(94,207,207,.5);
  background:rgba(255,255,255,.88);
  box-shadow:0 6px 22px rgba(43,35,32,.12);
}
a.account-menu-trigger{
  text-decoration:none;
  color:inherit;
}
.account-menu-trigger--guest .account-menu-avatar--guest{
  background:linear-gradient(145deg,#5ecfcf 0%,#a78bfa 100%);
  border:1px solid rgba(255,255,255,.5);
  color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.5);
}
[data-site-nav-root].is-nav-hero .account-menu-trigger{
  background:rgba(28,22,20,.42);
  border-color:rgba(255,255,255,.38);
  box-shadow:0 4px 20px rgba(42,24,69,.2);
}
[data-site-nav-root].is-nav-hero .account-menu-trigger:hover{
  border-color:rgba(94,207,207,.65);
  background:rgba(38,30,28,.52);
  box-shadow:0 6px 24px rgba(42,24,69,.28);
}
[data-site-nav-root].is-nav-hero .account-menu-name{ color:#fff; }
[data-site-nav-root].is-nav-hero .account-menu-email{ color:rgba(255,255,255,.72); }
.account-menu-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  max-width:96px;
  flex:1 1 auto;
  text-align:left;
  overflow:hidden;
}
.account-menu-name{
  font-size:12px;
  font-weight:600;
  color:var(--ink,#2b2320);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.account-menu-email{
  font-size:10px;
  color:var(--ink-faint,#8a817b);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.account-menu-avatar{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:linear-gradient(145deg,#5ecfcf 0%,#67e8f9 42%,#a78bfa 100%);
  color:#fff;
  font-size:11px;
  font-weight:700;
  flex-shrink:0;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.28),
    0 6px 16px rgba(94,207,207,.35);
}
.account-menu-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:60;
  min-width:180px;
  padding:6px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:12px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 32px rgba(43,35,32,.14);
}
.account-menu-item{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:10px 12px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--ink,#2b2320);
  font-size:13px;
  text-decoration:none;
  cursor:pointer;
}
.account-menu-item:hover{ background:rgba(94,207,207,.14); }
.account-menu-logout{ color:#c0392b; }
.account-menu-logout:hover{ background:#fdecea; }
.account-menu-admin{ color:#3aa8a8; }
.account-menu-admin:hover{ background:rgba(94,207,207,.18); }

/*
  Contain frozen src.css .gradient-button::before (conic, inset:-160%).
  Without overflow:hidden the flare paints over the whole hero.
*/
.gradient-button,
.nav-gradient-cta{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  padding:2px;
  overflow:hidden;
  border-radius:9px;
  flex-shrink:0;
}
.nav-gradient-cta .gradient-button-inner{
  min-width:0;
  border-radius:7px;
  padding:10px 16px;
  font-size:12.5px;
  line-height:1;
  letter-spacing:.05em;
  white-space:nowrap;
  font-weight:500;
}

/* 手機選單 */

.nav-burger{ display:none; width:44px; height:44px; position:relative; flex-shrink:0; }

.nav-burger span{

  position:absolute; left:11px; width:22px; height:1.6px; background:var(--ink);

  transition:all .3s var(--ease);

}

.nav-burger span:nth-child(1){ top:16px; }

.nav-burger span:nth-child(2){ top:22px; }

.nav-burger span:nth-child(3){ top:28px; }

.nav-burger.is-open span:nth-child(1){ top:22px; transform:rotate(45deg); }

.nav-burger.is-open span:nth-child(2){ opacity:0; }

.nav-burger.is-open span:nth-child(3){ top:22px; transform:rotate(-45deg); }

/* Gradient CTA — migrated from frozen public/react/src.css */
@keyframes gradient-button-spin{
  to{ transform:rotate(360deg); }
}
@keyframes gradient-button-shine{
  0%,28%{ transform:skewX(-12deg) translateX(-170%); }
  52%,100%{ transform:skewX(-12deg) translateX(320%); }
}
.gradient-button::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-160%;
  background:conic-gradient(from 0deg,#5ecfcf,#9cefef,rgba(255,255,255,.95),#b7f4f4,#5ecfcf);
  animation:gradient-button-spin 4s linear infinite;
}
.gradient-button-variant::before{ animation-duration:2.8s; }
.gradient-button-inner{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  color:var(--ink,#2b2320);
  text-decoration:none;
  background:rgba(156,239,239,.82);
  backdrop-filter:blur(14px) saturate(165%);
  -webkit-backdrop-filter:blur(14px) saturate(165%);
  border:1px solid rgba(255,255,255,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),inset 1px 0 0 rgba(255,255,255,.42);
  transition:background .2s,transform .2s,box-shadow .2s;
  overflow:hidden;
}
.gradient-button-inner::after{
  content:"";
  position:absolute;
  top:-25%;
  bottom:-25%;
  left:0;
  width:42%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.22) 52%,transparent 100%);
  transform:skewX(-12deg) translateX(-170%);
  animation:gradient-button-shine 3.2s ease-in-out infinite;
  pointer-events:none;
}
.gradient-button:hover .gradient-button-inner{
  background:rgba(183,244,244,.9);
  box-shadow:0 4px 18px rgba(94,207,207,.32),inset 0 1px 0 rgba(255,255,255,.88),inset 1px 0 0 rgba(255,255,255,.48);
  transform:translateY(-1px);
}
[data-site-nav-root].is-nav-hero .gradient-button-inner{
  color:var(--gh-twilight,#2b2320);
  background:rgba(156,239,239,.74);
  border-color:rgba(255,255,255,.5);
}
[data-site-nav-root].is-nav-hero .gradient-button:hover .gradient-button-inner{
  background:rgba(183,244,244,.84);
}

/* Mobile drawer — migrated from frozen public/react/src.css */
.mobile-animated-nav{ display:none; }
@media (max-width:860px){
  [data-site-nav-root] .nav-inner.container{
    width:100%;
    max-width:100%;
    padding-left:max(12px,env(safe-area-inset-left,0px));
    padding-right:max(12px,env(safe-area-inset-right,0px));
    box-sizing:border-box;
    gap:4px;
  }
  [data-site-nav-root] .nav-brand{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    gap:6px;
  }
  [data-site-nav-root] .nav-brand .brand-mark{ width:48px; height:24px; }
  [data-site-nav-root] .nav-brand .brand-name{ min-width:0; overflow:hidden; }
  [data-site-nav-root] .nav-brand .brand-name > span{
    overflow:hidden;
    text-overflow:clip;
    white-space:nowrap;
  }
  [data-site-nav-root] .nav-cta{ flex:0 0 auto; min-width:0; gap:4px; }
  /* Cart + account stay in header bar only (not duplicated in drawer). */
  [data-site-nav-root] .site-nav-account-desktop{ display:flex; align-items:center; }
  [data-site-nav-root] .site-nav-account-desktop .account-menu-text{ display:none; }
  [data-site-nav-root] .site-nav-account-desktop .account-menu-trigger{
    padding:4px;
    max-width:none;
    gap:0;
  }
  [data-site-nav-root] .mobile-menu-toggle,
  .nav-burger.mobile-menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:44px;
    flex:0 0 40px;
    border:0;
    background:transparent;
    color:var(--ink,#2b2320);
  }
  [data-site-nav-root].is-nav-hero .mobile-menu-toggle{ color:#fff; }
  [data-site-nav-root] .nav.is-mobile-menu-open .mobile-menu-toggle{
    position:relative;
    z-index:112;
    color:var(--ink,#2b2320);
  }
  /* Burger bars use background, not color — force ink X on open white drawer. */
  [data-site-nav-root] .nav.is-mobile-menu-open .nav-burger span{
    background:var(--ink,#2b2320);
  }
  [data-site-nav-root] .nav.is-mobile-menu-open .nav-cart-link{
    position:relative;
    z-index:112;
    color:var(--ink,#2b2320);
  }
  [data-site-nav-root] .nav.is-mobile-menu-open .site-nav-account-desktop{
    position:relative;
    z-index:112;
  }
  [data-site-nav-root] .nav.is-mobile-menu-open .account-menu-name{
    color:var(--ink,#2b2320);
  }
  .mobile-animated-nav{
    display:block;
    position:fixed;
    inset:0;
    z-index:110;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease-out,visibility 0s linear .2s;
  }
  .mobile-animated-nav.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition-delay:0s;
  }
  .mobile-animated-nav__panel{
    position:absolute;
    inset:0;
    background:var(--paper,#fdfcfa);
  }
  .mobile-animated-nav__list{
    position:absolute;
    top:76px;
    left:0;
    right:0;
    bottom:0;
    margin:0;
    padding:0 clamp(16px,6vw,32px) calc(24px + env(safe-area-inset-bottom,0px));
    list-style:none;
    overflow-y:auto;
    opacity:0;
    transform:translateY(18px);
    transition:opacity .2s ease-out,transform .22s ease-out;
  }
  .mobile-animated-nav.is-open .mobile-animated-nav__list{
    opacity:1;
    transform:translateY(0);
  }
  .mobile-animated-nav__item{ border-bottom:1px solid #f0ebe5; }
  .mobile-animated-nav__link{
    display:block;
    padding:18px 0;
    font-size:17px;
    letter-spacing:.08em;
    color:var(--ink,#2b2320);
  }
  .mobile-animated-nav__link:hover{ color:var(--mint-deep,#1aa8ad); }
  .mobile-animated-nav__sublist{
    margin:0;
    padding:0 0 12px 14px;
    list-style:none;
  }
  .mobile-animated-nav__sublink{
    display:block;
    padding:10px 0;
    font-size:15px;
    letter-spacing:.06em;
    color:var(--ink-soft,#8a817b);
  }
  .mobile-animated-nav__sublink:hover{ color:var(--mint-deep,#1aa8ad); }
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){
  .mobile-animated-nav,.mobile-animated-nav__list{ transition:none; }
}