/* Shared icon proportions and a mobile-only search drawer. */
.header-icon,.main-header .cart-btn-mobile,.desktop-header #cart-btn{display:inline-flex;position:relative;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;padding:0;border:1px solid var(--border-color,#e2e6eb);border-radius:12px;background:var(--surface-color,#fff);color:var(--secondary-color,#234776);cursor:pointer;transition:background .18s,transform .18s}
.header-icon svg{width:21px;height:21px;pointer-events:none}
.header-icon:hover{background:var(--surface-muted,#eef2f7)}
.header-icon:focus-visible,#mobile-search-panel input:focus-visible{outline:2px solid var(--primary-color,#315efb);outline-offset:3px}
.main-header .cart-btn-mobile i,.desktop-header #cart-btn i{font-size:20px}
.main-header .header-right{gap:6px}
.desktop-header .theme-button{margin-inline:8px}
#mobile-search-panel{position:fixed;top:110px;inset-inline:0;z-index:1001;padding:12px 16px 16px;background:var(--surface-color,#fff);border-bottom:1px solid var(--border-color,#e2e6eb);box-shadow:0 12px 24px #14253a12;animation:search-panel-in .18s ease-out}
#mobile-search-panel[hidden]{display:none!important}
#mobile-search-panel .menu-search{position:relative;margin:0;width:100%;padding:0}
#mobile-search-panel input,.desktop-search input{height:46px!important;padding:10px 15px!important;width:100%;border:1px solid var(--border-color,#dce2ea)!important;border-radius:12px!important;background:var(--surface-muted,#f5f7fa);color:var(--text-color,#202a38);font-family:inherit;font-size:16px}
#mobile-search-panel .search-suggestions,.desktop-search .search-suggestions{max-height:min(420px,55dvh);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--border-color,#e2e6eb);border-radius:14px;background:var(--surface-color,#fff)}
.search-suggestions .suggestion-item{border-bottom:1px solid var(--border-color,#edf0f4);padding:8px 10px;margin:0;outline-offset:-3px}
.search-suggestions .suggestion-item:last-child{border-bottom:0}
.search-suggestions .sug-thumb{width:52px;height:52px;object-fit:contain;flex-shrink:0;border-radius:9px;background:#fff}
.search-suggestions .sug-item{display:flex;align-items:center;gap:12px}
.search-suggestions .sug-content{min-width:0;flex:1}
.search-suggestions .sug-title{font-size:14px;color:var(--text-color,#202a38)}
.search-suggestions .sug-price{font-size:13px;color:var(--primary-color,#315efb)}
.search-suggestions .search-empty{padding:18px;text-align:center;color:var(--text-color,#374151);font-size:14px;cursor:default}
.search-reset,.catalog-retry{padding:10px 20px;margin-top:14px;border:0;border-radius:10px;background:var(--primary-color,#315efb);color:#fff;font:inherit;cursor:pointer}
#noResultsMessage{font-size:18px;padding:32px 16px}
#noResultsMessage p,.catalog-error p{font-size:14px;margin:8px 0;color:var(--text-color,#5c6777)}
.catalog-error{grid-column:1/-1;padding:36px 20px;text-align:center;border:1px solid var(--border-color,#e2e6eb);border-radius:16px;background:var(--surface-color,#fff)}
.cards .shimmer-card{pointer-events:none}
.cards .shimmer-card .image{height:150px}
.cards .shimmer-card .shirt_text{height:22px;width:75%;margin:15px auto 2px;padding:0}
.cards .shimmer-card .info{height:34px;width:52%;margin:0 auto 8px}
.cards .shimmer-card .actions{height:34px;margin:0 5px 5px;border-radius:8px}
body.dark .main-header .cart-btn-mobile,body.dark .desktop-header #cart-btn,body.dark .header-icon,body.dark #mobile-search-panel,body.dark .search-suggestions,body.dark .catalog-error{background:#20242b;color:#f3f4f6;border-color:#3a414b}
body.dark #mobile-search-panel input,body.dark .desktop-search input{background:#161b22;color:#f3f4f6}
body.dark .search-suggestions .sug-title,body.dark .search-suggestions .search-empty,body.dark #noResultsMessage p{color:#e5e7eb}
@media(max-width:991px){.main-header{display:grid;grid-template-columns:1fr auto 1fr;gap:8px}.main-header .burger-btn{justify-self:start;margin-top:0!important}.main-header .header-right{justify-self:end}.main-header>.logo-img{justify-self:center}.main-header .logo-img{width:40px}.main-header .cart-count-mobile{top:-7px;right:-5px}}
@media(max-width:360px){.main-header{padding-inline:8px;gap:4px}.header-icon,.main-header .cart-btn-mobile{width:36px;height:40px;min-width:36px}.main-header .header-right{gap:3px}}
@media(min-width:992px){#mobile-search-panel,#mobile-search-toggle{display:none!important}.desktop-header .desktop-center{min-width:180px}.desktop-header .desktop-search{width:100%;max-width:420px;margin-inline:16px}.desktop-header .desktop-right{gap:8px}.desktop-header .header-link{font-size:12px}}
@keyframes search-panel-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#mobile-search-panel{animation:none}.shimmer{animation:none!important}}

/* Keep all header controls on the same vertical center. */
.main-header .header-right,.desktop-header .desktop-right{align-items:center}
.main-header #cart-container,.desktop-header #cart-container{display:flex;align-items:center;justify-content:center;margin:0;padding:0;line-height:1;align-self:center}
.header-icon,.main-header .cart-btn-mobile,.desktop-header #cart-btn{margin-block:0;line-height:1;vertical-align:middle;align-self:center}
.header-icon svg,.main-header .cart-btn-mobile i,.desktop-header #cart-btn i{display:block;width:21px;height:21px;line-height:21px;margin:0;padding:0;text-align:center}

/* Cart glyph follows the same light/dark foreground as adjacent controls. */
body.dark .main-header .cart-btn-mobile i,body.dark .desktop-header #cart-btn i{color:inherit}

/* Store name remains readable against the dark storefront hero. */
body.dark .hero-content #storeName2{color:#f3f4f6}