/* ==========================================================================
header-icons.css — abt.com-style header action icons (additive / reversible)
--------------------------------------------------------------------------
Wired into theme-MV-2026 via in
templates/parts/full-header.html. Styles the action-icon cluster rendered by
the builder (SiteHeader.cs): account, favorites (heart),
cart and compare. Big no-text SVGs, vertically centered, hover state, and a
small RED count badge top-right that only shows when count > 0.
These rules complement (and where needed override) the auto-generated managed
header block in styles.css. Nothing here edits SiteThemeCss.cs.
========================================================================== */
/* The action cluster: icons live in mv-hdr-right / wherever the builder puts
cart + account. Drop the zone-divider "|" and tighten the gap so the icons
read as one evenly spaced row like abt.com. */
.mv-hdr-action,
.mv-hdr-cart,
.mv-hdr-account,
.mv-hdr-fav,
.mv-hdr-compare {
position: relative;
display: inline-flex;
align-items: center;
}
/* Even, comfortable spacing between the action icons; kill the inherited
"*+* :: before '|'" zone divider just for these icon elements. */
.mv-hdr-right .mv-hdr-cart,
.mv-hdr-right .mv-hdr-account,
.mv-hdr-right .mv-hdr-fav,
.mv-hdr-right .mv-hdr-compare {
margin-left: 6px;
}
/* Pack the action icons tight on the right edge, and give the search box more room. */
.mv-header-main .mv-hdr-right { justify-content: flex-end; gap: 4px; padding-right: 0; }
.mv-header-main .mv-hdr-center { flex: 1 1 auto; }
.mv-header-main .mv-hdr-search,
.mv-header-main .mv-hdr-search .mv-searchbar,
.mv-header-main .mv-hdr-search #search-header { width: 100%; max-width: 960px; }
/* Drop the search bar lower in the header row (align it down). */
#header .mv-header-main .mv-hdr-search { margin-top: 34px; }
/* Checkout "view terms" popover (#popoverpage iframe): hide the site chrome so the
framed page shows ONLY its content — client-side fallback for the server ?bare=1 mode.
marocdata.js adds .mv-popover-frame to when loaded inside that iframe. */
.mv-popover-frame #header,
.mv-popover-frame #header-menu,
.mv-popover-frame #footer,
.mv-popover-frame #breadcrumb,
.mv-popover-frame .breadcrumbs { display: none !important; }
.mv-popover-frame, .mv-popover-frame body { background: #fff !important; }
/* The legacy "#header #search-header{width:auto!important;float:right!important}"
rules (styles.css:4209/4615) shrink-wrap the wrapper to the bar's content, so the
bar never fills the zone and the input collapses. Out-specify them (2 IDs + 2 classes)
so the wrapper fills the zone and the bar/input grow to the 800px cap. */
#header .mv-header-main .mv-hdr-search #search-header { width: 100% !important; max-width: 100% !important; float: none !important; }
.mv-header-main .mv-searchbar__input { width: 100%; }
/* The .mv-searchbar is z-index:50 (styles.css), below the sticky #header-menu (z-index:900),
so its recent-searches dropdown (.mv-recent-search) renders BEHIND the menu. Lift the whole
bar above the menu whenever the recent panel is open (.mv-recent-open toggled by
AutocompleteSearch.js) — a class, not just :focus-within, so it stays lifted through the
mousedown that picks a list item. Same z-index the category dropdown uses via .mv-cat-open. */
.mv-searchbar:focus-within,
.mv-searchbar.mv-recent-open { z-index: 1001; }
/* The theme's "#header li{display:inline;padding:0}" (styles.css:2953) collapses the
recent-search items onto one line and strips their padding. Out-specify it: each recent
search is its own row with comfortable padding. */
#header .mv-recent-list li { display: flex; align-items: center; padding: 14px 18px; }
/* Move the ↺ icon from the left to the far right end of the row. */
#header .mv-recent-list li .mv-recent-ico { order: 2; margin-left: auto; }
.mv-hdr-right .mv-hdr-cart::before,
.mv-hdr-right .mv-hdr-account::before,
.mv-hdr-right .mv-hdr-fav::before,
.mv-hdr-right .mv-hdr-compare::before {
content: none !important;
display: none !important;
}
/* Common icon "button": a square hit target, centered SVG, hover state. */
.mv-icon-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
color: inherit;
text-decoration: none;
border-radius: 8px;
transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.mv-icon-link:hover,
.mv-icon-link:focus {
background-color: rgba(0, 0, 0, .06);
color: inherit;
text-decoration: none;
}
.mv-icon-link:active {
transform: translateY(1px);
}
.mv-icon-link svg {
width: 28px;
height: 28px;
display: block;
fill: currentColor;
pointer-events: none;
}
/* RED count badge, top-right, circular. Hidden by default; the server adds
.is-on (or JS sets display:flex) only when count > 0. */
.mv-badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
box-sizing: border-box;
display: none; /* shown when count > 0 */
align-items: center;
justify-content: center;
background: #d0021b; /* abt-style red */
color: #fff;
font: 700 11px/1 Arial, Helvetica, sans-serif;
border-radius: 999px;
border: 2px solid #fff; /* crisp ring like the reference */
z-index: 2;
pointer-events: none;
}
.mv-badge.is-on {
display: inline-flex;
}
/* --- Cart -----------------------------------------------------------------
The cart element keeps #notificationsLoader / #shopping_cart (add2cart JS)
and the .cortlink summary alive, but the summary TEXT is visually hidden so
the header shows only the icon + red badge (abt-style). The badge mirrors the
number inside .cortlink via the small inline script in SiteHeader.cs. */
.mv-hdr-cart .mv-cart-iconwrap {
position: relative;
display: inline-flex;
align-items: center;
}
.mv-hdr-cart #shopping_cart.mv-cart-svg svg {
width: 28px;
height: 28px;
}
/* Keep .cortlink in the DOM (the add2cart JS writes the count into it) but make
it invisible and non-interactive — its number is reflected into .mv-cart-qty. */
.mv-hdr-cart .cortlink {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
pointer-events: none;
}
/* The cart's live qty badge reuses the shared red-badge look — same size + position as the
favorites/compare .mv-badge so all three header counts look identical. */
.mv-cart-qty {
position: absolute;
top: -2px;
right: -2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
box-sizing: border-box;
align-items: center;
justify-content: center;
background: #d0021b;
color: #fff;
font: 700 11px/1 Arial, Helvetica, sans-serif;
border-radius: 999px;
border: 2px solid #fff;
z-index: 2;
pointer-events: none;
}
/* --- Account dropdown caret tweak (keeps the existing menu behavior) ------- */
.mv-hdr-account .mv-account-caret {
margin-left: -4px;
}
/* Icon SIZE is row-specific (user: "make the larger icons in the SECOND/main header, not
both — revert the top header"). The big abt-style icons belong to the MAIN header row only;
the top utility bar keeps compact icons. Base .mv-icon-link (42/28) stays as a fallback. */
.mv-header-main .mv-icon-link { width: 48px; height: 48px; }
.mv-header-main .mv-icon-link svg { width: 30px; height: 30px; }
.mv-header-main .mv-hdr-cart #shopping_cart.mv-cart-svg svg { width: 30px; height: 30px; }
.mv-header-top .mv-icon-link { width: 28px; height: 28px; border-radius: 6px; }
.mv-header-top .mv-icon-link svg { width: 17px; height: 17px; }
.mv-header-top .mv-hdr-cart #shopping_cart.mv-cart-svg svg { width: 17px; height: 17px; }
.mv-header-top .mv-hdr-right .mv-hdr-cart,
.mv-header-top .mv-hdr-right .mv-hdr-account,
.mv-header-top .mv-hdr-right .mv-hdr-fav,
.mv-header-top .mv-hdr-right .mv-hdr-compare { margin-left: 10px; }
/* The top bar's count badges shrink to match the smaller icons. */
.mv-header-top .mv-badge,
.mv-header-top .mv-cart-qty { min-width: 15px; height: 15px; font-size: 10px; border-width: 1px; }
/* Main header: the action icons + the search button keep their own fixed brand colour,
independent of the mega-menu colour setting (so the menu-override colour styles ONLY the
mega-menu and never the icons/buttons). */
.mv-header-main .mv-icon-link { color: #396b9e; }
.mv-header-main .mv-icon-link:hover,
.mv-header-main .mv-icon-link:focus { color: #497bae; background-color: rgba(0, 0, 0, .06); }
.mv-header-main .mv-searchbar__btn {
background: #396b9e !important;
border-color: #396b9e !important;
color: #fff !important;
}
.mv-header-main .mv-searchbar__btn:hover { background: #497bae !important; }
/* Bigger search-button icon (was 18px). */
.mv-header-main .mv-searchbar .mv-searchbar__btn svg { width: 24px; height: 24px; }
/* Voice (mic) button: JS-injects it with a fixed 38px height into the 44px bar, which
align-items:stretch then aligns to the TOP. Center it vertically. */
.mv-header-main .mv-searchbar .mv-mic-btn { align-self: center; }
/* Count badges stay red regardless (abt-style alert dot) — only the icon glyph is brand-coloured. */
/* On small widths the icons stay in a tidy row. */
@media (max-width: 640px) {
.mv-icon-link { width: 38px; height: 38px; }
.mv-icon-link svg { width: 24px; height: 24px; }
.mv-hdr-right .mv-hdr-cart,
.mv-hdr-right .mv-hdr-account,
.mv-hdr-right .mv-hdr-fav,
.mv-hdr-right .mv-hdr-compare { margin-left: 10px; }
}