/* EKANNTO v37 — responsive design system refinement. Presentation only; existing workflows remain intact. */
:root{--ek-espresso:#382215;--ek-espresso-2:#543625;--ek-caramel:#9d7958;--ek-cream:#fbf7f1;--ek-paper:#fffdfa;--ek-line:#eadfd3;--ek-muted:#796b60;--ek-radius:22px;--ek-shadow:0 12px 36px rgba(56,34,21,.07);color-scheme:light}
html{scroll-behavior:smooth;scroll-padding-top:90px}body{background:var(--ek-cream);color:var(--ek-espresso);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a,[role=button]{-webkit-tap-highlight-color:transparent}a{transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease}button{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}button:active,.btn:active{transform:translateY(1px)}:focus-visible{outline:3px solid #b18a61;outline-offset:3px}
.container{width:min(100% - 36px,1240px);margin-inline:auto}.header{background:rgba(255,253,250,.94);backdrop-filter:blur(18px);border-bottom:1px solid rgba(234,223,211,.9);box-shadow:0 5px 22px rgba(56,34,21,.035)}.header-main{min-height:78px;gap:18px}.brand{gap:12px}.brand img{border-radius:14px;box-shadow:0 2px 8px #38221512}.brand-name{letter-spacing:.095em;font-weight:850}.searchbox,.round-btn,.quick-tile,.os-mini{border:1px solid var(--ek-line);background:var(--ek-paper);box-shadow:0 4px 16px #38221508}.searchbox{border-radius:17px;min-height:50px}.round-btn{border-radius:15px}.desk-nav a{border-radius:12px;padding:11px 14px;transition:background .18s ease,color .18s ease}.desk-nav a:hover,.desk-nav a.active{background:#f0e5d8;color:var(--ek-espresso)}
.page{padding-bottom:34px}.section{margin-top:32px}.section-head{align-items:end;gap:16px;margin-bottom:17px}.eyebrow,.intro-label,.hero-eyebrow{letter-spacing:.15em;font-weight:800}.section-title{letter-spacing:-.035em;line-height:1.12}.hero{border-radius:30px;overflow:hidden;box-shadow:0 18px 44px #38221516}.first-paint-banner{background:radial-gradient(ellipse at 85% 25%,#805a40 0,transparent 38%),linear-gradient(115deg,#2c1a11,#573725 72%,#694934);}.hero h1{letter-spacing:-.055em;line-height:1.02}.btn,.button,.primary-btn{border-radius:14px;font-weight:750;transition:transform .18s ease,box-shadow .18s ease}.btn:not(.light),.primary-btn{box-shadow:0 8px 20px #38221520}.btn:hover,.button:hover,.primary-btn:hover{box-shadow:0 10px 26px #38221522;transform:translateY(-1px)}.btn.light{box-shadow:0 3px 0 #d8c6b4}.quick-access{gap:13px}.quick-tile{border-radius:19px;padding:18px;min-height:86px}.quick-tile:hover,.os-mini:hover{transform:translateY(-2px);box-shadow:var(--ek-shadow);border-color:#d3bba4}.quick-symbol{border-radius:14px;background:#f3e9de;color:var(--ek-espresso)}.empty{border:1px dashed #d9c8b8;border-radius:20px;background:linear-gradient(135deg,#fffdfa,#f8f0e7);padding:30px 20px;color:var(--ek-muted)}.empty h3{color:var(--ek-espresso)}
/* Common cards and forms across storefront, seller and administration */.card,.panel,.stat-card,.dashboard-card,.settings-card,.product-card,.plan-card,.payment-card,.form-card,.checkout-card,.seller-card,.admin-card{border-radius:20px;border:1px solid var(--ek-line);box-shadow:0 5px 22px rgba(56,34,21,.045)}.card,.panel,.stat-card,.dashboard-card,.settings-card,.form-card,.checkout-card,.seller-card,.admin-card{background:var(--ek-paper)}.product-card{overflow:hidden;background:#fffdfa;transition:transform .2s ease,box-shadow .2s ease}.product-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px #38221514}.product-card img{object-fit:cover}.input, input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border:1px solid #dfd0c2;border-radius:13px;background:#fffdfa;color:var(--ek-espresso);min-height:46px}input:focus,select:focus,textarea:focus{border-color:#9d7958;box-shadow:0 0 0 3px #9d79581b;outline:none}label{font-weight:650}.badge,.status,.pill{border-radius:999px}.footer{border-top:1px solid var(--ek-line);background:#f5ede4}.mobile-nav{background:rgba(255,253,250,.96);backdrop-filter:blur(18px);border-top:1px solid var(--ek-line);box-shadow:0 -8px 28px #3822150a}.mobile-nav a{border-radius:16px}.skip-link:focus{z-index:9999}
/* Keep the premium-plan checkout legible and prevent long text/controls from overflowing on phones. */.plan-card,.pricing-card{overflow:hidden}.plan-card h2,.pricing-card h2{line-height:1.12}.plan-card .price,.pricing-card .price{font-variant-numeric:tabular-nums}.table-wrap,.table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}table{border-collapse:separate;border-spacing:0;min-width:100%}th{font-size:.82em;letter-spacing:.035em;color:#796b60;background:#f8f1e9}td,th{padding:12px 14px;border-bottom:1px solid #eee3d8;text-align:left}tr:last-child td{border-bottom:0}
@media(min-width:900px){.section{margin-top:42px}.quick-access{grid-template-columns:repeat(4,minmax(0,1fr))}.hero{border-radius:32px}.page{min-height:60vh}}
@media(max-width:700px){.container{width:min(100% - 24px,1240px)}.header-main{min-height:66px;gap:10px}.brand{gap:8px}.brand img{width:38px;height:38px}.brand-name{font-size:clamp(16px,4.5vw,22px);letter-spacing:.065em}.brand-sub{display:none!important}.searchbox{min-width:0;flex:1;min-height:44px;padding:0 10px}.search-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-actions{gap:7px}.section{margin-top:26px}.section-title{font-size:clamp(23px,6vw,31px)}.hero{border-radius:23px}.first-paint-banner{min-height:260px}.hero h1{font-size:clamp(34px,9vw,48px)}.quick-access{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.quick-tile{padding:13px;min-height:78px;border-radius:16px}.quick-tile small{line-height:1.3}.empty{padding:24px 16px}.mobile-nav{padding:7px 6px calc(7px + env(safe-area-inset-bottom));gap:2px}.mobile-nav a{font-size:11px;padding:8px 3px;min-width:0}.mobile-nav svg{width:21px;height:21px}.footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}.card,.panel,.stat-card,.dashboard-card,.settings-card,.form-card,.checkout-card,.seller-card,.admin-card{border-radius:17px}.table-wrap table,.table-responsive table{min-width:620px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}