/* OFFSITO — Kalashi Final Visual Theme
   Visual-only overrides: keeps current HTML, JS, API, auth, cart and orders logic intact.
*/
:root{
  --ink:#24133f;
  --muted:#75658c;
  --bg:#f7f2ff;
  --card:#fff;
  --line:#e8ddf4;
  --brand:#7b4bb7;
  --brand-dark:#5b2a86;
  --soft:#f0e7fa;
  --purple2:#b99add;
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 8% 8%,rgba(185,154,221,.24),transparent 28%),
    radial-gradient(circle at 92% 18%,rgba(123,75,183,.12),transparent 26%),
    linear-gradient(180deg,#faf7ff 0%,#f3eafb 48%,#fbf9ff 100%);
  color:var(--ink);
}
.site-header{
  background:rgba(250,247,255,.92)!important;
  border-bottom:1px solid #e4d6f2!important;
  backdrop-filter:blur(14px);
}
.brand{color:var(--brand-dark)!important;font-weight:900}
.main-nav a{color:var(--muted)!important}
.main-nav a:hover{color:var(--brand-dark)!important}
.account-button,.cart-button{
  border-color:#ddcfee!important;
  background:#fff!important;
  color:var(--ink)!important;
  border-radius:14px!important;
}
.account-button.logged{background:#f0e7fa!important;border-color:#b99add!important}
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 25%,rgba(123,75,183,.20),transparent 30%),
    linear-gradient(135deg,#f7f0ff 0%,#e8d9f7 52%,#f9f6ff 100%)!important;
  border-radius:0 0 38px 38px;
}
.hero:before,.hero:after{
  content:"";position:absolute;border-radius:999px;pointer-events:none;
  filter:blur(2px);
}
.hero:before{width:260px;height:260px;right:-80px;top:-90px;background:rgba(123,75,183,.13)}
.hero:after{width:190px;height:190px;left:-70px;bottom:-80px;background:rgba(185,154,221,.18)}
.hero-copy{position:relative;z-index:1}
.eyebrow{color:var(--brand)!important}
.hero h1{color:var(--ink)!important}
.hero h1 em{color:var(--brand)!important}
.hero p{color:var(--muted)!important}
.hero-card{
  background:linear-gradient(145deg,#5b2a86,#9a6bc7)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.35)!important;
  box-shadow:0 25px 70px rgba(91,42,134,.25)!important;
}
.hero-logo{background:linear-gradient(135deg,#5b2a86,#b99add)!important}
.primary-btn,.add-btn{
  background:#6f3fa4!important;
  border-color:#6f3fa4!important;
  color:#fff!important;
  border-radius:14px!important;
  box-shadow:0 10px 24px rgba(111,63,164,.18);
}
.primary-btn:hover,.add-btn:hover{background:#5b2a86!important}
.secondary-btn{
  border-color:#dfd3eb!important;
  background:#fff!important;
  color:var(--brand-dark)!important;
  border-radius:14px!important;
}
.section{padding-top:58px!important;padding-bottom:58px!important}
.section h2,.about h2{color:var(--ink)!important}
.category-list{gap:14px!important}
.category-btn{
  background:rgba(255,255,255,.86)!important;
  border:1px solid var(--line)!important;
  color:var(--muted)!important;
  border-radius:18px!important;
  box-shadow:0 8px 24px rgba(91,42,134,.06);
}
.category-btn:hover,.category-btn.active{
  background:#6f3fa4!important;
  border-color:#6f3fa4!important;
  color:#fff!important;
}
.products-section{background:transparent!important}
.product-card{
  background:rgba(255,255,255,.94)!important;
  border:1px solid var(--line)!important;
  border-radius:24px!important;
  box-shadow:0 12px 34px rgba(72,39,101,.08)!important;
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.product-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(72,39,101,.13)!important}
.product-media{background:linear-gradient(145deg,#f5edfc,#eadcf7)!important}
.product-category{color:var(--brand)!important}
.rating{color:#b77b21!important}
.price{color:var(--brand-dark)!important}
.favorite-toggle.active{color:#7b4bb7!important}
.product-tools input,.sort select,.newsletter-form input{
  border-color:#dfd3eb!important;
  background:#fff!important;
  border-radius:14px!important;
}
.products-meta{color:var(--muted)!important}
.about{
  background:linear-gradient(135deg,#f0e7fa,#fff8fc)!important;
  border:1px solid var(--line);
  box-shadow:0 12px 35px rgba(72,39,101,.06);
  border-radius:28px!important;
}
.newsletter-section{
  padding:42px 0 70px!important;
  background:transparent!important;
}
.newsletter-card{
  background:linear-gradient(135deg,#5b2a86 0%,#7b4bb7 52%,#9b75c7 100%)!important;
  color:#fff!important;
  border:0!important;
  border-radius:30px!important;
  box-shadow:0 22px 55px rgba(91,42,134,.22)!important;
}
.newsletter-card .eyebrow{color:#fff!important;opacity:.85}
.newsletter-card h2,.newsletter-card p{color:#fff!important}
.newsletter-form input{box-shadow:none!important}
.newsletter-form button{background:#fff!important;color:#5b2a86!important}
.newsletter-form small{color:#fff!important}
.site-footer{
  background:#2c1745!important;
  border-top:0!important;
  color:#fff!important;
  margin-top:0!important;
}
.footer-grid{padding-top:52px!important}
.footer-logo,.footer-col h3{color:#fff!important}
.footer-brand p,.footer-col a,.footer-col span,.footer-bottom{color:#d9cbe7!important}
.footer-col a:hover,.footer-bottom a{color:#fff!important}
.footer-bottom{border-top-color:rgba(255,255,255,.14)!important}
.cart-drawer,.auth-box,.checkout-box,.product-modal-box,.orders-box{
  border:1px solid var(--line)!important;
  border-radius:26px!important;
  box-shadow:0 24px 80px rgba(43,23,69,.22)!important;
}
.modal-close{border-radius:12px!important}
@media(max-width:800px){
  .hero{border-radius:0 0 28px 28px}
  .section{padding-top:42px!important;padding-bottom:42px!important}
}
@media(max-width:500px){
  .product-card{border-radius:20px!important}
  .newsletter-card{border-radius:24px!important}
}