/* KalnStore UI v2 — visual normalization layer
 * Purpose: flatten legacy overrides into one consistent, responsive visual surface.
 * No business logic or data selectors are changed.
 */
:root{
  --ks2-bg:#f5f6f4;
  --ks2-surface:#ffffff;
  --ks2-surface-2:#f0f3f1;
  --ks2-ink:#16231e;
  --ks2-muted:#6c7771;
  --ks2-border:#dfe5e1;
  --ks2-primary:#17463f;
  --ks2-primary-soft:#edf4f1;
  --ks2-accent:#c97d4a;
  --ks2-good:#2f7257;
  --ks2-warn:#94651d;
  --ks2-danger:#9d443c;
  --ks2-r1:12px;
  --ks2-r2:16px;
  --ks2-r3:20px;
  --ks2-r4:24px;
  --ks2-shadow:0 8px 24px rgba(18,31,25,.055);
  --ks2-shadow-lg:0 18px 46px rgba(18,31,25,.09);
}
:root[data-theme="dark"]{
  --ks2-bg:#0f1512;
  --ks2-surface:#151c19;
  --ks2-surface-2:#1c2621;
  --ks2-ink:#f1f5f2;
  --ks2-muted:#a5b0aa;
  --ks2-border:#2a3630;
  --ks2-primary:#78aa9d;
  --ks2-primary-soft:#1b3029;
  --ks2-accent:#d99a6d;
  --ks2-shadow:0 8px 24px rgba(0,0,0,.18);
  --ks2-shadow-lg:0 18px 46px rgba(0,0,0,.26);
}
html,body{
  max-width:100%;
  overflow-x:hidden;
}
body{
  background:var(--ks2-bg)!important;
  color:var(--ks2-ink)!important;
}
a,button,input,select,textarea{min-width:0}
img{display:block;max-width:100%}
.shell{
  width:100%;
  max-width:1040px!important;
  margin:0 auto;
  padding-left:18px!important;
  padding-right:18px!important;
}
.app{padding-bottom:92px!important}

/* Header */
.topbar{
  background:var(--ks2-surface)!important;
  border-bottom:1px solid var(--ks2-border)!important;
  box-shadow:0 1px 0 rgba(15,25,20,.025)!important;
  backdrop-filter:none!important;
}
.topbar-inner{
  min-height:64px!important;
  gap:12px!important;
}
.brand{
  min-width:0;
  max-width:52%;
  gap:10px!important;
  font-size:15px!important;
}
.brand > span:last-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.brand-logo,.mark{
  flex:0 0 auto;
  width:34px!important;
  height:34px!important;
  border-radius:11px!important;
}
.top-actions{
  gap:6px!important;
  flex:0 0 auto;
}
.icon-btn,.ghost-btn,.btn{
  border-radius:12px!important;
  border-color:var(--ks2-border)!important;
  background:var(--ks2-surface)!important;
  color:var(--ks2-ink)!important;
  box-shadow:none!important;
  transform:none!important;
}
.icon-btn{
  width:40px!important;
  min-height:40px!important;
  padding:0!important;
}
.btn{
  background:var(--ks2-primary)!important;
  border-color:var(--ks2-primary)!important;
  color:#fff!important;
  font-weight:800!important;
}
.btn.secondary,.ghost-btn{
  background:var(--ks2-surface)!important;
}
.btn:hover,.ghost-btn:hover,.icon-btn:hover{
  transform:none!important;
  box-shadow:none!important;
  border-color:#c9d5cf!important;
}
.btn:active,.ghost-btn:active,.icon-btn:active{transform:scale(.985)!important}

/* Global rhythm */
main.shell{
  padding-bottom:26px!important;
}
.section{
  padding:20px 0!important;
}
.section + .section{
  padding-top:4px!important;
}
.section-head{
  align-items:flex-end!important;
  margin-bottom:11px!important;
}
.section-head h2{
  font-size:17px!important;
  line-height:1.2!important;
}
.section-head p{
  margin-top:4px!important;
  font-size:12px!important;
  line-height:1.45!important;
}
.eyebrow{
  font-size:10px!important;
  letter-spacing:.13em!important;
}
h1,h2,h3,p{overflow-wrap:anywhere}

/* Home */
.ks-route-home .hero-lite{
  padding:26px 0 10px!important;
}
.ks-route-home .hero-lite:after{
  display:none!important;
}
.ks-route-home .hero-lite h1{
  max-width:680px!important;
  margin:5px 0 9px!important;
  font-size:clamp(31px,6.7vw,46px)!important;
  line-height:1.04!important;
  letter-spacing:-.05em!important;
}
.ks-route-home .hero-lite p{
  max-width:620px!important;
  margin:0!important;
  font-size:14px!important;
  line-height:1.6!important;
}
.search-row{
  width:100%;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 40px!important;
  gap:8px!important;
  padding:9px 0 14px!important;
}
.search{
  min-width:0;
}
.search input{
  width:100%!important;
  height:48px!important;
  border-radius:14px!important;
  border:1px solid var(--ks2-border)!important;
  background:var(--ks2-surface)!important;
  box-shadow:none!important;
  color:var(--ks2-ink)!important;
}
.search span{
  top:10px!important;
}
.search-row > .icon-btn{
  width:40px!important;
  height:48px!important;
  border-radius:14px!important;
}
.category-scroll{
  display:flex!important;
  gap:7px!important;
  padding:1px 0 3px!important;
  overflow-x:auto!important;
  overscroll-behavior-x:contain;
}
.chip{
  flex:0 0 auto;
  min-height:36px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  border:1px solid var(--ks2-border)!important;
  background:var(--ks2-surface)!important;
  color:var(--ks2-ink)!important;
  box-shadow:none!important;
  transform:none!important;
}
.chip.active{
  background:var(--ks2-primary)!important;
  border-color:var(--ks2-primary)!important;
  color:#fff!important;
}

/* Surfaces */
.panel,.mini-card,.notice,.auth-box,.profile-panel{
  background:var(--ks2-surface)!important;
  border:1px solid var(--ks2-border)!important;
  border-radius:var(--ks2-r3)!important;
  box-shadow:none!important;
}
.panel{
  padding:17px!important;
  margin-bottom:10px!important;
}
.panel:hover{box-shadow:none!important}
.mini-card{
  padding:15px!important;
  border-radius:var(--ks2-r2)!important;
}
.notice{
  padding:14px 15px!important;
  border-radius:var(--ks2-r2)!important;
  box-shadow:none!important;
}

/* Products */
.product-list{
  display:grid!important;
  gap:7px!important;
}
.product-row{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  width:100%!important;
  min-width:0!important;
  padding:11px!important;
  border:1px solid var(--ks2-border)!important;
  border-radius:14px!important;
  background:var(--ks2-surface)!important;
  box-shadow:none!important;
  transform:none!important;
}
.product-row:hover{
  transform:none!important;
  box-shadow:none!important;
  border-color:#cbd7d1!important;
}
.product-img{
  flex:0 0 auto!important;
  width:50px!important;
  height:50px!important;
  border-radius:14px!important;
  border:1px solid var(--ks2-border)!important;
  background:var(--ks2-surface-2)!important;
}
.product-main{
  min-width:0!important;
  flex:1 1 auto!important;
}
.product-title{
  margin:0!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.3!important;
}
.product-meta,.data-meta{
  font-size:11px!important;
  line-height:1.4!important;
  color:var(--ks2-muted)!important;
}
.price{
  flex:0 0 auto!important;
  font-size:13px!important;
  font-weight:800!important;
}
.arrow{
  flex:0 0 auto!important;
}

/* Homepage featured products: two-column cards on mobile instead of tiny four-up cards */
.ks-featured-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
.ks-featured-grid .product-row{
  min-height:142px!important;
  padding:14px 10px!important;
  flex-direction:column!important;
  justify-content:center!important;
  text-align:center!important;
  border-radius:16px!important;
}
.ks-featured-grid .product-img{
  width:62px!important;
  height:62px!important;
  border-radius:17px!important;
  margin:0 0 9px!important;
}
.ks-featured-grid .product-main{
  width:100%!important;
}
.ks-featured-grid .product-title{
  font-size:12.5px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.ks-featured-grid .product-meta,
.ks-featured-grid .price,
.ks-featured-grid .arrow{
  display:none!important;
}

/* Banner / carousel */
.ks-carousel{
  width:100%!important;
  margin:4px 0 2px!important;
  border-radius:var(--ks2-r3)!important;
  overflow:hidden!important;
}
.ks-carousel-track{will-change:transform}
.ks-slide{
  min-width:100%!important;
}
.ks-slide .panel{
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
}
.ks-slide .banner-image{
  width:100%!important;
  aspect-ratio:2.35/1!important;
  object-fit:cover!important;
  margin:0!important;
  border-radius:0!important;
  background:var(--ks2-surface-2)!important;
}
.ks-slide .panel h3,
.ks-slide .panel > .eyebrow,
.ks-slide .panel > p,
.ks-slide .panel > a{
  margin-left:16px!important;
  margin-right:16px!important;
}
.ks-slide .panel > .eyebrow{
  margin-top:13px!important;
}
.ks-slide .panel > h3{
  margin-top:5px!important;
  margin-bottom:5px!important;
}
.ks-slide .panel > p{
  margin-bottom:14px!important;
}
.ks-slide .panel > a{
  display:inline-flex!important;
  margin-bottom:16px!important;
}
.ks-carousel-controls{
  left:10px!important;
  right:10px!important;
  bottom:10px!important;
}
.ks-carousel-arrow{
  width:32px!important;
  height:32px!important;
  border-radius:10px!important;
}

/* Grid / forms */
.grid-2{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
.form-grid{
  gap:12px!important;
}
.field-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
.field label{
  margin-bottom:5px!important;
  font-size:11px!important;
  color:var(--ks2-muted)!important;
}
.field input,.field select,.field textarea{
  width:100%!important;
  min-height:46px!important;
  border-radius:13px!important;
  border:1px solid var(--ks2-border)!important;
  background:var(--ks2-surface)!important;
  color:var(--ks2-ink)!important;
  box-shadow:none!important;
}
.field textarea{min-height:108px!important}
.field input:focus,.field select:focus,.field textarea:focus,.search input:focus{
  border-color:var(--ks2-primary)!important;
  box-shadow:0 0 0 3px rgba(23,70,63,.08)!important;
}
.row{
  min-width:0!important;
}
.row > *{
  min-width:0;
}
.summary-line{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)!important;
  align-items:start!important;
  gap:10px!important;
  padding:9px 0!important;
}
.summary-line > *:last-child{
  text-align:right;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.status{
  border-radius:999px!important;
  padding:5px 8px!important;
  font-size:10px!important;
  font-weight:800!important;
  white-space:nowrap;
}
.progress{gap:5px!important}
.progress .step{height:5px!important;border-radius:999px!important}

/* Product detail */
main[data-ks-route="product"] .panel > .row{
  align-items:flex-start!important;
}
main[data-ks-route="product"] .panel > .row > :last-child{
  min-width:0!important;
  flex:1 1 auto!important;
}
main[data-ks-route="product"] .panel h3{
  font-size:15px!important;
}
main[data-ks-route="product"] .panel .product-row input[type="radio"]{
  flex:0 0 auto;
  margin-top:2px;
}

/* Profile */
.profile-page{
  padding-top:22px!important;
}
.profile-hero{
  gap:12px!important;
  margin-bottom:12px!important;
}
.profile-identity{
  min-width:0!important;
}
.profile-title{
  font-size:25px!important;
}
.profile-metrics{
  grid-template-columns:1.35fr 1fr 1fr!important;
  gap:8px!important;
  margin:10px 0!important;
}
.profile-balance,.profile-metric{
  min-height:100px!important;
  padding:14px!important;
  border:1px solid var(--ks2-border)!important;
  background:var(--ks2-surface)!important;
  box-shadow:none!important;
  border-radius:16px!important;
}
.profile-balance strong{
  font-size:22px!important;
}
.profile-metric strong{
  font-size:20px!important;
}
.profile-quick{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:7px!important;
}
.profile-quick a{
  padding:11px!important;
  background:var(--ks2-surface)!important;
  border:1px solid var(--ks2-border)!important;
  border-radius:14px!important;
  box-shadow:none!important;
}
.quick-icon{
  width:28px!important;
  height:28px!important;
  border-radius:9px!important;
}
.profile-columns{
  gap:8px!important;
}

/* Notifications */
.ks-notification-panel{
  background:var(--ks2-surface)!important;
  border-color:var(--ks2-border)!important;
  border-radius:18px!important;
  box-shadow:var(--ks2-shadow-lg)!important;
}
.ks-notification-head{
  padding:14px 15px!important;
}
.ks-notification-list{
  padding:5px!important;
}
.ks-notification-item{
  border-radius:12px!important;
  padding:11px 9px!important;
}
.ks-notification-item strong{font-size:12.5px!important}
.ks-notification-item span{font-size:11px!important}
.ks-notification-time{font-size:9px!important}

/* Status / empty / modal */
.empty{
  padding:24px 12px!important;
  border-color:var(--ks2-border)!important;
  background:transparent!important;
}
.modal{
  background:rgba(9,16,13,.48)!important;
  padding:14px!important;
}
.modal > div,.modalbox{
  width:min(680px,100%)!important;
  max-height:calc(100vh - 28px)!important;
  border-radius:20px!important;
  background:var(--ks2-surface)!important;
  border:1px solid var(--ks2-border)!important;
  box-shadow:var(--ks2-shadow-lg)!important;
}

/* Bottom navigation */
.bottom-nav{
  background:var(--ks2-surface)!important;
  border-top:1px solid var(--ks2-border)!important;
  box-shadow:0 -7px 24px rgba(18,31,25,.06)!important;
  backdrop-filter:none!important;
}
.bottom-inner{
  max-width:1040px!important;
  padding-top:5px!important;
  padding-bottom:calc(5px + env(safe-area-inset-bottom))!important;
  gap:2px!important;
}
.nav-item{
  min-height:48px!important;
  border-radius:13px!important;
  color:var(--ks2-muted)!important;
  font-size:10px!important;
}
.nav-item.active{
  background:var(--ks2-primary-soft)!important;
  color:var(--ks2-primary)!important;
}
.nav-icon{
  font-size:16px!important;
}

/* Home informational tiles: quieter, not oversized cards */
.ks-route-home .grid-2 .mini-card strong{
  font-size:13px!important;
  line-height:1.35!important;
}
.ks-route-home .grid-2 .mini-card span{
  font-size:11px!important;
  line-height:1.45!important;
}

/* History / activity rows */
.history-toolbar{
  gap:7px!important;
}
.history-toolbar input,.history-toolbar select{
  min-height:44px!important;
}

/* Admin */
body.ks-admin{
  background:var(--ks2-bg)!important;
}
body.ks-admin .wrap{
  max-width:1160px!important;
  padding-left:18px!important;
  padding-right:18px!important;
}
body.ks-admin .top{
  background:var(--ks2-surface)!important;
  border-bottom:1px solid var(--ks2-border)!important;
  backdrop-filter:none!important;
}
body.ks-admin .topin{
  min-height:64px!important;
}
body.ks-admin .main{
  padding-top:18px!important;
}
body.ks-admin .hero{
  gap:14px!important;
  margin-bottom:10px!important;
}
body.ks-admin .hero h1{
  font-size:27px!important;
  line-height:1.1!important;
}
body.ks-admin .nav{
  gap:6px!important;
  padding-bottom:8px!important;
  margin-bottom:10px!important;
}
body.ks-admin .nav button{
  min-height:40px!important;
  padding:0 12px!important;
  border-radius:11px!important;
  background:var(--ks2-surface)!important;
  border-color:var(--ks2-border)!important;
  box-shadow:none!important;
}
body.ks-admin .nav button.active{
  background:var(--ks2-primary)!important;
  border-color:var(--ks2-primary)!important;
  box-shadow:none!important;
}
body.ks-admin .card{
  background:var(--ks2-surface)!important;
  border-color:var(--ks2-border)!important;
  border-radius:18px!important;
  box-shadow:none!important;
  padding:16px!important;
  margin-bottom:10px!important;
}
body.ks-admin .grid4{
  gap:8px!important;
}
body.ks-admin .grid3{
  gap:8px!important;
}
body.ks-admin .grid2{
  gap:8px!important;
}
body.ks-admin .kpi{
  border-color:var(--ks2-border)!important;
  border-radius:14px!important;
  background:var(--ks2-surface)!important;
  padding:13px!important;
}
body.ks-admin .kpi strong{
  font-size:20px!important;
}
body.ks-admin .field-grid{
  gap:8px!important;
}
body.ks-admin .field input,
body.ks-admin .field select,
body.ks-admin .field textarea{
  border-color:var(--ks2-border)!important;
  border-radius:12px!important;
  box-shadow:none!important;
}
body.ks-admin .item{
  gap:9px!important;
  padding:11px 0!important;
  border-bottom-color:var(--ks2-border)!important;
}
body.ks-admin .actions{
  gap:5px!important;
}
body.ks-admin .footer{
  padding-bottom:24px!important;
}

/* Avoid accidental horizontal growth from long JSON/order IDs */
code,.code,pre,.meta,.data-meta,.product-meta,.profile-email{
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
.table-scroll{
  max-width:100%;
  overflow-x:auto!important;
}

/* Mobile */
@media(max-width:700px){
  .shell{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .topbar-inner{
    min-height:60px!important;
  }
  .brand{max-width:48%!important}
  .hero-lite h1{
    font-size:30px!important;
  }
  .section{
    padding:17px 0!important;
  }
  .section + .section{
    padding-top:2px!important;
  }
  .grid-2{
    grid-template-columns:1fr!important;
  }
  .field-grid{
    grid-template-columns:1fr!important;
  }
  .profile-metrics{
    grid-template-columns:1.25fr 1fr!important;
  }
  .profile-metric:last-child{
    grid-column:1 / -1;
    min-height:82px!important;
  }
  .profile-quick{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .profile-columns{
    grid-template-columns:1fr!important;
  }
  .profile-hero{
    align-items:flex-start!important;
  }
  .profile-status{
    flex:0 0 auto;
  }
  .summary-line{
    grid-template-columns:minmax(0,1fr) minmax(96px,1.1fr)!important;
  }
  .ks-notification-panel{
    left:10px!important;
    right:10px!important;
    bottom:calc(74px + env(safe-area-inset-bottom))!important;
    top:auto!important;
    width:auto!important;
    max-height:70vh!important;
  }
  body.ks-admin .wrap{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  body.ks-admin .grid4{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.ks-admin .grid3{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.ks-admin .grid2{
    grid-template-columns:1fr!important;
  }
  body.ks-admin .item{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.ks-admin .actions{
    justify-content:flex-start!important;
  }
}
@media(max-width:380px){
  .shell{padding-left:12px!important;padding-right:12px!important}
  .top-actions{gap:4px!important}
  .top-actions .icon-btn{width:38px!important}
  .brand{gap:8px!important}
  .brand > span:last-child{font-size:13px!important}
  .ks-featured-grid{gap:7px!important}
  .ks-featured-grid .product-row{min-height:134px!important}
  .ks-featured-grid .product-img{width:58px!important;height:58px!important}
}
@media(min-width:701px){
  .ks-featured-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  .ks-route-home .grid-2{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  body.ks-admin .grid3{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important;
  }
}


/* v2.1 detail refinements */
.product-fallback-icon{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-size:18px;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--ks2-primary);
  background:var(--ks2-primary-soft);
}
.ks-home-promo{padding-top:7px!important}
.ks-home-promo .panel{margin-bottom:0!important}
.promo-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:0;
}
.promo-copy{
  min-width:0;
  flex:1 1 auto;
}
.promo-copy h3{
  margin:3px 0 4px!important;
  font-size:16px!important;
  line-height:1.25!important;
}
.promo-copy p{
  margin:0!important;
  font-size:12px!important;
  line-height:1.5!important;
}
.promo-cta{
  flex:0 0 auto;
}
.footer{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:18px 0 24px!important;
  color:var(--ks2-muted)!important;
  font-size:11px!important;
}
.ks-footer-brand{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ks-footer-brand strong{
  color:var(--ks2-ink);
  font-size:12px;
}
.ks-footer-brand span{
  line-height:1.45;
  overflow-wrap:anywhere;
}
.ks-footer-links{
  display:flex;
  gap:12px;
  flex:0 0 auto;
}
.ks-footer-links a{
  color:var(--ks2-muted)!important;
}
h1,h2,h3,h4,h5,h6{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
@media(max-width:700px){
  .promo-row{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
  .promo-cta{
    align-self:flex-start;
  }
  .footer{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:10px!important;
  }
}