/*
Theme Name: KASSAVA
Theme URI: https://kassavabali.com
Author: KASSAVA
Description: Premium minimal wellness brand theme for KASSAVA — cream & amber palette, editorial serif typography, WooCommerce-ready, light & dark mode.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: kassava
*/

:root{
  --cream:#FAF6EF;
  --cream-deep:#F2EBDD;
  --ink:#1D1812;
  --ink-soft:#5C5347;
  --amber:#C2802F;
  --amber-deep:#9A6321;
  --leaf:#4A5B3F;
  --line:rgba(29,24,18,.12);
  --radius:28px;
  --card:#FFFFFF;
  --nav:rgba(250,246,239,.78);
  --panel:#1D1812;
  --panel-text:#FAF6EF;
  --panel-muted:rgba(250,246,239,.62);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Instrument Sans',Helvetica,Arial,sans-serif;
}
html[data-theme="dark"]{
  --cream:#16110A;
  --cream-deep:#221A0F;
  --ink:#F2E9D8;
  --ink-soft:#A4937C;
  --amber:#D49A45;
  --amber-deep:#DCA85C;
  --line:rgba(242,233,216,.14);
  --card:#1F180F;
  --nav:rgba(22,17,10,.78);
  --panel:#0E0A05;
  --panel-text:#F2E9D8;
  --panel-muted:rgba(242,233,216,.55);
}
html[data-theme="dark"] .ks-sun{opacity:.3}
html[data-theme="dark"] body::after{opacity:.07}
html[data-theme="dark"] .ks-cta-panel{border:1px solid rgba(242,233,216,.1)}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body,
.ks-nav,.ks-card,.ks-cta-panel{transition:background-color .45s ease,color .45s ease,border-color .45s ease}
::selection{background:var(--amber);color:var(--cream)}
img{max-width:100%;height:auto}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- a11y ---------- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--panel);color:var(--panel-text);padding:12px 22px;
  border-radius:0 0 14px 0;text-decoration:none;font-size:14px;font-weight:600;
}
.skip-link:focus{left:0}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- announce ---------- */
.ks-announce{
  position:fixed;top:0;left:0;right:0;z-index:101;
  background:var(--panel);color:var(--panel-text);text-align:center;
  font-size:12.5px;letter-spacing:.08em;font-weight:500;padding:10px 14px;
}
.ks-announce a{color:#E0A656;text-decoration:none;font-weight:600}
.ks-announce a:hover{text-decoration:underline}
body.admin-bar .ks-announce{top:32px}
body.admin-bar .ks-nav{top:70px}

/* ---------- nav ---------- */
.ks-nav{
  position:fixed;top:38px;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 5vw;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  background:var(--nav);
  border-bottom:1px solid var(--line);
}
.ks-wordmark{
  font-family:var(--serif);font-weight:500;font-size:21px;letter-spacing:.22em;
  text-decoration:none;color:var(--ink);
}
.ks-wordmark span{color:var(--amber)}
.ks-menu{display:flex;gap:6px;align-items:center;list-style:none}
.ks-menu li{list-style:none}
.ks-menu a{
  display:inline-block;text-decoration:none;
  font-size:14.5px;font-weight:500;letter-spacing:.04em;color:var(--ink-soft);
  padding:9px 18px;border-radius:100px;transition:all .3s;
}
.ks-menu a:hover{color:var(--ink)}
.ks-menu .current-menu-item>a,.ks-menu .current_page_item>a{background:var(--ink);color:var(--cream)}
.ks-order-btn{
  background:var(--amber)!important;color:var(--cream)!important;font-weight:600!important;margin-left:10px;
}
.ks-order-btn:hover{background:var(--amber-deep)!important}
.ks-theme-btn{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;background:none;cursor:pointer;color:var(--ink);
}
.ks-theme-btn:hover{background:var(--cream-deep)}
.ks-cart-link{position:relative}
.ks-cart-count{
  position:absolute;top:-2px;right:4px;background:var(--amber);color:var(--cream);
  font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
}
@media(max-width:760px){
  .ks-nav{padding:16px 4vw}
  .ks-menu a{padding:8px 11px;font-size:13px}
  .ks-theme-btn{width:36px;height:36px}
  .ks-menu .menu-hide-mobile{display:none}
}

/* ---------- layout ---------- */
.ks-main{padding-top:122px;min-height:70svh}
.ks-label{
  font-size:12px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  color:var(--amber-deep);display:block;margin-bottom:24px;
}
.ks-btn,
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #payment #place_order{
  display:inline-block;background:var(--ink);color:var(--cream);
  padding:14px 32px;border-radius:100px;text-decoration:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.03em;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s;line-height:1.4;
}
.ks-btn:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover{transform:translateY(-2px);background:var(--amber-deep);color:var(--cream)}
.ks-btn.amber,.woocommerce #payment #place_order,.woocommerce .single_add_to_cart_button{background:var(--amber)}
.ks-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.ks-btn.ghost:hover{background:var(--cream-deep)}

/* ---------- hero (front page) ---------- */
.ks-hero{
  min-height:calc(100svh - 122px);display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;
  position:relative;padding:60px 6vw;
}
.ks-sun{
  position:absolute;width:min(60vw,600px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#E8B86A 0%,#D99C45 35%,rgba(217,156,69,.22) 62%,transparent 72%);
  filter:blur(2px);top:50%;left:50%;transform:translate(-50%,-55%);
  opacity:.45;z-index:0;animation:ks-breathe 9s ease-in-out infinite;
}
@keyframes ks-breathe{0%,100%{transform:translate(-50%,-55%) scale(1)}50%{transform:translate(-50%,-55%) scale(1.05)}}
.ks-hero>*{position:relative;z-index:1}
.ks-hero .ks-eyebrow{
  font-size:13px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  color:var(--amber-deep);margin-bottom:28px;
}
.ks-hero h1{
  font-family:var(--serif);font-weight:330;
  font-size:clamp(52px,9vw,132px);line-height:1.03;letter-spacing:-.015em;
  max-width:13ch;
}
.ks-hero h1 em{font-style:italic;font-weight:400;color:var(--amber-deep)}
.ks-hero p{
  margin-top:30px;max-width:42ch;color:var(--ink-soft);
  font-size:clamp(17px,1.5vw,19px);line-height:1.7;
}
.ks-hero .ks-cta{margin-top:42px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.ks-ig-pill{
  margin-top:26px;font-size:13.5px;letter-spacing:.06em;color:var(--ink-soft);
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:color .25s,border-color .25s;display:inline-block;
}
.ks-ig-pill:hover{color:var(--amber-deep);border-color:var(--amber-deep)}
.ks-strip{
  border-top:1px solid var(--line);
  display:flex;justify-content:center;gap:clamp(26px,6vw,90px);flex-wrap:wrap;
  padding:26px 6vw;
}
.ks-strip span{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink-soft)}

/* ---------- section headers ---------- */
.ks-page-head{max-width:1240px;margin:0 auto;padding:90px 6vw 50px;text-align:center}
.ks-page-head h1{font-family:var(--serif);font-weight:330;font-size:clamp(40px,5.6vw,72px);letter-spacing:-.012em;line-height:1.05}
.ks-page-head p{margin:22px auto 0;max-width:46ch;color:var(--ink-soft)}

/* ---------- product cards: WooCommerce grid ---------- */
.woocommerce ul.products{
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px;
  max-width:1240px;margin:0 auto!important;padding:0 6vw 110px!important;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{
  width:auto!important;float:none!important;margin:0!important;
  background:var(--card);border-radius:var(--radius);padding:32px 28px 28px;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;
  border:1px solid rgba(29,24,18,.06);text-align:left;
}
.woocommerce ul.products li.product:hover{transform:translateY(-8px);box-shadow:0 30px 60px -30px rgba(29,24,18,.25)}
html[data-theme="dark"] .woocommerce ul.products li.product:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.65)}
.woocommerce ul.products li.product a img{
  border-radius:18px;margin-bottom:22px;aspect-ratio:1/1;object-fit:cover;width:100%;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--serif);font-weight:500;font-size:23px;padding:0;color:var(--ink);
}
.woocommerce ul.products li.product .price{
  font-family:var(--serif)!important;font-size:18px!important;font-weight:500;
  color:var(--ink)!important;margin-top:14px;padding-top:16px;border-top:1px solid var(--line);display:block;
}
.woocommerce ul.products li.product .button{margin-top:16px;align-self:flex-start}
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale{
  background:var(--amber);color:var(--cream);font-weight:600;border-radius:100px;
  padding:6px 14px;min-width:0;min-height:0;line-height:1.4;font-size:12px;letter-spacing:.06em;
}

/* ---------- single product ---------- */
.woocommerce div.product{max-width:1100px;margin:0 auto;padding:60px 6vw 110px}
.woocommerce div.product .product_title{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,48px);letter-spacing:-.01em}
.woocommerce div.product p.price{font-family:var(--serif);font-size:24px;color:var(--amber-deep);margin:18px 0}
.woocommerce div.product div.images img{border-radius:var(--radius)}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--ink-soft);max-width:54ch}
.woocommerce div.product form.cart div.quantity .qty{
  border:1px solid var(--line);border-radius:100px;padding:12px;background:var(--card);color:var(--ink);
}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding-left:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:transparent;border:none;border-radius:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom:2px solid var(--amber)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-color:var(--line)}

/* ---------- cart/checkout polish ---------- */
.woocommerce-cart .ks-main,.woocommerce-checkout .ks-main{max-width:1100px;margin:0 auto;padding-left:6vw;padding-right:6vw;padding-bottom:110px}
.woocommerce table.shop_table{border:1px solid var(--line);border-radius:18px;overflow:hidden}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{border-color:var(--line)!important;background:transparent}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{
  border:1px solid var(--line);border-radius:14px;padding:13px 16px;background:var(--card);color:var(--ink);
}
.woocommerce-message,.woocommerce-info{border-top-color:var(--amber);background:var(--cream-deep);color:var(--ink)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--amber-deep)}

/* ---------- content pages / prose ---------- */
.ks-prose{max-width:760px;margin:0 auto;padding:80px 6vw 110px}
.ks-prose h1{font-family:var(--serif);font-weight:330;font-size:clamp(38px,5.4vw,60px);letter-spacing:-.012em;line-height:1.08;margin-bottom:34px}
.ks-prose h2{font-family:var(--serif);font-weight:500;font-size:26px;margin:44px 0 14px}
.ks-prose p{color:var(--ink-soft);margin-bottom:18px;line-height:1.8}
.ks-prose a{color:var(--amber-deep)}
.ks-prose ul,.ks-prose ol{color:var(--ink-soft);padding-left:22px;margin-bottom:18px}

/* ---------- info/about blocks ---------- */
.ks-info-hero{max-width:1100px;margin:0 auto;padding:90px 6vw}
.ks-info-hero h1{font-family:var(--serif);font-weight:330;font-size:clamp(36px,5vw,66px);line-height:1.14;letter-spacing:-.01em}
.ks-info-hero h1 .hl{color:var(--amber-deep);font-style:italic;font-weight:400}
.ks-info-hero h1 .mute{color:rgba(29,24,18,.32)}
html[data-theme="dark"] .ks-info-hero h1 .mute{color:rgba(242,233,216,.32)}
.ks-block{
  max-width:1100px;margin:0 auto;padding:0 6vw;
  display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(30px,5vw,80px);
  border-top:1px solid var(--line);
}
.ks-block>div{padding:64px 0}
@media(max-width:760px){.ks-block{grid-template-columns:1fr}.ks-block>div{padding:40px 0}}
.ks-block .num{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--amber-deep);display:block;margin-bottom:16px}
.ks-block h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,36px);line-height:1.2}
.ks-block p{color:var(--ink-soft);margin-bottom:18px;font-size:16.5px;line-height:1.75}

/* ---------- FAQ ---------- */
.ks-faq{max-width:1100px;margin:0 auto;padding:70px 6vw 10px}
.ks-faq h2{font-family:var(--serif);font-weight:330;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.01em;margin-bottom:40px}
.ks-faq details{border-top:1px solid var(--line)}
.ks-faq details:last-of-type{border-bottom:1px solid var(--line)}
.ks-faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 0;font-family:var(--serif);font-weight:500;font-size:clamp(18px,2vw,22px);
}
.ks-faq summary::-webkit-details-marker{display:none}
.ks-faq summary::after{content:"+";font-family:var(--serif);font-size:26px;color:var(--amber-deep);transition:transform .3s}
.ks-faq details[open] summary::after{transform:rotate(45deg)}
.ks-faq details p{color:var(--ink-soft);padding:0 0 26px;max-width:68ch;font-size:16px;line-height:1.75}

/* ---------- wholesale ---------- */
.ks-wholesale{max-width:1100px;margin:0 auto;padding:70px 6vw 90px}
.ks-wholesale h2{font-family:var(--serif);font-weight:330;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.01em}
.ks-wholesale h2 em{font-style:italic;font-weight:400;color:var(--amber-deep)}
.ks-wholesale p{color:var(--ink-soft);margin:18px 0 30px;max-width:58ch;line-height:1.75}

/* ---------- dark CTA panel ---------- */
.ks-cta-panel{
  background:var(--panel);color:var(--panel-text);border-radius:48px;margin:60px 3vw 0;
  padding:120px 6vw;text-align:center;position:relative;overflow:hidden;
}
.ks-cta-panel::before{
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(194,128,47,.32),transparent 65%);
  top:-180px;right:-120px;
}
.ks-cta-panel h2{font-family:var(--serif);font-weight:330;font-size:clamp(36px,5.6vw,76px);line-height:1.08;position:relative}
.ks-cta-panel h2 em{color:#E0A656;font-weight:400;font-style:italic}
.ks-cta-panel p{margin:26px auto 38px;max-width:46ch;color:var(--panel-muted);position:relative}
.ks-cta-panel .ks-btn{position:relative}

/* ---------- IG tiles ---------- */
.ks-ig{max-width:1240px;margin:0 auto;padding:110px 6vw 30px;text-align:center}
.ks-ig h2{font-family:var(--serif);font-weight:330;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.01em}
.ks-ig .at{display:inline-block;margin-top:12px;font-family:var(--serif);font-style:italic;color:var(--amber-deep);text-decoration:none;font-size:17px}
.ks-ig .at:hover{text-decoration:underline}
.ks-ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
@media(max-width:760px){.ks-ig-grid{grid-template-columns:repeat(2,1fr)}}
.ks-ig-tile{
  aspect-ratio:1;border-radius:20px;overflow:hidden;position:relative;display:block;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;
}
.ks-ig-tile:hover{transform:translateY(-6px);box-shadow:0 24px 50px -26px rgba(29,24,18,.35)}
.ks-ig-tile svg,.ks-ig-tile img{width:100%;height:100%;display:block;object-fit:cover}
.ks-ig-tile .tag{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(29,24,18,.45);opacity:0;transition:opacity .35s;
  color:#FAF6EF;font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
}
.ks-ig-tile:hover .tag{opacity:1}

/* ---------- notify ---------- */
.ks-notify{max-width:680px;margin:0 auto;padding:70px 6vw 130px;text-align:center}
.ks-notify h2{font-family:var(--serif);font-weight:330;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.01em}
.ks-notify p{color:var(--ink-soft);margin-top:14px;font-size:15.5px}
.ks-notify form{margin-top:30px}
.ks-notify input[type=email]{
  min-width:240px;padding:14px 22px;border-radius:100px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-family:var(--sans);font-size:15px;outline:none;
}
.ks-notify input[type=email]:focus{border-color:var(--amber)}

/* ---------- footer ---------- */
.ks-footer{padding:80px 6vw 44px}
.ks-foot{
  max-width:1240px;margin:0 auto;border-top:1px solid var(--line);padding-top:44px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;
}
.ks-foot p{color:var(--ink-soft);font-size:14px;max-width:34ch;margin-top:12px}
.ks-foot-links{display:flex;gap:34px;flex-wrap:wrap}
.ks-foot-links a{color:var(--ink-soft);text-decoration:none;font-size:14.5px;transition:color .25s}
.ks-foot-links a:hover{color:var(--ink)}
.ks-foot-base{
  max-width:1240px;margin:36px auto 0;font-size:13px;color:var(--ink-soft);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}