/* Contrast fixes for top bar hover + nav dropdowns (desktop + mobile).
   Loaded after main.css so these rules win on equal specificity.
   Desktop rules first; mobile @media block at the bottom overrides them. */

/* Top bar (dark blue gradient): keep links white on hover. */
.site-top a:hover,
.site-top a:hover .fa,
.site-top a:hover strong {
    color: #fff;
}

/* Desktop main-nav dropdown (".site-nav-sub").
   The original CSS uses background-image:url(site-nav-sub-bg.png), but that
   image is missing — the panel renders transparent and the page content shows
   through on hover. Force a solid white panel with dark navy text. */
.site-nav-sub {
    background: #fff;
    background-image: none;
    border: 1px solid #d0d6e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.site-nav-sub a {
    color: #14284b;
}
.site-nav-sub li {
    border-top: 1px solid #e4e8ef;
}
.site-nav-sub li:first-child {
    border-top: 0;
}
.site-nav-sub li:hover > a,
.site-nav-sub a:hover {
    background: #f4f6fa;
    color: #00b4ff;
}
.site-nav-sub .site-nav-open {
    background-color: #eef2f8;
    color: #14284b;
}

/* Nested sub-sub dropdowns share the same look but render slightly inset */
.site-nav-sub .site-nav-sub {
    background: #fff;
    background-image: none;
}

/* Cart table — left "Afbeelding" column alignment.
   main.css forces .cart .prod-single td:first-child to text-align:left, so the
   recycle/tag/shipping icons drift left while the product rows above (stars +
   "Op voorraad?") sit centered. Center all first-cell content for a clean
   visual column. Also normalize icon size so FontAwesome icons read at a
   similar visual weight to the 62px legacy image-* JPGs. */
.cart .prod-bottom td:first-child,
.cart .prod-single td:first-child {
    text-align: center;
    vertical-align: middle;
}
.cart .prod-single td:first-child .fa {
    font-size: 38px;
    line-height: 1;
}
.cart .prod-single td:first-child img {
    max-width: 56px;
    height: auto;
    display: inline-block;
}
.cart .prod-bottom td:first-child .star-rating {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

/* Mobile slide-out navigation drawer (<=755px).
   At this width .site-nav becomes a 260px drawer; the same .site-nav-sub
   items need a dark background+white text instead of the desktop white panel. */
@media (max-width: 755px) {

    /* Hamburger button: original styles use white icon + white tint on a white
       header — invisible. Replace with a dark-navy bars icon in a bordered
       button, and flip to a solid dark button when the drawer is open. */
    .mobile-nav-toggle {
        background-color: #fff;
        border: 1px solid #d0d6e0;
        border-radius: 6px;
        box-shadow: none;
        text-shadow: none;
        line-height: 42px;
        font-size: 22px;
        margin: 18px 10px 0 4px;
        transition: background-color .15s ease, border-color .15s ease;
    }
    .mobile-nav-toggle a {
        color: #14284b;
        padding: 0 13px;
    }
    .mobile-nav-toggle a:hover,
    .mobile-nav-toggle a:focus {
        color: #00b4ff;
    }
    html.js-nav .mobile-nav-toggle {
        background-color: #14284b;
        border-color: #14284b;
    }
    html.js-nav .mobile-nav-toggle a {
        color: #fff;
    }

    .site-nav,
    .site-nav > ul {
        background: #14284b;
    }

    .site-nav > ul > li > a,
    .site-nav > ul > li > a.menu {
        color: #fff;
        border-top: 1px solid #1f2f4d;
    }
    .site-nav > ul > li:first-child > a {
        border-top: 0;
    }
    .site-nav > ul > li:hover > a,
    .site-nav > ul > li > a:hover,
    .site-nav > ul > li > a.active {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
    }

    .site-nav-sub {
        background: #0e1d39;
        background-image: none;
        border: 0;
        box-shadow: none;
    }
    .site-nav-sub a {
        color: #fff;
    }
    .site-nav-sub li {
        border-top: 1px solid #1f2f4d;
    }
    .site-nav-sub li:hover > a,
    .site-nav-sub a:hover {
        color: #00b4ff;
        background: rgba(255, 255, 255, 0.06);
    }
    .site-nav-sub .site-nav-open {
        background-color: rgba(0, 180, 255, 0.18);
        color: #fff;
    }

    .site-nav-sub .site-nav-sub {
        background-color: #08152a;
    }
}