/* ============================================================
   CUSTOM HUMMINGBIRD THEME
   PrestaShop 9.x
   Blue / Orange / Yellow
   ============================================================ */


/* ============================================================
   1. DESIGN VARIABLES
   ============================================================ */

:root {
    --theme-blue: #06153C;
    --theme-blue-dark: #06153C;
    --theme-blue-darker: #06153C;
    --theme-blue-light: #06153C;

    --theme-orange: #F07D00;
    --theme-orange-dark: #e87500;
    --theme-orange-light: #ffad42;

    --theme-yellow: #ffd43b;
    --theme-yellow-light: #ffe88a;

    --theme-white: #ffffff;
    --theme-light: #f5f7fa;
    --theme-border: #e1e6ec;

    --theme-text: #212529;
    --theme-muted: #6c757d;

    --theme-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    --theme-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.14);

    --theme-radius: 8px;
    --theme-radius-small: 5px;

    --theme-transition: 0.2s ease;
}


/* ============================================================
   HEADER - LOGO
   ============================================================ */

#header .header-bottom__logo {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
}

#header .header-bottom__logo h1 {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
}

#header .header-bottom__logo .navbar-brand {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
}

#header .header-bottom__logo img.logo {
    display: block !important;
    width: 140px !important;
    height: 140px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: fill !important;
}


/* ============================================================
   2. GENERAL
   ============================================================ */

html {
    scroll-behavior: smooth;
}

body {
    color: var(--theme-text);
    background: var(--theme-white);
}

a {
    transition:
        color var(--theme-transition),
        background-color var(--theme-transition),
        border-color var(--theme-transition),
        box-shadow var(--theme-transition),
        transform var(--theme-transition);
}

a:hover,
a:focus {
    color: var(--theme-blue);
}


/* ============================================================
   3. HEADER
   ============================================================ */

#header {
    position: relative;
    z-index: 1000;
}


/* ---------- Top bar ---------- */

.header-top {
    background: var(--theme-blue-dark);
    color: var(--theme-orange);
    border-bottom: 1px solid rgba(255, 138, 0, 0.25);
}

.header-top a {
    color: var(--theme-orange);
    text-decoration: none;
}

.header-top a:hover,
.header-top a:focus {
    color: var(--theme-yellow);
}


/* ---------- Main header ---------- */

.header-bottom {
    background: var(--theme-blue);
    color: var(--theme-orange);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.header-bottom a {
    color: var(--theme-orange);
    text-decoration: none;
}

.header-bottom a:hover,
.header-bottom a:focus {
    color: var(--theme-yellow);
}


/* ---------- Logo ---------- */

.header-bottom__logo {
    position: relative;
}

.header-bottom__logo img {
    max-height: 70px;
    width: auto;
    transition: transform var(--theme-transition);
}

.header-bottom__logo a:hover img {
    transform: scale(1.03);
}


/* ---------- Header icons ---------- */

.header-bottom svg,
.header-bottom .material-icons,
.header-top svg,
.header-top .material-icons {
    color: var(--theme-orange);
    transition: color var(--theme-transition);
}

.header-bottom a:hover svg,
.header-bottom a:hover .material-icons,
.header-top a:hover svg,
.header-top a:hover .material-icons {
    color: var(--theme-yellow);
}


/* ---------- Header blocks ---------- */

.header-block {
    transition: background-color var(--theme-transition);
}

.header-block:hover {
    background: rgba(255, 255, 255, 0.06);
}

.header-block__action-btn {
    color: var(--theme-orange);
}

.header-block__action-btn:hover {
    color: var(--theme-yellow);
}


/* ---------- Cart badge ---------- */

.header-block__badge {
    background: var(--theme-orange);
    color: var(--theme-blue-dark);
    font-weight: 700;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}


/* ============================================================
   4. MAIN MENU
   ============================================================ */

#_desktop_top_menu > ul > li > a,
.top-menu > li > a {
    position: relative;
    display: block;
    color: var(--theme-orange);
    background: transparent;
    transition:
        color var(--theme-transition),
        background-color var(--theme-transition);
}


/* ---------- Hover ---------- */

#_desktop_top_menu > ul > li > a:hover,
.top-menu > li > a:hover {
    color: var(--theme-yellow);
    background: rgba(255, 255, 255, 0.06);
}


/* ---------- Yellow underline ---------- */

#_desktop_top_menu > ul > li > a::after,
.top-menu > li > a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 3px;
    background: var(--theme-yellow);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--theme-transition);
}


/* ---------- Animate underline on hover ---------- */

#_desktop_top_menu > ul > li > a:hover::after,
.top-menu > li > a:hover::after {
    transform: scaleX(1);
}


/* ---------- Active page ---------- */

#_desktop_top_menu > ul > li.current > a,
#_desktop_top_menu > ul > li.active > a {
    color: var(--theme-yellow);
    background: rgba(255, 255, 255, 0.04);
}


/* ---------- Active underline ---------- */

#_desktop_top_menu > ul > li.current > a::after,
#_desktop_top_menu > ul > li.active > a::after {
    transform: scaleX(1);
}


/* ============================================================
   5. DROPDOWN MENUS
   ============================================================ */

.dropdown-menu {
    border: 0;
    border-top: 3px solid var(--theme-orange);
    border-radius: 0 0 var(--theme-radius) var(--theme-radius);
    box-shadow: var(--theme-shadow-hover);
    padding: 8px 0;
}

.dropdown-menu a {
    color: var(--theme-text);
}

.dropdown-menu a:hover,
.dropdown-menu a:focus {
    color: var(--theme-blue);
    background: rgba(255, 212, 59, 0.18);
}


/* ============================================================
   6. SEARCH
   ============================================================ */

.search-widget form {
    position: relative;
}

.search-widget input {
    border: 2px solid transparent;
    border-radius: var(--theme-radius);
    transition:
        border-color var(--theme-transition),
        box-shadow var(--theme-transition);
}

.search-widget input:focus {
    border-color: var(--theme-orange);
    box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.18);
    outline: none;
}

.search-widget button {
    background: var(--theme-orange);
    color: var(--theme-blue-dark);
    border: 0;
    transition:
        background-color var(--theme-transition),
        color var(--theme-transition);
}

.search-widget button:hover,
.search-widget button:focus {
    background: var(--theme-yellow);
    color: var(--theme-blue-dark);
}


/* ============================================================
   7. BUTTONS
   ============================================================ */

.btn {
    border-radius: var(--theme-radius-small);
    font-weight: 600;
    transition:
        background-color var(--theme-transition),
        border-color var(--theme-transition),
        color var(--theme-transition),
        box-shadow var(--theme-transition),
        transform var(--theme-transition);
}


/* ---------- Primary ---------- */

.btn-primary {
    background: var(--theme-orange);
    border-color: var(--theme-orange);
    color: var(--theme-white);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--theme-orange-dark);
    border-color: var(--theme-orange-dark);
    color: var(--theme-blue);
    box-shadow: 0 4px 12px rgba(7, 87, 160, 0.3);
    transform: translateY(-1px);
}


/* ---------- Orange CTA ---------- */

.btn-orange {
    background: var(--theme-orange);
    border-color: var(--theme-orange);
    color: var(--theme-blue-dark);
}

.btn-orange:hover,
.btn-orange:focus {
    background: var(--theme-yellow);
    border-color: var(--theme-yellow);
    color: var(--theme-blue-dark);
    box-shadow: 0 4px 12px rgba(255, 212, 59, 0.35);
    transform: translateY(-1px);
}


/* ---------- Outline ---------- */

.btn-outline-primary {
    color: var(--theme-blue);
    border-color: var(--theme-blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--theme-blue);
    border-color: var(--theme-blue);
    color: var(--theme-white);
}


/* ============================================================
   8. PRODUCT CARDS
   ============================================================ */

.product-miniature {
    background: var(--theme-white);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    overflow: hidden;
    transition:
        box-shadow var(--theme-transition),
        transform var(--theme-transition),
        border-color var(--theme-transition);
}

.product-miniature:hover {
    border-color: rgba(7, 87, 160, 0.25);
    box-shadow: var(--theme-shadow-hover);
    transform: translateY(-3px);
}


/* ---------- Product image ---------- */

.product-miniature .thumbnail-container {
    background: var(--theme-white);
}

.product-miniature img {
    transition: transform 0.3s ease;
}

.product-miniature:hover img {
    transform: scale(1.025);
}


/* ---------- Product name ---------- */

.product-miniature .product-title a {
    color: var(--theme-text);
    font-weight: 600;
}

.product-miniature .product-title a:hover {
    color: var(--theme-blue);
}


/* ---------- Price ---------- */

.product-miniature .price {
    color: var(--theme-blue);
    font-weight: 700;
}


/* ---------- Discount ---------- */

.product-miniature .discount {
    background: var(--theme-orange);
    color: var(--theme-blue-dark);
    font-weight: 700;
}


/* ============================================================
   9. PRODUCT PAGE
   ============================================================ */

.product-container {
    background: var(--theme-white);
}


/* ---------- Product title ---------- */

.product-title {
    color: var(--theme-blue-dark);
    font-weight: 700;
}


/* ---------- Product price ---------- */

.product-price {
    color: var(--theme-blue);
    font-weight: 700;
}


/* ---------- Product availability ---------- */

.product-availability {
    color: var(--theme-blue);
    font-weight: 600;
}


/* ---------- Add to cart ---------- */

.product-add-to-cart .btn {
    background: var(--theme-orange);
    border-color: var(--theme-orange);
    color: var(--theme-blue-dark);
    font-weight: 700;
    min-height: 48px;
}

.product-add-to-cart .btn:hover,
.product-add-to-cart .btn:focus {
    background: var(--theme-yellow);
    border-color: var(--theme-yellow);
    color: var(--theme-blue-dark);
}


/* ============================================================
   10. QUANTITY BUTTONS
   ============================================================ */

/*
 * Both product-page and recommended-product quantity buttons
 * use the same styling:
 *
 * NORMAL:
 * - White/transparent background
 * - Orange +/- icon
 *
 * HOVER:
 * - Orange background
 * - White +/- icon
 */


/* ------------------------------------------------------------
   RECOMMENDED PRODUCTS / PRODUCT CARDS
   ------------------------------------------------------------ */

/* Normal state */
.product-miniature__form .quantity-button .decrement,
.product-miniature__form .quantity-button .increment {
    background: var(--theme-white) !important;
    background-color: var(--theme-white) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-orange) !important;
}

/* +/- icons */
.product-miniature__form .quantity-button .decrement .material-icons,
.product-miniature__form .quantity-button .increment .material-icons {
    color: var(--theme-orange) !important;
}

/* Hover state */
.product-miniature__form .quantity-button .decrement:hover,
.product-miniature__form .quantity-button .increment:hover {
    background: var(--theme-orange) !important;
    background-color: var(--theme-orange) !important;
    border-color: var(--theme-orange) !important;
    color: var(--theme-white) !important;
}

/* White +/- icons on hover */
.product-miniature__form .quantity-button .decrement:hover .material-icons,
.product-miniature__form .quantity-button .increment:hover .material-icons {
    color: var(--theme-white) !important;
}


/* ------------------------------------------------------------
   PRODUCT DETAIL PAGE
   ------------------------------------------------------------ */

/* Normal state */
body#product .product__quantity .quantity-button__group .decrement,
body#product .product__quantity .quantity-button__group .increment {
    background: var(--theme-white) !important;
    background-color: var(--theme-white) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-orange) !important;
}

/* +/- icons */
body#product .product__quantity .quantity-button__group .decrement .material-icons,
body#product .product__quantity .quantity-button__group .increment .material-icons {
    color: var(--theme-orange) !important;
}

/* Hover state */
body#product .product__quantity .quantity-button__group .decrement:hover,
body#product .product__quantity .quantity-button__group .increment:hover {
    background: var(--theme-orange) !important;
    background-color: var(--theme-orange) !important;
    border-color: var(--theme-orange) !important;
    color: var(--theme-white) !important;
}

/* White +/- icons on hover */
body#product .product__quantity .quantity-button__group .decrement:hover .material-icons,
body#product .product__quantity .quantity-button__group .increment:hover .material-icons {
    color: var(--theme-white) !important;
}


/* ============================================================
   11. CATEGORY / SIDEBAR
   ============================================================ */

#left-column,
#right-column {
    color: var(--theme-text);
}


/* ---------- Category blocks ---------- */

.block-categories,
.faceted-search {
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: var(--theme-white);
    overflow: hidden;
}


/* ---------- Category heading ---------- */

.block-categories .h6,
.block-categories .category-title,
.faceted-search .h6 {
    color: var(--theme-blue-dark);
    font-weight: 700;
}


/* ---------- Sidebar links ---------- */

.block-categories a,
.faceted-search a {
    color: var(--theme-text);
}

.block-categories a:hover,
.faceted-search a:hover {
    color: var(--theme-blue);
}


/* ---------- Selected filter ---------- */

.facet-label.active,
.facet-label:hover {
    color: var(--theme-blue);
}


/* ============================================================
   12. BREADCRUMBS
   ============================================================ */

.breadcrumb {
    background: transparent;
}

.breadcrumb a {
    color: var(--theme-blue);
}

.breadcrumb a:hover {
    color: var(--theme-orange);
}

.breadcrumb .breadcrumb-item.active {
    color: var(--theme-muted);
}


/* ============================================================
   13. ALERTS / NOTIFICATIONS
   ============================================================ */

.alert {
    border-radius: var(--theme-radius-small);
}

.alert-success {
    border-left: 4px solid var(--theme-blue);
}

.alert-warning {
    border-left: 4px solid var(--theme-orange);
}


/* ============================================================
   14. FORMS
   ============================================================ */

.form-control,
.form-select {
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-small);
    transition:
        border-color var(--theme-transition),
        box-shadow var(--theme-transition);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--theme-blue);
    box-shadow: 0 0 0 3px rgba(7, 87, 160, 0.12);
}


/* ============================================================
   15. CHECKBOXES / RADIO BUTTONS
   ============================================================ */

.form-check-input:checked {
    background-color: var(--theme-blue);
    border-color: var(--theme-blue);
}

.form-check-input:focus {
    border-color: var(--theme-blue);
    box-shadow: 0 0 0 3px rgba(7, 87, 160, 0.12);
}


/* ============================================================
   16. PAGINATION
   ============================================================ */

.pagination .page-link {
    color: var(--theme-blue);
    border-color: var(--theme-border);
}

.pagination .page-link:hover {
    color: var(--theme-blue-dark);
    background: rgba(255, 212, 59, 0.2);
    border-color: var(--theme-yellow);
}

.pagination .active .page-link {
    background: var(--theme-blue);
    border-color: var(--theme-blue);
    color: var(--theme-white);
}


/* ============================================================
   17. FOOTER
   ============================================================ */

.footer {
    color: var(--theme-orange) !important;
}


/* ---------- Footer before ---------- */

.footer__before {
    background: var(--theme-blue);
    color: var(--theme-orange) !important;
}


/* ---------- Main footer ---------- */

.footer__main {
    background: var(--theme-blue-dark);
    color: var(--theme-orange) !important;
    border-top: 3px solid var(--theme-orange);
}


/* ---------- Footer bottom ---------- */

.footer__main-bottom {
    background: var(--theme-blue-darker);
    color: var(--theme-orange) !important;
}


/* ---------- Footer links ---------- */

.footer a {
    color: var(--theme-orange) !important;
    text-decoration: none;
}

.footer a:hover,
.footer a:focus {
    color: var(--theme-yellow) !important;
}


/* ---------- Footer headings ---------- */

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,
.footer .h1,
.footer .h2,
.footer .h3,
.footer .h4,
.footer .h5,
.footer .h6,
.footer .footer-block__title,
.footer .footer-block__title--toggle,
.footer .footer-block__title *,
.footer .footer-block__title--toggle * {
    color: var(--theme-orange) !important;
    font-weight: 700;
}


/* ---------- Footer specific titles ---------- */

.footer .footer_title_1,
.footer .footer_title_2,
.footer .footer_contactinfo_title,
.footer .footer_title_1 *,
.footer .footer_title_2 *,
.footer .footer_contactinfo_title * {
    color: var(--theme-orange) !important;
}


/* ---------- Force footer_title_2 ---------- */

.footer .footer_title_2,
.footer .footer_title_2 *,
.footer .footer_title_2 a,
.footer .footer_title_2 span,
.footer .footer_title_2 strong,
.footer .footer_title_2 h1,
.footer .footer_title_2 h2,
.footer .footer_title_2 h3,
.footer .footer_title_2 h4,
.footer .footer_title_2 h5,
.footer .footer_title_2 h6 {
    color: var(--theme-orange) !important;
}


/* ---------- Footer icons ---------- */

.footer svg,
.footer .material-icons {
    color: var(--theme-orange) !important;
}

.footer a:hover svg,
.footer a:hover .material-icons {
    color: var(--theme-yellow) !important;
}


/* ---------- Footer separators ---------- */

.footer hr {
    border-color: rgba(255, 138, 0, 0.25);
}


/* ============================================================
   18. FOOTER NEWSLETTER
   ============================================================ */

.footer .input-wrapper input,
.footer input[type="email"] {
    border: 2px solid rgba(255, 138, 0, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: var(--theme-white);
}

.footer input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.footer input[type="email"]:focus {
    border-color: var(--theme-orange);
    box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.15);
}


/* ---------- Newsletter button ---------- */

.footer button,
.footer .btn {
    background: var(--theme-orange);
    border-color: var(--theme-orange);
    color: var(--theme-blue-dark);
}

.footer button:hover,
.footer button:focus,
.footer .btn:hover,
.footer .btn:focus {
    background: var(--theme-yellow);
    border-color: var(--theme-yellow);
    color: var(--theme-blue-dark);
}


/* ============================================================
   19. COPYRIGHT
   ============================================================ */

.footer .copyright {
    color: var(--theme-orange) !important;
    border-top: 1px solid rgba(255, 138, 0, 0.2);
}

.footer .copyright a {
    color: var(--theme-orange) !important;
}

.footer .copyright a:hover {
    color: var(--theme-yellow) !important;
}


/* ============================================================
   20. SOCIAL MEDIA
   ============================================================ */

.footer .social-links a,
.footer .social-follow a {
    color: var(--theme-orange) !important;
    transition:
        color var(--theme-transition),
        transform var(--theme-transition);
}

.footer .social-links a:hover,
.footer .social-follow a:hover {
    color: var(--theme-yellow) !important;
    transform: translateY(-2px);
}


/* ============================================================
   21. MOBILE MENU
   ============================================================ */

@media (max-width: 767.98px) {

    .header-bottom {
        background: var(--theme-blue);
    }

    .header-nav-full-width {
        background: var(--theme-blue-dark);
        border-bottom-width: 2px;
    }

    .header-bottom__logo img {
        max-height: 55px;
    }


    /* ---------- Mobile menu ---------- */

    .mobile-menu,
    .menu {
        background: var(--theme-blue-dark);
    }

    .mobile-menu a,
    .menu a {
        color: var(--theme-orange);
    }

    .mobile-menu a:hover,
    .mobile-menu a:focus,
    .menu a:hover,
    .menu a:focus {
        color: var(--theme-yellow);
        background: rgba(255, 255, 255, 0.06);
    }


    /* ---------- Mobile buttons ---------- */

    .header-block__action-btn {
        color: var(--theme-orange);
    }

    .header-block__action-btn:hover {
        color: var(--theme-yellow);
    }

}


/* ============================================================
   22. TABLET
   ============================================================ */

@media (min-width: 768px) and (max-width: 1199.98px) {

    .header-bottom__logo img {
        max-height: 60px;
    }

}


/* ============================================================
   23. ACCESSIBILITY / FOCUS
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--theme-yellow);
    outline-offset: 2px;
}


/* ============================================================
   24. BACK TO TOP
   ============================================================ */

.back-to-top-link {
    background: var(--theme-blue);
    border-color: var(--theme-blue);
    color: var(--theme-white);
}

.back-to-top-link:hover {
    background: var(--theme-orange);
    border-color: var(--theme-orange);
    color: var(--theme-blue-dark);
}


/* ============================================================
   25. STICKY HEADER
   ============================================================ */

.js-sticky-header.is-sticky,
.js-sticky-header.sticky {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}


/* ============================================================
   26. GENERAL ACCENT ELEMENTS
   ============================================================ */

.text-primary {
    color: var(--theme-blue) !important;
}

.bg-primary {
    background-color: var(--theme-blue) !important;
}

.border-primary {
    border-color: var(--theme-blue) !important;
}


/* ---------- Orange utility ---------- */

.text-orange {
    color: var(--theme-orange) !important;
}

.bg-orange {
    background-color: var(--theme-orange) !important;
}


/* ============================================================
   27. HOVER EFFECT FOR IMPORTANT LINKS
   ============================================================ */

#main-content a:not(.btn):hover {
    color: var(--theme-orange);
}


/* ============================================================
   28. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}


/* ============================================================
   QUICK VIEW
   ============================================================ */

/* ---------- Hide Quick View buttons ---------- */

.product-miniature__quickview-button,
.quick-view,
.js-quick-view {
    display: none !important;
}


/* ============================================================
   PRODUCT PAGE - DISABLE COMPONENT PRODUCT NAME LINK
   Keep product name and price visible
   ============================================================ */

body#product .item-name a.item-link {
    pointer-events: none !important;
    cursor: default !important;
    text-decoration: none !important;
}

/* ============================================================
   FOOTER LOGOS MODULE
   Full-width row inside .footer__main-top
   ============================================================ */

.footer__main-top > .footer-logos {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    margin: 30px 0 10px 0 !important;
    padding: 20px 15px !important;

    box-sizing: border-box;
}

.footer__main-top > .footer-logos .footer-logos-items {
    width: 100% !important;
    max-width: 900px !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-evenly !important;

    margin: 0 auto !important;
    padding: 0 !important;

    gap: 30px;
}

.footer__main-top > .footer-logos .footer-logos-items > img,
.footer__main-top > .footer-logos .footer-logos-items > a {
    flex: 1 1 0;
    min-width: 0;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.footer__main-top > .footer-logos .footer-logos-items img {
    display: block;
    width: auto;
    height: 100px;
    max-width: 200px;
    object-fit: contain;
}

.footer__main-top > .footer-logos .footer-logos-items > a img {
    flex: none;
}


/* ---------- Mobile ---------- */

@media (max-width: 767.98px) {

    .footer__main-top > .footer-logos {
        margin: 20px 0 10px 0 !important;
        padding: 15px 10px !important;
    }

    .footer__main-top > .footer-logos .footer-logos-items {
        max-width: 100% !important;
        gap: 15px;
    }

    .footer__main-top > .footer-logos .footer-logos-items img {
        height: 40px;
        max-width: 150px;
    }
}

/* ============================================================
   PRODUCT MINIATURE ACTIONS
   Hide action buttons on product cards
   ============================================================ */

.product-miniature__actions {
    display: none !important;
}

.component-summary-line.component-total {
    background-color: var(--theme-orange) !important;
}

.component-summary-line.component-total .label,
.component-summary-line.component-total .value {
    color: var(--theme-blue-dark) !important;
}

/* ============================================================
   HUMMINGBIRD PS_IMAGESLIDER
   Mobile: 1110 x 340 verhouding behouden
   ============================================================ */

@media (max-width: 767.98px) {

    /* --------------------------------------------------------
       SLIDER
       -------------------------------------------------------- */

    .ps-imageslider,
    #ps_imageslider {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }


    /* --------------------------------------------------------
       CAROUSEL
       -------------------------------------------------------- */

    #ps_imageslider {
        aspect-ratio: 1110 / 340 !important;
        height: auto !important;
    }


    /* --------------------------------------------------------
       CAROUSEL INNER
       -------------------------------------------------------- */

    #ps_imageslider .carousel-inner {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }


    /* --------------------------------------------------------
       SLIDE
       -------------------------------------------------------- */

    #ps_imageslider .carousel-item {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }


    /* --------------------------------------------------------
       LINK
       -------------------------------------------------------- */

    #ps_imageslider .ps-imageslider__link {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }


    /* --------------------------------------------------------
       FIGURE
       -------------------------------------------------------- */

    #ps_imageslider .ps-imageslider__figure {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* --------------------------------------------------------
       IMAGE
       -------------------------------------------------------- */

    #ps_imageslider .ps-imageslider__figure img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        object-fit: contain !important;
        margin: 0 !important;
        padding: 0 !important;
    }


/* --------------------------------------------------------
   NAVIGATION BUTTONS
   -------------------------------------------------------- */

#ps_imageslider .carousel-control-prev,
#ps_imageslider .carousel-control-next {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    margin: 0 !important;
}


/* --------------------------------------------------------
   INDICATORS
   -------------------------------------------------------- */

#ps_imageslider .carousel-indicators {
    bottom: 8px !important;
    margin-bottom: 0 !important;
}

#ps_imageslider .carousel-indicators button {
    margin-bottom: 0 !important;
}

}