/* ============================================================
   HEADER / NAV — v4: floating pill bar
   A detached, rounded floating nav sitting with a margin from
   the page edge, distinct from the full-width sticky bars used
   in earlier drafts.
   ============================================================ */
body{ padding-top:0; }

.header-spacer{ height:clamp(1rem,3vw,1.6rem); }

.site-header{
  position:relative; top:clamp(0.8rem,2vw,1.4rem); z-index:200;
  margin:0 auto; max-width:calc(var(--maxw) + 2rem);
  padding:0 var(--gutter);
}




.site-header .header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  height:74px; padding:0 0.6rem 0 1.4rem;
  background:#fff;
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  box-shadow:0 10px 34px rgba(11,94,82,0.10);
}
.brand{ display:flex; align-items:center; gap:0.6em; flex-shrink:0; }
.brand img{ height:34px; width:auto; }

.main-nav{ display:flex; align-items:center; gap:0.3rem;  border-radius:var(--radius-pill); padding:0.35rem; }
.main-nav a{
  font-size:0.89rem; font-weight:600; color:var(--ink-soft);
  padding:0.55em 1.05em; border-radius:var(--radius-pill);
  transition:color var(--speed-s) var(--ease), background var(--speed-s) var(--ease);
}
.main-nav a:hover{ color:var(--ink); }
.main-nav a.active{ color:#fff; background:var(--gradient-violet); box-shadow:var(--shadow-color-violet); }

.header-actions{ display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }

/* ---- header search ---- */
.header-search{ position:relative; }
.header-search-panel{
  position:absolute; top:calc(100% + 14px); right:0;
  width:min(420px, 90vw);
  background:var(--surface);
  border-radius:var(--radius-l);
  border:1px solid var(--line);
  box-shadow:var(--shadow-lift);
  padding:1.1rem;
  opacity:0; transform:translateY(-10px) scale(0.97); pointer-events:none;
  transition:opacity var(--speed-m) var(--ease), transform var(--speed-m) var(--ease-bounce);
  z-index:250;
}
.header-search-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.header-search-panel .search-input-row{
  display:flex; align-items:center; gap:0.6em;
  border:2px solid var(--line-strong); border-radius:var(--radius-pill);
  padding:0.55em 1em; background:var(--surface-tint);
}
.header-search-panel .search-input-row:focus-within{ border-color:var(--violet); }
.header-search-panel input{
  border:none; background:none; flex-grow:1; font-size:0.95rem; color:var(--ink);
}
.header-search-panel input:focus{ outline:none; }
.header-search-panel svg{ width:18px; height:18px; color:var(--violet); flex-shrink:0; }

.search-results{ margin-top:0.9rem; max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:0.3rem; }
.search-result-item{
  display:flex; align-items:center; gap:0.8em; padding:0.55em 0.6em; border-radius:var(--radius-s);
  transition:background var(--speed-s) var(--ease);
}
.search-result-item:hover{ background:var(--surface-tint); }
.search-result-item img{ width:42px; height:42px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--surface-tint); }
.search-result-item .sri-info{ min-width:0; }
.search-result-item h5{ margin:0; font-size:0.86rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-result-item span{ font-size:0.72rem; color:var(--ink-soft); }
.search-empty{ text-align:center; padding:1.4rem 0.5rem; color:var(--ink-soft); font-size:0.86rem; }
.search-hint{ font-size:0.76rem; color:var(--ink-soft); margin-top:0.8rem; text-align:center; }

.cart-btn{ position:relative; }
.cart-count{
  position:absolute; top:-4px; right:-4px;
  min-width:19px; height:19px; padding:0 4px;
  border-radius:50%; background:var(--gradient-pink); color:#fff;
  font-size:0.66rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--surface);
  transform:scale(0); transition:transform var(--speed-s) var(--ease-bounce);
}
.cart-count.show{ transform:scale(1); }

.btn-icon{
  width:42px; height:42px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:var(--surface-tint);
  position:relative;
  transition:transform var(--speed-s) var(--ease-bounce), background var(--speed-s) var(--ease);
}
.btn-icon:hover{ transform:translateY(-2px); background:var(--violet-100); }
.btn-icon svg{ width:18px; height:18px; }

.header-cta{ display:inline-flex; }

.nav-toggle{
  display:none; width:42px; height:42px; border-radius:50%;
  border:none; background:var(--surface-tint);
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.nav-toggle span{ width:17px; height:2.5px; border-radius:2px; background:var(--ink); transition:transform var(--speed-s) var(--ease), opacity var(--speed-s) var(--ease); }
.nav-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width: 980px){
  .site-header{ top:0.8rem; }
  .site-header .header-inner{ padding:0 0.6rem 0 1.1rem; }
  .main-nav{
    position:fixed; inset:90px 0.8rem auto 0.8rem; max-height:calc(100dvh - 110px);
    background:var(--surface);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:0.8rem; gap:0.2rem; border-radius:var(--radius-l);
    box-shadow:var(--shadow-lift);
    transform:translateY(-14px) scale(0.98); opacity:0; pointer-events:none;
    transition:transform var(--speed-m) var(--ease-bounce), opacity var(--speed-m) var(--ease);
    overflow-y:auto;
  }
  .main-nav.open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
  .main-nav a{ font-size:1rem; padding:0.85em 1em; width:100%; text-align:left; border-radius:12px; }
  .main-nav a.active{ border-radius:12px; }
  .nav-toggle{ display:inline-flex; }
  .header-cta{ display:none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--ink);
  background-image:radial-gradient(at 15% 20%, rgba(28,140,122,0.55) 0px, transparent 55%), radial-gradient(at 85% 80%, rgba(156,201,62,0.35) 0px, transparent 50%);
  color:#D6E8E2;
  padding:clamp(3.5rem,6vw,5.5rem) 0 1.8rem;
  position:relative;
  overflow:hidden;
  margin-top:2rem;
  border-radius:40px 40px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:2.5rem;
  padding-bottom:2.6rem;
  border-bottom:1px solid rgba(255,255,255,0.14);
}
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

.footer-brand p{ color:#AFD3C8; max-width:320px; margin-top:1em; }
.footer-brand img{ height:32px; filter:brightness(0) invert(1); opacity:0.95; }

.footer-col h4{
  font-family:var(--font-body); text-transform:uppercase; letter-spacing:0.1em;
  font-size:16px; color:#8FE0B8; margin-bottom:1.2em; font-weight:700;
}
.footer-col a, .footer-col p{ color:#BFE0D6; font-size:0.92rem; display:block; margin-bottom:0.75em; }
.footer-col a:hover{ color:#fff; }

.footer-social{ display:flex; gap:0.6rem; margin-top:0.6rem; }
.footer-social a{
  width:40px; height:40px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.22);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--speed-s) var(--ease-bounce), background var(--speed-s) var(--ease);
}
.footer-social a:hover{ background:var(--gradient-pink); transform:translateY(-3px) scale(1.06); border-color:transparent; }
.footer-social svg{ width:16px; height:16px; }

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:1.7rem; font-size:0.82rem; color:#7FA89D; flex-wrap:wrap; gap:0.6rem;
}