/* ===================================
   TABLE OF CONTENTS
   ===================================
   1. No Products Found
   2. Review Cards
   3. Product Listing & Gallery
   4. Location Rows
   5. Modals & Overlays
      5.1 Cart Confirm Modal
      5.2 Country Redirect Modal
      5.3 Option Info Modal
   6. Cart & Order Summary
   7. Forgot Products
   8. Checkout - Payment
   9. Sticky Product Bar
   10. Product Details - Delivery
   11. Wishlist
   12. Utility Classes
   13. Site Search
   14. CMS Page Posts List
   =================================== */


/* ===================================
   1. No Products Found
   =================================== */
.no-products-found {
    text-align: center;
    padding: 80px 20px;
    background: #f8f9fa;
    border-radius: 12px;
    margin: 20px 0;
}

.no-products-found .no-products-icon {
    margin-bottom: 24px;
}

.no-products-found .no-products-icon svg {
    color: #7a7a7a;
    opacity: 0.5;
}

.no-products-found h3 {
    font-size: 24px;
    font-weight: 500;
    color: #3a473a;
    margin-bottom: 12px;
}

.no-products-found p {
    font-size: 16px;
    color: #707c69;
    margin-bottom: 24px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.no-products-found .btn-reset-filters {
    display: inline-block;
    padding: 12px 32px;
    background: #3a473a;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.no-products-found .btn-reset-filters:hover {
    background: #2a3729;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(58, 71, 58, 0.2);
}


/* ===================================
   2. Review Cards
   =================================== */
.custom-review-slider .review-card__profile--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    flex-shrink: 0;
}


/* ===================================
   3. Product Listing & Gallery
   =================================== */

/* Product Listing */
.products-section .product-card .product-image {
    border-radius: 10px;
    overflow: hidden;
}

.products-section .product-card .product-image img {
    width: 512px;
    height: 359px;
    max-width: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Product Gallery */
.prod-gallery {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.prod-main-slider {
    overflow: hidden;
    border-radius: 10px;
}

.prod-main-slider-img {
    width: 100%;
    height: auto;
    max-width: 685px;
    aspect-ratio: 685 / 315;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.more-images.two-cards {
    width: 100%;
}

.more-images.two-cards .row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.more-images.two-cards .col-12,
.more-images.two-cards .col-md-6,
.more-images.two-cards .col-6 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    overflow: hidden;
    border-radius: 10px;
}

.prod-gallery-img {
    width: 100%;
    height: auto;
    aspect-ratio: 338 / 277;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.more-images.full-width {
    width: 100%;
}

.more-images.full-width .col-12 {
    overflow: hidden;
    border-radius: 10px;
}

.prod-gallery-img-last {
    width: 100%;
    height: auto;
    aspect-ratio: 685 / 277;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* Gallery images by admin crop type (same ratios as the admin cropper):
   full-size / legacy → 4:3 full-width row, square → 1:1 two tiles per row */
.prod-gallery-img-full,
.prod-gallery-img-square,
.prod-gallery-img-natural {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.prod-gallery-img-full,
.prod-gallery-img-natural {
    aspect-ratio: 4 / 3;
}

.prod-gallery-img-square {
    aspect-ratio: 1 / 1;
}


/* ===================================
   4. Location Rows
   =================================== */
.opt-location-rows .select-box p {
    white-space: nowrap;
    margin: 0;
}

.opt-location-rows .select-box .form-control {
    max-width: 50%;
}


/* ===================================
   5. Modals & Overlays
   =================================== */

/* 5.1 Cart Confirm Modal */
.cart-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.cart-confirm-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-confirm-box {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    transform: scale(0.9);
    transition: transform 0.25s ease;
}

.cart-confirm-overlay.active .cart-confirm-box {
    transform: scale(1);
}

.cart-confirm-box .confirm-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: #e8ece5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-confirm-box .confirm-icon svg {
    width: 28px;
    height: 28px;
    color: #3a473a;
}

.cart-confirm-box h4 {
    font-size: 18px;
    font-weight: 600;
    color: #3a473a;
    margin-bottom: 8px;
}

.cart-confirm-box p {
    font-size: 14px;
    color: #6b7a68;
    margin-bottom: 24px;
}

.cart-confirm-box .confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.cart-confirm-box .btn-confirm-cancel {
    padding: 10px 24px;
    border: 1px solid #3a473a;
    background: #fff;
    color: #3a473a;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cart-confirm-box .btn-confirm-cancel:hover {
    background: #f4f6f3;
}

.cart-confirm-box .btn-confirm-delete {
    padding: 10px 24px;
    border: none;
    background: #3a473a;
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cart-confirm-box .btn-confirm-delete:hover {
    background: #2a3729;
}

/* 5.2 Country Redirect Modal */
.geo-redirect-box {
    padding: 40px 36px;
    max-width: 380px;
}

.geo-flag-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px #e8ece5, 0 8px 20px rgba(58, 71, 58, 0.18);
}

.geo-flag-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.geo-redirect-box h4 {
    font-size: 20px;
    margin-bottom: 10px;
}

.geo-redirect-box p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 28px;
}

.geo-redirect-btn {
    display: inline-block;
    width: 100%;
    padding: 13px 24px;
    border: none;
    background: #3a473a;
    color: #fff;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.geo-redirect-btn:hover {
    background: #2a3729;
    color: #fff;
    transform: translateY(-1px);
}

body.geo-redirect-locked {
    overflow: hidden;
    height: 100%;
}

/* 5.3 Option Info Modal */
.option-info-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.option-info-overlay.active {
    opacity: 1;
    visibility: visible;
}

.option-info-modal {
    background: #fff;
    border-radius: 12px;
    max-width: 520px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transform: scale(0.9);
    transition: transform 0.25s ease;
    position: relative;
}

.option-info-overlay.active .option-info-modal {
    transform: scale(1);
}

.option-info-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: #f4f6f3;
    border: none;
    font-size: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3a473a;
    z-index: 2;
    transition: background 0.2s;
}

.option-info-close:hover {
    background: #e8ece5;
}

.option-info-content {
    padding: 32px;
    color: #3a473a;
    font-size: 15px;
    line-height: 1.6;
}

.option-info-content h4 {
    font-size: 20px;
    font-weight: 600;
    color: #3a473a;
    margin-bottom: 16px;
}


/* ===================================
   6. Cart & Order Summary
   =================================== */
.cart-item-link {
    text-decoration: none;
    color: inherit;
}

.cart-item-link:hover {
    color: inherit;
}

.cart-item-dimensions {
    font-size: 0.9em;
    color: #6b7a68;
    margin-bottom: 0;
}

.order-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.order-summary-label {
    flex: 1;
}

.order-summary-price {
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
}

.cart-content .jouw-section {
    min-height: 60vh;
    /* Only source of bottom spacing before the footer was the "forgot
       products" section's own py-5 — which doesn't render at all when
       there are no related products, leaving the footer flush against
       the summary card. Give the section its own bottom margin so the
       gap holds either way (matches its existing 70px margin-top). */
    margin-bottom: 70px;
}


/* ===================================
   7. Forgot Products
   =================================== */
.forgot-product-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forgot-product-title a {
    text-decoration: none;
    color: inherit;
}

.forgot-product-title a:hover {
    color: #3a473a;
}

.forgot-product-dimensions {
    font-size: 0.85em;
    color: #6b7a68;
    margin-bottom: 0.5rem;
}

.forgot-products .forgot-product-card .product-image {
    text-align: center;
    margin-bottom: 0;
    overflow: hidden;
    cursor: pointer;
}

.forgot-products .forgot-product-card .product-image img {
    max-width: 100%;
    width: 100%;
    height: 200px;
    object-fit: cover;
}


/* ===================================
   8. Checkout - Payment
   =================================== */
.payment-warning-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.payment-option-faded {
    opacity: 0.4;
    pointer-events: none;
}

.payment-option-card:has(.payment-option-faded) {
    background-color: #f8f8f8;
    cursor: default;
}

.payment-warning-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 7px 12px;
    border-radius: 6px;
    white-space: normal;
    max-width: 260px;
    text-align: center;
    z-index: 999;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.payment-warning-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
}

.payment-warning-icon:hover .payment-warning-popup {
    display: block;
}


/* ===================================
   9. Sticky Product Bar
   =================================== */
.detail-content .bk-product-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.75rem 0;
    background-color: transparent;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.detail-content .bk-product-bar.is-visible {
    transform: translateY(0);
    opacity: 1;
}


/* ===================================
   10. Product Details - Delivery
   =================================== */
.detail-content .delivery-section {
    margin-bottom: 1.5rem;
}

.detail-content .delivery-title {
    color: #707c69;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.detail-content .delivery-options {
    border: 1px solid #707c69;
    overflow: hidden;
}

.detail-content .delivery-option {
    display: grid;
    grid-template-columns: 1fr 0.4fr 30px;
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 1.5rem;
    cursor: pointer;
    border-bottom: 1px solid #707c69;
    transition: 0.3s ease;
}

.detail-content .delivery-option:last-child {
    border-bottom: 0;
}

.detail-content .delivery-option:has(input:checked) {
    background: #e6e3d5;
    box-shadow: inset 0 0 0 2px rgba(58, 71, 58, 0.8);
}

.detail-content .delivery-option.disabled {
    cursor: default;
    opacity: 0.65;
}

.detail-content .delivery-option input[type=radio] {
    width: 22px;
    height: 22px;
    accent-color: #707c69;
    cursor: pointer;
    display: none;
}

.detail-content .delivery-option input[type=radio] + .custom-radio {
    background-color: transparent;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    border: 1px solid #3a473a;
    position: relative;
}

.detail-content .delivery-option input[type=radio] + .custom-radio img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: 0.3s;
}

.detail-content .delivery-option input:checked + .custom-radio img {
    opacity: 1;
    transform: scale(1);
}

.detail-content .delivery-option span {
    color: #707c69;
    font-size: 1rem;
}

.detail-content .delivery-option strong {
    color: #707c69;
    font-size: 1rem;
    font-weight: 400;
}

.detail-content .delivery-lock-note {
    color: #707c69;
    font-size: 0.85rem;
    margin: 0.75rem 0 0;
}

.detail-content .delivery-lock-note a {
    color: #3a473a;
    text-decoration: underline;
}

.detail-content .delivery-lock-note a:hover {
    color: #707c69;
}

@media (max-width: 767px) {
    .detail-content .delivery-option {
        grid-template-columns: 1fr;
        row-gap: 0.5rem;
    }

    .detail-content .delivery-option strong {
        text-align: left;
    }
}


/* ===================================
   11. Wishlist
   =================================== */
.bk-wishlist.active svg {
    color: #d98a1f;
}

.wishlist-view-btn {
    background: #3a473a;
    color: #fff;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 13px;
    text-decoration: none;
}

.wishlist-view-btn:hover {
    background: #2a3729;
    color: #fff;
}

.wishlist-remove-btn {
    background: none;
    border: 1px solid #d9dcd6;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    color: #6b7a68;
    cursor: pointer;
}

.wishlist-remove-btn:hover {
    border-color: #e74c3c;
    color: #e74c3c;
}

.wishlist-add-cart-btn {
    background: #3a473a;
    color: #fff;
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
}

.wishlist-add-cart-btn:hover {
    background: #2a3729;
    color: #fff;
}

.inner-pages .wishlist-add-cart-btn,
.inner-pages .wishlist-add-cart-btn:visited,
.inner-pages .wishlist-add-cart-btn:hover,
.inner-pages .wishlist-add-cart-btn:focus,
.inner-pages .wishlist-add-cart-btn:active {
    color: #fff;
}


/* ===================================
   12. Utility Classes
   13. Site Search
   14. CMS Page Posts List
   =================================== */
.badge {
    font-size: 0.9rem;
    color: #222222;
    font-weight: normal;
    border: 1px solid #d4d4d4;
    margin: 2px;
}

#total_price {
    width: 90%;
    display: inline-block;
}

.price-details-span {
    display: inline-block;
    width: 5%;
    margin-top: -0.5rem;
    vertical-align: text-top;
}

.tooltip-inner {
    padding: 0px !important;
    border: 2px solid #3a473a;
    max-width: 400px !important;
}
.tooltip-inner .list-group-item { padding: 0.25rem; }

@media (max-width: 1365.98px) {
    .forgot-products .product-content {
        padding: 15px;
    }
    .forgot-products .product-footer {
        gap:10px;
    }
    .forgot-products .actions {
        gap: 10px;
    }
    .inner-pages {
        padding-top:80px;
    }
}
@media (max-width: 1023.98px) {
    .banner-top-detail h1 { font-size: 53px; }
}
@media (max-width: 767.98px) {
    .banner-top-detail h1 { font-size: 46px; }
    .banner-top-detail-text { margin: 1rem 2rem !important; }
    .banner-top-detail .banner-top-detail-subtitle { font-size: 18px; }
}

/* Article hero banner subtitle, shown under the title */
.banner-top-detail-subtitle {
    font-size: 22px;
    font-weight: 500;
    color: #ffffff;
}

.inner-pages a { font-weight: 600;color: inherit;text-decoration: underline; }
.inner-pages a:hover { font-weight: 600;color: inherit;text-decoration: underline; }

/* Contact Details block (CMS page with contact_form_status enabled) */
.contact-details-card {
    background: #f4f6f3;
    border-radius: 12px;
    padding: 28px 32px;
    max-width: 480px;
}

.contact-details-title {
    font-size: 20px;
    color: #3a473a;
    margin-bottom: 16px;
}

.contact-details-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid #e2e6df;
}

.contact-details-row:last-child {
    border-bottom: none;
}

.contact-details-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7a68;
}

.contact-details-value {
    font-size: 15px;
    color: #3a473a;
}

.contact-details-value a {
    color: #3a473a;
    text-decoration: none;
}

.contact-details-value a:hover {
    text-decoration: underline;
}

/* ===================================
   13. Site Search
   14. CMS Page Posts List
   =================================== */
.nav-actions a.js-header-search-toggle.active img {
    opacity: 0.7;
}

.header-search-bar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1030;
    pointer-events: none;
}

.header-search-bar[hidden] {
    display: none;
}

.header-search-bar .container {
    display: flex;
    justify-content: flex-end;
}

.header-search-form {
    position: relative;
    width: 100%;
    max-width: 650px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 15px;
    background: rgba(112, 124, 105, 0.9);
    pointer-events: auto;
}

.site-search-field {
    display: flex;
    gap: 8px;
}

.site-search-field .form-control {
    height: 48px;
    border: none;
    border-radius: 12px;
    background: #f5f6f5;
    padding: 10px 16px;
    color: #3a473a;
    box-shadow: none !important;
}

.site-search-btn {
    flex-shrink: 0;
    height: 48px;
    padding: 0 24px;
    border-radius: 12px;
    background: #3a473a;
    color: #ffffff;
    font-weight: 600;
}

.site-search-btn:hover,
.site-search-btn:focus {
    background: #2c362c;
    color: #ffffff;
}

.site-search-dropdown {
    position: absolute;
    left: 10px;
    right: 10px;
    top: calc(100% + 4px);
    z-index: 1031;
    max-height: 60vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.site-search-dropdown[hidden] {
    display: none;
}

.site-search-list,
.site-search-page-results {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-search-list li + li,
.site-search-page-results li + li {
    border-top: 1px solid #e2e6df;
}

.site-search-list a,
.site-search-page-results a {
    display: block;
    padding: 12px 16px;
    color: #3a473a;
    text-decoration: none;
}

.site-search-list a:hover,
.site-search-list a:focus,
.site-search-page-results a:hover {
    background: rgba(58, 71, 58, 0.06);
    outline: none;
}

.site-search-title {
    font-weight: 600;
}

.site-search-type {
    color: #6b7a68;
    font-size: 14px;
}

.site-search-no-results,
.site-search-view-all {
    display: block;
    padding: 12px 16px;
    color: #6b7a68;
}

.site-search-view-all {
    border-top: 1px solid #e2e6df;
    font-weight: 600;
    color: #3a473a;
    text-decoration: none;
}

.site-search-view-all:hover {
    text-decoration: underline;
}

/* Mobile offcanvas + /search page forms */
.mobile-search-form,
.site-search-page-form {
    position: relative;
}

.site-search-page-form {
    max-width: 650px;
}

/* On the /search page the dropdown sits in the page content, so it must
   stay below the fixed header (.fixed-top, z-index 1030) when scrolling. */
.site-search-page-form .site-search-dropdown {
    z-index: 1020;
}

.mobile-search-form .site-search-dropdown,
.site-search-page-form .site-search-dropdown {
    left: 0;
    right: 0;
}

.site-search-page-results {
    border: 1px solid #e2e6df;
    border-radius: 12px;
    overflow: hidden;
}

.site-search-count,
.site-search-empty {
    color: #6b7a68;
}

/* 5.4 Cookie Consent Banner */
.cookie-consent-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background: #fff;
    border-top: 1px solid #d7d7d2;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.cookie-consent-bar.active {
    transform: translateY(0);
    opacity: 1;
}

.cookie-consent-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 20px 24px;
}

.cookie-consent-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.cookie-consent-text {
    flex: 1 1 420px;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7a68;
    margin: 0;
}

.cookie-consent-text a {
    color: #3a473a;
    text-decoration: underline;
}

.cookie-consent-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cookie-btn {
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.cookie-btn-outline {
    border: 1px solid #3a473a;
    background: #fff;
    color: #3a473a;
}

.cookie-btn-outline:hover {
    background: #f4f6f3;
}

.cookie-btn-solid {
    border: none;
    background: #3a473a;
    color: #fff;
}

.cookie-btn-solid:hover {
    background: #2a3729;
}

.cookie-consent-prefs {
    padding-top: 4px;
}

.cookie-pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #e8ece5;
}

.cookie-pref-row:last-of-type {
    border-bottom: none;
}

.cookie-pref-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cookie-pref-label strong {
    font-size: 14px;
    color: #3a473a;
}

.cookie-pref-label span {
    font-size: 13px;
    color: #6b7a68;
}

.cookie-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #d7d7d2;
    border-radius: 24px;
    transition: background 0.2s ease;
}

.cookie-switch-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.cookie-switch input:checked + .cookie-switch-slider {
    background: #3a473a;
}

.cookie-switch input:checked + .cookie-switch-slider::before {
    transform: translateX(18px);
}

.cookie-switch-disabled {
    opacity: 0.6;
    cursor: default;
}

.cookie-switch-disabled .cookie-switch-slider {
    cursor: default;
}

@media (max-width: 767.98px) {
    .cookie-consent-inner { padding: 16px; }
    .cookie-consent-main { flex-direction: column; align-items: stretch; }
    .cookie-consent-actions { justify-content: stretch; }
    .cookie-btn { flex: 1 1 auto; text-align: center; }
}

/* ===================================
   14. CMS Page Posts List
   Same cards as the home page "Discover our assortment" slider
   (.product-slider-section), laid out as a plain grid.
   =================================== */
.post-list-section {
    margin: 40px 0 0;
}

.post-list-section .product-card {
    position: relative;
    aspect-ratio: 318 / 521;
    background-color: #3a473a;
}

.post-list-section .product-card img {
    display: block;
}

/* Dark gradient behind the title so it stays readable on any image */
.post-list-section .product-card::after {
    content: "";
    position: absolute;
    inset: 40% 0 0 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
    pointer-events: none;
}

.post-list-section .product-card .card-item-detail {
    z-index: 1;
    max-width: none;
}

/* Grid cards are narrower than the home slider cards */
.post-list-section .product-card .card-item-detail h6 {
    font-size: 28px;
    line-height: 1.15;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.post-list-section a:hover .product-card img {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}
.category-description { font-size: 1rem !important;font-weight: 400 !important;line-height: 1.5rem !important; }

/* Blog post detail (front.blog.show) */
.blog-post-date {
    color: #6b7a68;
    font-size: 14px;
}

.blog-post-cover {
    max-height: 520px;
    object-fit: cover;
    border-radius: 12px;
}
.blog-description table { border: 1px solid #3a473a;margin-bottom: 1rem; }
.blog-description table td { padding: 5px; }
.blog-description table td p { margin-bottom: 0px !important; }
.blog-description table td { border: 1px solid #3a473a; }

/* Product image lightbox */
.product-gallery-lightbox-trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.product-gallery-lightbox-trigger img {
    transition: opacity 0.2s ease;
}

.product-gallery-lightbox-trigger:hover img,
.product-gallery-lightbox-trigger:focus-visible img {
    opacity: 0.88;
}

.product-gallery-lightbox-trigger:focus-visible {
    outline: 3px solid #3a473a;
    outline-offset: 4px;
    border-radius: 12px;
}

.product-image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 24px;
}

.product-image-lightbox[hidden] {
    display: none;
}

.product-image-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 18, 13, 0.9);
}

.product-image-lightbox-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(1200px, 100%);
    max-height: 100%;
}

.product-image-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 48px);
    object-fit: contain;
    border-radius: 10px;
}

.product-image-lightbox-close,
.product-image-lightbox-nav {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #263126;
    font-size: 32px;
    line-height: 1;
}

.product-image-lightbox-close {
    top: 12px;
    right: 12px;
}

.product-image-lightbox-prev {
    left: 12px;
}

.product-image-lightbox-next {
    right: 12px;
}

.product-image-lightbox-counter {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    min-width: 64px;
    padding: 7px 14px;
    border-radius: 20px;
    background: rgba(11, 18, 13, 0.78);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.product-image-lightbox-close:hover,
.product-image-lightbox-nav:hover {
    background: #ffffff;
}

body.product-lightbox-open {
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .product-image-lightbox {
        padding: 12px;
    }

    .product-image-lightbox-image {
        max-height: calc(100vh - 24px);
    }

    .product-image-lightbox-close,
    .product-image-lightbox-nav {
        width: 38px;
        height: 38px;
        font-size: 26px;
    }

    .product-image-lightbox-prev {
        left: 4px;
    }

    .product-image-lightbox-next {
        right: 4px;
    }
}
.footer-contact svg { margin-bottom: 4px;margin-right: 6px; }
.footer-contact .address-line { display: block;margin-left: 28px; }
.brand-of { font-weight: 600; }
.desktop-header .nav-slider .swiper-slide span { word-wrap: normal;white-space: normal; }
/* Footer "Reviews" label linking to the page chosen in Settings > Home Page:
   keeps the heading's own colour and font */
.footer-title .footer-title-link {
    color: inherit;
    font: inherit;
    text-decoration: none;
}

.footer-title .footer-title-link:hover,
.footer-title .footer-title-link:focus-visible {
    text-decoration: underline;
}

/* Footer rating stars linking to the reviews page: keep the stars' own
   colour and size in every state (footer links are cream, orange on hover) */
.footer-section .stars .footer-stars-link,
.footer-section .stars .footer-stars-link:hover,
.footer-section .stars .footer-stars-link:focus,
.footer-section .stars .footer-stars-link:visited {
    color: inherit;
    font-size: inherit;
    text-decoration: none;
    display: inline-block;
}

/* ===================================
   Google reviews list on CMS pages (page option "Google Reviews",
   front.page.partials.google-review-list) — same look as the
   buitenkeukendeal.nl reviews page
   =================================== */
.google-review-photo {
    max-height: 100px;
    max-width: 100%;
    border-radius: 50%;
}

.google-review-stars .bi-star,
.google-review-stars .bi-star-fill {
    width: 2.5em;
    height: 2.5em;
    fill: #f28a2f;
    stroke: none;
}

@media (max-width: 767.98px) {
    .google-review-photo {
        max-height: 48px;
        margin-bottom: 0.5rem;
    }

    .google-review-stars .bi-star,
    .google-review-stars .bi-star-fill {
        width: 1.5em;
        height: 1.5em;
    }
}

/* Home page category slider ("Discover our assortment"): show the full
   category name over several lines instead of cutting it off with "…"
   (the h6 carries Bootstrap's .text-truncate). Long single words, e.g.
   German compounds, break with a hyphen (uses <html lang>). */
.product-slider-section .product-card .card-item-detail h6.text-truncate {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Home page category slider: title links to the category page — keep the
   title's own look (colour, font), show it's clickable on hover/focus */
.product-slider-section .product-card .card-item-detail h6 .category-slide-title-link {
    color: inherit;
    text-decoration: none;
}
.product-slider-section .product-card .card-item-detail h6 .category-slide-title-link:hover,
.product-slider-section .product-card .card-item-detail h6 .category-slide-title-link:focus-visible {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}