/* ============================================================
PaperRolls-N-More — "Modern Navy" Redesign
Drop-in override stylesheet for the PaperRollsnMore theme.
Load LAST (after style.css / deputy / response / gradient)
so it wins the cascade. Touches NO merge codes — it only
restyles the theme's existing classes.
Pattern & palette match the Foundation "Modern Navy" redesign.
============================================================ */
/* Fonts (Archivo for headings, IBM Plex Sans for body) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
/* ---------- 1. THEME TOKENS ------------------------------- */
:root {
/* Remap the theme's brand blue to the refined navy palette */
--prnm-blue: #2C4690; /* deep action navy */
--primary: #2C4690;
--primary-light: #A8BAE4;
--primary-dark: #111111; /* deep ink navy */
--primary-hover: #2C4690; /* brighter action blue on hover */
--muted: #8a93a3;
--lite-text: #5c6677;
--accent: #f4f7fc;
--light: #f6f8fb;
--border: #e6e9f0;
--control-border: #d4d9e3;
--font-sans-serif: "IBM Plex Sans", system-ui, sans-serif;
--font-heading: "Archivo", system-ui, sans-serif;
/* --prnm-red is left red on purpose: it also colors error states. */
}
/* ---------- 2. BASE TYPE ---------------------------------- */
body,
.LayoutMiddle,
table {
font-family: var(--font-sans-serif) !important;
color: #111111;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.ProductDetails h1.ProductDetailsProductName,
.ProductDetails .ProductDetailsProductName small {
font-family: var(--font-heading) !important;
font-weight: 800;
letter-spacing: -0.02em;
color: #111111;
}
p { color: #333c4d; }
a { color: #2C4690; }
a:hover, a:focus { color: #1E3268; text-decoration: none; }
/* ---------- 3. BUTTONS ------------------------------------ */
.ThemeButton,
body input.ThemeButton,
.btn-primary {
background: #2C4690 !important;
border: 1px solid #2C4690 !important;
border-radius: 10px !important;
box-shadow: none !important;
text-shadow: none !important;
color: #fff !important;
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: .01em;
transition: background-color .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.ThemeButton:hover, .ThemeButton:focus,
body input.ThemeButton:hover,
.btn-primary:hover, .btn-primary:focus {
background: #2C4690 !important;
border-color: #2C4690 !important;
box-shadow: 0 8px 20px rgba(44,70,144,.22) !important;
}
.ThemeButton:active { transform: translateY(1px); }
.AddToCartThemeButton, .SignInThemeButton, .PlaceOrderThemeButton,
.OnePageCheckoutPlaceOrderThemeButton, .CheckoutThemeButton,
.ShoppingCartCheckoutThemeButton, #btnPlaceOrder {
background: #2C4690 !important;
border: 1px solid #2C4690 !important;
border-radius: 10px !important;
box-shadow: none !important;
text-shadow: none !important;
font-family: var(--font-heading);
font-weight: 700;
}
.AddToCartThemeButton:hover, .SignInThemeButton:hover,
.PlaceOrderThemeButton:hover, .OnePageCheckoutPlaceOrderThemeButton:hover,
.CheckoutThemeButton:hover, .ShoppingCartCheckoutThemeButton:hover,
#btnPlaceOrder:hover {
background: #2C4690 !important;
border-color: #2C4690 !important;
box-shadow: 0 8px 20px rgba(44,70,144,.22) !important;
}
.FacebookButton { background-color: #2C4690; }
.FacebookButton:hover { background-color: #2C4690; }
/* ---------- 4. FORM CONTROLS ------------------------------ */
input[type=text], input[type=password], input[type=email], select, textarea {
border: 1.5px solid var(--control-border);
border-radius: 8px;
color: #111111;
}
input[type=text]:focus, input[type=password]:focus,
input[type=email]:focus, select:focus, textarea:focus {
border-color: #2C4690 !important;
box-shadow: 0 0 0 3px rgba(44,70,144,.15) !important;
}
/* ---------- 5. HEADER ------------------------------------- */
.topgrey { background: #ffffff; border-bottom: 1px solid var(--border); }
.LayoutTopTop { background: #fff; }
.LayoutTopTop.scrolled { box-shadow: 0 6px 20px rgba(17,17,17,.14); }
.calltext { font-family: var(--font-sans-serif); color: #111111; }
.calltext a { color: #2C4690; font-family: var(--font-heading); }
.calltext a:hover { color: #2C4690; }
/* Search box */
.h-search #txtRedirectSearchBox {
border: 1.5px solid var(--control-border);
border-radius: 10px 0 0 10px;
padding: 8px 14px;
}
.h-search #btnSearchBox1, .h-search .ThemeButton {
border-radius: 0 10px 10px 0 !important;
}
/* Utility top bar (added in HeaderPage) */
.mn-topbar {
background: #111111;
color: #C6CCDE;
font-size: 12.5px;
letter-spacing: .02em;
}
.mn-topbar-inner {
max-width: 1500px;
margin: 0 auto;
padding: 8px 30px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.mn-topbar a { color: #C6CCDE; text-decoration: none; }
.mn-topbar a:hover { color: #fff; }
.mn-topbar .mn-topbar-links { display: flex; gap: 22px; align-items: center; }
@media screen and (max-width: 599px) { .mn-topbar { display: none; } }
/* ---------- 6. PRIMARY NAV -------------------------------- */
.navbar.navbar-default {
background: #111111 !important;
border: none;
border-radius: 0;
}
.navbar-default .navbar-nav > li > a {
color: #d3dbe9 !important;
font-family: var(--font-sans-serif);
font-weight: 500;
font-size: 14px;
letter-spacing: .01em;
border-bottom: 2px solid transparent;
transition: color .15s, border-color .15s, background .15s;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover {
color: #ffffff !important;
background: rgba(255,255,255,.04) !important;
border-bottom-color: #2C4690;
}
.navbar-default .navbar-brand { color: #fff !important; font-family: var(--font-heading); }
.navbar-default .navbar-toggle { border-color: rgba(255,255,255,.3); }
.navbar-default .navbar-toggle .icon-bar { background-color: #fff; }
.navbar .dropdown-menu {
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 18px 40px rgba(17,17,17,.16);
padding: 6px;
}
.navbar .dropdown-menu > li > a { border-radius: 8px; padding: 8px 12px; color: #111111; }
.navbar .dropdown-menu > li > a:hover { background: #F1F4FB; color: #2C4690; }
.badge { background-color: #2C4690 !important; font-weight: 700; }
/* ---------- 7. HOMEPAGE ----------------------------------- */
/* H1 under hero banner */
.Control_29435 h1 { color: #111111; }
.h1-subline { color: #5c6677; }
/* Value / trust bar (FreeShippingFlex) */
.FreeShippingFlex { margin-top: 20px; }
.FreeShippingFlex div {
background: #ffffff;
border: 1px solid var(--border);
border-radius: 14px;
height: auto;
padding: 18px 14px 14px;
transition: border-color .18s, box-shadow .18s, transform .18s;
}
.FreeShippingFlex div:hover {
border-color: #2C4690;
box-shadow: 0 12px 28px rgba(44,70,144,.12);
transform: translateY(-2px);
}
.FreeShippingFlex h3 {
color: #111111;
font-family: var(--font-heading) !important;
font-weight: 700;
font-size: 15px;
text-transform: uppercase;
letter-spacing: .04em;
}
.FreeShippingFlex p { color: #5c6677; }
/* Category tiles */
h2.CategoryFlexTitle, h2.BlogFlexTitle, h2.ResourceFlexTitle {
color: #111111;
font-weight: 800;
}
.CategoryFlex div.CategoryBox,
.CategoryFlex div.CategoryBox.BlueBack,
.CategoryFlex div.CategoryBox.GreenBack,
.CategoryFlex div.CategoryBox.RedBack {
background: #f6f8fb;
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: none;
transition: all .18s;
}
.CategoryFlex div.CategoryBox:hover {
background: #ffffff;
border-color: #2C4690;
box-shadow: 0 12px 28px rgba(44,70,144,.12);
transform: translateY(-2px);
}
.CategoryFlex h3 {
color: #111111;
font-family: var(--font-heading) !important;
font-weight: 700;
font-size: 18px;
}
.CategoryFlex p { color: #5c6677; }
.CategoryFlexButton,
.CategoryFlexButton.GreenBack,
.CategoryFlexButton.GrayBack,
.CategoryFlexButton.RedBack,
.BlogFlexButton, .ResourceFlexButton, .TwoColumnFlexButton {
background-color: #2C4690;
border-radius: 8px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 13px;
padding: 10px 14px;
line-height: 1;
transition: background-color .15s;
}
.CategoryFlexButton:hover,
.CategoryFlexButton.GreenBack:hover,
.CategoryFlexButton.GrayBack:hover,
.CategoryFlexButton.RedBack:hover,
.BlogFlexButton:hover, .ResourceFlexButton:hover, .TwoColumnFlexButton:hover {
background-color: #2C4690;
}
/* Carousel product cards */
.Carousel h2, .ControlHeader { color: #111111; }
.Carousel li {
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
padding: 12px;
transition: box-shadow .18s, border-color .18s, transform .18s;
}
.Carousel li:hover {
box-shadow: 0 16px 34px rgba(17,17,17,.11);
border-color: #d4dbe8;
transform: translateY(-3px);
}
.Carousel li a { font-family: var(--font-heading); font-weight: 600; color: #111111; }
.Carousel li a:hover { color: #2C4690; }
/* Price emphasis — navy instead of red */
.AsLowAsPrice { color: #5c6677; font-family: var(--font-sans-serif); }
.AsLowAsPriceEmphasis {
color: #111111;
font-family: var(--font-heading);
font-weight: 800;
}
.lblPrice, .CategoryProductPrice {
color: #111111;
font-family: var(--font-heading);
font-weight: 800;
}
/* ---------- 8. PRODUCT CARDS (grid/category) --------------- */
.homepage-product, .category-product {
background: #fff;
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
transition: box-shadow .18s, border-color .18s, transform .18s;
}
.homepage-product:hover, .category-product:hover {
box-shadow: 0 16px 34px rgba(17,17,17,.11);
border-color: #d4dbe8;
transform: translateY(-3px);
}
.homepage-product .thumbnail, .category-product .thumbnail {
background: linear-gradient(135deg,#f2f5fa,#e7edf6);
border: none;
border-radius: 0;
margin-bottom: 0;
}
.quick-view {
background: #111111;
border-radius: 8px;
font-family: var(--font-heading);
font-weight: 700;
}
.quick-view:hover { background: #2C4690; }
.product-flag { border: none; box-shadow: none; }
.product-flag span {
background: #2C4690;
font-family: var(--font-heading);
font-weight: 700;
font-size: 11px;
letter-spacing: .05em;
text-transform: uppercase;
padding: 5px 0;
}
/* Pagination */
.Pagination li > a, .pagination > li > a, .pagination > li > span {
color: #2C4690;
border-color: var(--border);
border-radius: 8px;
}
.pagination > .active > a { background-color: #2C4690; border-color: #2C4690; }
/* ---------- 9. PRODUCT DETAILS ----------------------------- */
.ProductDetails h1.ProductDetailsProductName { letter-spacing: -.02em; }
.ProductDetails #lblPriceLabel {
font-family: var(--font-heading);
font-weight: 800;
color: #111111;
}
.ProductDetailsQuantityPriceTable td:nth-child(even) {
background-color: #2C4690;
border-radius: 4px;
}
.ProductDetailsAvailability, #lblProductStatus { color: #2C4690; font-weight: 600; }
.varpicmax_img { border-radius: 8px; }
.ProductDetailsSelectedVariant {
border-color: #2C4690;
box-shadow: 0 0 0 3px rgba(44,70,144,.2);
}
/* jQuery-UI tabs on product page */
.ui-tabs .ui-tabs-panel { border: 1px solid var(--border); border-radius: 0 12px 12px 12px; }
.ui-state-active, .ui-widget-content .ui-state-active { background: #2C4690; }
.ui-state-active:hover, .ui-widget-content .ui-state-active:hover { background: #2C4690; }
.ui-state-default, .ui-widget-content .ui-state-default { background: #eef1f6; border-radius: 8px 8px 0 0; }
/* ---------- 10. CART / CHECKOUT ---------------------------- */
.well {
background: #f6f8fb;
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: none;
}
.panel {
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 10px 30px rgba(17,17,17,.05);
}
.SmallCartItem img { border-radius: 8px; }
.checkout label { font-weight: 600; color: #333c4d; }
/* ---------- 11. FOOTER ------------------------------------- */
.LayoutBottom {
background: #111111;
color: #9aa7bd;
}
.LayoutBottom p, .LayoutBottom span, .LayoutBottom li { color: #9aa7bd; }
.LayoutBottom .h4, .LayoutBottom .nav-header {
font-family: var(--font-heading) !important;
font-weight: 700;
font-size: 13px !important;
letter-spacing: .06em;
text-transform: uppercase;
color: #ffffff !important;
}
.LayoutBottom .h4 em, .LayoutBottom .nav-header em { font-style: normal; }
.LayoutBottom a { color: #9aa7bd; font-size: 14px; }
.LayoutBottom a:hover { color: #ffffff; }
.LayoutBottom a[href^="tel:"], .LayoutBottom a[href^="mailto:"] { color: #A8BAE4; }
.LayoutBottom .icon-facebook, .LayoutBottom .icon-twitter,
.LayoutBottom .icon-youtube, .LayoutBottom .icon-instagram,
.LayoutBottom .icon-pinterest, .LayoutBottom .icon-tumblr { color: #C6CCDE; }
.LayoutBottom hr { border-color: rgba(255,255,255,.08); }
/* ---------- 12. MISC --------------------------------------- */
.CategoryHeader, .page-header {
border-bottom: none;
}
.breadcrumb { background: #f5f5f5; font-size: 13px; padding-left: 20px; }
.breadcrumb a { color: #5c6677; }
.breadcrumb a:hover { color: #2C4690; }
::selection { background: #2C4690; color: #fff; }
/* ============================================================
12. MODERN NAVY COMPONENT SYSTEM
Ported 1:1 from the approved "Storefront Redesign" mockup.
Values below are the mockup's literal values — do not round.
============================================================ */
:root {
/* Ink */
--mn-ink: #111111; /* deepest navy — utility bar, footer */
--mn-navy: #111111; /* heading / hero / nav navy */
--mn-action: #2C4690; /* action navy — secondary buttons */
--mn-blue: #2C4690; /* bright blue — primary CTA, accents */
--mn-blue-hover: #1E3268;
--mn-blue-soft: #A8BAE4; /* on-dark accent text */
/* Text */
--mn-text: #111111;
--mn-text-2: #3c4657;
--mn-text-3: #5c6677;
--mn-text-4: #8a93a3;
--mn-on-dark: #C2CBE2;
--mn-on-dark-2: #9aa7bd;
--mn-on-dark-3: #C6CCDE;
/* Lines & surfaces */
--mn-border: #e6e9f0;
--mn-border-input: #d4d9e3;
--mn-hairline: #eef1f6;
--mn-surface: #ffffff;
--mn-surface-2: #f6f8fb;
--mn-surface-3: #F1F4FB;
--mn-surface-4: #F7F9FD;
--mn-icon-well: #EEF1F9;
--mn-page: #eef1f6;
/* Status */
--mn-green: #2C4690;
--mn-green-bg: #FBE9EA;
--mn-star: #CB252B;
--mn-danger: #c0392b;
/* Product image placeholder */
--mn-ph: linear-gradient(135deg,#f2f5fa,#e7edf6);
--mn-ph-icon: #b9c6dc;
/* Geometry */
--mn-container: 1400px; /* v4: listing pages need room for a 4-up grid beside the filter rail */
--mn-gutter: 28px;
--mn-r-sm: 8px;
--mn-r: 10px;
--mn-r-md: 12px;
--mn-r-lg: 14px;
--mn-r-xl: 16px;
--mn-r-2xl: 18px;
--mn-r-pill: 100px;
/* Elevation */
--mn-shadow-card: 0 10px 30px rgba(17,17,17,.05);
--mn-shadow-hover: 0 16px 34px rgba(17,17,17,.11);
--mn-shadow-tile: 0 12px 28px rgba(44,70,144,.12);
--mn-shadow-cta: 0 8px 20px rgba(44,70,144,.22);
}
/* ---------- 12.1 Layout primitives ------------------------- */
.mn-wrap {
max-width: var(--mn-container);
margin: 0 auto;
padding-left: var(--mn-gutter);
padding-right: var(--mn-gutter);
}
.mn-section { padding-top: 44px; padding-bottom: 20px; }
.mn-section--lead { padding-top: 56px; }
.mn-sec-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
margin-bottom: 26px;
}
.mn-eyebrow {
display: block;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--mn-blue);
}
.mn-sec-title {
font-family: var(--font-heading);
font-size: 30px;
font-weight: 800;
letter-spacing: -.02em;
color: var(--mn-navy);
margin-top: 8px;
}
.mn-sec-link {
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
/* ---------- 12.2 Buttons ----------------------------------- */
.mn-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-heading);
font-weight: 700;
border: none;
cursor: pointer;
border-radius: var(--mn-r);
transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
text-decoration: none;
}
.mn-btn--primary { background: var(--mn-blue); color: #fff; font-size: 15px; padding: 15px 30px; }
.mn-btn--primary:hover, .mn-btn--primary:focus { background: var(--mn-blue-hover); color: #fff; }
.mn-btn--navy { background: var(--mn-action); color: #fff; font-size: 14px; padding: 13px 24px; border-radius: 9px; }
.mn-btn--navy:hover, .mn-btn--navy:focus { background: var(--mn-blue); color: #fff; }
.mn-btn--light { background: #fff; color: var(--mn-navy); font-size: 14px; padding: 13px 24px; border-radius: 9px; }
.mn-btn--ghost {
background: rgba(255,255,255,.08);
color: #fff;
font-size: 15px;
padding: 15px 28px;
border: 1px solid rgba(255,255,255,.18);
}
.mn-btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.mn-btn--outline {
border: 1.5px solid var(--mn-action);
background: none;
color: var(--mn-action);
padding: 11px;
font-weight: 600;
font-size: 14px;
font-family: var(--font-sans-serif);
}
.mn-btn--outline:hover { background: var(--mn-icon-well); color: var(--mn-action); }
.mn-btn--block { width: 100%; }
/* ---------- 12.3 Utility bar ------------------------------- */
.mn-util {
background: #CB252B !important;
color: #FFF !important;
font-size: 12.5px;
letter-spacing: .02em;
}
.mn-util__inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding-top: 7px;
padding-bottom: 7px;
}
.mn-util__group { display: flex; gap: 22px; align-items: center; }
.mn-util a { color: var(--mn-on-dark-3); }
.mn-util a:hover { color: #fff; }
.mn-util__hours { opacity: .85; }
/* ---------- 12.4 Header ------------------------------------ */
.mn-head { background: #fff; border-bottom: 1px solid var(--mn-border); }
.mn-head__inner {
display: flex;
align-items: center;
gap: 34px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.mn-head__logo { display: flex; align-items: center; flex-shrink: 0; }
.mn-head__logo img { height: 56px; width: auto; object-fit: contain; display: block; }
.mn-head__search { flex: 1; max-width: 600px; }
/* ##SEARCHBOX## renders its own input + button; these rules re-skin it. */
.mn-head__search .h-search,
.mn-head__search > div {
display: flex;
border: 1.5px solid var(--mn-border-input);
border-radius: var(--mn-r);
overflow: hidden;
transition: border-color .15s;
}
.mn-head__search:focus-within > div,
.mn-head__search:focus-within .h-search { border-color: var(--mn-blue); }
.mn-head__search input[type=text] {
flex: 1;
border: none !important;
outline: none;
padding: 13px 16px;
font-size: 14.5px;
font-family: inherit;
color: var(--mn-text);
background: transparent;
border-radius: 0 !important;
box-shadow: none !important;
}
.mn-head__search input[type=submit],
.mn-head__search button,
.mn-head__search .ThemeButton {
border: none !important;
background: var(--mn-action) !important;
color: #fff !important;
padding: 0 22px !important;
font-size: 15px;
cursor: pointer;
border-radius: 0 !important;
display: flex;
align-items: center;
gap: 8px;
}
.mn-head__search button:hover, .mn-head__search .ThemeButton:hover { background: var(--mn-blue) !important; }
.mn-head__actions { display: flex; align-items: center; gap: 26px; flex-shrink: 0; }
.mn-act { display: flex; align-items: center; gap: 9px; color: var(--mn-text); position: relative; }
.mn-act:hover { color: var(--mn-text); }
.mn-act > i { font-size: 19px; color: var(--mn-action); }
.mn-act__stack { line-height: 1.2; }
.mn-act__label { display: block; font-size: 11px; color: var(--mn-text-4); }
.mn-act__value { display: block; font-size: 13.5px; font-weight: 600; }
.mn-act__icon { position: relative; display: inline-flex; }
.mn-act__count {
position: absolute;
top: -9px; right: -11px;
background: var(--mn-blue);
color: #fff;
font-size: 10.5px;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
}
/* ---------- 12.5 Primary nav ------------------------------- */
.mn-nav { background: #2C4690 !important; }
.mn-nav__inner { display: flex; align-items: stretch; padding-left: var(--mn-gutter); padding-right: var(--mn-gutter); }
.mn-nav .navbar { flex: 1 1 auto; min-width: 0; }
.mn-nav__all, .mn-nav__deals { flex: 0 0 auto; }
.mn-nav__all {
display: flex;
align-items: center;
gap: 11px;
background: var(--mn-blue);
color: #fff;
border: none;
padding: 0 22px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 14px;
cursor: pointer;
letter-spacing: .01em;
white-space: nowrap;
}
.mn-nav__all:hover, .mn-nav__all:focus { background: var(--mn-blue-hover); color: #fff; }
.mn-nav__all i { font-size: 13px; }
.mn-nav__deals {
display: flex;
align-items: center;
gap: 8px;
padding: 0 4px;
color: var(--mn-blue-soft);
font-size: 13px;
font-weight: 600;
white-space: nowrap;
}
.mn-nav__deals:hover { color: #fff; }
/* MenuBar widget renders a Bootstrap navbar — reskin it in place. */
.mn-nav .navbar,
.mn-nav .navbar.navbar-default {
background: transparent !important;
border: none !important;
margin: 0;
min-height: 0;
border-radius: 0;
}
.mn-nav .navbar-collapse { padding: 0; border: none; box-shadow: none; }
.mn-nav .navbar-nav {
margin: 0;
padding: 0;
display: flex;
gap: 2px;
flex-wrap: nowrap;
list-style: none; /* don't rely on Bootstrap's .nav reset */
}
.mn-nav .navbar-nav > li { flex: 0 0 auto; list-style: none; }
.mn-nav .navbar-nav > li > a {
display: flex;
align-items: center;
white-space: nowrap;
padding: 14px 9px;
color: #d3dbe9 !important;
font-size: 12.5px;
font-weight: 500;
letter-spacing: .01em;
background: transparent !important;
border-bottom: 2px solid transparent;
}
.mn-nav .navbar-nav > li > a:hover,
.mn-nav .navbar-nav > .open > a {
color: #fff !important;
background: rgba(255,255,255,.05) !important;
border-bottom-color: var(--mn-blue);
}
/* ---------- 12.6 Announcement bar -------------------------- */
.mn-announce {
background: var(--mn-surface-3);
border-bottom: 1px solid var(--mn-border);
color: var(--mn-action);
font-size: 13px;
font-weight: 600;
text-align: center;
padding: 5px 20px;
letter-spacing: .01em;
}
.mn-announce i { margin-right: 8px; }
/* ---------- 12.7 Hero -------------------------------------- */
.mn-hero { position: relative; background: var(--mn-navy); overflow: hidden; }
.mn-hero__grid {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 40px;
min-height: 460px;
}
.mn-hero__copy { padding: 56px 0; position: relative; z-index: 2; }
.mn-hero__badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(44,70,144,.16);
color: var(--mn-blue-soft);
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: 7px 14px;
border-radius: var(--mn-r-pill);
}
.mn-hero__title {
color: #fff;
font-family: var(--font-heading);
font-size: 52px;
line-height: 1.04;
font-weight: 800;
letter-spacing: -.02em;
margin: 22px 0 0;
}
.mn-hero__lede { color: var(--mn-on-dark); font-size: 17px; line-height: 1.6; margin: 20px 0 0; max-width: 440px; }
.mn-hero__cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.mn-hero__stats { display: flex; gap: 26px; margin-top: 38px; }
.mn-hero__stat-n { font-family: var(--font-heading); font-weight: 800; font-size: 22px; color: #fff; }
.mn-hero__stat-l { font-size: 12.5px; color: #8a97b3; }
.mn-hero__rule { width: 1px; background: rgba(255,255,255,.12); }
.mn-hero__art { align-self: stretch; position: relative; }
.mn-hero__art-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.mn-hero__art-fade {
position: absolute; inset: 0;
background: linear-gradient(90deg,#111111 0%,rgba(17,17,17,.35) 30%,rgba(17,17,17,0) 60%);
}
/* ---------- 12.8 Value bar --------------------------------- */
.mn-value { background: #fff; border-bottom: 1px solid var(--mn-border); }
.mn-value__grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 12px;
padding-top: 22px;
padding-bottom: 22px;
}
.mn-value__item { display: flex; align-items: center; gap: 14px; padding: 6px 8px; }
.mn-value__icon {
width: 44px; height: 44px; flex-shrink: 0;
border-radius: 11px;
background: var(--mn-icon-well);
display: flex; align-items: center; justify-content: center;
}
.mn-value__icon i { color: var(--mn-blue); font-size: 18px; }
.mn-value__title { font-family: var(--font-heading); font-weight: 700; font-size: 14.5px; color: var(--mn-navy); }
.mn-value__sub { font-size: 12.5px; color: var(--mn-text-3); }
/* ---------- 12.9 Category tiles ---------------------------- */
.mn-tiles { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.mn-tile {
display: block;
background: var(--mn-surface-2);
border: 1px solid var(--mn-border);
border-radius: var(--mn-r-lg);
padding: 22px;
transition: all .18s;
}
.mn-tile:hover {
border-color: var(--mn-blue);
background: #fff;
box-shadow: var(--mn-shadow-tile);
}
.mn-tile__icon {
width: 52px; height: 52px;
border-radius: var(--mn-r-md);
background: var(--mn-navy);
display: flex; align-items: center; justify-content: center;
margin-bottom: 16px;
}
.mn-tile__icon i { color: var(--mn-blue-soft); font-size: 21px; }
.mn-tile__name { font-family: var(--font-heading); font-weight: 700; font-size: 15.5px; color: var(--mn-navy); }
.mn-tile__count { font-size: 12.5px; color: var(--mn-text-4); margin-top: 4px; }
/* ---------- 12.10 Product card ----------------------------- */
.mn-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 40px; }
.mn-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.mn-card {
background: #fff;
border: 1px solid var(--mn-border);
border-radius: var(--mn-r-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: all .18s;
}
.mn-card:hover {
box-shadow: var(--mn-shadow-hover);
border-color: #d4dbe8;
transform: translateY(-3px);
}
.mn-card__media {
position: relative;
aspect-ratio: 1/1;
background: var(--mn-ph);
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--mn-hairline);
}
.mn-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mn-card__badge {
position: absolute; top: 12px; left: 12px;
background: var(--mn-navy);
color: #fff;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 6px;
z-index: 2;
}
.mn-card__wish {
position: absolute; top: 10px; right: 10px;
width: 34px; height: 34px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--mn-border);
color: var(--mn-text-4);
cursor: pointer;
z-index: 2;
display: flex; align-items: center; justify-content: center;
}
.mn-card__wish:hover { color: var(--mn-blue); border-color: var(--mn-blue); }
.mn-card__sku {
position: absolute; bottom: 10px;
font-family: monospace;
font-size: 10px;
color: #9aa7bd;
letter-spacing: .03em;
}
.mn-card__body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.mn-card__cat {
font-size: 11.5px;
font-weight: 600;
color: var(--mn-blue);
letter-spacing: .03em;
text-transform: uppercase;
}
.mn-card__name {
font-family: var(--font-heading);
font-weight: 600;
font-size: 15px;
color: var(--mn-navy);
line-height: 1.3;
margin: 6px 0 0;
min-height: 39px;
display: block;
}
.mn-card__name:hover { color: var(--mn-blue); }
.mn-card__rating { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.mn-card__stars { color: var(--mn-star); font-size: 12px; letter-spacing: 1px; }
.mn-card__reviews { font-size: 11.5px; color: var(--mn-text-4); }
.mn-card__foot {
margin-top: auto;
padding-top: 14px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 10px;
}
.mn-card__price { font-family: var(--font-heading); font-weight: 800; font-size: 20px; color: var(--mn-navy); }
.mn-card__unit { font-size: 11px; color: var(--mn-text-4); }
.mn-card__was { font-size: 12px; color: var(--mn-text-4); text-decoration: line-through; }
/* Add-to-cart square. $$ADDTOCARTBUTTON$$ renders an ; both are covered. */
.mn-card__add,
.mn-card__addwrap input[type=submit],
.mn-card__addwrap input[type=image] {
width: 42px; height: 42px;
border-radius: 11px;
background: var(--mn-action) !important;
color: #fff !important;
border: none !important;
cursor: pointer;
font-size: 15px;
transition: background .15s;
display: flex; align-items: center; justify-content: center;
padding: 0 !important;
}
.mn-card__add:hover,
.mn-card__addwrap input[type=submit]:hover { background: var(--mn-blue) !important; }
/* ---------- 12.11 Breadcrumb + page head ------------------- */
.mn-crumb {
font-size: 13px;
color: var(--mn-text-3);
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
padding-top: 16px;
}
.mn-crumb a { color: var(--mn-text-3); }
.mn-crumb a:hover { color: var(--mn-blue); }
.mn-crumb > *:not(:last-child):not(a)::after { color: #c3ccd9; }
.mn-crumb .mn-crumb__sep { color: #c3ccd9; }
.mn-crumb .mn-crumb__here { color: var(--mn-navy); font-weight: 600; }
.mn-pagehead { padding: 18px 0 8px; }
.mn-pagehead h1 {
font-family: var(--font-heading);
font-size: 34px;
font-weight: 800;
letter-spacing: -.02em;
color: var(--mn-navy);
margin-top: 8px;
}
.mn-pagehead p { color: var(--mn-text-3); font-size: 14.5px; max-width: 640px; margin: 10px 0 0; line-height: 1.6; }
/* ---------- 12.12 Category layout + filters ---------------- */
.mn-cat-layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: 28px;
align-items: start;
padding: 22px 0 56px;
}
.mn-filters { display: flex; flex-direction: column; gap: 14px; }
.mn-filter {
background: #fff;
border: 1px solid var(--mn-border);
border-radius: var(--mn-r-lg);
padding: 20px;
}
.mn-filter__title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 13px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--mn-navy);
margin-bottom: 14px;
}
.mn-filter__list { display: flex; flex-direction: column; gap: 11px; }
.mn-filter__list label,
.mn-filter__list .AttributeNavigationItem {
display: flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
color: var(--mn-text-2);
cursor: pointer;
font-weight: 400;
margin: 0;
}
.mn-filter__list a { color: var(--mn-text-2); }
.mn-filter__list a:hover { color: var(--mn-blue); }
.mn-filter__count { color: var(--mn-text-4); font-size: 12px; }
.mn-promo-card {
background: var(--mn-navy);
border-radius: var(--mn-r-lg);
padding: 20px;
color: #fff;
}
.mn-promo-card__title { font-family: var(--font-heading); font-weight: 800; font-size: 16px; }
.mn-promo-card p { color: var(--mn-on-dark); font-size: 13px; line-height: 1.6; margin: 8px 0 14px; }
.mn-promo-card a {
display: inline-block;
background: var(--mn-blue);
color: #fff;
font-family: var(--font-heading);
font-weight: 700;
font-size: 13px;
padding: 10px 18px;
border-radius: var(--mn-r-sm);
}
.mn-promo-card a:hover { background: var(--mn-blue-hover); color: #fff; }
.mn-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
background: var(--mn-surface-2);
border: 1px solid var(--mn-border);
border-radius: var(--mn-r-md);
padding: 12px 18px;
margin-bottom: 20px;
font-size: 13.5px;
color: var(--mn-text-3);
}
.mn-toolbar strong { color: var(--mn-navy); }
.mn-toolbar__right { display: flex; align-items: center; gap: 10px; }
.mn-toolbar select {
background: #fff;
border: 1px solid var(--mn-border-input);
border-radius: var(--mn-r-sm);
padding: 8px 14px;
font-weight: 600;
color: var(--mn-navy);
font-family: inherit;
font-size: 13.5px;
}
/* ---------- 12.13 Pagination ------------------------------- */
.mn-pager { display: flex; justify-content: center; gap: 8px; margin-top: 32px; flex-wrap: wrap; }
.mn-pager a, .mn-pager span, .mn-pager li > a {
width: 40px; height: 40px;
border-radius: var(--mn-r);
border: 1px solid var(--mn-border);
color: var(--mn-navy);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
text-decoration: none;
}
.mn-pager a:hover { border-color: var(--mn-blue); color: var(--mn-blue); }
.mn-pager .current, .mn-pager .active > a, .mn-pager .active > span {
background: var(--mn-action);
border-color: var(--mn-action);
color: #fff;
font-weight: 700;
}
/* ---------- 12.14 Product detail --------------------------- */
.mn-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; padding: 20px 0 8px; }
.mn-pdp__stage {
position: relative;
background: var(--mn-ph);
border: 1px solid var(--mn-border);
border-radius: var(--mn-r-xl);
aspect-ratio: 1/.92;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.mn-pdp__stage img { max-width: 92%; max-height: 92%; object-fit: contain; mix-blend-mode: multiply; }
.mn-pdp__ship-flag {
position: absolute; top: 14px; left: 14px;
background: var(--mn-blue);
color: #fff;
font-family: var(--font-heading);
font-weight: 700;
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: var(--mn-r-pill);
z-index: 2;
}
.mn-pdp__thumbs { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.mn-pdp__thumbs a, .mn-pdp__thumbs img, .mn-pdp__thumb {
width: 84px; height: 84px;
border: 1px solid var(--mn-border);
border-radius: var(--mn-r);
background: var(--mn-ph);
display: flex; align-items: center; justify-content: center;
object-fit: contain;
overflow: hidden;
}
.mn-pdp__thumbs a:hover, .mn-pdp__thumbs .selected { border: 2px solid var(--mn-blue); }
.mn-buybox {
background: #fff;
border: 1px solid var(--mn-border);
border-radius: var(--mn-r-xl);
box-shadow: var(--mn-shadow-card);
padding: 28px;
}
.mn-buybox h1 {
font-family: var(--font-heading);
font-weight: 800;
font-size: 26px;
line-height: 1.15;
letter-spacing: -.02em;
color: var(--mn-navy);
margin: 0 0 6px;
}
.mn-buybox__meta {
display: flex; flex-wrap: wrap; align-items: center;
gap: 6px 12px;
color: var(--mn-text-4);
font-size: 13px;
margin-bottom: 8px;
}
.mn-buybox__meta .mn-sep { color: #c3ccd9; }
.mn-pill-green {
background: var(--mn-green-bg);
color: var(--mn-green);
font-weight: 700;
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: var(--mn-r-pill);
}
.mn-buybox__rating { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; }
.mn-buybox__rating .mn-card__stars { font-size: 13px; letter-spacing: 2px; }
.mn-priceblock {
background: var(--mn-surface-4);
border: 1px solid var(--mn-border);
border-radius: var(--mn-r-md);
padding: 16px 18px;
margin-bottom: 14px;
}
.mn-priceblock__row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mn-priceblock__now { font-family: var(--font-heading); font-weight: 800; font-size: 30px; color: var(--mn-navy); }
.mn-priceblock__unit { color: var(--mn-text-3); font-size: 14px; }
.mn-priceblock__unit strong { color: var(--mn-navy); }
.mn-priceblock__was { color: var(--mn-text-4); font-size: 14px; text-decoration: line-through; }
.mn-priceblock__stock { display: flex; gap: 16px; margin-top: 8px; font-size: 13px; flex-wrap: wrap; }
.mn-instock { color: var(--mn-green); font-weight: 600; }
.mn-ships { color: var(--mn-text-3); }
/* Volume tiers — wraps $$QTYBREAKS$$ / $$DISCOUNTLIST$$ output */
.mn-tiers { border: 1px solid var(--mn-border); border-radius: var(--mn-r-md); overflow: hidden; margin-bottom: 16px; }
.mn-tiers__head {
background: var(--mn-navy);
color: #fff;
padding: 10px 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.mn-tiers__head-l {
font-family: var(--font-heading);
font-weight: 700;
font-size: 12.5px;
letter-spacing: .05em;
text-transform: uppercase;
}
.mn-tiers__head-l i { color: var(--mn-blue-soft); margin-right: 8px; }
.mn-tiers__head-r { font-size: 12px; color: var(--mn-blue-soft); font-weight: 600; }
.mn-tiers__body,
.mn-tiers table {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 1px;
background: var(--mn-border);
width: 100%;
}
.mn-tier {
background: #fff;
border-top: 2px solid transparent;
padding: 12px 8px;
text-align: center;
}
.mn-tier--best { background: var(--mn-surface-3); border-top-color: var(--mn-blue); }
.mn-tier__range { font-size: 11px; font-weight: 700; color: var(--mn-text-4); letter-spacing: .03em; text-transform: uppercase; }
.mn-tier--best .mn-tier__range { color: var(--mn-blue); }
.mn-tier__price { font-family: var(--font-heading); font-weight: 800; font-size: 17px; color: var(--mn-navy); margin-top: 4px; }
.mn-tier__unit { font-size: 11px; color: var(--mn-text-4); margin-top: 2px; }
.mn-tier__save { font-size: 11px; font-weight: 700; color: var(--mn-green); margin-top: 3px; min-height: 13px; }
.mn-buyrow { display: flex; gap: 12px; margin-bottom: 12px; }
.mn-qty {
display: flex;
align-items: center;
border: 1px solid var(--mn-border);
border-radius: var(--mn-r);
background: #fff;
overflow: hidden;
flex-shrink: 0;
}
.mn-qty button, .mn-qty .QtySpinnerBtn {
padding: 12px 16px;
color: var(--mn-text-3);
font-size: 18px;
border: none;
background: none;
cursor: pointer;
line-height: 1;
}
.mn-qty button:first-child { border-right: 1px solid var(--mn-border); }
.mn-qty button:last-child { border-left: 1px solid var(--mn-border); }
.mn-qty input[type=text] {
width: 62px;
padding: 12px 8px;
font-weight: 600;
color: var(--mn-navy);
text-align: center;
border: none !important;
outline: none;
box-shadow: none !important;
border-radius: 0 !important;
font-family: inherit;
}
.mn-atc,
.mn-atc input[type=submit],
.mn-atc input[type=image] {
flex: 1;
background: var(--mn-blue) !important;
color: #fff !important;
border: none !important;
border-radius: var(--mn-r) !important;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 16px;
cursor: pointer;
padding: 15px !important;
width: 100%;
}
.mn-atc:hover, .mn-atc input[type=submit]:hover { background: var(--mn-blue-hover) !important; }
.mn-buybox__secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.mn-assurance {
display: flex; flex-wrap: wrap;
gap: 8px 22px;
font-size: 13px;
color: var(--mn-text-3);
border-top: 1px solid var(--mn-hairline);
padding-top: 14px;
}
.mn-assurance i { color: var(--mn-blue); margin-right: 6px; }
/* Accordion panels */
.mn-panels { display: flex; flex-direction: column; gap: 12px; padding: 20px 0 8px; }
.mn-panel {
background: #fff;
border: 1px solid var(--mn-border);
border-radius: var(--mn-r-md);
padding: 18px 22px;
}
.mn-panel--tint { background: var(--mn-surface-3); }
.mn-panel__head {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-heading);
font-weight: 700;
color: var(--mn-navy);
font-size: 15px;
cursor: pointer;
}
.mn-panel--tint .mn-panel__head { color: var(--mn-action); }
.mn-panel__head i { color: var(--mn-text-4); transition: transform .18s; }
.mn-panel--tint .mn-panel__head i { color: var(--mn-action); }
.mn-panel.is-collapsed .mn-panel__body { display: none; }
.mn-panel.is-collapsed .mn-panel__head i { transform: rotate(180deg); }
.mn-panel__body { margin-top: 12px; }
.mn-panel__body p { color: var(--mn-text-2); font-size: 14px; line-height: 1.65; margin: 0; max-width: 900px; }
.mn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mn-chip {
background: #fff;
border: 1px solid #d9e2f2;
border-radius: var(--mn-r-pill);
padding: 6px 14px;
font-size: 12.5px;
font-weight: 600;
color: var(--mn-action);
}
.mn-chip i { font-size: 11px; margin-right: 5px; }
.mn-chip--plain { background: var(--mn-surface-2); border-color: var(--mn-border); color: var(--mn-text-2); }
.mn-chip--more { border: 1px dashed var(--mn-ph-icon); background: none; color: var(--mn-blue); }
.mn-crossbar {
background: linear-gradient(90deg,#2C4690,#111111);
border-radius: var(--mn-r-md);
padding: 16px 22px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.mn-crossbar__text { color: #fff; font-size: 14px; }
.mn-crossbar__text strong { font-family: var(--font-heading); font-weight: 800; }
.mn-crossbar__text span { color: var(--mn-on-dark); }
.mn-specs {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 1px;
background: var(--mn-hairline);
border: 1px solid var(--mn-hairline);
border-radius: var(--mn-r);
overflow: hidden;
margin-top: 14px;
}
.mn-spec { background: #fff; padding: 12px 16px; }
.mn-spec__label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mn-text-4); }
.mn-spec__value { font-size: 14px; font-weight: 600; color: var(--mn-navy); margin-top: 3px; }
/* ---------- 12.15 Cart ------------------------------------- */
.mn-cart-title { font-family: var(--font-heading); font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--mn-navy); }
.mn-cart-title span { color: var(--mn-text-4); font-weight: 600; font-size: 18px; }
.mn-cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; margin-top: 24px; }
.mn-cart-items { display: flex; flex-direction: column; gap: 14px; }
.mn-cart-item {
background: #fff;
border: 1px solid var(--mn-border);
border-radius: var(--mn-r-lg);
padding: 18px;
display: grid;
grid-template-columns: 88px 1fr auto auto auto;
gap: 18px;
align-items: center;
}
.mn-cart-item__media {
width: 88px; height: 88px;
border-radius: var(--mn-r);
background: var(--mn-ph);
border: 1px solid var(--mn-hairline);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.mn-cart-item__media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mn-cart-item__name { font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--mn-navy); line-height: 1.3; }
.mn-cart-item__meta { font-size: 12.5px; color: var(--mn-text-4); margin-top: 5px; }
.mn-cart-item__stock { font-size: 12.5px; color: var(--mn-green); font-weight: 600; margin-top: 5px; }
.mn-cart-item__total { font-family: var(--font-heading); font-weight: 800; font-size: 17px; color: var(--mn-navy); min-width: 76px; text-align: right; }
.mn-cart-item__remove { border: none; background: none; color: var(--mn-text-4); cursor: pointer; font-size: 15px; }
.mn-cart-item__remove:hover { color: var(--mn-danger); }
.mn-qty--sm { border-radius: 9px; }
.mn-qty--sm button { padding: 9px 13px; font-size: 15px; }
.mn-qty--sm input[type=text] { padding: 9px 8px; width: 52px; font-size: 14px; }
.mn-cart-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.mn-coupon { display: flex; gap: 10px; }
.mn-coupon input[type=text] {
border: 1px solid var(--mn-border-input);
border-radius: 9px;
padding: 11px 14px;
font-size: 13.5px;
font-family: inherit;
outline: none;
width: 160px;
}
.mn-coupon input[type=submit], .mn-coupon button {
background: var(--mn-navy) !important;
color: #fff !important;
border: none !important;
border-radius: 9px !important;
padding: 0 18px !important;
font-family: var(--font-heading);
font-weight: 700;
font-size: 13px;
cursor: pointer;
}
.mn-coupon input[type=submit]:hover { background: var(--mn-action) !important; }
.mn-summary {
background: #fff;
border: 1px solid var(--mn-border);
border-radius: var(--mn-r-xl);
box-shadow: var(--mn-shadow-card);
padding: 24px;
}
.mn-summary--sticky { position: sticky; top: 66px; }
.mn-summary__title { font-family: var(--font-heading); font-weight: 800; font-size: 18px; color: var(--mn-navy); margin-bottom: 18px; }
.mn-summary__lines { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--mn-text-2); }
.mn-summary__line { display: flex; justify-content: space-between; gap: 12px; }
.mn-summary__line span:last-child { font-weight: 600; color: var(--mn-navy); }
.mn-summary__free { font-weight: 700; color: var(--mn-green) !important; }
.mn-summary__total {
border-top: 1px solid var(--mn-hairline);
margin: 16px 0;
padding-top: 16px;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.mn-summary__total-l { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--mn-navy); }
.mn-summary__total-v { font-family: var(--font-heading); font-weight: 800; font-size: 26px; color: var(--mn-navy); }
.mn-checkout-btn,
.mn-checkout-btn input[type=submit],
.mn-checkout-btn input[type=image] {
width: 100%;
background: var(--mn-blue) !important;
color: #fff !important;
border: none !important;
border-radius: var(--mn-r) !important;
font-family: var(--font-heading);
font-weight: 700;
font-size: 15.5px;
cursor: pointer;
}
.mn-checkout-btn:hover, .mn-checkout-btn input[type=submit]:hover { background: var(--mn-blue-hover) !important; }
.mn-secure {
display: flex; justify-content: center; gap: 8px;
margin-top: 14px;
font-size: 12.5px;
color: var(--mn-text-4);
align-items: center;
}
.mn-secure i { color: var(--mn-green); }
/* ---------- 12.16 Checkout --------------------------------- */
.mn-co-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mn-co-head h1 { font-family: var(--font-heading); font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--mn-navy); }
.mn-co-head__secure { font-size: 13px; color: var(--mn-text-4); display: inline-flex; align-items: center; gap: 7px; }
.mn-co-head__secure i { color: var(--mn-green); }
.mn-co-layout { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; margin-top: 24px; }
.mn-co-forms { display: flex; flex-direction: column; gap: 16px; }
.mn-co-card {
background: #fff;
border: 1px solid var(--mn-border);
border-radius: var(--mn-r-xl);
padding: 26px;
}
.mn-co-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; justify-content: space-between; }
.mn-co-card__head-l { display: flex; align-items: center; gap: 12px; }
.mn-step {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--mn-navy);
color: #fff;
font-family: var(--font-heading);
font-weight: 700;
font-size: 14px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.mn-co-card__title { font-family: var(--font-heading); font-weight: 800; font-size: 17px; color: var(--mn-navy); }
.mn-co-cards { display: flex; gap: 8px; color: #7d8aa3; font-size: 24px; }
/* Field skin — applied broadly inside checkout so control-rendered
inputs pick it up without restructuring the form markup. */
.mn-co-card input[type=text],
.mn-co-card input[type=email],
.mn-co-card input[type=tel],
.mn-co-card input[type=password],
.mn-co-card select,
.mn-co-card textarea {
border: 1px solid var(--mn-border-input);
border-radius: 9px;
padding: 13px 14px;
font-size: 14px;
font-family: inherit;
outline: none;
width: 100%;
color: var(--mn-text);
background: #fff;
box-shadow: none;
}
.mn-co-card input:focus, .mn-co-card select:focus, .mn-co-card textarea:focus {
border-color: var(--mn-blue);
box-shadow: 0 0 0 3px rgba(44,70,144,.15);
}
.mn-co-card label { font-size: 13.5px; color: var(--mn-text-2); font-weight: 600; }
/* Shipping method radio cards */
.mn-ship-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.mn-ship-opt {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid var(--mn-border);
border-radius: 11px;
padding: 14px 16px;
cursor: pointer;
font-weight: 400;
margin: 0;
}
.mn-ship-opt:hover { border-color: var(--mn-border-input); }
.mn-ship-opt.is-selected,
.mn-ship-opt:has(input:checked) {
border: 1.5px solid var(--mn-blue);
background: var(--mn-surface-3);
}
.mn-ship-opt__l { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--mn-navy); }
.mn-ship-opt__price { font-weight: 600; color: var(--mn-navy); font-size: 14px; }
.mn-ship-opt__price--free { font-weight: 700; color: var(--mn-green); }
/* Order summary line items */
.mn-co-item { display: flex; gap: 12px; align-items: center; }
.mn-co-item__media {
position: relative;
width: 52px; height: 52px;
border-radius: 9px;
background: var(--mn-ph);
border: 1px solid var(--mn-hairline);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
overflow: visible;
}
.mn-co-item__media img { max-width: 84%; max-height: 84%; object-fit: contain; mix-blend-mode: multiply; }
.mn-co-item__qty {
position: absolute; top: -7px; right: -7px;
background: var(--mn-navy);
color: #fff;
font-size: 10.5px;
font-weight: 700;
min-width: 18px; height: 18px;
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
}
.mn-co-item__name { flex: 1; font-size: 13px; color: var(--mn-navy); font-weight: 600; line-height: 1.35; }
.mn-co-item__total { font-family: var(--font-heading); font-weight: 700; font-size: 13.5px; color: var(--mn-navy); }
.mn-co-terms { font-size: 12px; color: var(--mn-text-4); text-align: center; margin: 12px 0 0; line-height: 1.5; }
/* Validation errors must stay legible — they are the only
surface for server-side checkout failures. */
.mn-co-card .ErrorText,
.mn-co-card .error,
.mn-co-card [id*="Error"] {
color: var(--mn-danger);
font-size: 12.5px;
font-weight: 600;
display: block;
margin-top: 5px;
}
/* ---------- 12.17 Promo split ------------------------------ */
.mn-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mn-split__panel {
border-radius: var(--mn-r-2xl);
padding: 40px;
position: relative;
overflow: hidden;
}
.mn-split__panel--dark { background: linear-gradient(135deg,#2C4690,#111111); color: #fff; }
.mn-split__panel--light { background: var(--mn-surface-2); border: 1px solid var(--mn-border); }
.mn-split__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mn-split__panel--dark .mn-split__eyebrow { color: var(--mn-blue-soft); }
.mn-split__panel--light .mn-split__eyebrow { color: var(--mn-blue); }
.mn-split__title {
font-family: var(--font-heading);
font-size: 27px;
font-weight: 800;
letter-spacing: -.01em;
margin: 12px 0 0;
max-width: 320px;
line-height: 1.1;
}
.mn-split__panel--light .mn-split__title { color: var(--mn-navy); }
/* Section 2 sets a dark colour on every h1-h6; headings that sit on a
dark surface must win it back or they render navy-on-navy. */
.mn-split__panel--dark .mn-split__title,
.mn-split__panel--dark h1, .mn-split__panel--dark h2,
.mn-split__panel--dark h3, .mn-split__panel--dark h4,
.mn-promo-card h1, .mn-promo-card h2, .mn-promo-card h3, .mn-promo-card h4,
.mn-crossbar h1, .mn-crossbar h2, .mn-crossbar h3, .mn-crossbar h4,
.mn-hero h1, .mn-hero h2, .mn-hero h3,
.mn-news h1, .mn-news h2, .mn-news h3,
.prnm-hero h1, .prnm-hero h2, .prnm-hero h3,
.prnm-newsletter h1, .prnm-newsletter h2, .prnm-newsletter h3,
.mn-foot h1, .mn-foot h2, .mn-foot h3, .mn-foot h4,
.mn-tiers__head h1, .mn-tiers__head h2, .mn-tiers__head h3 { color: #fff; }
.mn-split__panel p { font-size: 14.5px; line-height: 1.6; margin: 14px 0 26px; max-width: 320px; }
.mn-split__panel--dark p { color: var(--mn-on-dark); }
.mn-split__panel--light p { color: var(--mn-text-3); }
/* ---------- 12.18 Newsletter ------------------------------- */
.mn-news { background: var(--mn-navy); }
.mn-news__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
padding-top: 48px;
padding-bottom: 48px;
}
.mn-news__title { font-family: var(--font-heading); color: #fff; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.mn-news__sub { color: var(--mn-blue-soft); font-size: 14.5px; margin-top: 10px; }
.mn-news__form { display: flex; gap: 12px; }
.mn-news__form input[type=text], .mn-news__form input[type=email] {
flex: 1;
border: 1px solid rgba(255,255,255,.18) !important;
background: rgba(255,255,255,.06) !important;
color: #fff !important;
border-radius: var(--mn-r) !important;
padding: 15px 18px !important;
font-size: 14.5px;
font-family: inherit;
outline: none;
}
.mn-news__form input::placeholder { color: #8fa2c4; }
.mn-news__form input[type=submit], .mn-news__form button {
background: var(--mn-blue) !important;
color: #fff !important;
font-family: var(--font-heading);
font-weight: 700;
font-size: 14.5px;
padding: 0 28px !important;
border: none !important;
border-radius: var(--mn-r) !important;
cursor: pointer;
}
.mn-news__form input[type=submit]:hover { background: var(--mn-blue-hover) !important; }
/* ---------- 12.19 Footer ----------------------------------- */
.mn-foot { background: #2C4690 !important; color: var(--mn-on-dark-2); }
.mn-foot__grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 36px;
padding-top: 56px;
padding-bottom: 30px;
}
.mn-foot__brand { font-family: var(--font-heading); font-weight: 900; font-size: 22px; color: #fff; }
.mn-foot__brand em { color: var(--mn-blue); font-style: normal; }
.mn-foot__about { font-size: 13.5px; line-height: 1.7; margin: 16px 0 20px; max-width: 280px; color: var(--mn-on-dark-2); }
.mn-foot__social { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 20px; }
.mn-foot__social a {
width: 38px; height: 38px;
border-radius: 9px;
background: rgba(255,255,255,.07);
display: flex; align-items: center; justify-content: center;
color: var(--mn-on-dark-3);
font-size: 16px;
}
.mn-foot__social a:hover { background: var(--mn-blue); color: #fff; }
.mn-foot__coltitle,
.mn-foot .nav-header,
.mn-foot .h4 {
font-family: var(--font-heading) !important;
font-weight: 700;
font-size: 13px !important;
letter-spacing: .06em;
text-transform: uppercase;
color: #fff !important;
margin-bottom: 16px;
padding: 0;
}
.mn-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.mn-foot ul > li > a {
color: var(--mn-on-dark-2);
font-size: 13.5px;
padding: 0;
background: none;
display: inline;
}
.mn-foot ul > li > a:hover { color: #fff; background: none; }
.mn-foot__bar { border-top: 1px solid rgba(255,255,255,.08); }
.mn-foot__bar-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
padding-top: 20px;
padding-bottom: 20px;
font-size: 12.5px;
}
.mn-foot__pay { display: flex; gap: 10px; align-items: center; }
.mn-foot__pay i { font-size: 26px; color: #7d8aa3; }
.mn-foot__pay-label { opacity: .6; margin-right: 4px; }
/* ---------- 12.20 Responsive ------------------------------- */
@media (max-width: 1100px) {
.mn-grid-4 { grid-template-columns: repeat(3,1fr); }
.mn-tiles { grid-template-columns: repeat(3,1fr); }
.mn-cat-layout { grid-template-columns: 210px 1fr; gap: 20px; }
.mn-cart-layout, .mn-co-layout { grid-template-columns: 1fr 320px; }
}
@media (max-width: 900px) {
.mn-hero__grid { grid-template-columns: 1fr; min-height: 0; }
.mn-hero__art { display: none; }
.mn-hero__title { font-size: 40px; }
.mn-value__grid { grid-template-columns: repeat(2,1fr); }
.mn-pdp { grid-template-columns: 1fr; }
.mn-split, .mn-news__grid { grid-template-columns: 1fr; }
.mn-cat-layout { grid-template-columns: 1fr; }
.mn-cart-layout, .mn-co-layout { grid-template-columns: 1fr; }
.mn-summary--sticky { position: static; }
.mn-foot__grid { grid-template-columns: 1fr 1fr; }
.mn-specs { grid-template-columns: repeat(2,1fr); }
.mn-head__inner { flex-wrap: wrap; gap: 16px; }
.mn-head__search { order: 3; flex-basis: 100%; max-width: none; }
}
@media (max-width: 680px) {
:root { --mn-gutter: 16px; }
.mn-grid-4, .mn-grid-3, .mn-tiles { grid-template-columns: repeat(2,1fr); }
.mn-hero__title { font-size: 32px; }
.mn-hero__stats { flex-wrap: wrap; gap: 16px; }
.mn-hero__rule { display: none; }
.mn-sec-title { font-size: 24px; }
.mn-sec-head { flex-direction: column; align-items: flex-start; gap: 10px; }
.mn-util__inner { flex-direction: column; gap: 8px; text-align: center; }
.mn-util__group { flex-wrap: wrap; justify-content: center; gap: 14px; }
.mn-cart-item { grid-template-columns: 64px 1fr; gap: 12px; }
.mn-cart-item__media { width: 64px; height: 64px; }
.mn-cart-item__total { text-align: left; }
.mn-tiers__body, .mn-tiers table { grid-template-columns: repeat(2,1fr); }
.mn-specs { grid-template-columns: 1fr; }
.mn-foot__grid { grid-template-columns: 1fr; }
.mn-buybox { padding: 20px; }
.mn-buybox h1 { font-size: 22px; }
.mn-co-card { padding: 18px; }
}
/* ---------- 12.21 Header widget slots ----------------------
The header row is composed of two Cart.com widget areas
(LeftMiddleHeaderWidgets / RightMiddleHeaderWidgets). These
wrappers let them behave as flex children without touching
the widget markup itself. */
.mn-head__logo-slot { flex-shrink: 0; display: flex; align-items: center; }
.mn-head__main-slot { flex: 1; display: flex; align-items: center; gap: 34px; min-width: 0; }
.mn-head__main-slot > div { display: contents; }
.mn-head__dd { position: relative; }
.mn-head__dd .dropdown-menu {
left: auto; right: 0;
min-width: 300px;
border: 1px solid var(--mn-border);
border-radius: var(--mn-r-md);
box-shadow: 0 18px 40px rgba(17,17,17,.16);
padding: 6px;
margin-top: 10px;
}
.mn-gtm { display: none; }
@media (max-width: 900px) {
.mn-head__main-slot { flex-wrap: wrap; gap: 16px; }
}
/* ---------- 12.22 Footer contact + payment ----------------- */
.mn-foot__contact { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mn-foot__contact a { color: var(--mn-on-dark-2); font-size: 13.5px; }
.mn-foot__contact a:hover { color: #fff; }
.mn-foot__contact i { color: var(--mn-blue-soft); width: 16px; margin-right: 8px; }
.mn-foot__paylogos { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mn-foot__paylogos img { height: 34px; width: auto; opacity: .85; }
.mn-foot__paylogos img:hover { opacity: 1; }
.mn-foot__legal { display: none; } /* Olark loader only — no visual output */
/* ---------- 12.23 Category page specifics ------------------
Overrides the theme's Bootstrap-era category markup so the
control-rendered output matches the Modern Navy card. */
.mn-crumb.breadcrumb {
background: none;
padding: 16px 0 0;
margin: 0;
border-radius: 0;
}
.mn-crumb.breadcrumb a { color: var(--mn-text-3); }
.mn-crumb.breadcrumb a:hover { color: var(--mn-blue); }
.mn-crumb.breadcrumb > *:last-child { color: var(--mn-navy); font-weight: 600; }
.mn-pagehead.page-header { border-bottom: none; margin: 0; padding: 18px 0 8px; }
.mn-pagehead__desc { color: var(--mn-text-3); font-size: 14.5px; max-width: 640px; margin-top: 10px; line-height: 1.6; }
.mn-pagehead__desc p { color: var(--mn-text-3); margin: 0 0 8px; }
.mn-cat-image { margin: 0 0 8px; }
.mn-cat-image img { max-width: 100%; height: auto; border-radius: var(--mn-r-lg); }
.mn-cat-footer { color: var(--mn-text-3); font-size: 14px; line-height: 1.7; margin-top: 32px; }
/* Child category chips */
.mn-subcats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.mn-subcat {
display: flex;
align-items: center;
gap: 10px;
background: var(--mn-surface-2);
border: 1px solid var(--mn-border);
border-radius: var(--mn-r-pill);
padding: 6px 16px 6px 6px;
transition: all .18s;
}
.mn-subcat:hover { border-color: var(--mn-blue); background: #fff; }
.mn-subcat__thumb { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--mn-ph); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mn-subcat__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mn-subcat__thumb:empty { display: none; }
.mn-subcat__name a { font-size: 13.5px; font-weight: 600; color: var(--mn-navy); }
.mn-subcat__name a:hover { color: var(--mn-blue); }
/* Toolbar — control renders bare