/**
 * SafetyGreen Custom Styles
 * Custom styling overrides and additions for the SafetyGreen website
 */

/* Header top panel - bottom border divider */
.page-header .main-panel-top {
    border-bottom: 1px solid #f0f0f0;
}

/* Main navigation - border top divider */
.nav-sections-item-content > .navigation {
    border-top: 1px solid #f4f4f4;
}

/* Main navigation - Windows-Chrome cap-top clip fix (attempt 3, glyph-level).
   CONFIRMED via live computed styles (2026-06-10): the link is display:flex; align-items:center,
   18px text line centred in a 48px box, and there is NO overflow:hidden anywhere on the chain
   (a/li/ul/nav/section divs/header all overflow:visible) — ~15px clear above the text. So this is
   NOT a CSS box clip, and it reproduces on the client's LOW-RES (DPR=1) Windows machine, ruling out
   the earlier fractional-HiDPI theory. The hard flat cut across the tops of the UPPERCASE caps is
   the Windows DirectWrite/ClearType rasteriser dropping the top antialiased row of small BOLD caps.
   It does NOT reproduce on macOS Chrome (CoreText) at any DPR, so it can only be verified on Windows.
   Box tweaks (line-height/padding, attempts 1-2 in be017b8af / 9bcec3638) could never fix a glyph
   clip and didn't. This attempt targets the glyph: font-size 12->13px (the cap top stroke spans more
   pixel rows, so the rasteriser can't round the whole row away) and weight 700->600 (we had added the
   700; thin bold top strokes at 12px are the most-clipped case). 600 is a real loaded Open Sans weight
   (see head.phtml), not synthesised. Padding still sums to 48px to keep flag alignment + header rhythm. */
.nav-sections .sw-megamenu > ul > li > a:not(.flag-item) {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    padding-top: 17px !important;
    padding-bottom: 13px !important;
}

/* Main navigation - tighten spacing between top-level menu items.
   Porto's generated pub/media/porto/web/css/custom.css sets 23px on the same
   selector and loads after this file, so !important is required to win. */
@media (min-width: 992px) {
    .page-header .navigation:not(.side-megamenu) .level0 {
        margin-right: 13px !important;
    }
}

/* Header top panel - swapped welcome/promo positions */
.page-header.type1 .main-panel-top .header-left-custom-content .greet.welcome {
    text-transform: uppercase;
    list-style: none;
    display: inline-block;
    padding: 0;
    margin: 0;
}
.page-header.type1 .main-panel-top .panel.header .header-promo-text {
    text-transform: uppercase;
    padding: 0 10px 0 0;
}

/* Header icons - muted gray color */
.header-main .header-right .header-compare-link,
.header-main .header-right .wishlist,
.header-main .header-right .minicart-wrapper .action.showcart {
    color: #919191 !important;
}

/* Minicart "View Cart" link - ensure translated text fits on one line */
.block-minicart .actions .viewcart {
    white-space: nowrap;
    font-size: 11px;
}

/* Price display: Excl. BTW first (prominent), Incl. BTW second (smaller) */

/* Catalog: flex reorder inside price-container */
.price-box .price-container {
    display: flex;
    flex-direction: column;
}
.price-box .price-container > .price-label {
    order: -1;
}
.price-box .price-container > .price-excluding-tax {
    order: 0;
    margin-top: 0 !important;
    margin-bottom: 3px;
}
.price-box .price-container > .price-including-tax {
    order: 1;
}

/* Excl. BTW label — small gray, with spacing before value */
.price-box .price-container > .price-excluding-tax::before {
    font-size: 11px !important;
    font-weight: normal !important;
    color: #888 !important;
    margin-right: 4px;
}

/* Excl. price value */
.price-box .price-container > .price-excluding-tax .price {
    font-size: 13px !important;
    color: #222529 !important;
}

/* Incl. BTW label — small gray, with spacing */
.price-box .price-container > .price-including-tax[data-label]::before {
    content: attr(data-label) ': ';
    font-size: 11px;
    font-weight: normal;
    color: #888;
    margin-right: 4px;
}

/* Incl. price value */
.price-box .price-container > .price-including-tax .price {
    font-size: 13px !important;
    color: #222529 !important;
}

/* PDP: slightly larger labels and values */
.product-info-price .price-container > .price-excluding-tax::before {
    font-size: 13px !important;
}
.product-info-price .price-container > .price-excluding-tax .price {
    font-size: 18px !important;
}
.product-info-price .price-container > .price-including-tax[data-label]::before {
    font-size: 13px;
}
.product-info-price .price-container > .price-including-tax .price {
    font-size: 13px !important;
}

/* PDP: sg-sale-prices styling */
.product-info-price .sg-sale-prices { text-align: left; }
.product-info-price .sg-price-label { font-size: 14px; font-weight: 600; color: #555; margin-right: 4px; }
.product-info-price .sg-price-old { font-size: 16px; text-decoration: line-through; color: #cc0000; margin-right: 6px; }
.product-info-price .sg-price-new { font-size: 18px; font-weight: 700; color: #222529; }
.product-info-price .sg-price-line { margin-bottom: 4px; }

/* PDP: sg-regular-prices styling (non-sale products) */
.product-info-price .sg-regular-prices { text-align: left; }
.product-info-price .sg-price-regular { font-size: 18px; font-weight: 700; color: #333; }

/* PDP: Clean up special/old price layout (fallback for non-sg rendering) */
.product-info-price .special-price,
.product-info-price .old-price {
    display: block !important;
}
.product-info-price .old-price .price-container {
    display: inline !important;
}
.product-info-price .old-price .price-excluding-tax {
    display: none !important;
}
.product-info-price .old-price .price-including-tax {
    display: inline !important;
}
.product-info-price .old-price .price-including-tax::before {
    display: none !important;
}
.product-info-price .old-price .price-including-tax .price {
    font-size: inherit !important;
}

/* Minicart - items total header */
.block-minicart .items-total {
    font-size: 13px;
}

/* Minicart */
.minicart-items .price-container > .price-wrapper {
    display: flex;
    flex-direction: column;
}
.minicart-items .price-excluding-tax {
    order: -1;
}
.minicart-items .price-excluding-tax::before {
    font-size: 11px !important;
    font-weight: normal !important;
    color: #888 !important;
    margin-right: 4px;
}
.minicart-items .price-excluding-tax .price {
    font-size: 11px !important;
    color: #222529 !important;
}
.minicart-items .price-including-tax[data-label]::before {
    content: attr(data-label) ': ';
    font-size: 11px;
    color: #888;
    margin-right: 4px;
}
.minicart-items .price-including-tax .price {
    font-size: 11px !important;
    color: #222529 !important;
}

/* Cart page - reorder prices: excl. first, incl. second */
.cart.table-wrapper td.col.price,
.cart.table-wrapper td.col.subtotal {
    vertical-align: middle;
}
.cart.table-wrapper td.col.price .price-excluding-tax,
.cart.table-wrapper td.col.price .price-including-tax,
.cart.table-wrapper td.col.subtotal .price-excluding-tax,
.cart.table-wrapper td.col.subtotal .price-including-tax {
    display: block;
    white-space: nowrap;
}
.cart.table-wrapper .price-excluding-tax {
    order: -1;
}
.cart.table-wrapper .price-excluding-tax::before {
    content: attr(data-label) ': ';
    font-size: 11px !important;
    font-weight: normal !important;
    color: #888 !important;
    margin-right: 4px;
}
.cart.table-wrapper .price-excluding-tax .price {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #222529 !important;
}
.cart.table-wrapper .price-including-tax::before {
    content: attr(data-label) ': ';
    font-size: 11px;
    font-weight: normal;
    color: #888;
    margin-right: 4px;
}
.cart.table-wrapper .price-including-tax .price {
    font-size: 11px !important;
    color: #222529 !important;
}
.cart.table-wrapper td.col.subtotal {
    text-align: right;
}

/* Cart page - action icons to top-right corner */
.cart.table-wrapper table.cart > tbody.item {
    position: relative;
}
.cart.table-wrapper .item-actions td {
    padding: 0 !important;
}
.cart.table-wrapper .actions-toolbar {
    position: absolute;
    top: 8px;
    right: 0;
    min-height: 0;
    padding: 0;
}
.cart.table-wrapper .actions-toolbar .action {
    font-size: 15px;
}

/* Cart page - compact qty */
.cart.table-wrapper .col.qty .field.qty {
    width: 84px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cart.table-wrapper .col.qty .input-text.qty {
    width: 36px;
    height: 36px;
    font-size: 13px;
    padding: 0 3px;
}
.cart.table-wrapper .col.qty .qty-changer > a {
    width: 24px;
    height: 36px;
    line-height: 36px;
}

/* Porto Icons Font */
@font-face {
    font-family: 'porto-icons';
    src: url('../icon-fonts/font/porto-icons.woff2') format('woff2'),
         url('../icon-fonts/font/porto-icons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.porto-icon i:before,
i[class^="porto-icon-"]:before,
i[class*=" porto-icon-"]:before {
    font-family: 'porto-icons' !important;
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Simple Line Icons - Redo icon */
@font-face {
    font-family: 'simple-line-icons';
    src: url('../simple-line-icons/fonts/Simple-Line-Icons.woff2') format('woff2'),
         url('../simple-line-icons/fonts/Simple-Line-Icons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
i.icon-redo:before {
    font-family: 'simple-line-icons' !important;
    content: '\e098';
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* WhatsApp Icon Block */
.safetygreen-whatsapp-block .whatsapp-icon:before {
    content: '\f232'; /* WhatsApp icon Unicode */
    font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Free' !important;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

/* Language Flags Inline Switcher - inside menu navigation */
/* Only apply flex layout on desktop to prevent breaking mobile menu */
@media (min-width: 992px) {
    /* Only target header navigation, not sidebar menus */
    .nav-sections .sw-megamenu > ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .nav-sections li.language-flags-inline {
        margin-left: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px;
        padding: 0 !important;
        list-style: none !important;
        float: none !important;
    }

    li.language-flags-inline .flag-item {
        display: flex;            /* identical centering box for the <span> (NL) and the <a> (UK) */
        align-items: center;
        justify-content: center;
        height: 1.6em;            /* explicit equal height so neither wrapper can be taller */
        padding: 0;               /* nav-label padding is now excluded via :not(.flag-item), so no !important needed */
        margin: 0;
        line-height: 0;
        opacity: 0.8;
        transition: opacity 0.2s ease;
    }

    li.language-flags-inline .flag-item:hover,
    li.language-flags-inline .flag-item.active {
        opacity: 1;
    }

    li.language-flags-inline .flag-item img {
        display: block;
        height: 1.6em;
        width: auto;
        position: relative;
        top: 2px;              /* nudge both flags down together; applies equally so they stay aligned */
    }
}

/* Hide on mobile */
@media (max-width: 991px) {
    li.language-flags-inline {
        display: none !important;
    }

    /* Hide sidebar toggle button on product pages */
    .right-side-open {
        display: none !important;
    }
}

/* Hide language flags when header is sticky */
header.page-header.sticky-header li.language-flags-inline {
    display: none !important;
}

/* Language Flags Switcher - mobile, in the top header panel (right side) */
/* Desktop keeps the megamenu flags, so this copy is mobile-only */
.page-header .main-panel-top .language-flags-mobile {
    display: none;
}

@media (max-width: 991px) {
    .page-header .main-panel-top .language-flags-mobile {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        vertical-align: middle;
    }

    .language-flags-mobile .flag-item {
        display: flex;            /* same centering box for the <span> (active) and the <a> (inactive) */
        align-items: center;
        justify-content: center;
        height: 16px;             /* explicit equal height so neither wrapper can be taller */
        padding: 0;
        margin: 0;
        line-height: 0;
        opacity: 0.8;
        transition: opacity 0.2s ease;
    }

    .language-flags-mobile .flag-item:hover,
    .language-flags-mobile .flag-item.active {
        opacity: 1;
    }

    .language-flags-mobile .flag-item img {
        display: block;
        height: 16px;
        width: auto;
    }
}

/* Checkout - Compact shipping methods layout */
.checkout-index-index .table-checkout-shipping-method,
.checkout-index-index .table-checkout-shipping-method > tbody {
    display: block;
}

.checkout-index-index .table-checkout-shipping-method > thead {
    display: none;
}

.checkout-index-index .table-checkout-shipping-method .amcheckout-method {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 0 10px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

/* Remove all default cell borders/padding */
.checkout-index-index .table-checkout-shipping-method .amcheckout-method > td {
    border: none !important;
    padding: 0;
}

/* Radio button - spans both rows */
.checkout-index-index .table-checkout-shipping-method .amcheckout-method > td:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
}

/* Price - spans both rows */
.checkout-index-index .table-checkout-shipping-method .amcheckout-method > td:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / 3;
    font-weight: bold;
}

/* Method title */
.checkout-index-index .table-checkout-shipping-method .amcheckout-method > td:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}

/* Carrier title - second line under method title */
.checkout-index-index .table-checkout-shipping-method .amcheckout-method > td:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
    font-size: 12px;
    color: #888;
    padding-top: 2px;
}

/* Non-method rows (comments, errors, PostNL options) */
.checkout-index-index .table-checkout-shipping-method > tbody > tr:not(.amcheckout-method) {
    display: block;
}

.checkout-index-index .table-checkout-shipping-method > tbody > tr:not(.amcheckout-method) > td {
    display: block;
    padding: 5px 0;
}

/* Checkout Order Summary - Fix grand total excl. tax font size */
.checkout-index-index .opc-block-summary .table-totals .grand.excl .mark,
.checkout-index-index .opc-block-summary .table-totals .grand.excl .amount {
    font-size: 14px !important;
    border-top: 0;
    padding-top: 0;
}
.checkout-index-index .opc-block-summary .table-totals .grand.excl .mark strong,
.checkout-index-index .opc-block-summary .table-totals .grand.excl .amount strong {
    font-weight: 400 !important;
    font-size: 14px !important;
}

/* Checkout Order Summary - Fix cart items overflow and layout */
.checkout-index-index .opc-block-summary .minicart-items-wrapper {
    max-height: none !important;
    overflow: hidden !important;
}
/* Override Porto minicart styles that leak into checkout summary */
.checkout-index-index .opc-block-summary .minicart-items .product-item-details {
    padding-left: 10px !important;
    max-width: none !important;
}
.checkout-index-index .opc-block-summary .minicart-items .product-image-container {
    margin-left: 0 !important;
}
/* Allow product name to wrap in checkout summary (minicart forces nowrap) */
.checkout-index-index .opc-block-summary .minicart-items .product-item-name {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}
/* Title full width, qty + price inline on one line below */
.checkout-index-index .opc-block-summary .product-item .product-item-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 0 8px !important;
}
/* Dissolve name-block so its children join the parent flex */
.checkout-index-index .opc-block-summary .product-item .product-item-name-block {
    display: contents !important;
}
/* Title takes full row */
.checkout-index-index .opc-block-summary .product-item .product-item-name {
    flex: 0 0 100% !important;
}
/* Qty and prices flow inline on the next line */
.checkout-index-index .opc-block-summary .product-item .details-qty,
.checkout-index-index .opc-block-summary .product-item .amcheckout-price-wrapper {
    display: inline-flex !important;
    margin: 0 !important;
}

/* Product Page - "Vanaf" (As low as) price label - smaller styling */
.product-info-price .minimal-price-link .price-label,
.product-info-price .price-label {
    font-size: 14px !important;
    font-weight: 400 !important;
    display: block !important;
    color: #666;
}

/* Product Page Sidebar Service Block - Green text and icons */
.sidebar .porto-sicon-title,
.sidebar .porto-sicon-box h3,
.sidebar .porto-sicon-box h5 {
    color: #80cc28 !important;
}

.sidebar .porto-sicon-box .porto-icon,
.sidebar .porto-sicon-box .porto-icon i,
.sidebar .porto-sicon-box [class^="porto-icon-"],
.sidebar .porto-sicon-box [class*=" porto-icon-"] {
    color: #80cc28 !important;
}

/* ==========================================================================
   HOMEPAGE LAYOUT STYLES
   ========================================================================== */

/* FULL-WIDTH BANNER - breaks out of container to span viewport */
.fullwidth-banner-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    border-bottom: 15px solid #80cc28;
}

.fullwidth-banner-section img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    margin-bottom: 0;
}

/* Cap banner height on wide screens — image will crop/zoom to fill */
@media (min-width: 1400px) {
    .fullwidth-banner-section img {
        max-height: 350px;
    }
}

.fullwidth-banner-section .banner-wrapper {
    position: relative;
}

/* Optional: Banner overlay text */
.fullwidth-banner-section .banner-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* CONTAINED CONTENT WRAPPER */
.homepage-content-wrapper {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* ==========================================================================
   USP SLIDER (Free Shipping, Support icons row)
   ========================================================================== */
.usp-slider-wrapper {
    padding: 15px 0 20px;
    margin: 0;
    overflow: visible;
}

.usp-bar {
    margin: 0;
    padding: 0;
}

#usp-slider {
    overflow: visible;
}

#usp-slider .owl-stage {
    display: flex;
    align-items: stretch;
}

#usp-slider .owl-stage-outer {
    overflow: hidden;
    padding: 5px 0;
}

#usp-slider .owl-item {
    border-right: 1px solid #ccc;
}

#usp-slider .owl-item:last-child {
    border-right: none;
}

#usp-slider .usp-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 15px;
    height: 100%;
}

#usp-slider .porto-sicon-box {
    margin-bottom: 0 !important;
    white-space: nowrap;
}

#usp-slider .porto-sicon-header p {
    margin-bottom: 0;
}

/* Mobile: increase spacing between the stacked USP feature blocks
   (KLANTENSERVICE / KEURINGEN / ...) so the gap between them matches the
   gap above the first block. These use the .top-icon variant, distinct
   from the #usp-slider .default-icon bar above. */
@media (max-width: 767px) {
    .porto-sicon-box.top-icon {
        margin-bottom: 50px;
    }
}

/* ==========================================================================
   HOMEPAGE SECTIONS
   ========================================================================== */
.homepage-section {
    padding: 0 0 30px !important;
    margin-top: 0 !important;
}

/* Section header: title centered + "view all" link on the right */
.section-header {
    display: block !important;
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}
.section-header .section-title {
    margin-bottom: 0 !important;
}
.section-view-all {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #80cc28;
    text-decoration: none;
    white-space: nowrap;
}
.section-view-all:hover {
    color: #6d9a00;
    text-decoration: underline;
}
/* Mobile: stack the "view all" link below the title instead of overlapping it */
@media (max-width: 767px) {
    .section-view-all {
        position: static;
        display: block;
        transform: none;
        text-align: center;
        margin-top: 8px;
    }
    .section-header .section-title {
        margin-bottom: 0 !important;
    }
}

/* Section Titles with decorative lines */
.section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px !important;
    padding-top: 0 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Remove extra spacing from homepage section */
.homepage-section:first-of-type {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.section-title:before,
.section-title:after {
    content: "";
    flex: 1;
    max-width: 100px;
    height: 1px;
    background: #ddd;
}

/* Alternative: Title with full-width lines */
.section-title-full {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 40px 0 30px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-title-full:before,
.section-title-full:after {
    content: "";
    flex: 1;
    height: 1px;
    background: #ddd;
}

.section-title-full:before {
    margin-right: 30px;
}

.section-title-full:after {
    margin-left: 30px;
}

/* ==========================================================================
   BRAND LOGOS SECTION
   ========================================================================== */
.brands-section {
    padding: 20px 0 !important;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

/* Remove extra margins from carousel/slider inside brands section */
.brands-section .owl-carousel,
.brands-section .slick-slider,
.brands-section .widget,
.brands-section .block {
    margin-bottom: 0 !important;
}

.brands-section .owl-stage-outer,
.brands-section .slick-list {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.brands-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.brand-logo {
    opacity: 0.7;
    transition: opacity 0.3s ease;
    max-width: 120px;
}

.brand-logo:hover {
    opacity: 1;
}

.brand-logo img {
    max-width: 100%;
    height: auto;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.brand-logo:hover img {
    filter: grayscale(0%);
}

/* ==========================================================================
   PROMO BANNER (Big Sale banner)
   ========================================================================== */
.promo-banner {
    background: linear-gradient(90deg, #80cc28 0%, #5a9e1a 100%);
    border-radius: 5px;
    padding: 15px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30px 0;
    flex-wrap: wrap;
    gap: 15px;
}

.promo-banner-label {
    background: #c00;
    color: #fff;
    padding: 8px 15px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
}

.promo-banner-text {
    color: #fff;
    font-size: 16px;
    flex: 1;
    padding: 0 20px;
}

.promo-banner-text strong {
    font-weight: 700;
}

.promo-banner .btn-view-sale {
    background: #fff;
    color: #333;
    padding: 10px 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.promo-banner .btn-view-sale:hover {
    background: #333;
    color: #fff;
}

/* ==========================================================================
   FEATURES/SERVICES SECTION (Bottom icons row)
   ========================================================================== */
.features-section {
    background: #f5f5f5;
    padding: 50px 0;
    margin-top: 40px;
}

.features-wrapper {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;
}

.feature-item {
    text-align: center;
    flex: 1;
    min-width: 200px;
    max-width: 280px;
}

.feature-icon {
    font-size: 48px;
    color: #333;
    margin-bottom: 15px;
}

.feature-icon img {
    width: 60px;
    height: auto;
}

.feature-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.feature-subtitle {
    font-size: 13px;
    color: #80cc28;
    margin-bottom: 10px;
}

.feature-text {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

/* ==========================================================================
   RESPONSIVE STYLES
   ========================================================================== */
@media (max-width: 991px) {
    .homepage-content-wrapper {
        padding: 0 10px;
    }

    .usp-bar {
        justify-content: center;
        gap: 10px;
    }

    .usp-item {
        flex: 0 0 45%;
        justify-content: center;
    }

    #usp-slider .owl-item {
        border-right: none;
    }

    .section-title:before,
    .section-title:after {
        width: 60px;
    }

    .brands-wrapper {
        gap: 20px;
    }

    .brand-logo {
        max-width: 100px;
    }
}

@media (max-width: 767px) {
    .section-title {
        font-size: 16px;
    }

    .section-title:before,
    .section-title:after {
        width: 40px;
    }

    .section-title-full:before,
    .section-title-full:after {
        display: none;
    }

    .promo-banner {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .promo-banner-text {
        padding: 10px 0;
    }

    .features-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .feature-item {
        max-width: 100%;
    }

    .brands-wrapper {
        gap: 15px;
    }

    .brand-logo {
        max-width: 80px;
    }
}

@media (max-width: 480px) {
    .fullwidth-banner-section img {
        min-height: 200px;
        object-fit: cover;
    }

    .section-title:before,
    .section-title:after {
        display: none;
    }

    .section-title {
        padding-bottom: 15px;
        border-bottom: 1px solid #ddd;
    }
}

/* ==========================================================================
   LAYERED NAVIGATION - Price Slider Accent Color (jQuery UI Slider)
   ========================================================================== */
.filter-options-item .ui-slider-handle {
    background: #80cc28 !important;
    border-color: #80cc28 !important;
}
.filter-options-item .ui-slider-range,
.filter-options-item .ui-slider .ui-widget-header {
    background: #80cc28 !important;
}
.filter-options-item .ui-slider-horizontal {
    background: #80cc28 !important;
}

/* ==========================================================================
   LAYERED NAVIGATION - Long filter labels: align checkbox with wrapped text
   Checkbox + anchor are inline siblings; on long labels the checkbox got
   stranded above full-width wrapped text. Flex pins the checkbox top-left
   and keeps the label in its own column with a consistent indent.
   ========================================================================== */
.filter-options-content .items .item {
    display: flex;
    align-items: flex-start;
}
.filter-options-content .items .item > input[type="checkbox"],
.filter-options-content .items .item > input[type="radio"] {
    flex: 0 0 auto;
    margin-top: 8px; /* anchor has 4px top padding + line leading; align box to first text line */
    margin-right: 8px;
}
.filter-options-content .items .item > a {
    flex: 1 1 auto;
    min-width: 0; /* allow long unbreakable strings to wrap */
}
/* Mageplaza price slider lives in the same .item markup; keep its container
   on the full row inside the flexed item (its divs are empty until jQuery UI
   initializes the slider). */
.filter-options-content .items .item > .ln_slider_container {
    flex: 1 1 100%;
    min-width: 100%;
}

/* ==========================================================================
   AMASTY BUNDLE PACK - "Set" Layout (old store style)
   Images in a row with "+" | description below | summary box on right
   ========================================================================== */

/* Wrapper - each pack/set */
.amrelated-pack-wrapper.-setview {
    clear: both;
    margin-bottom: 0;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}

.amrelated-pack-wrapper.-setview:first-child {
    border-top: 1px solid #ddd;
}

.amrelated-pack-wrapper.-setview:last-of-type {
    margin-bottom: 40px;
}

/* Spacing between bundle packs and related/upsell product blocks
   Overrides Porto custom.css .block.related.move-related {margin-top:30px} */
.catalog-product-view .block.related.move-related,
.catalog-product-view .block.upsell {
    clear: both;
    margin-top: 80px;
}

/* Remove underline from related/upsell section titles */
.catalog-product-view .block.related .slider-title,
.catalog-product-view .block.upsell .slider-title {
    border-bottom: none;
}

/* Hide default Amasty title - we show name in summary box instead */
.amrelated-pack-wrapper.-setview > .amrelated-title {
    display: none;
}

/* Main row: two columns (images+desc left, summary right) */
.amrelated-pack-wrapper.-setview .amrelated-set-row {
    display: flex;
    align-items: flex-start;
    gap: 25px;
}

/* Left column: images row + description */
.amrelated-pack-wrapper.-setview .amrelated-set-left {
    flex: 1;
    min-width: 0;
}

/* Images row: horizontal with "+" between them */
.amrelated-pack-wrapper.-setview .amrelated-set-images {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

/* Each product item in the images row */
.amrelated-pack-wrapper.-setview .amrelated-pack-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    padding: 0;
    width: auto;
    min-width: 0;
}

/* Checkbox next to non-parent items */
.amrelated-pack-wrapper.-setview .amrelated-set-checkbox-wrap {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.amrelated-pack-wrapper.-setview .amrelated-set-checkbox-wrap .amrelated-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #80cc28;
}

/* Product image */
.amrelated-pack-wrapper.-setview .amrelated-set-imglink {
    display: block;
}

.amrelated-pack-wrapper.-setview .amrelated-set-photo {
    max-height: 100px;
    width: auto;
    display: block;
}

/* Plus sign between images */
.amrelated-pack-wrapper.-setview .amrelated-set-plus {
    font-size: 20px;
    font-weight: 300;
    color: #999;
    padding: 0 5px;
    line-height: 1;
}

/* Description text below images */
.amrelated-pack-wrapper.-setview .amrelated-set-description {
    font-size: 13px;
    color: #555;
    font-style: italic;
    line-height: 1.5;
}

/* Right column: summary box */
.amrelated-pack-wrapper.-setview .amrelated-set-summary {
    flex-shrink: 0;
    width: 220px;
    border: 1px solid #ddd;
    padding: 15px 20px;
    text-align: right;
}

/* Set name / title */
.amrelated-pack-wrapper.-setview .amrelated-set-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

/* Prices */
.amrelated-pack-wrapper.-setview .amrelated-set-prices {
    margin-bottom: 12px;
}

.amrelated-pack-wrapper.-setview .amrelated-set-prices .main.price {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.amrelated-pack-wrapper.-setview .amrelated-set-prices .price-box {
    margin: 0;
}

/* Discount badge */
.amrelated-pack-wrapper.-setview .amrelated-discount.-summary {
    display: inline-block;
    font-size: 12px;
    color: #c00;
    margin-top: 4px;
}

/* Add to cart button - match main product page tocart style */
.amrelated-pack-wrapper.-setview .amrelated-tocart-wrapper {
    margin: 0;
}

.amrelated-pack-wrapper.-setview .amrelated-tocart-wrapper .action.primary {
    width: 100%;
    height: 3rem;
    padding: 0 2em;
    margin: 0;
    overflow: hidden;
    text-transform: uppercase;
    font-size: 1em;
    letter-spacing: -.015em;
    font-weight: 700;
    line-height: 3rem;
    border: none;
    background: #222529;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.amrelated-pack-wrapper.-setview .amrelated-tocart-wrapper .action.primary:before {
    display: inline-block;
    content: "\e8ba";
    font-family: "porto-icons";
    margin-right: .5rem;
    font-size: 1.125rem;
}

.amrelated-pack-wrapper.-setview .amrelated-tocart-wrapper .action.primary:hover {
    background: #333;
}

/* Hide any Amasty default elements that leak through */
.amrelated-pack-wrapper.-setview .amrelated-plus,
.amrelated-pack-wrapper.-setview .amrelated-equal,
.amrelated-pack-wrapper.-setview .amrelated-background,
.amrelated-pack-wrapper.-setview .product-reviews-summary {
    display: none !important;
}

/* Mobile: stack layout vertically */
@media (max-width: 640px) {
    .amrelated-pack-wrapper.-setview .amrelated-set-row {
        flex-direction: column;
    }

    .amrelated-pack-wrapper.-setview .amrelated-set-summary {
        width: 100%;
        text-align: left;
    }

    .amrelated-pack-wrapper.-setview .amrelated-set-photo {
        max-height: 70px;
    }
}

/* Checkout - Place Order button */
.checkout-index-index button.action.primary.checkout {
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    display: block;
    padding: 14px 20px;
    line-height: 1.2;
}

/* Checkout - hide redundant inner label on street address lines */
.checkout-index-index fieldset.street > .control > .field > .label {
    display: none;
}

/* Checkout - collapse empty payment method content area (shown when a method is selected).
   Default: no padding/margin. Restore only when real content is present. */
.payment-method._active .payment-method-content {
    padding: 0 !important;
}
.payment-method._active .payment-method-content > * {
    margin: 0 !important;
}
.payment-method._active .payment-method-content > * > * {
    margin: 0 !important;
}
.payment-method._active .payment-method-content:has(input, select, textarea, iframe, .multisafepay-payment-component, .payment-method-instructions) {
    padding: 0 20px 20px 45px !important;
}
.payment-method._active .payment-method-content:has(input, select, textarea, iframe, .multisafepay-payment-component, .payment-method-instructions) > * > * {
    margin: 0 0 20px !important;
}

/* Order success/detail page - normalize price font size to match other columns */
.order-details-items .col.price .price,
.order-details-items .col.subtotal .price,
.order-details-items .col.price .price-including-tax,
.order-details-items .col.price .price-excluding-tax,
.order-details-items .col.subtotal .price-including-tax,
.order-details-items .col.subtotal .price-excluding-tax {
    font-size: 14px !important;
}
/* Order success/detail - Excl./Incl. BTW label: match surrounding text size */
.order-details-items .col.price .price-excluding-tax::before,
.order-details-items .col.subtotal .price-excluding-tax::before,
.order-details-items .col.price .price-including-tax::before,
.order-details-items .col.subtotal .price-including-tax::before {
    font-size: 14px !important;
    font-weight: normal !important;
}
/* Order detail - keep SKU on one line */
.order-details-items .col.sku {
    white-space: nowrap;
}

/* Cart page - hide shipping estimation block */
.cart-summary .block.shipping {
    display: none;
}

/* Product detail page - Add to Cart button: green background */
.catalog-product-view .box-tocart .action.tocart,
.catalog-product-view .box-tocart .action.tocart:focus {
    background: #80cc28 !important;
    border-color: #80cc28 !important;
    color: #fff !important;
}
.catalog-product-view .box-tocart .action.tocart:hover {
    background: #6fb520 !important;
    border-color: #6fb520 !important;
}

/* Product page - preserve line breaks in short description */
.product.attribute.overview .value {
    white-space: pre-line;
    font-size: 14px;
}

/* Product page - space between description and tabs */
.catalog-product-view .product.attribute.description {
    margin-bottom: 30px;
}

/* Product page - description header styled like an active tab title */
.catalog-product-view .product-description-header {
    border-bottom: 2px solid #e7e7e7;
    margin-bottom: 20px;
    line-height: 1;
}
.catalog-product-view .product-description-header > span {
    display: inline-block;
    color: #222529;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 15px 0;
    margin-bottom: -2px;
    border-bottom: 2px solid #222529;
}

/* Product page - Wishlist & Compare rows with circle icon + checkbox + text */
.product-addto-links,
.moved-add-to-links .product-addto-links {
    flex-direction: column;
}
.addto-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.addto-row .action.towishlist,
.addto-row .action.tocompare {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    border: 2px solid #e7e7e7 !important;
    color: #222529;
    text-decoration: none !important;
    transition: all 0.25s;
    margin: 0;
    line-height: 1 !important;
    padding: 0 !important;
}
.addto-row .action.towishlist:hover,
.addto-row .action.tocompare:hover {
    border-color: #222529;
    color: #222529;
}
.addto-row .action span {
    display: none;
}
.addto-row .addto-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #222529;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
}
.addto-row .addto-label:hover {
    color: #000;
}
.addto-row .addto-label:hover .addto-checkbox-icon {
    border-color: #222529;
}
.addto-row .addto-checkbox-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid #ccc;
    border-radius: 3px;
    background: #fff;
    transition: all 0.2s;
}
.addto-row .addto-text {
    display: inline;
}
.addto-row.is-checked .addto-checkbox-icon {
    background: #80cc28;
    border-color: #80cc28;
    position: relative;
}
.addto-row.is-checked .addto-checkbox-icon::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Minicart - cart qty badge color (green instead of red) */
.minicart-wrapper .counter.qty {
    background-color: #80cc28 !important;
}

/* Header compare link */
.header-compare-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #ccc;
    box-sizing: border-box;
}
.header-compare-link .porto-icon-compare-link {
    font-size: 16px;
    line-height: 1;
}
.header-compare-link .porto-icon-compare-link::before {
    font-family: 'porto-icons';
    content: '\f83b';
}
/* Header icon links - wishlist wrapper matches compare so their badges align */
.header-wishlist-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
}
.header-compare-link .compare-counter,
.header-wishlist-link .wishlist-counter {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    min-width: 16px;
    line-height: 16px;
    border-radius: 8px;
    background-color: #80cc28;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    padding: 0;
    overflow: hidden;
}
.header-compare-link .compare-counter {
    top: -7px;
}
.header-compare-link .compare-counter.empty,
.header-wishlist-link .wishlist-counter.empty {
    display: none;
}
/* Cart badge: pull up so it lines up with compare/wishlist badges (their 32px wrapper sits higher than .action.showcart) */
.minicart-wrapper .action.showcart .counter.qty {
    top: -9px;
}

/* Category page - hide swatches on product listing */
.products-grid .swatch-opt,
.products-list .swatch-opt {
    display: none !important;
}

/* Hidden price elements — visually hidden but accessible to JS */
.sg-hidden-price {
    position: absolute !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Category page - sale price: custom sg-sale-prices block (simple products) */
.sg-sale-prices { text-align: center; }
.sg-price-line { white-space: nowrap; margin-bottom: 2px; }
.sg-price-label { font-size: 11px; color: #888; margin-right: 2px; }
.sg-price-old { text-decoration: line-through; color: #cc0000; font-size: 13px; margin-right: 4px; }
.sg-price-new { font-weight: 600; font-size: 13px; color: #222529; }

/* Category page - regular price: custom sg-regular-prices block (non-sale products) */
.sg-regular-prices { text-align: center; }
.sg-price-regular { font-weight: 600; font-size: 13px; color: #222529; }

/* Category/listing - mobile: shrink the whole price line to 10px so the
   "Excl. BTW: € 105,00 € 70,00" nowrap line fits the 2-column grid card */
@media (max-width: 767px) {
    .products-grid .sg-price-label,
    .products-grid .sg-price-old,
    .products-grid .sg-price-new,
    .products-grid .sg-price-regular,
    .products-list .sg-price-label,
    .products-list .sg-price-old,
    .products-list .sg-price-new,
    .products-list .sg-price-regular {
        font-size: 10px !important;
    }
    .products-grid .sg-price-old,
    .products-list .sg-price-old {
        margin-right: 3px;
    }
}

/* Category page - old price styling for standard Magento rendering (configurable products) */
.products-grid .price-box .old-price .price-label {
    display: none !important;
}
.products-grid .price-box .old-price .price-excluding-tax .price {
    text-decoration: line-through !important;
    font-size: 14px !important;
    color: #999 !important;
    font-weight: 400 !important;
}
.products-grid .price-box .old-price .price-including-tax .price {
    text-decoration: line-through !important;
    font-size: 11px !important;
    color: #999 !important;
}
.products-grid .price-box .old-price .price-excluding-tax::before,
.products-grid .price-box .old-price .price-including-tax::before,
.products-grid .price-box .old-price .price-including-tax[data-label]::before {
    display: none !important;
}

/* Category page - equal height product cards with green bottom line */
.products-grid .product-items {
    display: flex;
    flex-wrap: wrap;
}
.products-grid .product-item {
    display: flex;
}
.products-grid .product-item-info {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 3px solid #80cc28;
    padding-bottom: 15px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.products-grid .product-item-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
/* Allow product titles to wrap to 2 lines before truncating */
.product-item-name {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 2.7em;
}
.product-item-name a {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    display: inline !important;
}
/* Porto's generic a:visited{color:inherit} (media/porto/web/css/custom.css) makes
   visited product titles fall back to the gray body color; pin them to the
   normal title color so all listing titles look the same */
.product-item-name a:visited {
    color: #222529;
}
.products-grid .product-item-actions {
    margin-top: auto;
}
.am-porto-cmtb .products-grid .product-item-details .product-item-actions {
    text-align: center;
}
.products-grid .product-item-info:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Product carousels (homepage sliders) - equalize card heights so the green bottom bar aligns.
   Owl Carousel inserts .owl-stage and .owl-item between .product-items and .product-item,
   so the category-page flex chain above doesn't reach the cards. */
.products-slider.owl-carousel .owl-stage {
    display: flex;
}
.products-slider.owl-carousel .owl-item {
    display: flex;
    height: auto;
}
.products-slider.owl-carousel .owl-item > .product-item {
    display: flex;
    width: 100%;
}
.products-slider.owl-carousel .product-item-info {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.products-slider.owl-carousel .product-item-info > .porto-section {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.products-slider.owl-carousel .product-item-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.products-slider.owl-carousel .product-item-details .product-item-inner {
    margin-top: auto;
}
/* Mobile: add breathing room between the product title and the review stars */
@media (max-width: 767px) {
    .products-slider.owl-carousel .product-reviews-summary {
        margin-top: 8px;
    }
}

/* ==========================================================================
   FOOTER STYLES - Dark theme
   ========================================================================== */

/* Dark background for the entire footer */
.page-footer .footer {
    background: #222529 !important;
    color: #aaa;
}

.page-footer .footer-middle {
    background: #222529 !important;
    padding: 50px 0 40px;
}

/* Push columns 2-4 down so the logo column sits higher */
.footer-middle .row > .col-lg-3:not(:first-child) {
    margin-top: 30px;
}

/* Lift first column so "Safety Green B.V." aligns with first link in adjacent columns */
.footer-middle .row > .col-lg-3:first-child {
    margin-top: -25px;
}

/* Reduce spacing between stacked widgets */
.widget, .footer .widget {
    margin-bottom: 0;
}
.footer .widget+.widget {
    margin-top: 10px;
}

/* Footer logo */
.footer-middle .widget_media_image img {
    max-width: 165px;
    height: auto;
    display: block;
}

/* Footer widget titles (h3, h4, strong) */
.footer-middle .widget-title,
.footer-middle h3,
.footer-middle h4 {
    color: #80cc28 !important;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

/* Footer list styles - remove bullets, clean spacing */
.footer-middle .widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-middle .widget ul li {
    padding: 3px 0;
    font-size: 13px;
    color: #ccc;
    line-height: 1.6;
}

/* Footer links */
.footer-middle .widget ul li a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-middle .widget ul li a:hover {
    color: #fff;
}

/* Green company name */
.footer-middle .widget ul li span[style*="color:#80cc28"],
.footer-middle .widget ul li span[style*="color: #80cc28"] {
    font-weight: 600;
    font-size: 14px;
}

/* Footer text items (non-link list items like phone, email, hours) */
.footer-middle .widget .textwidget ul li {
    color: #ccc;
}

/* Newsletter block */
.footer-middle .block.newsletter .block-title strong {
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
}

.footer-middle .block.newsletter .content p {
    color: #aaa;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.footer-middle .block.newsletter .content > label {
    display: none;
}

/* Newsletter form - inline input + button */
.footer-middle .block.newsletter .form.subscribe {
    display: flex;
    align-items: center;
    max-width: 100%;
}

.footer-middle .block.newsletter .field.newsletter {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.footer-middle .block.newsletter .field.newsletter .label {
    display: none;
}

.footer-middle .block.newsletter .field.newsletter .control {
    width: 100%;
}

.footer-middle .block.newsletter input[type="email"] {
    height: 35px;
    max-height: 35px;
    background: #333;
    border: 1px solid #444;
    border-right: none;
    border-radius: 20px 0 0 20px;
    color: #ccc;
    font-size: 13px;
    padding: 0 15px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
}

.footer-middle .block.newsletter input[type="email"]::placeholder {
    color: #777;
}

.footer-middle .block.newsletter input[type="email"]:focus {
    border-color: #80cc28;
    background: #3a3a3a;
}

/* Core ships `.block.newsletter .actions { display: table-cell; width: 1% }`; inside
   this flex form that resolves to a few px, so the button overflowed the column and
   got clipped on narrow viewports. Size the actions cell to its button instead. */
.footer-middle .block.newsletter .actions {
    display: block;
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
}

.footer-middle .block.newsletter .action.subscribe {
    height: 35px;
    max-height: 35px;
    background: #80cc28 !important;
    border: 1px solid #80cc28 !important;
    border-radius: 0 20px 20px 0;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
    line-height: 35px;
}

.footer-middle .block.newsletter .action.subscribe:hover {
    background: #6fb520 !important;
}

/* Footer trust badges & payment icons */
.footer-trust-badges {
    margin-top: 20px;
}

.footer-trust-seals {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.footer-trust-seals img {
    height: 50px;
    width: auto;
}

.footer-payment-icons {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
}

.footer-payment-icons img {
    height: 32px;
    width: auto;
    border-radius: 4px;
}

/* Blog - hide RSS icon */
.mp-blog-rss a {
    display: none !important;
}

/* Blog - pager "per page" limiter: extra right padding so chevron icon
   doesn't overlap the selected number (default select padding-right: 25px
   is too tight against the 26px wide chevron background). */
.post-list-content .limiter .limiter-options,
.mpblog-post-index .limiter .limiter-options,
.mpblog-category-view .limiter .limiter-options,
.mpblog-tag-view .limiter .limiter-options,
.mpblog-topic-view .limiter .limiter-options,
.mpblog-author-view .limiter .limiter-options,
.mpblog-month-view .limiter .limiter-options {
    padding-right: 32px;
    padding-left: 10px;
}

/* Toolbar limiter - space between "Weergeven" label and the select.
   Catalog toolbar uses <label class="label">, the generic Magento pager
   (order history, wishlist, etc.) uses <strong class="limiter-label">. */
.limiter .label,
.limiter .limiter-label {
    margin-right: 8px;
}

/* Wishlist - align product tiles so buttons/links line up across items
   regardless of product name line count */
.products-grid.wishlist .product-item-info {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.products-grid.wishlist .product-item-name {
    min-height: 2.8em;
    display: block;
}
.products-grid.wishlist .product-item .price-box {
    margin-top: auto;
}
/* Wishlist - hide the cart icon on the "Winkelwagen" button */
.products-grid.wishlist .action.tocart:before {
    display: none !important;
}

/* Layered navigation - color swatches */
.swatch-option-link-layered .swatch-option.color {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 4px;
    margin: 0 6px 6px 0;
    border: 2px solid #ddd;
}
.swatch-option-link-layered .swatch-option.color:not(.disabled):hover,
.swatch-option-link-layered .swatch-option.color.selected {
    border-color: #333;
    box-shadow: 0 0 0 1px #333;
}

/* =============================================
   FAQ Page
   ============================================= */
.faq-page {
    padding: 0 0 40px;
}
.faq-intro {
    margin-bottom: 30px;
    color: #555;
    font-size: 1.05rem;
    line-height: 1.6;
}
/* 2-column grid on desktop */
.faq-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 30px;
}
@media (max-width: 767px) {
    .faq-categories {
        grid-template-columns: 1fr;
    }
}
.faq-category {
    margin-bottom: 35px;
}
.faq-category-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #222;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 3px solid #4CAF50;
}
.faq-questions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.faq-item {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    transition: box-shadow 0.2s ease;
}
.faq-item[open] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.faq-item summary {
    padding: 15px 40px 15px 18px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: #333;
    list-style: none;
    position: relative;
    line-height: 1.4;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    font-weight: 300;
    color: #4CAF50;
    transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
    content: '\2212';
}
.faq-item summary:hover {
    color: #4CAF50;
}
.faq-answer {
    padding: 0 18px 18px;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.7;
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
}

/* ==========================================================================
   MOBILE MENU - Toggle-first UX with "Bekijk alle" links
   ========================================================================== */

/* Hide "Bekijk alle" on desktop - only needed in mobile menu */
.bekijk-alle-item {
    display: none;
}

@media (max-width: 991px) {
    .bekijk-alle-item {
        display: list-item;
    }
    /* Make parent category links look tappable (full row = toggle) */
    nav.sw-megamenu li.ui-menu-item.parent > a {
        cursor: pointer;
    }

    /* "Bekijk alle" link styling */
    .bekijk-alle-item {
        border-bottom: 1px solid #eee;
        margin-bottom: 4px;
    }

    .bekijk-alle-link {
        display: block;
        padding: 10px 15px 10px 0;
        font-weight: 700 !important;
        color: #222529 !important;
        text-decoration: none !important;
        font-size: 14px;
    }

    .bekijk-alle-link span::after {
        content: " \203A";
        margin-left: 4px;
    }

    /* Deeper level subchildmenu: hidden by default, visible when opened */
    nav.sw-megamenu li.ui-menu-item.parent > ul.subchildmenu {
        height: 0;
        visibility: hidden;
        overflow: hidden;
    }

    nav.sw-megamenu li.ui-menu-item.parent > ul.subchildmenu.opened {
        height: auto;
        visibility: visible;
        overflow: visible;
    }
}

/* CMS pages - compact heading margins */
.cms-page-view .column.main h1,
.cms-page-view .column.main h2,
.cms-page-view .column.main h3,
.cms-page-view .column.main h4,
.cms-page-view .column.main h5,
.cms-page-view .column.main h6 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Layered navigation - color swatch labels (show on hover) */
.swatch-layered .swatch-option-link-layered {
    position: relative;
}

.swatch-layered .swatch-option-link-layered .swatch-option-label {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 10;
    margin-bottom: 4px;
    pointer-events: none;
}

.swatch-layered .swatch-option-link-layered:hover .swatch-option-label {
    display: block;
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

/* Contact Details Bar (CMS Static Block: sg_contact_details_bar) */
.sg-contact-details {
    padding: 25px 0 20px;
    margin-bottom: 30px;
    border-bottom: 3px solid #80cc28;
}

.sg-contact-details .contacts-title {
    font-size: 20px;
    font-weight: 300;
    color: #333;
    margin-bottom: 20px;
}

.sg-contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.sg-contact-details h4 {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px;
}

.sg-contact-details p {
    font-size: 13px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 0;
}

.sg-contact-details a {
    color: #555;
    text-decoration: none;
}

.sg-contact-details a:hover {
    color: #80cc28;
}

/* Tablet: 2 columns */
@media (max-width: 991px) {
    .sg-contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 column */
@media (max-width: 480px) {
    .sg-contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Contact Page - Google Map green border */
.contact-index-index #store_map {
    border-bottom: 15px solid #80cc28;
}

/* Contact 360 Panorama Viewer */
.sg-pano {
    margin-top: 30px;
}

.sg-pano-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.sg-pano-tab {
    appearance: none;
    border: 1px solid #d7d7d7;
    background: #f7f7f7;
    color: #2b2b2b;
    padding: 10px 18px;
    font: inherit;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.sg-pano-tab:hover {
    background: #eee;
}

.sg-pano-tab.is-active {
    background: #80cc28;
    border-color: #80cc28;
    color: #fff;
}

/* Higher specificity than .pnlm-container which Pannellum adds on init */
.sg-pano .sg-pano-viewer {
    width: 100%;
    height: 520px;
    background: #1a1a1a;
    border-radius: 4px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .sg-pano .sg-pano-viewer {
        height: 360px;
    }
}

.grecaptcha-badge {
    bottom: 80px !important;
}

/* ======== Configurable product: custom size dropdown with per-option stock status ======== */
.sg-custom-select {
    position: relative;
    width: 100%;
    font-size: 13px;
    font-family: inherit;
}

.sg-custom-select__native {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sg-custom-select__trigger {
    width: 100%;
    padding: 8px 36px 8px 12px;
    background: #fff;
    border: 1px solid #d7d7d7;
    border-radius: 3px;
    text-align: left;
    color: #444;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    position: relative;
    min-height: 38px;
    font-family: inherit;
}

.sg-custom-select__trigger:hover {
    border-color: #b0b0b0;
}

.sg-custom-select__trigger:focus {
    outline: none;
    border-color: #7dc855;
    box-shadow: 0 0 0 1px #7dc855;
}

.sg-custom-select__label {
    display: block;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    padding-right: 8px;
}

.sg-custom-select__caret {
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #777;
    transition: transform 0.15s ease;
}

.sg-custom-select.is-open .sg-custom-select__caret {
    transform: rotate(180deg);
}

.sg-custom-select__list {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #d7d7d7;
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-height: 320px;
    overflow-y: auto;
    z-index: 1000;
}

.sg-custom-select.is-open .sg-custom-select__list {
    display: block;
}

.sg-custom-select__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.12s;
}

.sg-custom-select__option:last-child {
    border-bottom: none;
}

.sg-custom-select__option:hover {
    background-color: #f7f7f7;
}

.sg-custom-select__option.is-selected {
    background-color: #eef7e6;
}

.sg-custom-select__option-label {
    flex: 1 1 auto;
    min-width: 0;
}

.sg-custom-select__option-name {
    display: block;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sg-custom-select__option-price {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.sg-custom-select__option-status {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.sg-custom-select__option.is-in-stock .sg-custom-select__option-status {
    color: #3c9e2a;
}

.sg-custom-select__option.is-out-of-stock .sg-custom-select__option-status {
    color: #c62828;
}

.sg-custom-select__option.is-out-of-stock .sg-custom-select__option-name {
    color: #777;
}

@media (max-width: 480px) {
    .sg-custom-select__option {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .sg-custom-select__option-status {
        font-size: 10px;
    }
}

/* PDP gallery: sale percentage label overlay on the product image */
.product.media {
    position: relative;
}
.product.media .gallery-product-labels {
    left: 0.8em;
}

/* Layered nav color swatches: dark checkmark on light backgrounds (wit, blank) */
.swatch-option.color.selected[data-option-label="wit" i]:before,
.swatch-option.color.selected[data-option-label="blank" i]:before {
    color: #000;
    text-shadow: none;
}

/* Header account dropdown: render the toggle as a labeled "Account" link.
   The Porto lib-dropdown applies @_icon-font-text-hide:true, which hides the
   immediate > span of .action.switch. Since the override puts the label as a
   text node (no span wrapper), it stays visible alongside the chevron. */
.page-header .panel.header .customer-welcome .action.switch {
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    padding: 0;
    text-transform: uppercase;
}
/* When the customer is logged in, the dropdown already contains an Uitloggen
   item, so hide the redundant standalone authorization-link-login. */
.page-header .panel.header .customer-welcome ~ .authorization-link {
    display: none;
}

/* PDP review list: vendor list.phtml wraps the review body in
   .review-content-container, so porto's `.review-ratings ~ .review-content`
   gutter rule no longer matches and the text sits flush against the rating
   stars. Restore porto's intended left gutter (@review-ratings-left: 280px at
   the @screen__s breakpoint). */
@media (min-width: 640px) {
    .review-list .review-ratings ~ .review-content-container {
        margin-left: 280px;
    }
}