/* Carefree Theme + Menu Engine V31.0.48 - main bar: the account bar (nav#top) restyled in place. Linked only while
   the header controller printed the html class crf-restyle; every rule needs that class, so a stray load does
   nothing. Nothing here moves the cart, search or any id out of nav#top, and nav#top keeps today's position at
   every width: fixed at 992px and up (as before), in the page flow below that. Below 992px nothing here gives
   nav#top or any box around the cart a position, z-index, transform, filter or opacity, so the phone float cart
   panel keeps its own layer. Never display:none or visibility:hidden on the cart button. Bump ?v= in header.php. */

/* Text uses Montserrat 400 and 700 only (both preloaded with this file), so the bar never reflows on a late font. */
/* ---- heights: phone 56, tablet 60, 992px and up 64 (49 old row + 15, counted in the stack) ---- */
html.crf-restyle { --crf-mb-h: 56px; }
@media (min-width: 768px) { html.crf-restyle { --crf-mb-h: 60px; } }
@media (min-width: 992px) {
    html.crf-msg.crf-restyle { --crf-mb-x: 15px; --crf-mb-h: calc(var(--crf-ute-h, 49px) + var(--crf-mb-x, 0px)); }
    html.crf-msg.crf-restyle, html.crf-msg.crf-restyle > body { --crf-stack-top: calc(var(--crf-msg-h, 0px) + var(--crf-top-x, 0px) + var(--crf-fs-h, 0px) + var(--crf-promo-h, 0px) + var(--crf-ute-h, 49px) + var(--crf-nav-x, 0px) + var(--crf-mb-x, 0px)); }
    /* the 40px header padding sat under the old 49px row; the bar's space is in the stack already */
    html.crf-restyle body header.header, html.crf-restyle body header { padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* ---- the old logo row (logo + call number) goes; the logo is printed small inside the bar ---- */
html.crf-restyle body header.header > .container > .row > .col-md-4.col-sm-3,
html.crf-restyle body header.header > .container > .row > .headerTxt { display: none !important; }

/* ---- the bar ---- */
html.crf-msg.crf-restyle body nav#top { background: #ffffff !important; color: #252525; border: 0 !important; border-bottom: 1px solid #ebe3da !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06); margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: var(--crf-mb-h, 56px);
    box-sizing: border-box; font-family: 'Montserrat', Arial, sans-serif; }
html.crf-msg.crf-restyle body nav#top::after { display: none !important; }
html.crf-msg.crf-restyle body nav#top #top-links a, html.crf-msg.crf-restyle body nav#top #top-links span, html.crf-msg.crf-restyle body nav#top #cart button { text-transform: none !important; letter-spacing: normal; }
html.crf-msg.crf-restyle body nav#top > .container { height: 100%; }
html.crf-msg.crf-restyle body nav#top > .container > .row { display: flex; flex-wrap: nowrap; align-items: center; height: 100%; }
html.crf-msg.crf-restyle body nav#top > .container > .row::before, html.crf-msg.crf-restyle body nav#top > .container > .row::after { display: none; }
/* the search column's own box goes, its two children (search, cart) take their places in the row */
html.crf-msg.crf-restyle body nav#top > .container > .row > .col-sm-3 { display: contents; }

/* logo (the Home link) */
html.crf-msg.crf-restyle body nav#top .crf-mb-logo { flex: none; display: flex; align-items: center; height: 44px; margin: 0 16px 0 0; padding: 0; text-decoration: none; }
html.crf-msg.crf-restyle body nav#top .crf-mb-logo img { display: block; height: 44px; width: auto; max-width: none; }

/* search: takes the slack, shrinks first, never wraps */
html.crf-msg.crf-restyle body nav#top #search { order: 0; display: flex !important; position: relative; flex: 1 1 auto; width: auto !important; min-width: 0; max-width: 640px; height: 44px; margin: 0 16px 0 0; padding: 0; float: none; }
html.crf-msg.crf-restyle body nav#top #search .form-control { float: none; display: block; flex: 1 1 auto; width: 100% !important; min-width: 0; height: 44px !important; margin: 0;
    padding: 0 48px 0 18px !important; border: 1px solid #cbbfb3 !important; border-radius: 22px !important; background: #ffffff !important; color: #252525 !important;
    font: 400 15px/42px 'Montserrat', Arial, sans-serif; box-shadow: none !important; text-overflow: ellipsis; white-space: nowrap; }
html.crf-msg.crf-restyle body nav#top #search .form-control::-webkit-input-placeholder { color: #8a8079; opacity: 1; }
html.crf-msg.crf-restyle body nav#top #search .form-control::-moz-placeholder { color: #8a8079; opacity: 1; }
html.crf-msg.crf-restyle body nav#top #search .form-control::placeholder { color: #8a8079; opacity: 1; }
html.crf-msg.crf-restyle body nav#top #search .form-control:focus { border-color: #252525 !important; box-shadow: 0 0 0 1px #252525 !important; outline: 0; }
html.crf-msg.crf-restyle body nav#top #search .input-group-btn { position: absolute; top: 0; right: 0; z-index: 3; width: 44px; height: 44px; display: block; font-size: 0; background: transparent !important; }
/* a 44px tap area that paints a 34px round button */
html.crf-msg.crf-restyle body nav#top #search .input-group-btn .btn { display: block; width: 44px; height: 44px; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 22px !important;
    background: radial-gradient(circle at 50% 50%, #252525 0, #252525 16px, transparent 17px) !important; color: #ffffff !important; box-shadow: none !important; text-shadow: none; line-height: 44px; font-size: 15px; }
html.crf-msg.crf-restyle body nav#top #search .input-group-btn .btn .fa { color: #ffffff !important; font-size: 15px; }

/* the links: Get a quote, then Account; Wish List, Shopping Cart and Checkout leave the bar (Checkout stays in the cart drop-down,
   Wish list moves into the Account menu) */
html.crf-msg.crf-restyle body nav#top > .container > .row > #top-links { order: 1; float: none !important; display: block; flex: none; width: auto; margin: 0; padding: 0; }
html.crf-msg.crf-restyle body nav#top #top-links ul.list-inline { display: flex; align-items: center; flex-wrap: nowrap; margin: 0; padding: 0; white-space: nowrap; }
html.crf-msg.crf-restyle body nav#top #top-links ul.list-inline > li { display: block; padding: 0 !important; margin: 0; border: 0 !important; }
html.crf-msg.crf-restyle body nav#top #top-links ul.list-inline > li.hidden-xs, html.crf-msg.crf-restyle body nav#top #top-links #wishlist-total { display: none !important; }
html.crf-msg.crf-restyle body nav#top #top-links ul.list-inline > li.qb-quote-li { order: 1; }
html.crf-msg.crf-restyle body nav#top #top-links ul.list-inline > li.dropdown { order: 2; position: relative; }
html.crf-msg.crf-restyle body nav#top #top-links #qb-header-badge { display: inline-flex; align-items: center; height: 44px; margin: 0 12px 0 0; padding: 0 18px; box-sizing: border-box;
    border: 1px solid #e91e63; border-radius: 22px; background: #ffffff; color: #c2185b !important; font: 400 15px/1 'Montserrat', Arial, sans-serif; text-decoration: none; white-space: nowrap; }
html.crf-msg.crf-restyle body nav#top #top-links #qb-header-badge .fa { display: inline-block !important; margin: 0 7px 0 0; color: inherit !important; font-size: 15px; }
html.crf-msg.crf-restyle body nav#top #top-links #qb-header-badge:hover, html.crf-msg.crf-restyle body nav#top #top-links #qb-header-badge:focus { background: #fdf0f5; text-decoration: none; }
html.crf-msg.crf-restyle body nav#top #top-links li.dropdown > a.dropdown-toggle { display: inline-flex; align-items: center; height: 44px; margin: 0 12px 0 0; padding: 0 10px; box-sizing: border-box;
    border-radius: 22px; color: #252525 !important; font: 700 15px/1 'Montserrat', Arial, sans-serif; text-decoration: none; white-space: nowrap; }
html.crf-msg.crf-restyle body nav#top #top-links li.dropdown > a.dropdown-toggle:hover, html.crf-msg.crf-restyle body nav#top #top-links li.dropdown.open > a.dropdown-toggle { background: #f6f0ea; text-decoration: none; }
html.crf-msg.crf-restyle body nav#top #top-links li.dropdown > a.dropdown-toggle > .fa-user { display: inline-block !important; margin: 0 7px 0 0; font-size: 16px; color: inherit !important; }
html.crf-msg.crf-restyle body nav#top #top-links li.dropdown > a.dropdown-toggle > span:not(.caret) { display: inline-block; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; line-height: 1.4; } /* V31.0.47: clipped text keeps room for letter tails (g, y, p) */
html.crf-msg.crf-restyle body nav#top #top-links li.dropdown > a.dropdown-toggle > .caret { margin-left: 6px; }
html.crf-msg.crf-restyle body nav#top #top-links li.dropdown > .dropdown-menu { left: auto !important; right: 0 !important; min-width: 190px; margin-top: 2px; }
html.crf-msg.crf-restyle body nav#top #top-links li.dropdown > .dropdown-menu > li > a { padding: 9px 18px; font-size: 14px; }

/* cart: the one header cart, shown at every width, styled as the pill */
html.crf-msg.crf-restyle body nav#top .col-sm-3 > .visible-xs { order: 2; display: block !important; flex: none; }
/* flex, not block: the button floats (button group) and a block would collapse to 0 high, opening the drop-down over the bar */
html.crf-msg.crf-restyle body nav#top #cart { display: flex; width: auto !important; margin: 0; float: none; }
html.crf-msg.crf-restyle body nav#top #cart button[data-toggle="dropdown"] { float: none !important; display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; height: 44px; min-width: 44px;
    margin: 0; padding: 0 20px 0 16px !important; box-sizing: border-box; border: 0 !important; border-radius: 22px !important; background: #e91e63 !important; color: #ffffff !important;
    font: 700 15px/1.4 'Montserrat', Arial, sans-serif; white-space: nowrap; box-shadow: none !important; text-shadow: none !important; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } /* V31.0.47: was 15px/1; clipped text never gets line-height 1 */
html.crf-msg.crf-restyle body nav#top #cart button[data-toggle="dropdown"] .fa, html.crf-msg.crf-restyle body nav#top #cart button[data-toggle="dropdown"] #cart-total { color: inherit !important; }
html.crf-msg.crf-restyle body nav#top #cart button[data-toggle="dropdown"] .fa { margin-right: 6px; }
/* parsed (count + total known): OpenCart's own text is replaced on screen by the count circle, the icon and the total */
html.crf-msg.crf-restyle body nav#top #cart button.crf-mb-ok { font-size: 0 !important; }
html.crf-msg.crf-restyle body nav#top #cart button.crf-mb-ok > * { display: none !important; }
html.crf-msg.crf-restyle body nav#top #cart button.crf-mb-ok::before { content: attr(data-crf-n); display: inline-block; min-width: 22px; height: 22px; margin: 0 9px 0 0; padding: 0 6px; box-sizing: border-box;
    border-radius: 11px; background: #ffffff; color: #252525; font: 700 12px/22px 'Montserrat', Arial, sans-serif; text-align: center; }
html.crf-msg.crf-restyle body nav#top #cart button.crf-mb-ok[data-crf-n="0"]::before { display: none; }
html.crf-msg.crf-restyle body nav#top #cart button.crf-mb-ok::after { content: "\f07a\00a0\00a0" attr(data-crf-t); display: inline-block; font: 700 15px/1 FontAwesome, 'Montserrat', Arial, sans-serif; }
html.crf-msg.crf-restyle body nav#top #cart button.crf-mb-ok[data-crf-n] { padding-left: 11px !important; }
html.crf-msg.crf-restyle body nav#top #cart button.crf-mb-ok[data-crf-n="0"] { padding-left: 18px !important; }
/* the drop-down (desktop and non-touch narrow browsers; the phone float panel keeps its own placement):
   opens leftward from the pill, scrolls inside itself so Checkout is always reachable */
html.crf-msg.crf-restyle body:not(.mf-mobile) nav#top #cart .dropdown-menu { left: auto !important; right: 0 !important; min-width: 360px; max-width: calc(100vw - 16px); }
/* drop-downs keep dark text on their own light panel whatever the bar colour */
html.crf-msg.crf-restyle body nav#top #cart .dropdown-menu, html.crf-msg.crf-restyle body nav#top #top-links .dropdown-menu { color: #333333; text-transform: none; }
html.crf-msg.crf-restyle body nav#top #top-links .dropdown-menu > li > a { color: #252525 !important; }
@media (min-width: 992px) {
    html.crf-msg.crf-restyle body:not(.mf-mobile) nav#top #cart .dropdown-menu { max-height: calc(100vh - var(--crf-stack-top, 113px) - 8px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---- the group look (Group Experience colours, already checked by the header controller): whole bar ---- */
html.crf-msg-fused.crf-restyle body nav#top { background: var(--crf-fb-bg) !important; color: var(--crf-fb-fg); border-bottom: 3px solid var(--crf-fb-acc) !important; box-shadow: none; }
html.crf-msg-fused.crf-restyle body nav#top .crf-mb-logo { height: 44px; padding: 0 8px; box-sizing: border-box; border-radius: 8px; background: #ffffff; }
html.crf-msg-fused.crf-restyle body nav#top .crf-mb-logo img { height: 38px; }
html.crf-msg.crf-msg-fused.crf-restyle body nav#top #search .form-control { border-color: #ffffff !important; }
html.crf-msg.crf-msg-fused.crf-restyle body nav#top #search .input-group-btn .btn { background: radial-gradient(circle at 50% 50%, var(--crf-fb-btn) 0, var(--crf-fb-btn) 16px, transparent 17px) !important; color: var(--crf-fb-btn-ink) !important; }
html.crf-msg.crf-msg-fused.crf-restyle body nav#top #search .input-group-btn .btn .fa { color: var(--crf-fb-btn-ink) !important; }
html.crf-msg.crf-msg-fused.crf-restyle body nav#top #top-links #qb-header-badge { background: transparent; border-color: var(--crf-fb-line); color: var(--crf-fb-fg) !important; }
html.crf-msg.crf-msg-fused.crf-restyle body nav#top #top-links #qb-header-badge:hover, html.crf-msg.crf-msg-fused.crf-restyle body nav#top #top-links #qb-header-badge:focus { background: rgba(255, 255, 255, .12); }
html.crf-msg.crf-msg-fused.crf-restyle body nav#top #top-links li.dropdown > a.dropdown-toggle { color: var(--crf-fb-fg) !important; }
html.crf-msg.crf-msg-fused.crf-restyle body nav#top #top-links li.dropdown > a.dropdown-toggle:hover, html.crf-msg.crf-msg-fused.crf-restyle body nav#top #top-links li.dropdown.open > a.dropdown-toggle { background: rgba(255, 255, 255, .12); }
html.crf-msg.crf-msg-fused.crf-restyle body nav#top #cart button[data-toggle="dropdown"] { background: var(--crf-fb-btn) !important; color: var(--crf-fb-btn-ink) !important; }
/* signed-in group chip (992px and up, printed by the line host): logo or dot, then the name from 1200px */
@media (min-width: 992px) {
    html.crf-msg.crf-msg-fused.crf-restyle body nav#top #crf-fbar-note.crf-fbar-note { flex: 0 1 auto; max-width: 250px; height: 44px; margin: 0 16px 0 0; padding: 0; }
    html.crf-msg.crf-msg-fused.crf-restyle body nav#top #crf-fbar-note .crf-fbar-pre, html.crf-msg.crf-msg-fused.crf-restyle body nav#top #crf-fbar-note .crf-fbar-sfx { display: none; }
    /* a fixed box: the group logo has no size in its markup, so a late load must not push the search box */
    html.crf-msg.crf-msg-fused.crf-restyle body nav#top #crf-fbar-note .crf-fbar-logo { width: 80px; height: 20px; max-width: none; object-fit: contain; object-position: left center; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    html.crf-msg.crf-msg-fused.crf-restyle body nav#top #crf-fbar-note .crf-fbar-txt { display: none; }
    html.crf-msg.crf-msg-fused.crf-restyle body nav#top #crf-fbar-note .crf-fbar-logo, html.crf-msg.crf-msg-fused.crf-restyle body nav#top #crf-fbar-note .crf-fbar-dot { margin-right: 0; }
}
@media (min-width: 1200px) {
    html.crf-msg.crf-msg-fused.crf-restyle body nav#top #crf-fbar-note.crf-fbar-haslogo .crf-fbar-txt { display: flex; }
    html.crf-msg.crf-msg-fused.crf-restyle body nav#top #crf-fbar-note.crf-fbar-haslogo .crf-fbar-logo { margin-right: 8px; }
}

/* ---- 1200px and up: long quote wording; 992-1199: short ---- */
@media (min-width: 1200px) {
    html.crf-msg.crf-restyle body nav#top #top-links #qb-header-badge .qb-quote-word { text-transform: lowercase !important; }
    html.crf-msg.crf-restyle body nav#top #top-links #qb-header-badge .qb-quote-word::before { content: "Get a "; text-transform: none !important; }
}

/* ---- below 1200: tighter ---- */
@media (max-width: 1199px) {
    html.crf-msg.crf-restyle body nav#top .crf-mb-logo { margin-right: 12px; }
    html.crf-msg.crf-restyle body nav#top .crf-mb-logo img { height: 40px; }
    html.crf-msg-fused.crf-restyle body nav#top .crf-mb-logo img { height: 34px; }
    html.crf-msg.crf-restyle body nav#top #search { margin-right: 12px; }
    html.crf-msg.crf-restyle body nav#top #top-links #qb-header-badge { padding: 0 14px; margin-right: 8px; }
    html.crf-msg.crf-restyle body nav#top #top-links li.dropdown > a.dropdown-toggle { margin-right: 8px; }
    html.crf-msg.crf-restyle body nav#top #top-links li.dropdown > a.dropdown-toggle > span:not(.caret) { max-width: 90px; }
}

/* ---- 768-991: the bar scrolls with the page as before; cart shows count + icon only ---- */
@media (max-width: 991px) {
    html.crf-msg.crf-restyle body nav#top #cart button.crf-mb-ok::after { content: "\f07a"; font-size: 17px; }
    html.crf-msg.crf-restyle body nav#top #cart button.crf-mb-ok[data-crf-n] { padding: 0 14px 0 9px !important; }
    html.crf-msg.crf-restyle body nav#top #cart button.crf-mb-ok[data-crf-n="0"] { padding: 0 !important; width: 44px !important; }
    html.crf-msg.crf-restyle body nav#top #cart button.crf-mb-ok[data-crf-n] { min-width: 44px; }
}

/* ---- phones: logo, search, Account icon, cart icon with its count; Quote waits for the tab bar (its own float stays) ---- */
@media (max-width: 767px) {
    html.crf-msg.crf-restyle body nav#top > .container { padding-left: 8px; padding-right: 8px; }
    html.crf-msg.crf-restyle body nav#top > .container > .row { margin-left: 0; margin-right: 0; }
    html.crf-msg.crf-restyle body nav#top .crf-mb-logo { height: 44px; margin-right: 8px; }
    html.crf-msg.crf-restyle body nav#top .crf-mb-logo img { height: 36px; }
    html.crf-msg-fused.crf-restyle body nav#top .crf-mb-logo { height: 44px; padding: 0 5px; border-radius: 6px; }
    html.crf-msg-fused.crf-restyle body nav#top .crf-mb-logo img { height: 32px; }
    html.crf-msg.crf-restyle body nav#top #search { margin-right: 4px; }
    html.crf-msg.crf-restyle body nav#top #search .form-control { padding: 0 44px 0 12px !important; font-size: 16px; }
    html.crf-msg.crf-restyle body nav#top #top-links ul.list-inline > li.qb-quote-li { display: none !important; }
    html.crf-msg.crf-restyle body nav#top #top-links li.dropdown > a.dropdown-toggle { position: relative; justify-content: center; width: 44px; margin: 0; padding: 0; }
    html.crf-msg.crf-restyle body nav#top #top-links li.dropdown > a.dropdown-toggle > .fa-user { margin: 0; font-size: 19px; }
    html.crf-msg.crf-restyle body nav#top #top-links li.dropdown > a.dropdown-toggle > span { display: none !important; }
    html.crf-mb-in.crf-restyle body nav#top #top-links li.dropdown > a.dropdown-toggle::after { content: ''; position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
        background: #e91e63; box-shadow: 0 0 0 2px #ffffff; }
    html.crf-mb-in.crf-msg-fused.crf-restyle body nav#top #top-links li.dropdown > a.dropdown-toggle::after { background: var(--crf-fb-acc); box-shadow: 0 0 0 2px var(--crf-fb-bg); }
    /* the cart: a 44px round icon; parsed count sits on its corner, otherwise icon only (no count) */
    html.crf-msg.crf-restyle body nav#top #cart button[data-toggle="dropdown"] { width: 44px !important; padding: 0 !important; font-size: 0 !important; overflow: visible; }
    html.crf-msg.crf-restyle body nav#top #cart button[data-toggle="dropdown"] .fa { margin: 0; font-size: 18px !important; }
    html.crf-msg.crf-restyle body nav#top #cart button.crf-mb-ok[data-crf-n] { width: 44px !important; padding: 0 !important; position: relative; }
    html.crf-msg.crf-restyle body nav#top #cart button.crf-mb-ok::after { content: "\f07a"; font-size: 18px; }
    html.crf-msg.crf-restyle body nav#top #cart button.crf-mb-ok::before { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; margin: 0; padding: 0 5px;
        font-size: 11px; line-height: 18px; border: 1px solid #e91e63; }
    html.crf-msg.crf-msg-fused.crf-restyle body nav#top #cart button.crf-mb-ok::before { border-color: var(--crf-fb-btn); }
}
@media (max-width: 359px) {
    html.crf-msg.crf-restyle body nav#top .crf-mb-logo img { height: 32px; }
    html.crf-msg.crf-restyle body nav#top .crf-mb-logo { margin-right: 6px; }
}

/* ---- V31.0.45 (cut C2): the menu row, All categories, the right column, the hidden phone Shop sheet ----
   Same gate class as the bar. The menu keeps its items and its own drop-downs; only its size and spacing
   change (the shop stylesheet sets 30px menu text, which cannot fit the new items on one row). */
@media (min-width: 768px) {
    html.crf-restyle body #menu { min-height: 0; margin-bottom: 16px; }
    html.crf-restyle body #menu .nav.navbar-nav { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; float: none; }
    html.crf-restyle body #menu .nav.navbar-nav > li { flex: 0 0 auto; float: none; }
    html.crf-restyle body #menu .nav.navbar-nav > li + li:after { content: none; display: none; }
    html.crf-restyle body #menu .nav.navbar-nav > li > a { padding: 13px 16px; font-size: 16px; line-height: 20px; white-space: nowrap; min-height: 0; text-align: left; }
    html.crf-restyle body #menu .nav.navbar-nav > li.crf-mm-all > a { font-weight: 700; }
    html.crf-restyle body #menu .crf-mm-all > a .fa-bars { margin-right: 9px; font-size: 15px; }
    html.crf-restyle body #menu .crf-mm-all > a .crf-mm-caret { margin-left: 6px; font-size: 11px; opacity: .6; }
    html.crf-restyle body #menu .nav.navbar-nav > li.crf-mm-phone { order: 99; margin-left: auto; display: none; }
    html.crf-restyle body #menu .nav.navbar-nav > li.crf-mm-phone > a { padding-right: 12px; font-family: 'Montserrat', Arial, sans-serif !important; font-size: 13px; color: #6b5d50 !important; }
    html.crf-restyle body #menu .nav.navbar-nav > li.crf-mm-phone > a:after { content: none; display: none; }
    html.crf-restyle body #menu .crf-mm-phone .fa { margin-right: 5px; }
    /* the panel: two columns (categories in two columns, help and information), never wider than the window */
    /* the panel hangs from the whole menu row (never wider than it), so OpenCart's own menu script, which pulls a
       panel back inside the row with an inline margin, never needs to move it */
    html.crf-restyle body #menu .nav.navbar-nav { position: relative; }
    html.crf-restyle body #menu .nav.navbar-nav > li.crf-mm-all { position: static; }
    html.crf-restyle body #menu .crf-mm-all > .dropdown-menu.crf-mm-mega { left: 0; right: auto; width: 860px; max-width: 100%; padding: 18px 22px 20px; margin: 0 !important;
        background: #fffaf5 !important; border: 1px solid #e0d5cb !important; border-top: 0 !important; border-radius: 0 0 10px 10px; box-shadow: 0 10px 24px rgba(60, 40, 20, .14);
        max-height: calc(100vh - var(--crf-stack-top, 0px) - 70px); overflow-y: auto; overscroll-behavior: contain; z-index: 1065; }
    html.crf-restyle body #menu .crf-mm-cols { display: flex; align-items: flex-start; }
    html.crf-restyle body #menu .crf-mm-cats { flex: 2 1 0; min-width: 0; padding-right: 22px; border-right: 1px solid #eadfd4; }
    html.crf-restyle body #menu .crf-mm-help { flex: 1 1 0; min-width: 0; padding-left: 22px; }
    html.crf-restyle body #menu .crf-mm-cats ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
    html.crf-restyle body #menu .crf-mm-mega h4 { margin: 0 0 8px; padding-left: 10px; font: 700 12px/16px 'Montserrat', Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #9a8673; }
    html.crf-restyle body #menu .crf-mm-mega ul { margin: 0; padding: 0; }
    html.crf-restyle body #menu .crf-mm-mega li a { display: block; padding: 7px 10px; border-radius: 6px; font-size: 14px; line-height: 20px; white-space: normal; text-align: left; }
    html.crf-restyle body #menu .crf-mm-mega li a:after { content: none; display: none; }
    html.crf-restyle body #menu .crf-mm-mega li a:hover, html.crf-restyle body #menu .crf-mm-mega li a:focus { background: #f6f0ea; color: #c2185b !important; text-decoration: none; }
    /* the right column: if the server could not drop an emptied column, hide it and give the page its width */
    html.crf-restyle body #column-right:not(:has(*)) { display: none !important; }
    html.crf-restyle body .row > #content.col-sm-9:has(~ #column-right):not(:has(~ #column-right > *)) { width: 100%; }
}
@media (min-width: 768px) and (max-width: 991px) {
    html.crf-restyle body #menu .nav.navbar-nav > li > a { padding: 13px 10px; font-size: 15px; }
    html.crf-restyle body #menu .crf-mm-all > .dropdown-menu.crf-mm-mega { padding: 14px; }
    html.crf-restyle body #menu .crf-mm-cats { flex: 5 1 0; padding-right: 18px; }
    html.crf-restyle body #menu .crf-mm-help { flex: 2 1 0; padding-left: 18px; }
    html.crf-restyle body #menu .crf-mm-cats ul { column-gap: 10px; }
    html.crf-restyle body #menu .crf-mm-mega li a { padding: 6px 8px; font-size: 13px; }
}
@media (min-width: 992px) {
    html.crf-restyle body #menu .nav.navbar-nav > li.crf-mm-phone { display: block; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    html.crf-restyle body #menu .nav.navbar-nav > li > a { padding: 13px 13px; }
}
@media (max-width: 767px) {
    html.crf-restyle body #menu .crf-mm-all, html.crf-restyle body #menu .crf-mm-phone { display: none !important; }
}
/* the phone Shop sheet: printed hidden; shown only below 768px and only once the hidden attribute is removed */
html.crf-restyle #crf-shop-sheet[hidden] { display: none !important; }
@media (min-width: 768px) { html.crf-restyle #crf-shop-sheet { display: none !important; } }
@media (max-width: 767px) {
    html.crf-restyle #crf-shop-sheet:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483646; max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
        padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 28px rgba(0, 0, 0, .18);
        font: 400 14px/20px 'Montserrat', Arial, sans-serif; color: #252525; text-align: left; box-sizing: border-box; }
    html.crf-restyle #crf-shop-sheet * { box-sizing: border-box; }
    html.crf-restyle #crf-shop-sheet .crf-sh-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; height: 52px; background: #fff; font-size: 17px; }
    html.crf-restyle #crf-shop-sheet .crf-sh-x { width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; font-size: 26px; line-height: 44px; color: #555; }
    html.crf-restyle #crf-shop-sheet h4 { margin: 18px 0 6px; font: 700 12px/16px 'Montserrat', Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #9a8673; }
    html.crf-restyle #crf-shop-sheet ul { margin: 0; padding: 0; list-style: none; }
    html.crf-restyle #crf-shop-sheet .crf-sh-list a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 10px 2px; border-bottom: 1px solid #f0e8e0; color: #252525; text-decoration: none; }
    html.crf-restyle #crf-shop-sheet .crf-sh-list .fa { color: #b8a898; font-size: 12px; }
    html.crf-restyle #crf-shop-sheet .crf-sh-help { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
    html.crf-restyle #crf-shop-sheet .crf-sh-help a { display: block; min-height: 44px; padding: 12px 2px; color: #444; text-decoration: none; }
    html.crf-restyle #crf-shop-sheet .crf-sh-help a { white-space: nowrap; }
    html.crf-restyle #crf-shop-sheet .crf-sh-quote { margin-top: 4px; padding: 14px; border-radius: 12px; background: #fdf0f5; }
    html.crf-restyle #crf-shop-sheet .crf-sh-quote p { margin: 0 0 10px; }
    html.crf-restyle #crf-shop-sheet .crf-sh-quote p b { display: block; }
    html.crf-restyle #crf-shop-sheet .crf-sh-qlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 22px; background: #e91e63; color: #fff; font-weight: 600; text-decoration: none; }
    html.crf-restyle #crf-shop-sheet .crf-sh-qlink .fa { margin-right: 8px; }
    html.crf-restyle #crf-shop-sheet .crf-sh-qcount:not([hidden]) { display: inline-block; min-width: 22px; height: 22px; margin-left: 9px; padding: 0 6px; border-radius: 11px; background: #fff; color: #c2185b; font-size: 12px; line-height: 22px; text-align: center; font-weight: 700; }
    html.crf-restyle #crf-shop-sheet .crf-sh-phone { display: flex; align-items: center; min-height: 48px; margin-top: 14px; color: #252525; font-weight: 600; text-decoration: none; }
    html.crf-restyle #crf-shop-sheet .crf-sh-phone .fa { margin-right: 10px; }
}
/* narrow phones: the help links go to one column so every label stays on one line (never cut short) */
@media (max-width: 359px) {
    html.crf-restyle #crf-shop-sheet .crf-sh-help { grid-template-columns: 1fr; }
}

/* ---- V31.0.47 rule for every box here that clips its text (overflow hidden, an ellipsis): line-height 1.3 or more,
   never 1, so the tails of g, y, p and q are not cut off (owner 2026-10-28: "Sign in" lost its g). ---- */

/* ---- V31.0.47: menu arrows and the phone menu bar ----
   1) Supplies and More: the server takes the typed arrow off the end of their names (main bar only), and every menu
   drop-down except All categories gets the same arrow All categories draws (Font Awesome caret-down, 11px, faded).
   Drawn as the anchor's ::before floated to its right end (after the name): the shop stylesheet already uses the
   anchor's ::after for its hover picture and the list item's ::after for the dots, both left as they are. */
html.crf-restyle body #menu .nav.navbar-nav > li.dropdown:not(.crf-mm-all) > a.dropdown-toggle::before {
    content: "\f0d7"; float: right; margin-left: 6px; font-family: FontAwesome; font-size: 11px; font-weight: normal; font-style: normal;
    line-height: inherit; opacity: .6; -webkit-font-smoothing: antialiased; }
/* 2) Phones: once the tab bar is on (html class mf-tabs-on, from the phone tab bar) AND the main bar script has checked
   that the Shop sheet holds every link the menu holds (html class crf-sheet-ok), the old MENU bar goes; the tab bar's
   Shop sheet replaces it. Either class missing (tab bar off or failed, script error) = the MENU bar stays. */
@media (max-width: 767px) {
    html.mf-tabs-on.crf-restyle.crf-sheet-ok body #menu { display: none !important; }
}
/* ---- V31.0.47 seam: the breadcrumb look (reserved for the next cut; nothing here yet) ---- */
/* ---- V31.0.47 seam: the shop-wide button look (reserved for the next cut; nothing here yet) ---- */