/* as-header.css (HP2, 2026-10-24): compact phone header + small desktop tidy-ups.
   Linked from catalog/controller/common/header.php with ?v=<mtime>; do not move these
   rules into stylesheet.css (Cloudflare keeps that file for weeks). */

/* Cart badge is for phones only */
.as-cart-count { display: none; }

/* Social icons on one line (desktop): fewer wraps, no jump when social_media.js swaps them */
.social-icn { font-size: 12px; line-height: 1; white-space: nowrap; margin-top: 4px; min-height: 24px; }
.social-icn img { width: 24px; height: 24px; }

@media (max-width: 767.98px) {
	#top { display: flow-root; padding: 4px 0; margin-bottom: 8px; min-height: 0; } /* contain the floated nav lists */
	#top .nav > .list-inline { margin-bottom: 0; }
	#top .list-inline-item:not(:last-child) { margin-right: .4rem; }

	/* logo | cart  /  search (full width) */
	header .container > .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; width: 100%; margin: 0; }
	header .container > .row > * { width: auto; max-width: none; padding: 0; margin: 0; }
	header .hdr-logo { grid-column: 1; grid-row: 1; }
	header .hdr-cart { grid-column: 2; grid-row: 1; margin-bottom: 0 !important; }
	header .hdr-search { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; }

	#logo { margin: 0; }
	#logo img { width: auto; height: 40px; max-width: 160px; }

	#search { margin-bottom: 8px; }
	#search .form-control-lg { height: 42px; font-size: 16px; } /* 16px: no iOS zoom on focus */
	#search .btn-lg { padding: .5rem 20px; }

	#header-cart { margin-bottom: 0; }
	#header-cart .btn-lg { position: relative; width: 48px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; border-radius: 8px; }
	#header-cart .btn-lg::after { display: none; }
	#header-cart .as-cart-text { display: none; }
	#header-cart .as-cart-count { display: inline-block; position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #cc0000; color: #fff; border: 2px solid #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
	#header-cart .dropdown-menu { width: calc(100vw - 24px); max-width: 430px; }
	#header-cart .dropdown-menu li { min-width: 0; }

	/* "Follow us" icons live in the footer on phones */
	.social-icn { display: none !important; }

	/* Slimmer Categories bar */
	#menu.navbar { margin-bottom: 10px; padding: 0 .75rem; min-height: 38px; }
	#menu #category { line-height: 38px; font-size: 15px; }
	#menu .navbar-toggler { padding: .2rem .55rem; font-size: 1rem; }
}