/*
Theme Name: Noni Juice Bali
Theme URI: https://www.nonijuicebali.com
Author: Your Name
Description: Modern light-theme WordPress theme for Noni Juice Bali with custom cart and checkout.
Version: 1.0
Text Domain: noni-juice-bali
*/

:root{
  --bg:#fcfaf5;
  --surface:#fffdf9;
  --surface-2:#f4efe6;
  --text:#1f1a17;
  --muted:#6e655d;
  --line:rgba(31,26,23,.1);
  --olive:#64754f;
  --olive-deep:#47543a;
  --gold:#b8823d;
  --danger:#b24545;
  --shadow:0 20px 50px rgba(48,36,20,.08);
  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:18px;
  --max:1220px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Manrope", Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(184,130,61,.08), transparent 24%),
    radial-gradient(circle at 100% 10%, rgba(100,117,79,.08), transparent 22%),
    linear-gradient(180deg, #fdfbf7 0%, #faf6ef 100%);
  line-height:1.55;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.04;
  background-image:
    linear-gradient(rgba(31,26,23,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,26,23,.06) 1px, transparent 1px);
  background-size:5px 5px;
  mix-blend-mode:multiply;
}

.wrap{width:min(calc(100% - 2rem), var(--max)); margin-inline:auto}
h1,h2,h3,h4{font-family:"Fraunces", Georgia, serif; line-height:.95; letter-spacing:-.03em; margin:0}
p{margin:0}
a{text-decoration:none; color:inherit}
img{max-width:100%; display:block}
.section{padding:clamp(2.8rem, 6vw, 5.5rem) 0}

.topbar{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter:blur(14px);
  background:rgba(252,250,245,.78);
  border-bottom:1px solid rgba(31,26,23,.06);
}

.nav{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:.85rem;
}

.brand-mark{
  width:46px;height:46px;border-radius:50%;
  background:
    radial-gradient(circle at 34% 34%, #f1d2a6 0 18%, #b8823d 19% 44%, #64754f 45% 100%);
  box-shadow:0 10px 24px rgba(100,117,79,.16), inset 0 0 0 2px rgba(255,255,255,.45);
  flex:0 0 auto;
}

.brand-copy strong{display:block; font-size:1.2rem}
.brand-copy span{
  display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.18em; color:var(--muted)
}

.nav-links{
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
}

.nav-links a{
  font-weight:700; font-size:.95rem; position:relative;
}

.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-.25rem; width:100%; height:1px;
  background:var(--text); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav-links a:hover::after{transform:scaleX(1)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  border:none; cursor:pointer; border-radius:999px; padding:.95rem 1.25rem; font-weight:800;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.btn-primary{background:var(--text); color:#fff; box-shadow:0 16px 30px rgba(31,26,23,.12)}
.btn-secondary{background:rgba(255,255,255,.7); border:1px solid var(--line); color:var(--text)}
.btn-olive{background:var(--olive); color:#fff}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.99)}

.hero{
  padding:clamp(3rem, 7vw, 6.2rem) 0 2rem;
}

.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.2rem, 3vw, 3rem); align-items:center;
}

.eyebrow{
  display:inline-flex; align-items:center; padding:.45rem .8rem; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.72); text-transform:uppercase;
  letter-spacing:.16em; font-size:.76rem; color:var(--olive-deep); font-weight:800;
}

.hero h1{
  font-size:clamp(3.1rem, 7vw, 6.8rem);
  margin-top:1rem;
  max-width:10ch;
}

.hero-copy p{
  color:var(--muted);
  max-width:60ch;
  font-size:clamp(1rem, 1.8vw, 1.08rem);
  margin-top:1.1rem;
}

.hero-actions{
  display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.5rem;
}

.hero-visual{
  position:relative; min-height:560px; border-radius:var(--radius-xl); overflow:hidden;
  background:
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.5), transparent 18%),
    linear-gradient(135deg, #f3dfc3 0%, #d3b58c 28%, #84956b 100%);
  border:1px solid rgba(255,255,255,.45); box-shadow:var(--shadow);
}

.bottle{
  position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%);
  width:min(290px, 52%); height:80%;
  border-radius:130px 130px 42px 42px / 86px 86px 24px 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.36) 12%, rgba(255,255,255,.16) 20%, rgba(255,255,255,.08) 100%),
    linear-gradient(180deg, rgba(246,227,196,.8), rgba(138,92,39,.82));
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 -60px 80px rgba(82,48,18,.22), 0 28px 80px rgba(31,26,23,.2);
}

.bottle::before{
  content:""; position:absolute; width:34%; height:17%; left:33%; top:-8%;
  border-radius:18px 18px 8px 8px; background:linear-gradient(180deg, #f6e3c5, #95632d);
  border:1px solid rgba(255,255,255,.5);
}

.bottle-label{
  position:absolute; inset:28% 12% auto; height:35%; border-radius:26px;
  background:rgba(255,253,249,.88); border:1px solid rgba(31,26,23,.08);
  display:grid; place-items:center; text-align:center; box-shadow:0 14px 30px rgba(31,26,23,.1); padding:1rem;
}

.bottle-label strong{display:block; font-size:2.2rem}
.bottle-label span{
  display:block; margin-top:.45rem; color:var(--muted); text-transform:uppercase;
  font-size:.72rem; letter-spacing:.18em; font-weight:700;
}

.floating{
  position:absolute; max-width:210px; padding:1rem; border-radius:22px;
  background:rgba(255,253,249,.66); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.4);
  box-shadow:var(--shadow); font-size:.92rem;
}

.floating.a{top:1.2rem; left:1.2rem}
.floating.b{right:1.2rem; bottom:1.2rem}

.section-head{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:1rem 2rem; align-items:end; margin-bottom:1.5rem;
}

.section-head h2{font-size:clamp(2.2rem, 4.7vw, 4.4rem); max-width:10ch}
.section-head p{color:var(--muted); max-width:60ch}

.grid{display:grid; gap:1rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.card{
  background:rgba(255,253,249,.74);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:1.3rem;
  opacity:0;
  transform:translateY(18px);
}

.card h3{font-size:1.5rem; margin-bottom:.5rem}
.card p, .card li{color:var(--muted)}
.card ul{margin:.6rem 0 0 1rem; padding:0}

.split{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}

.product-box{
  display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:start;
}

.price{
  font-size:2rem; color:var(--olive-deep); font-weight:800;
}

.qty{
  display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden;
  background:#fff;
}

.qty button{
  width:42px; height:42px; border:none; background:transparent; font-size:1.2rem; cursor:pointer; color:var(--text);
}

.qty input{
  width:52px; height:42px; border:none; text-align:center; font-weight:700; color:var(--text); background:transparent;
}

.inline-actions{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center}

.trust-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem;
}

.trust-item{
  padding:1rem; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.66);
  box-shadow:var(--shadow); font-weight:700;
}

.faq details{
  border:1px solid var(--line); border-radius:18px; padding:1rem 1rem; background:rgba(255,255,255,.72);
}

.faq details + details{margin-top:.8rem}
.faq summary{cursor:pointer; font-weight:800}
.faq p{margin-top:.8rem; color:var(--muted)}

.checkout{
  background:rgba(255,253,249,.78);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  padding:1.2rem;
  opacity:0;
  transform:translateY(18px);
}

.checkout-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:1rem;
}

.field-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:.9rem;
}

.field{
  display:flex; flex-direction:column; gap:.45rem;
}

.field label{
  font-size:.92rem; font-weight:700;
}

.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:16px; padding:.95rem 1rem;
  font:inherit; background:#fffdf9; color:var(--text);
}

.field textarea{min-height:120px; resize:vertical}
.field.full{grid-column:1 / -1}

.order-summary{
  background:rgba(255,255,255,.66);
  border:1px solid var(--line);
  border-radius:24px;
  padding:1rem;
  height:100%;
}

.summary-row{
  display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--line);
}

.summary-row:last-child{border-bottom:none}
.summary-total{
  font-size:1.1rem; font-weight:800; color:var(--olive-deep);
}

.notice{
  padding:1rem; border-radius:18px; font-size:.95rem;
  background:rgba(100,117,79,.09); border:1px solid rgba(100,117,79,.18); color:var(--olive-deep);
  margin-top:1rem;
}

.warning{
  background:rgba(178,69,69,.08); border:1px solid rgba(178,69,69,.18); color:var(--danger);
}

.cart-drawer{
  position:fixed; top:0; right:0; width:min(420px, 100%); height:100vh; z-index:90;
  background:rgba(255,253,249,.96); backdrop-filter:blur(18px);
  border-left:1px solid var(--line); box-shadow:-20px 0 60px rgba(31,26,23,.12);
  transform:translateX(100%); transition:transform .35s ease;
  display:flex; flex-direction:column;
}

.cart-drawer.open{transform:translateX(0)}
.cart-header, .cart-footer{padding:1rem 1rem; border-bottom:1px solid var(--line)}
.cart-footer{border-top:1px solid var(--line); border-bottom:none; margin-top:auto}
.cart-body{padding:1rem; overflow:auto}
.cart-row{
  display:grid; grid-template-columns:1fr auto; gap:.8rem; align-items:start;
  padding:1rem 0; border-bottom:1px solid var(--line);
}

.mini-muted{font-size:.92rem; color:var(--muted)}
.cart-total{
  display:flex; justify-content:space-between; align-items:center; font-weight:800; margin-bottom:1rem;
}

.badge{
  min-width:22px; height:22px; border-radius:999px; display:inline-grid; place-items:center;
  background:var(--olive); color:#fff; font-size:.72rem; padding:0 .35rem;
}

.overlay{
  position:fixed; inset:0; background:rgba(31,26,23,.28); opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:80;
}
.overlay.show{opacity:1; pointer-events:auto}

.footer{
  padding:3rem 0; color:var(--muted); border-top:1px solid rgba(31,26,23,.08);
}

.fade-in{animation:rise .8s cubic-bezier(.22,1,.36,1) forwards}
@keyframes rise{
  from{opacity:0; transform:translateY(20px)}
  to{opacity:1; transform:translateY(0)}
}

@media (max-width: 980px){
  .hero-grid,.section-head,.split,.checkout-grid,.grid-3,.grid-2,.trust-row{grid-template-columns:1fr}
  .hero-visual{min-height:420px}
  .field-grid{grid-template-columns:1fr}
}

@media (max-width: 640px){
  .hero-actions,.inline-actions{flex-direction:column; align-items:stretch}
  .btn{width:100%}
  .hero h1{max-width:none}
  .nav-links{justify-content:center}
  .floating{max-width:170px; font-size:.82rem; padding:.82rem}
  .hero-visual{min-height:360px}
}