/* ==========================================================================
   Liana Home — shared design system (header, footer, buttons, scaffolding)
   Loaded on every page. Section-specific styles (homepage, product, etc.)
   live in their own CSS files.
   ========================================================================== */

:root{
  --walnut:#4A3526;
  --walnut-soft:#5A3E2B;
  --ink:#2B211A;
  --bone:#F7F4EE;
  --white:#FFFFFF;
  --taupe:#D9CDBB;
  --hairline:#E5DED2;
  --muted:#8A7B6B;
  --green:#1E5B43;
  --maxw:1240px;
}

body.liana-site{
  font-family:'Alexandria',sans-serif;
  font-weight:300;
  background:var(--bone);
  color:var(--ink);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
.liana-site img{max-width:100%;display:block}
.liana-site a{text-decoration:none;color:inherit}
.liana-site .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.liana-site .num{font-variant-numeric:tabular-nums}

/* Placeholder imagery helper — used only where a real image hasn't been set yet */
.liana-site .ph{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#E9E2D5 0%,#DDD2C0 55%,#CFC1AA 100%);
}
.liana-site .ph::after{
  content:attr(data-label);
  position:absolute;inset:auto 0 0 0;
  padding:10px 16px;
  font-size:11px;font-weight:400;color:#7A6B58;
  letter-spacing:.02em;
}
.liana-site .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.liana-site .ph-dark{background:linear-gradient(150deg,#3E2E20 0%,#54402E 60%,#6B543E 100%)}
.liana-site .ph-dark::after{color:#C9B99F}

/* ---------- Announcement bar ---------- */
.liana-announce{
  background:var(--walnut);
  color:#EFE7DA;
  font-size:12.5px;font-weight:300;
  text-align:center;
  padding:9px 16px;
  letter-spacing:.04em;
}
.liana-announce span{opacity:.55;margin:0 14px}

/* ---------- Header ---------- */
.liana-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline);
}
.liana-nav{
  display:flex;align-items:center;justify-content:space-between;
  height:76px;
}
.liana-brand{display:flex;flex-direction:column;line-height:1.3}
.liana-brand strong{font-size:22px;font-weight:500;letter-spacing:.02em;color:var(--walnut)}
.liana-brand small{font-size:10.5px;font-weight:300;color:var(--muted);letter-spacing:.28em}
.liana-menu{display:flex;gap:36px;font-size:14px;font-weight:400;list-style:none;padding:0;margin:0}
.liana-menu li{position:relative}
.liana-menu a{color:var(--ink);position:relative;padding:6px 0;transition:color .2s;display:inline-block}
.liana-menu a:hover{color:var(--walnut)}
.liana-menu a::after{
  content:"";position:absolute;right:0;left:100%;bottom:0;
  height:1px;background:var(--walnut);transition:left .25s ease;
}
.liana-menu a:hover::after{left:0}
.liana-nav-right{display:flex;align-items:center;gap:18px}
.liana-cart-link{
  position:relative;display:flex;align-items:center;color:var(--ink);
}
.liana-cart-link svg{width:22px;height:22px;stroke:var(--walnut);fill:none;stroke-width:1.3}
.liana-cart-count{
  position:absolute;top:-8px;left:-10px;
  background:var(--walnut);color:#fff;
  font-size:10px;font-weight:500;
  width:17px;height:17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.liana-nav-cta{
  font-size:13px;font-weight:400;
  border:1px solid var(--walnut);
  color:var(--walnut);
  padding:9px 22px;border-radius:2px;
  transition:all .2s;white-space:nowrap;
}
.liana-nav-cta:hover{background:var(--walnut);color:#fff}
.liana-menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px}
.liana-menu-toggle svg{width:24px;height:24px;stroke:var(--ink)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-size:14px;font-weight:400;letter-spacing:.03em;
  padding:14px 34px;border-radius:2px;
  transition:all .22s;border:none;cursor:pointer;font-family:inherit;
}
.btn-solid{background:#fff;color:var(--ink)}
.btn-solid:hover{background:var(--bone)}
.btn-line{border:1px solid rgba(255,255,255,.7);color:#fff;margin-inline-start:14px;background:transparent}
.btn-line:hover{background:rgba(255,255,255,.12)}
.btn-walnut{background:var(--walnut);color:#fff}
.btn-walnut:hover{background:var(--walnut-soft)}
.btn-bone{background:var(--bone);color:var(--ink)}
.btn-bone:hover{background:#fff}
.btn-green{background:var(--green);color:#fff;display:inline-flex;align-items:center;gap:10px}
.btn-green:hover{background:#174936}
.btn-green svg{width:18px;height:18px;fill:#fff}

/* ---------- Section scaffolding (shared by every page) ---------- */
.liana-site section{padding:96px 0}
.liana-site .kicker{
  font-size:12px;font-weight:400;letter-spacing:.3em;
  color:var(--muted);margin-bottom:14px;
}
.liana-site h2{font-size:clamp(26px,3vw,38px);font-weight:300;line-height:1.55}
.liana-site h2 em{font-style:normal;font-weight:500}
.liana-site .sec-head{max-width:620px;margin-bottom:56px}
.liana-site .sec-head.center{margin-inline:auto;text-align:center}
.liana-site .sec-sub{font-size:15px;color:var(--muted);margin-top:14px;font-weight:300}

/* ---------- Payment strip ---------- */
.liana-pay{background:var(--bone);padding:64px 0}
.liana-pay .wrap{display:flex;align-items:center;justify-content:center;gap:56px;flex-wrap:wrap}
.liana-pay-item{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:400;color:var(--ink)}
.liana-pay-item svg{width:22px;height:22px;stroke:var(--walnut)}
.liana-pay-sep{width:1px;height:26px;background:var(--hairline)}

/* ---------- Footer ---------- */
.liana-footer{background:var(--walnut);color:#D8CCBA;padding:72px 0 0}
.liana-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding-bottom:56px}
.liana-foot-brand strong{font-size:22px;font-weight:500;color:#fff;display:block;margin-bottom:12px}
.liana-foot-brand p{font-size:13.5px;font-weight:300;max-width:280px;line-height:2}
.liana-footer h4{font-size:13px;font-weight:500;color:#fff;letter-spacing:.14em;margin-bottom:18px}
.liana-foot-links{list-style:none;display:grid;gap:10px;font-size:13.5px;font-weight:300}
.liana-foot-links a:hover{color:#fff}
.liana-foot-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:20px 0;font-size:12px;font-weight:300;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}

/* ---------- Floating WhatsApp ---------- */
.liana-float-wa{
  position:fixed;bottom:26px;left:26px;z-index:60;
  width:54px;height:54px;border-radius:50%;
  background:var(--green);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(30,91,67,.35);
  transition:transform .2s;
}
.liana-float-wa:hover{transform:scale(1.06)}
.liana-float-wa svg{width:26px;height:26px;fill:#fff}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .liana-menu{
    display:none;position:absolute;top:100%;right:0;left:0;
    background:var(--white);border-bottom:1px solid var(--hairline);
    flex-direction:column;gap:0;padding:8px 32px 16px;
  }
  .liana-menu.is-open{display:flex}
  .liana-menu a{padding:12px 0;border-bottom:1px solid var(--hairline)}
  .liana-menu-toggle{display:block}
  .liana-foot-grid{grid-template-columns:1fr 1fr}
  .liana-site section{padding:64px 0}
}
@media(max-width:640px){
  .liana-pay{padding:44px 0}
  .liana-pay .wrap{flex-direction:column;gap:18px}
  .liana-pay-sep{display:none}
}