/* ==========================================================================
   CompareFilter brand overrides (child theme)
   Loads AFTER the parent's generated color CSS so these win by source order.
   Most colors are driven from functions.php via $compare_options; this file
   only handles the few things the option system doesn't cover.
   ========================================================================== */

/* Product price in brand red (theme defaults it to the main blue) */
.white-block.product-box .white-block-content .product-meta span:nth-child(2),
.single-product .white-block.product-box .white-block-content .product-meta span:nth-child(2) {
    color: #e8473c !important;
}

/* Keep the SVG logo crisp and sized in the header */
.site-logo img {
    max-height: 50px;
    width: auto;
    height: auto;
}

/* Register / green buttons a touch bolder, matching the 2016 look */
.navigation .navbar .navbar-collapse ul .register-nav a,
.small-screen-register-store {
    font-weight: 700;
    text-transform: uppercase;
}

/* Active nav item in brand blue */
.navigation .navbar .navbar-collapse ul .current-menu-item > a {
    color: #33a8d6;
}

/* ---- Header height: theme ships .navigation { padding: 50px 0 } --------- */
.navigation { padding: 20px 0; }

/* ---- Sticky header ------------------------------------------------------- */
.sticky-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    animation: cfSlideDown .25s ease;
}
.sticky-nav .container { padding-top: 6px; padding-bottom: 6px; }
.sticky-nav .site-logo img { max-height: 40px; }
@keyframes cfSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ---- Footer widget area -------------------------------------------------- */
.widget-footer {
    background: #262626;
    padding: 34px 0 10px;   /* a bit of room above the column headers */
    color: #9aa0a6;
}
.widget-footer .white-block {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
}
/* keep the theme's native two-tone underline; don't add a second one */
.widget-footer .widget-title { margin-bottom: 10px; padding-bottom: 6px; }
.widget-footer .widget-title h4 {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}
.widget-footer p { line-height: 1.55; font-size: 13px; margin-bottom: 0; }
.widget-footer img { max-width: 170px; height: auto; margin-bottom: 10px; }

/* copyright bar: theme ships 30px 0 — tighten it */
.footer { padding: 12px 0; }
.widget-footer .cf-foot-links { list-style: none; margin: 0; padding: 0; }
.widget-footer .cf-foot-links li { padding: 2px 0; }
.widget-footer .cf-foot-links a { color: #b9c0c5; text-decoration: none; font-size: 13px; }
.widget-footer .cf-foot-links a:hover { color: #33a8d6; }
.widget-footer .cf-foot-social { margin-top: 8px; }
.widget-footer .cf-foot-social a {
    display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center;
    background: #3a3a3a; color: #fff; border-radius: 3px; margin-right: 6px; transition: .15s;
}
.widget-footer .cf-foot-social a:hover { background: #33a8d6; }
.widget-footer .cf-foot-retailers {
    margin-top: 12px; color: #6f7882; font-weight: 700; letter-spacing: .5px;
    text-transform: lowercase; font-size: 14px;
}
.widget-footer .cf-foot-retailers span { color: #aab2b8; margin: 0 8px; }

/* ---- Move "Register Your Store" from green CTA to the top blue bar ------- */
/* retire the loud green button (desktop nav + mobile) */
.navigation .navbar .navbar-collapse ul .register-nav,
.small-screen-register-store { display: none !important; }

/* hide the auto-prepended home icon so the register link stands alone, left */
.top-bar .top-left-nav > li:first-child { display: none; }

/* style the register link as a tidy secondary CTA inside the blue bar */
.top-bar .top-left-nav .cf-register-link a {
    display: inline-block;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    padding: 4px 14px;
    border-radius: 3px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .4px;
    transition: .15s;
}
.top-bar .top-left-nav .cf-register-link a:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.top-bar .top-left-nav .cf-register-link a::before {
    content: "\f13e";              /* fa-unlock-alt */
    font-family: FontAwesome;
    margin-right: 7px;
}

/* footer contact block (moved here from the top bar on mobile) */
.widget-footer .cf-foot-contact { margin: 0 0 10px; }
.widget-footer .cf-foot-contact a {
    display: block; color: #b9c0c5; font-size: 13px; padding: 3px 0; text-decoration: none;
}
.widget-footer .cf-foot-contact a:hover { color: #33a8d6; }
.widget-footer .cf-foot-contact a .fa { color: #33a8d6; width: 18px; margin-right: 6px; }

/* prevent any horizontal scroll on small screens (theme header included) */
@media (max-width: 767px) {
    html, body { overflow-x: hidden; max-width: 100%; }
    .navigation .container, .top-bar .container { max-width: 100%; }

    /* remove the busy blue top bar on mobile (info now lives in the footer) */
    .top-bar { display: none; }

    /* tighten the main logo header (theme uses a huge 50px vertical padding) */
    .navigation { padding: 14px 0; }
    .site-logo img { max-height: 36px; max-width: 60%; }
}

/* copyright bar to-top button */
.footer .to-top a {
    display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center;
    background: #33a8d6; color: #fff; border-radius: 3px;
}

/* ---- Single-product image gallery + lightbox ----------------------------- */
/* Show the whole product photo (theme's default crop cut it off) */
.single-product .white-block-media { text-align: center; background: #fff; }
.cf-gallery { padding: 10px 0 4px; }
.cf-gallery .cf-gal-main {
    display: block; position: relative; cursor: zoom-in;
}
.cf-gallery .cf-gal-main img {
    max-height: 420px; max-width: 100%; width: auto; height: auto;
    object-fit: contain; margin: 0 auto; display: block;
}
.cf-gallery .cf-gal-zoom {
    position: absolute; right: 12px; bottom: 10px;
    background: rgba(38, 38, 38, .65); color: #fff;
    width: 32px; height: 32px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.cf-gallery .cf-gal-thumbs {
    display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap;
}
.cf-gallery .cf-gal-thumb {
    width: 64px; height: 64px; padding: 4px; background: #fff;
    border: 1px solid #e3e7ea; border-radius: 3px; cursor: pointer;
}
.cf-gallery .cf-gal-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cf-gallery .cf-gal-thumb.is-active,
.cf-gallery .cf-gal-thumb:hover { border-color: #33a8d6; box-shadow: 0 0 0 1px #33a8d6; }

.cf-lightbox {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(20, 20, 20, .9);
    display: none; align-items: center; justify-content: center;
}
.cf-lightbox.is-open { display: flex; }
.cf-lightbox img {
    max-width: 90vw; max-height: 90vh; object-fit: contain;
    background: #fff; border-radius: 4px;
}
.cf-lightbox button {
    position: absolute; background: rgba(255, 255, 255, .12); color: #fff;
    border: 0; cursor: pointer; border-radius: 4px;
    width: 44px; height: 44px; font-size: 22px; line-height: 1;
}
.cf-lightbox button:hover { background: rgba(255, 255, 255, .28); }
.cf-lightbox .cf-lb-close { top: 16px; right: 16px; font-size: 28px; }
.cf-lightbox .cf-lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.cf-lightbox .cf-lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.cf-lightbox .cf-lb-count {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 13px; letter-spacing: .5px;
}
@media (max-width: 767px) {
    .cf-gallery .cf-gal-main img { max-height: 280px; }
}

/* ---- Product listing boxes (category / search / related grids) ----------- */
/* The parent theme centers listing images at natural size inside the 4:3 box
   (top/left 50% + translate, width/height auto), which CROPS anything that
   overflows — tall product shots show only their middle band. Restore a
   full-fit: fill the box and letterbox the whole photo on white. */
.white-block.product-box .embed-responsive .embed-responsive-item,
.white-block.product-box .embed-responsive img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: none;
    transform: none;
    object-fit: contain;
    background: #fff;
    padding: 6px;
}

/* ---- Product search widget ----------------------------------------------- */
.cf-search-widget .search-input { position: relative; }
.cf-search-widget .form-control {
    height: 42px; padding-right: 44px; border: 1px solid #e3e7ea; box-shadow: none;
}
.cf-search-widget .form-control:focus { border-color: #33a8d6; }
.cf-search-widget button {
    position: absolute; top: 0; right: 0; width: 42px; height: 42px;
    border: 0; background: #33a8d6; color: #fff; cursor: pointer;
    border-radius: 0 3px 3px 0;
}
.cf-search-widget button:hover { background: #2b93bd; }

/* ---- Compact product cards in the right sidebar --------------------------- */
/* Latest Products cards are full-size listing cards; in the narrow sidebar
   they tower — shrink the media box and tighten spacing. */
.col-md-3 .product-box .embed-responsive-4by3 { padding-bottom: 52%; }
.col-md-3 .product-box .white-block-content { padding: 10px 12px; }
.col-md-3 .product-box .white-block-content h4 { font-size: 13px; margin: 4px 0; }
.col-md-3 .product-box .product-ratings { margin: 0; }
.col-md-3 .product-box .product-meta { font-size: 12px; margin-bottom: 0; }
.col-md-3 .white-block.product-box { margin-bottom: 12px; }

/* ---- Tighten the bottom of single-product pages ---------------------------
   The Buying Guides carousel (.owl-parent) carries a 60px margin-bottom meant
   to separate stacked carousels; as the last block it just leaves a hole.
   Combined with the content section's 60px padding-bottom that was ~120px of
   dead space above the footer. */
.single-product .cf-product-blog .owl-parent { margin-bottom: 0; }
.single-product section:not(.breadcrumbs-section) { padding-bottom: 28px; }