/* EKANNTO Professional Espresso Edition v2 — strict two-colour system */
:root{
 --brown:#382215;--white:#FFFFFF;--ink:#382215;--paper:#FFFFFF;--canvas:#FFFFFF;
 --surface:#FFFFFF;--surface-2:#FFFFFF;--cream:#FFFFFF;--line:rgba(56,34,21,.16);
 --muted:#382215;--gold:#382215;--shadow:0 8px 26px rgba(56,34,21,.07);
 --shadow-lift:0 18px 44px rgba(56,34,21,.13);--radius:20px;
 color-scheme:light; accent-color:#382215;
}
html{background:#fff;color:#382215;scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{background:#fff!important;color:#382215!important;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;letter-spacing:-.012em;-webkit-font-smoothing:antialiased}
body :where(h1,h2,h3,h4,h5,h6,p,span,label,small,strong,li,dt,dd,legend,summary){text-wrap:pretty}
body :where(p,span,label,small,li,dd,dt){color:inherit}
::selection{background:#382215;color:#fff}
*{box-sizing:border-box}
img,video,svg{max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:#382215}
input,select,textarea{background:#fff!important;color:#382215!important;border:1px solid rgba(56,34,21,.2)!important;border-radius:12px}
input::placeholder,textarea::placeholder{color:#786b64!important;opacity:1}
button,a,[role=button],[data-open]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a{color:#382215}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid #382215!important;outline-offset:3px}
button{transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease}
button:active,[role=button]:active{transform:scale(.985)}
button:disabled{opacity:.55;cursor:not-allowed}
.shell{width:min(100%,1600px);margin-inline:auto;padding-inline:clamp(14px,3vw,48px);padding-bottom:max(100px,env(safe-area-inset-bottom))}
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:clamp(8px,1.5vw,20px);background:rgba(255,255,255,.96)!important;color:#382215;border-bottom:1px solid var(--line)!important;box-shadow:0 6px 24px rgba(56,34,21,.045);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding-block:12px!important}
.brand{color:#382215!important;font-weight:850;letter-spacing:-.055em;min-width:0}
.brand img{object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:13px}
.searchbar{min-width:0;background:#fff!important;border:1px solid var(--line)!important;border-radius:999px!important;box-shadow:none!important;overflow:hidden}
.searchbar:focus-within{border-color:#382215!important;box-shadow:0 0 0 3px rgba(56,34,21,.09)!important}
.searchbar input{min-width:0;background:#fff!important;border:0!important;box-shadow:none!important}
.searchbar button{background:#fff!important;color:#382215!important;border:0!important}
.round{flex-shrink:0;background:#fff!important;color:#382215!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:none!important}
.round:hover{background:#382215!important;color:#fff!important;border-color:#382215!important}
.hero{position:relative;isolation:isolate;overflow:hidden;background:#382215!important;color:#fff!important;border:1px solid #382215;border-radius:26px!important;box-shadow:0 16px 36px rgba(56,34,21,.14);padding:clamp(22px,4vw,52px)!important}
.hero :where(h1,h2,h3,p,span,small,a){color:#fff!important}
.hero h1{font-size:clamp(29px,4.6vw,54px)!important;line-height:1.06!important;letter-spacing:-.055em!important;max-width:760px}
.hero p{opacity:.88;max-width:58ch}
.hero .visual{opacity:.18}
.headline{gap:12px;margin-block:clamp(24px,3vw,38px) 15px}
.headline h2{color:#382215!important;font-size:clamp(20px,2vw,27px)!important;letter-spacing:-.04em}
.headline button,.link{color:#382215!important}
button:not(.round):not(.hero-controls button),.btn,.button{border-radius:12px}
:where(.primary,.btn-primary,.button-primary,.checkout-btn,.buy-btn,.add-cart,.submit-btn){background:#382215!important;color:#fff!important;border:1px solid #382215!important;font-weight:750;box-shadow:0 5px 12px rgba(56,34,21,.12)}
:where(.primary,.btn-primary,.button-primary,.checkout-btn,.buy-btn,.add-cart,.submit-btn):hover{background:#fff!important;color:#382215!important;box-shadow:0 0 0 1px #382215 inset}
:where(.secondary,.btn-secondary,.button-secondary,.outline-btn){background:#fff!important;color:#382215!important;border:1px solid var(--line)!important}
:where(.secondary,.btn-secondary,.button-secondary,.outline-btn):hover{border-color:#382215!important;background:#fff!important}
:where(.card,.product-card,.product,.product-item,.panel,.stat-card,.category-card,.store-card,.order-card,.cart-item,.result-card,.modal-card,.sheet,.empty,.filter-panel,.admin-card,.seller-card){background:#fff!important;color:#382215!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:0 5px 20px rgba(56,34,21,.045)}
:where(.product-card,.product,.product-item,.store-card,.category-card){overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
:where(.product-card,.product,.product-item,.store-card,.category-card):hover{transform:translateY(-3px);border-color:rgba(56,34,21,.38)!important;box-shadow:var(--shadow-lift)}
:where(.product-card,.product,.product-item) img{object-fit:cover}
:where(.product-card,.product,.product-item) :where(h3,h4,.price,.product-name){color:#382215!important}
:where(.price,.amount,.total,.money){color:#382215!important;font-weight:800}
:where(.badge,.tag,.chip,.pill,.status){background:#fff!important;color:#382215!important;border:1px solid var(--line)!important;border-radius:999px}
:where(.active,.selected,[aria-current=page]){color:#382215}
:where(.tabs,.tab-list,.filter-chips,.category-list){display:flex;flex-wrap:wrap;gap:8px}
:where(.tabs button,.tab-list button,.filter-chips button,.category-list button){background:#fff!important;color:#382215!important;border:1px solid var(--line)!important;border-radius:999px!important}
:where(.tabs button.active,.tab-list button.active,.filter-chips button.active,.category-list button.active,[aria-selected=true]){background:#382215!important;color:#fff!important;border-color:#382215!important}
:where(.bottom-nav,.mobile-nav,.bottom-navigation){background:rgba(255,255,255,.98)!important;color:#382215!important;border-top:1px solid var(--line)!important;box-shadow:0 -8px 24px rgba(56,34,21,.06);padding-bottom:env(safe-area-inset-bottom);backdrop-filter:blur(16px)}
:where(.bottom-nav,.mobile-nav,.bottom-navigation) :where(a,button,span,svg){color:inherit}
:where(.bottom-nav,.mobile-nav,.bottom-navigation) :where(.active,[aria-current=page]){color:#382215!important;font-weight:800}
:where(.nav-item,.menu-item,.sidebar a,.admin-nav a){border-radius:12px;transition:background .18s ease}
:where(.nav-item,.menu-item,.sidebar a,.admin-nav a):hover,:where(.nav-item,.menu-item,.sidebar a,.admin-nav a).active{background:#fff!important;color:#382215!important;box-shadow:inset 0 0 0 1px var(--line)}
:where(.admin-layout,.dashboard-layout,.seller-layout){min-width:0}
:where(.sidebar,.admin-sidebar,.seller-sidebar){background:#fff!important;color:#382215!important;border-right:1px solid var(--line)!important}
:where(.admin-header,.dashboard-header,.seller-header){background:#fff!important;color:#382215!important;border-bottom:1px solid var(--line)!important}
:where(table){width:100%;border-collapse:collapse;background:#fff;color:#382215}
:where(th,td){padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
:where(th){font-weight:800;background:#fff;color:#382215}
:where(.table-wrap,.table-responsive){max-width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:14px}
:where(.modal,.dialog,.overlay){z-index:100;background:rgba(25,15,10,.48)}
:where(.modal-content,.dialog-content,.drawer,.sheet-content){background:#fff!important;color:#382215!important;border:1px solid var(--line)!important;border-radius:22px!important;box-shadow:0 24px 70px rgba(56,34,21,.2)}
:where(.toast,.notification){background:#382215!important;color:#fff!important;border-radius:12px;box-shadow:0 12px 30px rgba(56,34,21,.18)}
:where(.toast,.notification) *{color:#fff!important}
:where(.empty) p,:where(.muted,.subtle,.helper-text,.description){color:#66564d!important}
:where(.divider,hr){border:0;border-top:1px solid var(--line)}
:where(.skeleton,.loading,.boot){background:#fff;color:#382215}
:where(.skeleton){animation:ek-pulse 1.4s ease-in-out infinite}
@keyframes ek-pulse{0%,100%{opacity:1}50%{opacity:.58}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(min-width:1100px){.product-grid,.products-grid,.grid-products{gap:20px!important}.hero{min-height:320px}}
@media(max-width:760px){
 .shell{padding-inline:14px;padding-bottom:calc(94px + env(safe-area-inset-bottom))}
 .top{gap:8px;padding-block:9px!important;flex-wrap:wrap}
 .brand{font-size:20px!important}.brand img{width:36px!important;height:36px!important}
 .searchbar{order:3;flex:1 0 100%;min-height:44px!important}
 .hero{border-radius:20px!important;min-height:230px;padding:22px!important}
 .hero h1{font-size:clamp(28px,8vw,39px)!important}
 .headline{margin-top:24px}
 :where(.product-grid,.products-grid,.grid-products){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 :where(.product-card,.product,.product-item){min-width:0;border-radius:14px!important}
 :where(.product-card,.product,.product-item) img{max-width:100%}
 :where(.modal-content,.dialog-content,.drawer,.sheet-content){max-width:calc(100vw - 20px);max-height:88dvh;overflow:auto}
 :where(input,select,textarea){max-width:100%;min-width:0}
 :where(.admin-layout,.dashboard-layout,.seller-layout){grid-template-columns:minmax(0,1fr)!important}
 :where(.sidebar,.admin-sidebar,.seller-sidebar){max-width:100%;border-right:0!important}
 :where(th,td){padding:10px;font-size:13px}
}
@media(max-width:360px){:where(.product-grid,.products-grid,.grid-products){gap:8px!important}.shell{padding-inline:10px}}