/* Prakuway storefront header — one responsive layout system. */
:root{--store-header:84px;--brand-purple:#6254e8;--brand-ink:#20223e}
html{max-width:100%;overflow-x:clip;scroll-padding-top:calc(var(--store-header) + 16px)}body{min-width:0;max-width:100%;overflow-x:clip}main{min-width:0;max-width:100%;margin-top:var(--store-header)}
.app-header{position:fixed;inset:0 0 auto;height:var(--store-header);z-index:1000;background:#fff;color:var(--brand-ink);border-bottom:1px solid #e9e9f3;box-shadow:0 4px 24px #26204f06;backdrop-filter:none}
.app-header .app-container{height:100%;max-width:1520px;margin:auto;padding:0 32px;display:flex;align-items:center;gap:32px;min-width:0}
.header-brand{display:flex;align-items:center;justify-content:flex-start;width:160px;min-width:0;flex:0 0 160px;align-self:stretch;text-decoration:none}
.header-wordmark{display:block;width:148px;height:auto;max-width:100%;overflow:hidden;mix-blend-mode:multiply}
.app-header .search-bar{display:flex;align-items:center;gap:12px;flex:1 1 440px;min-width:0;max-width:640px;height:46px;margin:0;padding:0 8px 0 16px;border:1px solid #e7e6f2;border-radius:12px;background:#f7f7fc;box-shadow:none;transition:border-color .2s,box-shadow .2s}
.app-header .search-bar:focus-within{transform:none;background:#fff;border-color:#a19af1;box-shadow:0 0 0 3px #6254e810}
.search-leading{font-size:15px;color:#85849f;flex-shrink:0}
.app-header .search-input{min-width:0;width:100%;border:0;background:transparent;outline:0;font:500 13px Inter,sans-serif;color:#262640}
.app-header .search-input::placeholder{color:#9695aa;opacity:1}
.search-submit{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border:0;border-radius:8px;background:#ece9ff;color:var(--brand-purple);font-size:13px}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:20px;flex:0 0 auto;font-size:12px;font-weight:600;white-space:nowrap}
.header-shop{color:#727085;padding:10px 0}.header-account,.header-cart{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;color:#343249;position:relative;text-decoration:none}.header-account{padding:0 13px;border:1px solid #e8e6f2;border-radius:10px}.header-account i,.header-cart i{font-size:17px}.header-cart{padding:0 4px 0 0}.header-actions a:hover{color:var(--brand-purple)}
.app-header .cart-badge{position:absolute;right:-9px;top:-3px;min-width:18px;height:18px;width:auto;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:9px;line-height:1;background:var(--brand-purple);border:2px solid white;animation:none;box-shadow:none}
.header-icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;background:#fff;border:1px solid #ebeaf4;border-radius:10px;color:#39364e;font-size:16px}
.sidebar{padding-top:calc(var(--store-header) + 16px);z-index:900}.sidebar-backdrop{position:fixed;inset:var(--store-header) 0 0;z-index:800;background:#1b193e66;border:0;backdrop-filter:blur(2px)}.sidebar-backdrop[hidden]{display:none}
.app-header a:focus-visible,.app-header button:focus-visible{outline:3px solid #a69cf5;outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1024px){.sidebar-backdrop{display:none!important}}
@media(max-width:1199px){.header-shop{display:none}.app-header .app-container{padding:0 24px;gap:24px}.header-brand{width:148px;flex-basis:148px}.header-wordmark{width:140px}.header-actions{gap:16px}}
@media(min-width:768px) and (max-width:1023px){.app-header .app-container{gap:16px;padding:0 20px}.header-brand{width:134px;flex-basis:134px}.header-wordmark{width:130px}.header-account{padding:0 10px}.header-cart .cart-label{display:none}}
@media(max-width:767px){
 :root{--store-header:118px}
 .app-header .app-container{display:grid;grid-template-columns:34px minmax(0,1fr) auto;grid-template-rows:64px 40px;gap:0 10px;padding:0 16px 14px}
 .header-brand{width:auto;min-width:0;max-width:136px;align-self:center;justify-self:start;height:54px}
 .header-wordmark{width:124px;max-height:52px;max-width:100%}
 .header-icon{width:34px;height:34px}
 .app-header .search-bar{grid-row:2;grid-column:1/-1;width:100%;max-width:none;height:40px;padding-left:13px;border-radius:10px;gap:10px}
 .app-header .search-input{font-size:12px}
 .search-leading{font-size:14px}.search-submit{height:28px;width:28px;border-radius:7px}
 .header-actions{gap:14px;margin-left:0}.header-account{border:0;padding:0;width:30px;min-height:38px}.header-cart{width:30px;padding:0;min-height:38px}.header-account span,.cart-label,.header-shop{display:none}.header-account i,.header-cart i{font-size:18px}
 .sidebar{width:min(280px,85vw)}main{padding:16px}
}
@media(max-width:374px){.app-header .app-container{padding-left:12px;padding-right:12px;column-gap:8px}.header-wordmark{width:114px}.header-actions{gap:8px}}
@media(max-width:320px){.header-wordmark{width:102px}.header-actions{gap:4px}}
@media(prefers-reduced-motion:reduce){.sidebar,.search-bar{transition:none!important}}

/* Compact search, without reducing the input font on phones. */
.app-header .search-bar{flex:0 1 420px;max-width:420px;height:38px;padding-left:13px;border-radius:9px;gap:9px}
.search-submit{width:27px;height:27px;border-radius:6px;font-size:11px}
.app-header .search-input{font-size:12px}
.search-leading{font-size:13px}
@media(max-width:767px){:root{--store-header:110px}.app-header .app-container{grid-template-rows:62px 36px;padding-bottom:12px}.app-header .search-bar{width:100%;max-width:none;height:36px;padding-left:12px}.search-submit{width:25px;height:25px}.app-header .search-input{font-size:12px}}

/* Header composition: align branding with sidebar, search with page content. */
@media(min-width:1024px){
 :root{--store-header:78px}
 .app-header{border-top:3px solid #6254e8;border-bottom:1px solid #e9e7f4;box-shadow:0 3px 18px #22184c04}
 .app-header .app-container{display:grid;grid-template-columns:224px minmax(180px,1fr) auto;gap:56px;padding:0 32px;max-width:none;height:75px}
 .header-brand{width:224px;height:75px;justify-content:center;align-items:center;align-self:center}
 .header-wordmark{width:132px;height:auto;max-height:57px}
 .app-header .search-bar{width:100%;max-width:680px;height:42px;min-width:0;margin:0;border-radius:10px;background:#f5f4fb;border-color:#eeecf7}
 .header-actions{margin:0;gap:20px}
 .header-shop{display:none}
 .header-account{background:#6254e8;border:1px solid #6254e8;color:white;min-height:40px;padding:0 15px;border-radius:9px;font-size:12px;gap:8px}
 .header-account:hover{background:#5143d1;color:white!important}
 .header-cart{min-height:40px;padding:0 3px;color:#4a435e;font-size:12px;gap:8px}
 .header-account i,.header-cart i{font-size:16px}
 .search-submit{background:#e8e4fc;color:#6453cb;width:29px;height:29px}
}
@media(min-width:1024px) and (max-width:1199px){.app-header .app-container{grid-template-columns:224px minmax(160px,1fr) auto;gap:36px;padding:0 24px}.header-actions{gap:14px}}
@media(min-width:768px) and (max-width:1023px){.app-header .search-bar{flex:1;max-width:none;height:40px}.header-shop{display:none}.header-wordmark{width:126px}}
@media(max-width:767px){
 :root{--store-header:112px}
 .app-header{border-top:2px solid #6254e8;background:white}
 .app-header .app-container{grid-template-rows:60px 36px;padding-bottom:14px;gap:0 10px}
 .header-brand{max-width:124px;justify-self:center;justify-content:center;height:54px}
 .header-wordmark{width:112px;max-height:46px}
 .header-icon{border:0;background:#f5f3fb;width:34px;height:34px;border-radius:9px;color:#584c85}
 .app-header .search-bar{height:36px;width:100%;max-width:none;background:#f6f5fb;border-color:#efedf7;border-radius:9px}
 .header-account,.header-cart{width:30px;background:none;border:0;color:#4e4267}
 .header-actions{gap:12px}
}
@media(max-width:320px){.header-wordmark{width:100px}.header-actions{gap:6px}}