/* J'Soil ortak üst başlık + sepet çekmecesi (Botanica, yasal sayfalar, 404). Ana sitenin (index.html) başlık stilleriyle birebir aynı tutulur. */
#site-header,#jsDrawerRoot{--bg:#F4F1E7;--panel:#FBF9F2;--ink:#2C3B2A;--muted:#6f7a64;--line:rgba(44,59,42,.15);--accent:#7b8d75;--accent-soft:#E7ECDD;--clay:#B07D5B;--poem:'Cormorant Garamond',Georgia,serif;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Mulish',system-ui,sans-serif;--gutter:clamp(20px,5vw,80px);--r:4px;font-family:var(--sans);line-height:1.6;letter-spacing:.005em;font-size:16px;font-weight:400;color:var(--ink)}
#site-header *,#jsDrawerRoot *{box-sizing:border-box;margin:0;padding:0}
#site-header a,#jsDrawerRoot a{color:inherit;text-decoration:none}
#site-header button,#jsDrawerRoot button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;text-align:center}
#site-header svg,#jsDrawerRoot svg{display:inline-block;max-width:none}
#site-header h3,#site-header h4,#jsDrawerRoot h3,#jsDrawerRoot h4{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.005em;color:var(--ink)}
#site-header img,#jsDrawerRoot img{display:block;max-width:100%}

/* duyuru bandı (tüm sayfalarda aynı) */
.ann{position:relative;z-index:190;height:auto;min-height:48px;display:flex;align-items:center;justify-content:center;padding:12px 16px;background:#4C6446;color:#F5F2E8;font-family:'Mulish',system-ui,-apple-system,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;line-height:1.5;white-space:normal;text-align:center;text-wrap:balance;overflow:hidden}
.ann .m{display:none}
.ann u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media(max-width:640px){.ann{padding:10px 14px}.ann .d{display:none}.ann .m{display:inline}}

/* NAV */
#site-header .nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);transition:background .4s,padding .4s,box-shadow .4s,color .4s}
#site-header .nav.scrolled{background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);padding-block:12px;box-shadow:0 1px 0 var(--line)}
#site-header .nav.on-dark:not(.scrolled){color:#f3efe4}
#site-header .nav.on-dark:not(.scrolled) a,#site-header .nav.on-dark:not(.scrolled) .nav-icon,#site-header .nav.on-dark:not(.scrolled) .nav-login{color:#f3efe4}
#site-header .logo{font-family:var(--poem);font-weight:500;font-size:2.25rem;letter-spacing:.01em;line-height:1;display:inline-flex;align-items:baseline;color:inherit}
#site-header .logo .ap{font-style:italic}
#site-header .logo small{font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-left:.6em;font-weight:600;align-self:center;opacity:1}
#site-header .on-dark:not(.scrolled) .logo small{color:#cdd4c2}
#site-header .nav-links{display:flex;gap:clamp(16px,2.2vw,38px);align-items:center}
#site-header .nav-links a{font-size:.74rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;position:relative;padding:6px 0;cursor:pointer;white-space:nowrap}
#site-header .nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .3s}
#site-header .nav-links a:hover::after,#site-header .nav-links a.active::after{width:100%}
#site-header .nav-right{display:flex;align-items:center;gap:14px}
#site-header .nav-icon,#jsDrawerRoot .nav-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;transition:background .3s}
#site-header .nav-icon:hover,#jsDrawerRoot .nav-icon:hover{background:var(--accent-soft)}
#site-header .cart-count{position:absolute;top:2px;right:1px;min-width:17px;height:17px;padding:0 4px;background:var(--accent);color:#fff;border-radius:9px;font-family:var(--sans);font-size:.62rem;font-weight:700;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);transition:.3s}
#site-header .cart-count.show{opacity:1;transform:scale(1)}
#site-header .nav-burger{display:none}
#site-header .nav-login{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 4px;cursor:pointer;color:inherit;white-space:nowrap;min-height:44px;min-width:44px;justify-content:center}
#site-header .nav-login svg{flex:none}
#site-header .nl-short{display:none}
#site-header .nav-login.signed:after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media(max-width:640px){#site-header .nl-full{display:none}#site-header .nl-short{display:inline}}
@media(max-width:480px){#site-header .nav-login{font-size:.66rem;letter-spacing:.1em}#site-header .nav-right{gap:6px}}
/* Logo görseli (img/logo-mask.png maskesi): renk CSS'ten, koyu hero üstünde açık. Masaüstü header 92px, logo 120×76 → üst/alt 8px boşluk */
#site-header .logo.logo-img{display:block;width:120px;height:76px;margin:0;font-size:0;line-height:0;background:#5B7255;-webkit-mask:url(/img/logo-mask.png) left center/contain no-repeat;mask:url(/img/logo-mask.png) left center/contain no-repeat;flex:none}
#site-header .on-dark:not(.scrolled) .logo.logo-img{background:#f3efe4}
#site-header .nav:has(.nav-links.open) .logo.logo-img{background:#5B7255}
@media(min-width:861px){#site-header .nav,#site-header .nav.scrolled{height:92px;padding-block:0;box-sizing:border-box}}
/* mobil: tam logo (Grounded Rituals yazısıyla), biraz küçük */
@media(max-width:860px){#site-header .nav .logo.logo-img{width:96px;height:61px}}
@media(max-width:760px){#site-header .nav .logo{font-size:1.95rem}#site-header .nav .logo small{font-size:.54rem;margin-left:.5em}}
@media(max-width:860px){
  #site-header .nav.scrolled{backdrop-filter:none;background:color-mix(in srgb,var(--bg) 97%,transparent)}
  #site-header .nav-links{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:26px;background:var(--bg);transform:translateX(100%);transition:transform .45s;z-index:199}
  #site-header .nav-links.open{transform:none}
  #site-header .nav:has(.nav-links.open) .logo,#site-header .nav:has(.nav-links.open) .nav-right{position:relative;z-index:201}
  #site-header .nav:has(.nav-links.open) .logo,#site-header .nav:has(.nav-links.open) .logo small,#site-header .nav:has(.nav-links.open) .nav-icon,#site-header .nav:has(.nav-links.open) .nav-login,#site-header .nav:has(.nav-links.open) .nav-burger{color:var(--ink)!important}
  body:has(.nav-links.open) .jc{display:none!important}
  #site-header .nav-links a{font-size:1.1rem;color:var(--ink)!important}
  #site-header .nav-burger{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;z-index:201}
}
/* hero'su olmayan sayfalarda başlık için yer */
.shell-spacer{height:78px}

/* SEPET ÇEKMECESİ */
#jsDrawerRoot .drawer-scrim{position:fixed;inset:0;background:rgba(28,34,24,.42);z-index:300;opacity:0;visibility:hidden;transition:.4s;backdrop-filter:blur(2px)}
#jsDrawerRoot .drawer-scrim.open{opacity:1;visibility:visible}
#jsDrawerRoot .drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);z-index:301;background:var(--panel);transform:translateX(100%);transition:transform .5s cubic-bezier(.4,0,.1,1);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(40,40,30,.16)}
#jsDrawerRoot .drawer.open{transform:none}
#jsDrawerRoot .drawer:not(.open){box-shadow:none}
#jsDrawerRoot .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:26px 28px;border-bottom:1px solid var(--line)}
#jsDrawerRoot .drawer-head h3{font-size:1.5rem}
#jsDrawerRoot .drawer-body{flex:1;overflow-y:auto;padding:8px 28px}
#jsDrawerRoot .drawer-foot{padding:24px 28px;border-top:1px solid var(--line);background:var(--bg)}
#jsDrawerRoot .cart-row{display:grid;grid-template-columns:64px 1fr auto;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start;font-variant-numeric:lining-nums tabular-nums}
#jsDrawerRoot .cart-thumb{width:64px;height:80px;border-radius:var(--r);object-fit:cover;background:var(--accent-soft)}
#jsDrawerRoot .cart-row h4{font-size:1.15rem;font-weight:400}
#jsDrawerRoot .cart-row .cr-meta{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:2px}
#jsDrawerRoot .nw{white-space:nowrap}
#jsDrawerRoot .qty{display:inline-flex;align-items:center;gap:2px;margin-top:10px;border:1px solid var(--line);border-radius:26px;padding:0 2px}
#jsDrawerRoot .qty button{width:44px;height:44px;font-size:1.1rem;color:var(--muted);line-height:1}
#jsDrawerRoot .qty span{font-size:.85rem;min-width:16px;text-align:center}
#jsDrawerRoot .cr-price{font-family:var(--sans);font-variant-numeric:lining-nums tabular-nums;font-size:.88rem;font-weight:500;white-space:nowrap}
#jsDrawerRoot .cr-remove{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:10px;text-decoration:underline}
#jsDrawerRoot .cr-remove:hover{color:var(--clay)}
#jsDrawerRoot .cart-empty{padding:60px 0;text-align:center;color:var(--muted)}
#jsDrawerRoot .cart-empty .poem{font-family:var(--poem);font-size:1.5rem;color:var(--ink);margin-bottom:8px}
#jsDrawerRoot .drawer-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
#jsDrawerRoot .drawer-total .t-label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
#jsDrawerRoot .drawer-total .t-val{font-family:var(--sans);font-variant-numeric:lining-nums tabular-nums;font-size:1.5rem;font-weight:500;white-space:nowrap}
#jsDrawerRoot .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:1.05em 2em;border-radius:var(--r);background:var(--accent);color:#fbf8f2;width:100%;text-align:center}
#jsDrawerRoot .link-underline{display:inline-flex;align-items:center;gap:.5em;font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);padding-bottom:3px;border-bottom:1px solid var(--accent)}