/**
 * Critical CSS - Milwaukee Tool Distributor
 * Contains essential styles that cannot be replaced by Tailwind utilities
 * or are required for third-party components (sliders, carousels, etc.)
 */

/* ==========================================================================
   BASE RESETS & FONTS
   ========================================================================== */

@font-face {
    font-family: 'Helvetica Neue LT W01_83 Hv Ex';
    font-display: swap;
    src: url(../fonts/helvetica-milwaukee.woff2) format("woff2");
}

/* Global Box Sizing */
*,
::before,
::after {
    box-sizing: border-box;
}

/* Base Typography */
html, body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Helvetica Neue LT W01_83 Hv Ex', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Links */
a {
    color: #da0c23;
    text-decoration: none;
}

a:hover {
    color: inherit;
    text-decoration: none;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   HEADER & NAVIGATION CRITICAL STYLES
   ========================================================================== */

#header-top {
    background: #DB061B;
}

#header-top .flex-container {
    display: flex;
    justify-content: space-between;
}

#header-top .ht-logo a {
    height: 43px;
    display: flex;
    align-items: center;
}

#header-top .ht-logo img {
    max-height: 36px;
}

#header-top .ht-address,
#header-top .ht-phone {
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

#header-top a {
    color: #fff;
    text-decoration: none;
}

#header-top a:hover {
    text-decoration: underline;
}

header#navbar {
    height: 100px;
    border-bottom: 3px solid #db071b;
}

header#navbar .flex-wrap {
    align-items: center;
    flex-wrap: nowrap;
    height: 100%;
    position: relative;
}

.tr-header-logos img {
    max-width: 150px;
    max-height: 50px;
}

.tr-left-logo,
.tr-right-logo {
    margin-right: 22px;
    margin-bottom: 11px;
}

.tr-left-logo {
    border-right: 1px solid #C4C4C4;
    padding-right: 20px;
}

/* Navigation Menu */
.tr-nav ul {
    margin: 0;
    padding: 0;
}

.tr-nav ul li {
    list-style-type: none;
    display: inline-block;
    border-bottom: 3px solid transparent;
}

.tr-nav ul li:hover {
    border-bottom: 3px solid #DB011C;
}

.tr-nav ul li a {
    color: black;
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 15px;
    text-transform: uppercase;
    font-size: 16px;
    height: 100px;
}

.tr-nav ul li a:hover {
    color: #DB011C;
}

/* Dropdown Menu */
ul.tr-nav-dropdown-menu {
    display: none;
    position: absolute;
    background: rgb(0 0 0 / 82%);
    z-index: 10;
    margin-top: -20px;
    padding: 10px 0;
}

.tr-nav ul li ul.tr-nav-dropdown-menu li {
    display: block;
    border-bottom: 2px solid transparent;
}

.tr-nav ul li ul.tr-nav-dropdown-menu li:hover {
    border-bottom: 2px solid #db011c;
}

.tr-nav ul li ul.tr-nav-dropdown-menu li a {
    color: #fff;
    padding: 4px 20px;
    height: auto;
    font-size: 14.5px;
    font-weight: 300;
    text-transform: none;
}

/* Mobile Navigation */
.navbar-toggle {
    width: 62px;
    padding: 15px;
    display: none;
}

@media screen and (max-width: 768px) {
    .navbar-toggle {
        display: block;
    }

    header#navbar {
        height: 80px;
    }

    .tr-nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 80px;
        width: 100%;
    }

    header.opened .tr-nav {
        display: block;
    }

    .tr-nav ul li {
        display: block;
    }

    .tr-nav ul li a {
        height: auto;
    }

    .navbar-menu {
        position: absolute;
        background: #fff;
        z-index: 10;
        width: 100%;
    }

    .tr-nav-dropdown svg {
        display: none;
    }

    ul.tr-nav-dropdown-menu {
        display: none !important;
    }

    #header-top .ht-address {
        display: none;
    }

    .tr-header-contact {
        display: none;
    }
}

/* ==========================================================================
   SLIDER & CAROUSEL CRITICAL STYLES
   ========================================================================== */

.home-slider {
    height: 500px;
    padding: 0;
}

.home-slider.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.home-slider .slide {
    align-items: center;
    padding: 0;
    height: 100%;
}

.home-slider .slick-list,
.home-slider .slick-track {
    height: 100%;
}

.home-slider .slide.is-flex.slick-slide {
    height: 100%;
}

.home-slider .slick-arrow {
    z-index: 1;
}

.home-slider .slick-prev {
    left: 25px;
}

.home-slider .slick-next {
    right: 25px;
}

.home-slider .slick-prev::before,
.home-slider .slick-next::before {
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    padding: 10px;
}

.home-slider .slick-prev::before {
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='angle-left' class='svg-inline--fa fa-angle-left fa-w-8' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath fill='%23ffffff' d='M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z'%3E%3C/path%3E%3C/svg%3E");
}

.home-slider .slick-next::before {
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='angle-right' class='svg-inline--fa fa-angle-right fa-w-8' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath fill='%23ffffff' d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'%3E%3C/path%3E%3C/svg%3E");
}

.home-slider .slick-dots {
    background: #000;
    bottom: 0;
    display: flex;
    height: 15px;
}

.home-slider .slick-dots li {
    height: 15px;
    width: 33.3%;
}

.home-slider .slick-dots li:hover {
    background: #333334;
}

.home-slider .slick-dots li.slick-active {
    background: #DA0C23;
}

.home-slider .slick-dots li.slick-active button:before {
    content: '';
}

/* Slide Backgrounds */
.home-slider .slide.mx-fuel {
    background: url(../images/banners/mx-fuel-slide/equipment-redefined-trade-focused-system-wide-milwaukee-tools-bg.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
}

.home-slider .slide.m18-fuel {
    background: url(../images/banners/m18-fuel-slide/m-18-fuel-milwaukee-tools.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
}

.home-slider .slide.packout {
    background: url(../images/banners/packout-slide/packout-modular-storage-system-milwaukee-tools.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
}

/* ==========================================================================
   HERO SECTION BACKGROUNDS
   ========================================================================== */

.hero-img-ratio-container {
    background: url('../images/hero-images/remodeling-milwaukee.jpg') no-repeat;
    background-size: cover;
    background-position: bottom center;
}

.hero-electrical {
    background: url('../images/hero-images/electrical-milwaukee.jpg') no-repeat;
    background-size: cover;
    background-position: bottom center;
}

.hero-mechanical {
    background: url('../images/hero-images/mechanical-milwaukee.jpg') no-repeat;
    background-size: cover;
    background-position: bottom center;
}

.hero-new {
    background: url('../images/hero-images/mx-fuel-hero-milwaukee.jpg') no-repeat;
    background-size: cover;
    background-position: bottom center;
}

.hero-plumbing {
    background: url('../images/hero-images/plumbing-milwaukee.jpg') no-repeat;
    background-size: cover;
    background-position: bottom center;
}

.hero-power {
    background: url('../images/hero-images/power-utility-milwaukee.jpg') no-repeat;
    background-size: cover;
    background-position: bottom center;
}

/* Homepage Hero */
.hero {
    background: url(../images/hero-m-18-fuel-milwaukee-tools.jpg);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    height: 420px;
}

/* ==========================================================================
   FOOTER CRITICAL STYLES
   ========================================================================== */

.footer {
    background-color: #212121;
    color: white;
}

.footer a {
    color: #fff;
    opacity: 0.8;
    transition: opacity 0.2s ease-out;
}

.footer a:hover {
    color: #fff;
    text-decoration: none;
    opacity: 1;
}

.footer-hours {
    list-style: none;
    padding-left: 0;
}

.footer-contact-info {
    list-style: none;
    line-height: 1.7em;
}

/* Footer Icons */
.footer .icon {
    padding: 7px 15px;
    background-color: #DA0C23;
    background-position: center;
    background-repeat: no-repeat;
}

.footer .footer-contact-info .footer-icon:before {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    content: '';
    margin-right: 5px;
    padding: 5px;
}

.footer .footer-contact-info .footer-icon.i-location:before {
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focausable='false' data-prefix='fas' data-icon='map-marker-alt' class='svg-inline--fa fa-map-marker-alt fa-w-12' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23DA0C23' d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z'%3E%3C/path%3E%3C/svg%3E");
}

.footer .footer-contact-info .footer-icon.i-phone:before {
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='phone-alt' class='svg-inline--fa fa-phone-alt fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23DA0C23' d='M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z'%3E%3C/path%3E%3C/svg%3E");
}

/* ==========================================================================
   HEAVY DUTY SECTION
   ========================================================================== */

.heavy-duty {
    background: url(../images/heavy-duty-milwaukee-tools.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
}

/* ==========================================================================
   ABOUT US SECTION
   ========================================================================== */

.about-us-bg {
    background: url(../images/about-milwaukee-tools-bg.jpg);
    background-attachment: fixed;
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ==========================================================================
   PRODUCT GALLERY/CAROUSEL
   ========================================================================== */

/* ==========================================================================
   PRODUCT DETAIL GALLERY/CAROUSEL (Slick)
   ========================================================================== */

.tr-product-detail-carousel {
    position: relative;
    overflow: hidden;
}

.main-gallery {
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 40px;
}

.main-gallery .slick-list,
.main-gallery .slick-track {
    display: flex;
    align-items: center;
}

.main-gallery .slick-slide {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.main-gallery .slick-slide.slick-active {
    opacity: 1;
}

.main-gallery .slide {
    outline: none;
}

.main-gallery img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 400px;
    height: 400px;
    object-fit: contain;
    margin: 0 auto;
}

/* Thumbnail Gallery - Slick Carousel */
.thumbnail-gallery {
    margin-top: 15px;
    padding: 0 40px;
    overflow: hidden;
    position: relative;
}

.thumbnail-gallery .slick-list {
    margin: 0 -5px;
    overflow: hidden;
}

.thumbnail-gallery .slick-track {
    display: flex !important;
    align-items: center;
    margin-left: 0 !important;
}

/* Fix for when there are fewer slides than slidesToShow - center them */
.thumbnail-gallery.slick-initialized .slick-track {
    justify-content: flex-start;
}

.thumbnail-gallery .slick-slide {
    padding: 0 5px;
    outline: none;
    float: none !important;
    display: inline-block !important;
}

.thumbnail-gallery .slick-slide > div {
    outline: none;
}

.thumbnail-gallery .thumb-slide {
    outline: none;
}

.thumbnail-gallery img {
    height: 85px;
    width: 100%;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color 0.3s ease, opacity 0.3s ease;
}

/* Active/Current Thumbnail Highlight */
.thumbnail-gallery .slick-slide.slick-current img,
.thumbnail-gallery .slick-current .thumb-slide img {
    border-color: #b3001b !important;
    opacity: 1;
}

.thumbnail-gallery img:hover {
    opacity: 0.8;
    border-color: #b3001b;
}

.custom-dot.active {
    color: #000;
}

/* ==========================================================================
   PRODUCT DETAILS FEATURES LIST
   ========================================================================== */



/* ==========================================================================
   PRODUCT DETAIL PAGE RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 991px) {
    .tr-product-detail-carousel {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .main-gallery img {
        height: 300px;
    }

    .main-gallery,
    .thumbnail-gallery {
        padding: 0 30px;
    }

    .thumbnail-gallery .slick-slide {
        padding: 0 3px;
    }
}

@media screen and (max-width: 768px) {
    .product-spec-col-1 .col-inner {
        margin-right: 0;
        border-bottom: 0;
    }

    .product-spec-col-2 {
        border-bottom: 1px solid #cacaca;
    }

    .product-spec-col-2 .col-inner {
        border-bottom: 0;
    }
}

/* ==========================================================================
   PRODUCT MODAL STYLES
   ========================================================================== */

.product-modal {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
}

.product-modal.hidden {
    display: none !important;
}

.product-modal .modal-overlay {
    cursor: pointer;
}

.product-modal .modal-content {
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   FORM CRITICAL STYLES
   ========================================================================== */

.form-control {
    border-radius: 0;
    background-clip: initial;
}

.help-block.with-errors {
    color: #db011c;
}

/* ==========================================================================
   RESPONSIVE SLIDER
   ========================================================================== */

@media only screen and (max-width: 991px) {
    .home-slider {
        background-color: #000;
        height: auto;
    }

    .home-slider .slide.is-flex {
        background-size: contain;
        background-position: top;
    }

    .home-slider .container.is-flex {
        align-items: flex-end;
        background-size: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .home-slider .container.is-flex .black-block {
        background: rgba(0, 0, 0, 1);
        margin-top: 200px;
    }

    .main-gallery img {
        height: 300px;
    }

    .main-gallery,
    .thumbnail-gallery {
        padding: 0 20px;
    }

    .thumbnail-gallery .slick-slide {
        padding: 0 3px;
    }
}

@media only screen and (max-width: 630px) {
    .home-slider .mx-fuel .container.is-flex .black-block {
        margin-top: 170px;
    }
}

@media only screen and (max-width: 425px) {
    .home-slider .container.is-flex .black-block {
        margin-top: 100px;
    }
}

/* ==========================================================================
   ANIMATION KEYFRAMES
   ========================================================================== */

@keyframes fade-top {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.slick-current.slick-active .fade-top {
    animation: fade-top 0.5s ease-out forwards;
    animation-delay: 1s;
    opacity: 0;
}

/* ==========================================================================
   UTILITY OVERRIDES
   ========================================================================== */

/* Flex footer layout */
.is-flex-footer {
    display: flex !important;
    justify-content: space-between;
}

@media only screen and (max-width: 540px) {
    .is-flex-footer {
        flex-wrap: wrap;
    }
}