/*
Theme Name:     Lockpick Webwinkel
Theme URI:      https://lefcreative.nl/
Author:         Lef Creative
Author URI:     https://lefcreative.nl/
Description:    Thema voor Lockpick Webwinkel
Version:        1.0.0
License:        /
License URI:    /
Template:       leflite
Text Domain:    lockpickwebwinkel
Domain Path:    /languages/
*/

/* BODY */
body {
    overflow-x: clip;
}

.bg-warning {
    background: var(--warning);
    color: var(--warning-content);
}


@media only screen and (max-width: 991px) {
    section {
        padding: 33px 0;
    }
}

.reviews-section-image {
    margin-bottom: -40px;
}

.row.align-stretch .card:not(.card-default, .category-call-to-action) {
    height: calc(100% - 30px);
}

.row.align-stretch .wp-block-custom-section-block-col .col-card {
    height: 100%;
}

/* TOPBAR */
.topbar {
    display: block;
}

.topbar *{
    font-size: 14px;
    text-decoration: none;
}
.topbar-inner {
    width: calc(100% + 30px);
}

.topbar, .under-menu {
   border-bottom: 1px solid var(--darkgray);
}

.topbar .topbar-inner .shortcode-holder {
    display: flex;
}

.wwk-stars {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.wwk-stars__icons {
    display: inline-flex;
    flex-direction: row;
    gap: 2px;
    color: var(--secondary);
    font-size: 20px;
}

.wwk-stars__icons .icon-star {
    line-height: 1;
    margin-right: unset;
    font-size: 16px;
}

.wwk-stars__text {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    font-weight: 700;
    opacity: .5;
    font-weight: 700;
    font-size: 13px;
    line-height: 100%;
}

header .wwk-stars__text {
    color: #333 !important;
}

.wwk-stars__rating {
    font-weight: normal;
}

@media only screen and (max-width: 991px) {
    .topbar .topbar-inner {
        padding: 12px 0;
        width: 100%;
        flex-direction: column;
    }

    .topbar .topbar-inner .menu-holder {
        display: none;
    }
}


/* HEADER */
#ajaxsearchlite1 {
    background-color: transparent;
}
.main-nav-menu li.cart-trigger a {
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--transparent);
    color: inherit;
    border-radius: 100px;
    transition: background-color .3s ease-in-out;
}
/* Both buttons are 50px flex boxes that centre their icon. The cart <i> is missing the base
   .icon class, so it stayed display:inline and sat on the text baseline (1.4px high); a
   top:3px nudge then overcorrected it to 1.6px low. Blockifying both icons centres them on
   their own box and removes the need for that nudge.
   The icons are outlined rather than filled: the glyphs are solid silhouettes, so painting
   only their stroke gives a true outline icon. -webkit-text-stroke centres the stroke on the
   glyph path, adding half its width outside the shape, so the font-size below is set to
   (20px - stroke) / ink-ratio to land on a 20px icon. Ink ratio is 0.855 of the font-size for
   the heart and 1.0 for the cart, measured from the icomoon glyphs; that difference is why the
   two need different font sizes to render the same height. */
.main-nav-menu .cart-trigger i,
.main-nav-menu .wishlist-item i {
    display: block;
    top: auto;
    line-height: 1;
    -webkit-text-fill-color: transparent;     /* hollow out the glyph body... */
    -webkit-text-stroke: 1.25px currentColor; /* ...and draw only its outline, in whatever
                                                 colour the button inherits */
}
.main-nav-menu li.wishlist-item a {
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--transparent);
    color: inherit;
    border-radius: 100px;
    margin-right: 10px; 
    transition: background-color .3s ease-in-out;
}
.main-nav-menu li.cart-trigger a:hover,
.main-nav-menu li.wishlist-item a:hover {
    background-color: var(--primary-darkened);
}
/* The count badge sits inside the cart <i>, so it inherits the outline treatment above.
   Paint it as normal filled text again. */
.main-nav-menu .cart-trigger i span.cart-items-count.count {
    top: -11px;
    right: -11px;
    background-color: var(--secondary)!important;
    color: var(--white)!important;
    -webkit-text-fill-color: var(--white);
    -webkit-text-stroke: 0;
}
.main-nav-menu .wishlist-item i {
    margin-right: unset;
    font-size: 21.93px; /* (20 - 1.25) / 0.855 */
}

/* The bag glyph is a narrow one (its ink is 0.875 of its font-size wide, against 1.0 for the
   heart), so at a matching 20px height it read noticeably smaller than the heart next to it.
   Sized optically instead: 23.4px puts the bag at ~21.7px wide, in line with the heart's
   ~23.2px, at the cost of standing ~4.6px taller than the nominal 20px. */
.main-nav-menu .cart-trigger i {
    font-size: 23.4px;
}
.asl_w_container .asl_w .probox .promagnifier {
    background-color: transparent;
}
.asl_w_container .asl_w .probox .promagnifier svg path {
    fill: var(--tertiary);
}
.main-nav-menu li a {
    font-weight: 500;
}

/* main section.lef-section:first-child:not(.blog-header) {
    padding-top: unset !important;
} */

main section.lef-section:first-child:not(.blog-header) .wp-block-custom-section-block-col:first-child {
    margin-top: unset;
}

section.lef-section.hero-section {
    margin-top: -18px;
}

.mobile-menu-toggle-position {
    padding-left: unset;
}

.mobile-menu-toggle {
    width: unset;
    height: unset;
    background: var(--white);
    color: var(--white-content);
    padding: 9.11px 21px;
    border-radius: 50px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.mobile-menu-toggle:hover {
    background: var(--white-darkened);
    color: var(--white-content);
}

.mobile-navigation .mobile-menu-toggle {
    background: var(--darkgray);
    color: var(--darkgray-content);
}

.mobile-navigation .mobile-menu-toggle:hover {
    background: var(--darkgray-darkened);
    color: var(--darkgray-content);
}

.mobile-menu-toggle .hamburger {
    display: flex;
    width: unset;
    height: unset;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.mobile-menu-toggle .hamburger .hamburger-icon {
    position: relative;
    left: unset;
    top: unset;
    transform: unset;
    width: 10px;
    height: 10px;
}

.mobile-menu-toggle .hamburger .hamburger-icon span {
    width: 10px;
    height: 2px;
    margin-top: unset;
}

.mobile-menu-toggle .hamburger .hamburger-icon span:not(:last-child) {
    margin-bottom: 2px;
}

.mobile-menu-toggle .hamburger .hamburger-text {
    font-family: var(--heading-font);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

.hamburger-icon span {
    background-color: var(--white-content) !important;
}

.mobile-navigation .mobile-menu-toggle .hamburger .hamburger-icon {
    width: 14px;
    height: 14px;
}

.mobile-navigation .mobile-menu-toggle .hamburger .hamburger-icon span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    margin: 0;
    transform-origin: center;
    animation: none !important;
}

.mobile-navigation .mobile-menu-toggle .hamburger .hamburger-icon span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-navigation .mobile-menu-toggle .hamburger .hamburger-icon span:nth-child(2) {
    opacity: 0;
}

.mobile-navigation .mobile-menu-toggle .hamburger .hamburger-icon span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

@media only screen and (max-width: 991px) {
    .navigation .logo {
        max-height: 29px;
    }

    .main-nav-menu {
        margin: 0;
    }

    .main-nav-menu li.wishlist-item a,
    .main-nav-menu li.cart-trigger a {
        width: 47px;
        height: 47px;
        max-width: 47px;
        max-height: 47px;
        padding: 0;
    }

    header .mobile-menu-toggle-position {
        order: 1;
        margin-right: unset !important;
    }

    header .nav-holder {
        order: 2;
    }

    header .nav-holder .lef-switcher-menu-item {
        display: none;
    }
}

@media only screen and (max-width: 409px) {
    .main-nav-menu li.wishlist-item a,
    .main-nav-menu li.cart-trigger a {
        width: 37px;
        height: 37px;
        max-width: 37px;
        max-height: 37px;
    }

    .main-nav-menu li.wishlist-item a {
        margin-right: 6px;
    }

    .mobile-menu-toggle {
        padding: 4px 14px;
    }

    .mobile-menu-toggle .hamburger {
        gap: 6px;
    }

    .mobile-menu-toggle .hamburger .hamburger-text {
        font-size: 14px;
    }
}

header .logo-outer {
 	display: flex;
    flex-direction: row;
    flex: 1;
    align-items: center;
}
  
header .shortcode-holder {
    flex: 0 0 auto;
    margin: 0 auto; 
}
  
header .nav-holder.nav-holder-primary-1 {
    flex: 1;
    justify-content: flex-end;
}

/* LISTS */
ul li .icon {
    width: 20px;
}

.clean-list.horizontal-list {
    display: flex;
    flex-direction: row;
}

.clean-list.horizontal-list li {
    flex: 1;
    justify-content: center;
}

.clean-list.horizontal-list li:first-child {
    justify-content: flex-start;
}

.clean-list.horizontal-list li:last-child {
    justify-content: flex-end;
}

.icons-list i {
    font-size: 20px;
}
.icons-list i {
    font-size: 20px;
    margin-right: 0px;
}
.icons-list i.icon-circle-check {
    color: var(--succes);
}

/* BUTTONS */
.buttons-holder.no-margin-top {
    margin-top: unset;
}

.btn,
.btn span {
    line-height: 100%;
}

.btn.bg-transparent {
    background: transparent;
    color: inherit;
    padding: unset;
    text-decoration: underline;
    border: unset;
    border-radius: unset;
}

.btn.bg-transparent:hover {
    background: transparent;
    color: inherit;
}

.tns-outer .tns-controls {
    margin-top: 0px !important;
}

.tns-controls button,
body .single-main-product .block-product-header .single-product-gallery-holder .gallery-control-buttons .control-button {
    width: 37px !important;
    height: 37px !important;
    border-radius: 3px !important;
    background: var(--gray) !important;
    border: 1px solid var(--darkgray) !important;
    color: var(--gray-content) !important;
    margin-top: unset;
    margin-bottom: unset;
}

body .single-main-product .block-product-header .single-product-gallery-holder .gallery-control-buttons .control-button:hover {
    background: var(--gray-darkened) !important;
}

.tns-controls button[data-controls="prev"] {
    margin-right: 5.5px
}
.tns-controls button[data-controls="next"] {
    margin-left: 5.5px
}

/* NOTICE BLOCK */
.block-notice {
    border-radius: var(--general-border-radius);
}

/* CARD: GENERAL */
.card .image-holder img {
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
}

.card {
    display: flex;
    flex-direction: column;
}

.card .content-outer {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.card .content-outer .buttons-holder {
    margin-top: auto;
}

/* CARD: COLUMN CARD */
.card.col-card {
    padding: 33px 27px;
}

.card.col-card.bg-primary {
    border-color: var(--primary);
}

/* CARD: DEFAULT */
.card-default .excerpt-holder {
    font-size: var(--p-size);
}

.card-default .btn {
    width: calc(100% - 20px);
    background: var(--darkgray);
    color: var(--darkgray-content);
    justify-content: center;
}

/* CARD: TAXONOMY TERM */
.card-taxonomy-term .term-title h4 .icon {
    border-radius: 37px !important;
}

@media only screen and (max-width: 991px) {
    .align-stretch .featured-taxonomy .row .card-taxonomy-term {
        /* Subtract the card's vertical margins (3px top + 3px bottom) so the
           card + margins fill the stretched column; otherwise the card is too
           short and the term image overflows past the card edges. */
        height: calc(100% - 12px) !important;
    }

    .card-taxonomy-term {
        flex-direction: row !important;
        margin-top: 6px;
        margin-bottom: 6px;
    }

    .card-taxonomy-term .image-outer {
        width: 117px;
    }

    .card-taxonomy-term .term-title h4 {
        margin-bottom: unset;
    }

    .card-taxonomy-term .term-title h4 .icon {
        min-width: 37px;
        border-radius: 3px;
    }

    .card-taxonomy-term .image-outer .image-holder {
        padding-bottom: unset;
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .card-taxonomy-term .image-outer .image-holder img {
        height: 64px !important;
        width: auto;
        position: relative;
        transform: unset !important;
        top: unset !important;
        left: unset !important;
    }

    .card-taxonomy-term .content-outer .child-terms {
        display: none;
    }
}

/* CARD: PRODUCT */
.card-product .woocommerce-loop-product__title {
    font-size: var(--h3-size);
    margin-bottom: 5px;
}

.card-product .add_to_cart_button {
    line-height: 100%;
}

.card-product .image-outer .image-holder {
    padding-bottom: unset;
}

.card-product .image-outer .image-holder img {
    position: relative;
    aspect-ratio: 1/1;
}

body .card-product .loop-item-actions-wrapper {
    padding: unset;
    padding-top: 20px;
    margin-top: unset;
}

/* The leflite parent theme puts margin-top: auto on the actions wrapper, which only aligns the
   button. Moving the auto margin up to the price pushes the price and everything below it down,
   so price and button both align across a row however many lines the title wraps to. */
body .card-product .content-outer .product-pricing {
    margin-top: auto;
}

.card-product .product-excerpt {
    font-size: 14px;
    line-height: 24px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

@media only screen and (max-width: 991px) {
    /* Two columns: the image thumbnail on the left, the label and the content stacked on the
       right. A grid rather than the flex row this replaces, because the parent theme renders the
       label as a sibling of the image, and a grid can still place it in the content column. */
    .product-items .card-product {
        display: grid;
        grid-template-columns: var(--card-image-size) 1fr;
        grid-template-rows: auto 1fr;
        margin: 6px 0;
        --card-image-size: 140px;
    }

    .product-items .cards-same-height .card-product {
        height: calc(100% - 12px);
    }

    .product-items .card-product .image-outer {
        width: var(--card-image-size);
        min-width: var(--card-image-size);
    }

    .product-items .card-product > .image-outer {
        grid-column: 1;
        grid-row: 1 / -1;
    }

    .product-items .card-product > .content-outer {
        grid-column: 2;
        grid-row: 2;
    }

    /* The parent theme pins the sale/sold-out label to the card's top-left, on top of the image.
       Below 991px the image is only a 100-140px thumbnail, so the label hides most of it. Flow it
       into the content column above the product name instead. On cards without a label row 1 has
       no item and collapses to zero height, so those cards are unaffected. */
    .product-items .card-product > .product-on-sale,
    .product-items .card-product > .product-sold-out {
        position: static;
        grid-column: 2;
        grid-row: 1;
        margin: 20px 20px 0;
        font-size: 13px;
        line-height: 16px;
        padding: 5px 8px;
        border-radius: 4px;
    }

    /* The label supplies the gap above the product name when it is present. */
    .product-items .card-product:has(> .product-on-sale) > .content-outer,
    .product-items .card-product:has(> .product-sold-out) > .content-outer {
        padding-top: 8px;
    }

    .product-items .card-product .image-outer .image-holder img {
        border-top-right-radius: unset;
    }

    .product-items .card-product .content-outer {
        padding: 20px; 
    }
    
    .card.products-cta {
        margin: 6px 0;
        height: calc(100% - 12px) !important;
    }
}

@media only screen and (max-width: 459px) {
    .product-items .card-product {
        --card-image-size: 120px;
    }
}

@media only screen and (max-width: 439px) {
    .product-items .card-product {
        --card-image-size: 100px;
    }
}

/* CARD: REVIEWS */
body .card.card-reviews {
    padding: 32px;
    background: var(--gray);
}

.card.card-reviews .content-outer {
    padding: unset;
}

.card.card-reviews .review-intro .star-count .icon-star {
    color: var(--yellow);
    margin-right: unset;
}

body .card.card-reviews .review-intro h4 {
    color: var(--tertiary);
}

body .card.card-reviews .excerpt-holder {
    color: var(--tertiary);
    font-style: italic;
    margin-bottom: unset;
}

body .card.card-reviews .buttons-holder {
    margin-top: unset;
    margin: unset;
}

body .card.card-reviews .read-more-btn {
  	background-color: unset;
  	color: inherit;
  	padding: unset;
  	font-style: italic;
  	font-weight: 700;
  	text-decoration: underline;
  	margin-top: unset;
  	margin-bottom: unset;
    outline: none;
    border: none;
    margin: unset;
}

/* WEBWINKELKEUR REVIEWS INFO */
.wwk-reviews-info {
    padding: 20px 25px;
    background: var(--gray);
    border: 1px solid var(--darkgray);
    border-radius: var(--general-border-radius);
}

.wwk-reviews-info .wwk-stars .wwk-stars__text {
    font-size: 14px;
    opacity: unset;
    color: var(--tertiary);
    text-decoration: none !important;
}

.wwk-reviews-info .wwk-stars .wwk-stars__text span {
    font-weight: 800;
}

.wwk-reviews-info .wwk-logo img {
    width: 78px;
    height: 29px;
    margin-top: 9px;
}



/* ACCORDION */
.accordion {
    overflow: hidden;
}

.accordion .accordion-title,
.accordion .accordion-content  {
    background: var(--darkgray);
    color: var(--darkgray-content);
}

body .accordion .accordion-content {
    border-top: 1px solid var(--white);
}

/* PRODUCT PRICING */
.product-pricing .price {
    font-size: 20px !important;
}

.product-pricing:has(.sale-price) .regular-price {
    color: var(--tertiary);
    opacity: .6;
    font-weight: 300;
    text-decoration: line-through;
}
.product-pricing:has(.sale-price) .regular-price::after {
    all: unset !important;
}

.product-pricing:not(:has(.sale-price)) .regular-price,
.product-pricing:not(:has(.sale-price)) .price,
.product-pricing .sale-price {
    color: var(--secondary) !important;
    font-weight: 900 !important;
}

.product-pricing .sale-price {
    margin-left: 5px;
}

/* BLOCK: HERO SLIDER */
.hero-slider .hero-slide {
    width: 100%;
    border: 1px solid var(--darkgray);
    display: flex;
    flex-direction: row;
    padding: 38px 46px;
    margin: 18px 0;
}

.hero-slider .hero-slide .slide-content,
.hero-slider .hero-slide .slide-image {
    flex: 1;
}

.hero-slider .hero-slide .slide-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hero-slider .hero-slide .slide-content .buttons-holder {
    margin-top: calc(var(--btn-margin-outer) * -1);
}

.hero-slider .hero-slide .slide-image {
    display: flex;
    position: relative;
}

.hero-slider .hero-slide .slide-image img {
    position: absolute;
    top: -56px;
    left: 0;
    height: calc(100% + (38px * 2) + (18px * 2));
}

.hero-slider .hero-slide.image-left .slide-image {
    order: 1;
}
.hero-slider .hero-slide.image-left .slide-content {
    order: 2;
}

.hero-slider .hero-slide.image-right .slide-image img {
    left: unset;
    right: 0;
}

@media only screen and (max-width: 991px) {
    .hero-slider .hero-slide {
        position: relative;
        padding: 27px;
    }

    .hero-slider .hero-slide .slide-image {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .hero-slider .hero-slide .slide-image img {
        height: 100%;
        top: unset;
        opacity: .1;
        object-fit: cover;
    }

    .hero-slider .hero-slide .slide-content {
        z-index: 2;
    }
}

/* BLOCK: CATEGORY CTA (Call to Action) */
.category-call-to-action {
    padding: 28px;
    display: flex;
    flex-direction: row !important;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.category-call-to-action .cta-content {
    width: 226px;
    min-width: 226px;
    z-index: 2;
    position: relative;
}
.category-call-to-action .cta-content .content-wrapper {
    margin-bottom: 7px;
}
.category-call-to-action .cta-content .content-wrapper h1,
.category-call-to-action .cta-content .content-wrapper h2,
.category-call-to-action .cta-content .content-wrapper h3,
.category-call-to-action .cta-content .content-wrapper h4,
.category-call-to-action .cta-content .content-wrapper h5 {
    margin-bottom: 2px;
}
.category-call-to-action .cta-content p {
    font-size: 14px;
}
.category-call-to-action .cta-image {
    width: calc(100% - 236px);
    display: flex;
    justify-content: center;
}
.category-call-to-action .cta-image img {
    position: absolute;
    height: calc(100% - 20px);
    top: 10px;
    z-index: 1;
}

/* BREADCRUMBS */
#breadcrumbs {
    padding: 3px 10px;
    background: var(--darkgray);
    color: var(--darkgray-content);
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 12px;
}

#breadcrumbs span span {
    font-size: 14px;
    line-height: 1.8em;
}

#breadcrumbs span a {
    color: var(--darkgray-content);
    text-decoration: none;
}

#breadcrumbs span a:hover {
    text-decoration: underline;
}

#breadcrumbs span .breadcrumb_last {
    font-weight: 700;
}

#breadcrumbs.breadcrumbs-center {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* PRODUCT ARCHIVE PAGE */
.woocommerce-page .products {
    padding-top: unset;
}

.products .sidebar {
    background: unset;
    color: inherit;
}

.products .sidebar-outer {
    position: sticky;
    top: 30px;
    -webkit-transition: top 0.3s ease-in-out;
    -moz-transition: top 0.3s ease-in-out;
    -o-transition: top 0.3s ease-in-out;
    transition: top 0.3s ease-in-out;
}

.products .sidebar-outer .toggle-filter-button {
    /* background: var(--secondary); */
    width: calc(100% - 15px);
    /* color: var(--secondary-content); */
    text-align: center;
    margin-top: unset;
    margin-bottom: 15px;
}

body.logged-in.admin-bar .products .sidebar-outer {
    top: 62px;
}

/* On mobile the filter is moved into the single-column flow above the products.
   It must scroll away with the content instead of sticking and overlapping the
   product loop, so drop the sticky positioning on both the wrapper and the
   filter panel (the latter is sticky in the parent theme). */
@media only screen and (max-width: 991px) {
    .products .sidebar-outer,
    .products .sidebar-outer .archive-filter {
        position: static;
        top: auto;
    }
}

.card.products-cta {
    padding: 33px 48px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: unset;
    height: calc(100% - 30px);
    align-items: center;
    overflow: hidden;
}

.card.products-cta .content-wrapper {
    max-width: 642px;
}

.ajax-pagination .page-load-more .btn {
    width: 100%;
    margin: unset;
    text-align: center;
}

@media only screen and (min-width: 992px) {
    .card.products-cta:has(.card-image) {
        padding-right: unset;
    }

    .card.products-cta .card-image {
        margin-top: -33px;
        margin-bottom: -33px;
        height: calc(100% + 66px);
    }

    .card.products-cta .card-image img {
        height: 100%;
    }
}

@media only screen and (max-width: 991px) {
    .products .col-lg-3.sidebar {
        display: none;
    }

    .card.products-cta {
        padding: 33px 17px;
    }

    .card.products-cta .card-image {
        display: none;
    }

    .ajax-pagination .page-load-more .btn {
        margin-top: 26px;
    }
}



/* DIRECT TO AND SORT FILTER */
.direct-to-and-sort-filter {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}

/* The direct-to strip has this row to itself, so drop the row entirely when a category has
   no direct-to categories — otherwise it leaves an empty 20px gap above the count. */
.direct-to-and-sort-filter:not(:has(.direct-to-buttons-outer)) {
    display: none;
}

.direct-to-and-sort-filter .direct-to {
    margin-bottom: unset;
}

/* PRODUCTS COUNT AND SORT FILTER */
/* Product count on the left, sort filter pushed to the right. */
.products-count-and-sort-filter {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}

.products-count-and-sort-filter .archive-product-count {
    font-size: 14px;
    color: var(--tertiary);
}

.products-count-and-sort-filter .filter-item {
    margin-bottom: unset;
    margin-left: auto;
}

.products-count-and-sort-filter .filter-item .filter-title {
    display: none;
}

.products-count-and-sort-filter .filter-item select {
    font-size: 14px;
    width: fit-content;
    margin-left: 15px;
    max-width: 271px;

    background: var(--white);
    color: var(--white-content);
    border-color: var(--gray);
}

body .direct-to .direct-to-buttons {
    margin: unset;
    flex-wrap: nowrap;
    gap: 15px;
    overflow-x: auto;
    /* white-space: nowrap; */
    padding-bottom: 11px;
    position: relative;
}

body .direct-to .direct-to-buttons .direct-to-buttons-item {
    flex-shrink: 0;
    width: auto;
}

.direct-to .direct-to-buttons::-webkit-scrollbar {
    height: 2px;
    /* small clean scrollbar */
}

.direct-to .direct-to-buttons::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .4);
    border-radius: 10px;
    cursor: pointer;
}

.direct-to .direct-to-buttons::-webkit-scrollbar-track {
    background: #eee;
}

.direct-to .direct-to-buttons-outer {
    position: relative;
    /* Width of the edge fades. Also read by dist/js/direct-to.js, which parks a paged-to
       category just past the fade so it never lands washed out underneath it. Keep the
       fade wider than the 36px arrow so clearing the fade also clears the arrow. */
    --direct-to-fade-width: 60px;
}

/* Left gradient */
.direct-to .direct-to-buttons-outer::before {
    content: '';
    position: absolute;
    left: 0;
    background: linear-gradient(to right,
            #fff 0%,
            rgba(255, 255, 255, 0) 100%);
    width: var(--direct-to-fade-width);
    height: 100%;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/* Right gradient */
.direct-to .direct-to-buttons-outer::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(to left,
            #fff 0%,
            rgba(255, 255, 255, 0) 100%);
    width: var(--direct-to-fade-width);
    height: 100%;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/* Only show when scrolling is possible */
.direct-to .direct-to-buttons-outer.can-scroll-left::before {
    opacity: 1;
}

.direct-to .direct-to-buttons-outer.can-scroll-right::after {
    opacity: 1;
}

.direct-to .direct-to-buttons-outer .btn {
    padding: var(--btn-small-padding);
    margin: unset;
    flex-shrink: 0;
}

/* Previous/next arrows (injected by dist/js/direct-to.js). They sit on top of the
   fades at either edge and page the strip one screen at a time. Vertical centring
   ignores the strip's 11px scrollbar gutter so the arrow lines up with the pills
   rather than with the scrollbar. */
.direct-to .direct-to-buttons-outer .direct-to-scroll-btn {
    position: absolute;
    top: calc((100% - 11px) / 2);
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: unset;
    border: 1px solid var(--darkgray);
    border-radius: 50%;
    background: var(--white);
    color: var(--tertiary);
    box-shadow: 0 1px 6px rgba(0, 55, 109, .16);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, background 0.2s ease-in-out, color 0.2s ease-in-out;
}

.direct-to .direct-to-buttons-outer .direct-to-scroll-btn-prev {
    left: 0;
}

.direct-to .direct-to-buttons-outer .direct-to-scroll-btn-next {
    right: 0;
}

/* .icon carries a margin-right to space it from button text; these buttons are icon-only,
   so that margin would shove the chevron off-centre. */
.direct-to .direct-to-buttons-outer .direct-to-scroll-btn .icon {
    font-size: 14px;
    line-height: 1;
    margin: unset;
}

/* Both chevron glyphs paint 102 units of ink inside a 125-unit advance, so each one leans
   0.0625em away from the middle of its own box. Nudge each back in to centre the ink rather
   than the box. Only valid for these two mirrored glyphs; revisit if the icons change. */
.direct-to .direct-to-buttons-outer .direct-to-scroll-btn-prev .icon {
    transform: translateX(0.0625em);
}

.direct-to .direct-to-buttons-outer .direct-to-scroll-btn-next .icon {
    transform: translateX(-0.0625em);
}

.direct-to .direct-to-buttons-outer .direct-to-scroll-btn:hover {
    background: var(--primary);
    color: var(--primary-content);
    border-color: var(--primary);
}

.direct-to .direct-to-buttons-outer .direct-to-scroll-btn:focus,
.direct-to .direct-to-buttons-outer .direct-to-scroll-btn:focus-visible,
.direct-to .direct-to-buttons-outer .direct-to-scroll-btn:active {
    outline: none;
    box-shadow: 0 1px 6px rgba(0, 55, 109, .16);
}

/* Same rule as the fades: an arrow only exists while that direction can still scroll. */
.direct-to .direct-to-buttons-outer.can-scroll-left .direct-to-scroll-btn-prev,
.direct-to .direct-to-buttons-outer.can-scroll-right .direct-to-scroll-btn-next {
    opacity: 1;
    pointer-events: auto;
}

@media only screen and (max-width: 991px) {
    .direct-to .direct-to-buttons-outer {
        --direct-to-fade-width: 50px;
    }

    /* Sorting lives inside the mobile filter panel instead, and the count is desktop-only, so
       the whole row goes rather than each child — an empty flex row would still contribute its
       20px bottom margin. The count stays in the DOM, so the AJAX filter keeps syncing it. */
    .products-count-and-sort-filter {
        display: none;
    }
}

/* PAGE HEADER */
.wp-block-custom-section-block-col.page-header-column .col-card {
    padding: 38px 46px;
}

/* WOOCOMMERCE PAGE HEADER */
.page-header.shop-page {
    background: var(--gray);
    color: var(--gray-content);
    border: 1px solid var(--darkgray);
    padding: 38px 46px !important;
    border-radius: 8px;

    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}

.page-header.shop-page:has(.category-image) {
    padding-right: unset !important;
}

.page-header.shop-page .content-wrapper {
    width: calc(100% - (350px + 25px));
}

.page-header.shop-page .category-image {
    width: 350px;
    margin-left: 25px;
    margin-top: -29px;
    margin-bottom: -29px;
}

.page-header.shop-page .category-image img {
    width: 350px;
    height: 100%;
    object-fit: contain;
}

@media only screen and (max-width: 991px) {
    .page-header.shop-page {
        padding: 27px !important;
    }

    .page-header.shop-page:has(.category-image) {
        padding-right: 27px !important;
    }

    .page-header.shop-page .content-wrapper {
        width: 100%;
    }

    .page-header.shop-page .category-image {
        display: none;
    }

    .page-header.above-content:not(.shop-page) .content-wrapper {
        padding: 27px !important;
    }
}

/* Mobile "Meer lezen" toggle on the category description. The toggle element itself is only
   inserted by category-description-toggle.js on mobile, so it needs no breakpoint of its own. */
.page-header.shop-page .category-description.is-collapsed p:last-of-type {
    margin-bottom: 8px;
}

.page-header.shop-page .category-description__toggle {
    /* Reads as a textual link rather than a button, so the UA button chrome comes off. */
    display: inline-block;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--gray-content);
    text-decoration: underline;
    cursor: pointer;
}

.page-header.shop-page .category-description__toggle:hover {
    text-decoration: none;
}

.page-header.shop-page .category-description__toggle:focus,
.page-header.shop-page .category-description__toggle:focus-visible,
.page-header.shop-page .category-description__toggle:active {
    outline: none;
    box-shadow: none;
}

.page-header.above-content:not(.shop-page) {
    padding: unset;
}

.page-header.above-content:not(.shop-page) .content-wrapper {
    padding: 38px 46px;
    background: var(--gray);
    border: 1px solid var(--darkgray);
    border-radius: var(--general-border-radius);
    color: var(--gray-content);
}

/* ARCHIVE FILTERS */
body .archive-filter .filter-item {
    background: unset;
    padding: unset;
}

body .archive-filter .filter-item .filter-title h4 {
    font-size: var(--p-size);
    font-weight: 700;
}

body .archive-filter .reset-filter-holder .reset-filter-label {
    width: 100%;
    border: 1px solid var(--tertiary);
    color: var(--tertiary);
    padding: var(--btn-medium-padding);
    line-height: 100%;
    border-radius: var(--btn-border-radius);
    font-weight: var(--btn-font-weight);
    text-decoration: none;
    text-align: center;
    font-size: 14px;

    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

body .archive-filter .reset-filter-holder .reset-filter-label:hover {
    background: var(--tertiary);
    color: var(--tertiary-content);
}

body .archive-filter .filter-item .price-slider-holder .price-slider.noUi-target .noUi-base .noUi-connects .noUi-connect {
    background: var(--tertiary);
}

body .archive-filter .filter-item .price-slider-holder .price-slider.noUi-target .noUi-base .noUi-origin .noUi-handle {
    background: var(--tertiary);
}

/* FORMS */
body .archive-filter .filter-item .form input, 
body .archive-filter .filter-item form input {
    padding-left: var(--form-elements-padding-x);
    padding-right: var(--form-elements-padding-x);
    padding-bottom: calc(var(--form-elements-padding-y) + 7px);
    padding-top: calc(var(--form-elements-padding-y) + 7px);
    height: unset;
    line-height: normal;
}

.checkout-coupon-overlay input, 
.checkout-coupon-overlay select, 
.checkout-coupon-overlay textarea, 
.filter-item input, 
.filter-item select, 
.filter-item textarea, 
form input, 
form select, 
form textarea {
    border-color: var(--darkgray);
    background: var(--gray);
    color: var(--gray-content);
}

body .checkout-coupon-overlay textarea, 
body .filter-item textarea, 
body form textarea,
textarea {
    border-radius: 20px !important;
}

/* SINGLE PRODUCT PAGE */
body.single-product .block-product-header {
    padding-top: unset;
    padding-bottom: 23px;
    background: var(--white);
    color: var(--white-content);
    position: relative;
    overflow-x: clip;
}

body.single-product .single-main-product .block-product-header .product-summary {
    height: unset;   
}

body.single-product .block-product-header .product-summary-inner {
    background: var(--gray);
    color: var(--gray-content);
    padding: 38px 46px;
    border: 1px solid var(--darkgray);
}

body.single-product .block-product-header .product-summary-inner .woocommerce-product-rating {
    margin-bottom: 12px;
}

body.single-product .block-product-header .product-summary-inner .woocommerce-product-rating .icon-star {
    font-size: 16px;
    margin-right: unset;
}

body.single-product .block-product-header .product-summary-inner .review-stars-and-count .woocommerce-review-link {
    font-size: 14px;
    color: var(--gray-content);
}

/* "0 reviews" label has no reviews to link to — render it as plain text */
body.single-product .block-product-header .product-summary-inner .review-stars-and-count .woocommerce-review-link--empty {
    text-decoration: none;
    cursor: default;
}

body.single-product .block-product-header .product-summary-inner .product-on-sale {
    display: none;
}

body.single-product .block-product-header .product-summary-inner .modify-to-wishlist-button {
    position: absolute;
    top: 20px;
    right: 20px;
}

body.single-product .block-product-header .product-summary-inner .title-wishlist-holder {
    margin-bottom: 12px;
}

body.single-product .block-product-header .product-summary-inner .woocommerce-product-details__short-description,
body.single-product .block-product-header .product-summary-inner .woocommerce-product-details__short-description p:last-child {
    margin-bottom: 12px;
}

body.single-product .block-product-header .product-summary-inner .shop-usps {
    margin-top: 22px;
}

body.single-product .block-product-header .product-summary-inner .shop-usps .icons-list i.icon-circle-check {
    color: var(--gray-content);
}

body.single-product .pricing-and-stock {
    margin-bottom: 12px;
}

body.single-product .pricing-and-stock .product-pricing .price {
    font-size: 24px !important;
}

body.single-product .single-main-product .block-product-header .cart:not(.variations_form), 
body.single-product .single-main-product .block-product-header .woocommerce-variation-add-to-cart {
    flex-direction: row;
    gap: 13px;
}

body.single-product .single-main-product .single_add_to_cart_button {
    width: 100%;
}

body.single-product .single-main-product .quantity {
    height: 47px;
    border: 1px solid var(--darkgray);
    background: var(--white);
    color: var(--white-content);
    min-width: 150px;
}

body.single-product .single-main-product .quantity input {
    background: var(--white);
    color: var(--white-content);
}

body.single-product .single-main-product .quantity button {
    height: 41px;
    width: 41px;
    background: var(--gray) !important;
    color: var(--gray-content) !important;
    border-radius: 50px;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

body.single-product .single-main-product .quantity button:hover {
    background: var(--gray-darkened) !important;
    color: var(--gray-content) !important;
}

.quantity button.plus {
    margin-left: 1px;
}

.quantity button.minus {
    margin-right: 1px;
}

body.single-product .product_meta {
    margin-top: 12px;
    font-size: 14px;
    opacity: .6;
    color: var(--tertiary);
    line-height: 1.6em;
}

body.single-product .product_meta span:not(.sku_wrapper, .sku) {
    display: none;
}

body.single-product .wwk-information {
    background: var(--gray);
    color: var(--gray-content);
    border: 1px solid var(--darkgray);
    padding: 18px;
    border-radius: var(--general-border-radius);
    margin-top: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    grid-column-gap: 258px;
}

body.single-product .wwk-information .wwk-logo img {
    height: 50px;
    width: auto;
}

body.single-product .wwk-information .wwk-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.single-product .wwk-information .wwk-rating .wwk-rating__score {
    font-weight: 900;
    font-size: 20px;
    color: var(--secondary);
}

body.single-product .wwk-information .wwk-rating .wwk-rating__score .icon {
    font-size: 16px;
    margin-right: unset;
}

body.single-product .wwk-information .wwk-rating .wwk-rating__score .wwk-rating__value {
    margin-right: 8px;
}

body.single-product .wwk-information .wwk-rating .wwk-rating__count {
    font-size: 14px;
}

body.single-product .single-main-product .product-related-products {
    background: var(--white);
    color: var(--white-content);
    padding: 38.5px 0 77px 0;
}

body.single-product .block-product-reviews {
    color: var(--tertiary);
}

body.single-product .block-product-reviews .reviews-rating .average-rating p {
    color: var(--tertiary);
    font-weight: 800;
}

body.single-product .lef-bis-form,
body.single-product .lef-bis-subscribed {
    border-color: var(--darkgray);
    background: var(--darkgray);
    border-radius: var(--general-border-radius);
    padding: var(--general-padding);
}

body.single-product .lef-bis-response {
    border-radius: var(--general-border-radius);
    padding: var(--general-padding);
}

body.single-product .lef-bis-response .lef-bis-response--success {
    border-color: var(--success);
    border: 1px solid var
}

@media only screen and (max-width: 991px) {
    body.single-product .single-main-product .block-product-header {
        margin-bottom: unset;
    }

    body.single-product .single-main-product .block-product-header .product-summary .product-summary-inner .review-stars-and-count {
        flex-direction: row;
        justify-content: flex-start;
    }

    body.single-product .single-main-product .block-product-header .modify-to-wishlist-button {
        display: none;
    }

    body.single-product .block-product-header .product-summary-inner {
        border: 1px solid var(--darkgray) !important;
        border-radius: var(--general-border-radius) !important;
        padding: var(--general-padding) !important;
    }
}

@media only screen and (max-width: 575px) {
    body.single-product .single-main-product .block-product-header .product-summary {
        padding: unset;
        border-top: 1px solid var(--darkgray);
        border-bottom: 1px solid var(--darkgray);
    }

    body.single-product .single-main-product .block-product-header .product-summary .product-summary-inner {
        padding: 15px;
    }

    body.single-product .wwk-information {
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
        border-radius: unset;
        border-left: unset;
        border-right: unset;
        grid-column-gap: unset;
        justify-content: space-between;
    }

    body.single-product .single-main-product .block-product-header .cart:not(.variations_form), body.single-product .single-main-product .block-product-header .woocommerce-variation-add-to-cart {
        flex-direction: column;
    }

    body.single-product .single-main-product .quantity {
        width: 100%;
    }

    body .single-main-product .block-product-header .product-summary-inner .payment-methods {
        margin-top: unset;
    }
}

/* FIXED PRODUCT BAR */
body.single-product .fixed-product-bar {
    background: var(--gray);
    color: var(--gray-content);
    border-color: var(--darkgray);
}

body.single-product .fixed-product-bar .right-side .cart-actions .cart:not(.variations_form) .quantity, 
body.single-product .fixed-product-bar .right-side .cart-actions .woocommerce-variation-add-to-cart .quantity {
    margin-right: 13px;
}

body.single-product .fixed-product-bar .right-side .cart-actions .cart:not(.variations_form) .quantity button.plus, 
body.single-product .fixed-product-bar .right-side .cart-actions .woocommerce-variation-add-to-cart .quantity button.plus {
    margin-right: unset;
}

/* MODIFY TO WISHLIST BUTTON */
.btn.modify-to-wishlist-button {
    background: var(--white);
    color: var(--secondary);
}

.card .btn.modify-to-wishlist-button {
    background: var(--gray);
    color: var(--secondary);
    display: none;
}

.btn.modify-to-wishlist-button:hover {
    background: var(--secondary);
    color: var(--secondary-content);
}

.btn.modify-to-wishlist-button.added {
    background: var(--secondary);
    color: var(--secondary-content);
}

.btn.modify-to-wishlist-button.added:hover {
    background: var(--secondary-darkened);
    color: var(--secondary-content);
}

.btn.modify-to-wishlist-button .icon {
    font-size: 16px;
}

/* BLOG ARCHIVE PAGE */
body section.archive-post {
    padding: 5px 0 var(--section-padding) 0;
}

@media only screen and (max-width: 575px) {
    .lef-section.blog-archive-header .container {
        padding: unset;
    }

    .lef-section.blog-archive-header .container .card {
        border-radius: unset;
        border-left: unset;
        border-right: unset;
    }
}

/* AUTHOR ARCHIVE HEADER (styled like the blog archive header) */
.author-archive-header {
    padding: unset;
}

.author-archive-header .author-archive-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

.author-archive-header .breadcrumbs {
    width: 100%;
}

.author-archive-header .author-image {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.author-archive-header .author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.author-archive-header .author-name {
    margin: 0;
    color: var(--tertiary);
}

.author-archive-header .author-description {
    max-width: 740px;
    color: var(--tertiary);
}

.author-archive-header .author-description p:last-child {
    margin-bottom: 0;
}

/* BLOG FILTER ([blog_filter] shortcode) */
.blog-filter {
    width: 100%;
    max-width: 740px;
    margin: 24px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.blog-filter__search {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    background: transparent;
}

.blog-filter__search-input {
    width: 100%;
    background: var(--white) !important;
    color: var(--white-content) !important;
    border: 1px solid var(--darkgray) !important;
    border-radius: var(--btn-border-radius) !important;
    padding: 14px 24px 14px 52px !important;
    font-size: var(--p-size);
    line-height: 19px !important;
    box-shadow: 0 1px 2px rgba(0, 55, 109, 0.04);
}

.blog-filter__search-icon {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    color: var(--tertiary);
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.blog-filter__search-icon .icon {
    font-size: 18px;
    margin: 0;
}

.blog-filter__quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
    color: var(--tertiary);
    font-size: var(--p-size);
    margin: 0;
    padding: 0;
    background: transparent;
}

.blog-filter__quick-label {
    font-weight: 700;
}

.blog-filter__quick-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.blog-filter__quick-item {
    margin: 0;
    padding: 0;
}

.blog-filter__quick-checkbox {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    margin: 0;
    padding: 0;
}

.blog-filter__quick-link {
    color: var(--tertiary);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

.blog-filter__quick-link:hover,
.blog-filter__quick-checkbox:focus-visible + .blog-filter__quick-link {
    color: var(--secondary);
    outline: none;
    text-decoration: underline;
}

.blog-filter__quick-checkbox:checked + .blog-filter__quick-link {
    color: var(--secondary);
    font-weight: 700;
}

.archive-post .page-load-more {
    margin-top: 15px;
    display: flex;
    justify-content: center;
}

.archive-post .page-load-more a {
    max-width: 1140px;
}

/* SINGLE POSTS PAGE */
.lef-section.blog-header {
    padding: 38px 49px;
    border-radius: var(--general-border-radius);
    overflow: hidden;
}

.blog-content .lef-section {
    padding: 23px 0;
}

.blog-content .lef-section .container {
    padding: unset;
}

.blog-author-info {
    margin-top: 24px;
    padding: 32px;
    border-radius: var(--general-border-radius);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 28px;
    border: 1px solid var(--darkgray);
}

.blog-author-info .author-image {
    flex-shrink: 0;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
}

.blog-author-info .author-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-author-info .author-content {
    flex: 1;
    min-width: 0;
}

.blog-author-info .author-name {
    color: var(--tertiary);
    margin: 0 0 8px;
}

.blog-author-info .author-name a {
    color: inherit;
    text-decoration: none !important;
}

.blog-author-info .author-name a:hover {
    text-decoration: underline;
}

.blog-author-info .author-description,
.blog-author-info .author-description p {
    color: var(--tertiary);
}

.blog-author-info .author-description p:last-child {
    margin-bottom: 0;
}

.lef-section.blog-featured-blogs {
    margin-top: 62px;
}

.lef-section.blog-featured-blogs .buttons-holder {
    margin-top: unset;
}

.lef-section.blog-featured-blogs .featured-blogs {
    margin-top: 10px;
}

@media only screen and (max-width: 575px) {
    .blog-author-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 18px;
    }

    .lef-section.blog-header {
        margin-left: -15px;
        margin-right: -15px;
        border-radius: unset;

        padding: 28px 15px;
    }

    .blog-author-info {
        margin-top: unset;
        margin-left: -15px;
        margin-right: -15px;
        border-left: unset;
        border-right: unset;
        border-radius: unset;
    }

    .lef-section.blog-featured-blogs {
        margin-top: unset;
    }
}

/* QUICK NAVIGATION (INHOUDSOPGAVE) */
.quick-navigation {
    padding: 30px;
    background: var(--primary);
    color: var(--primary-content);
    border-radius: var(--general-border-radius);
    position: sticky;
    top: 30px;
}

body.logged-in.admin-bar .quick-navigation {
    top: 62px;
}

.quick-navigation h3 {
    margin-top: 0;
    margin-bottom: 14px;
}

.quick-navigation .quick-navigation-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quick-navigation .quick-navigation-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--primary-content);
}

.quick-navigation .quick-navigation-link:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 991px) {
    .quick-navigation {
        margin-left: -15px;
        margin-right: -15px;
        border-radius: unset;
        padding: 28px 15px;
        /* Scroll away with the article instead of sticking over the text. */
        position: static;
        top: auto;
    }
}

/* SOCIAL LINK */
.social-link:has(.icon) {
    width: 37px;
    height: 37px;
    text-decoration: none;
    display: inline-flex;
    background: var(--primary);
    color: var(--primary-content) !important;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 37px;
    transition: background .3s ease-in-out;
}

.social-link:has(.icon):hover {
    background: var(--primary-darkened);
    color: var(--primary-content) !important;
    text-decoration: none;
}

.social-link .icon {
    margin-right: unset;
}

footer .social-link:has(.icon) {
    background: var(--white);
    color: var(--white-content) !important;
}

footer .social-link:has(.icon):hover {
    background: var(--white-darkened);
    color: var(--white-content) !important;
}

/* FOOTER */
footer img {
    width: auto;
}

.footer-inner {
    padding: 85px 0px 55px 0px;
}

.socket * {
    font-size: 13px;
}
.socket {
    padding: 23px 0px;
}

.socket .socket-half {
    display: flex;
    flex-direction: row;
}

.socket .socket-half .menu {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: unset;
    padding: unset;
    gap: 18px;
}

.socket .socket-half .menu a {
    text-decoration: underline;
    opacity: 1;
}

.socket .socket-half .socket-seperator {
    margin: 0 18px;
    font-weight: 900;
}

.socket .socket-half a {
    text-decoration: none;
    opacity: .7;
}
.socket .socket-half a:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 991px) {
    .footer-inner {
        padding: 70px 0;
    }

    .socket .socket-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .socket .socket-inner .socket-half {
        flex-direction: column;
    }

    .socket .socket-inner .socket-half .menu {
        flex-direction: column;
        gap: 0px;
        margin-bottom: 10px;
    }

    .socket .socket-half .socket-seperator {
        display: none;
    }
}

/* USPS UNDER MENU */
.usps-menu {
    padding: 19px 0;
    background: var(--transparent);
}

.usps-menu .usps-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.usps-menu .usps-menu-item {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4em;
}

.usps-menu .usps-menu-item .icon-circle-check {
    color: var(--succes);
    font-size: 18px;
    flex-shrink: 0;
    margin-right: unset;
}

.usps-menu .usps-menu-item strong,
.usps-menu .usps-menu-item b {
    font-weight: 700;
}

.usps-menu .usps-menu-item a {
    text-decoration: none;
}

@media only screen and (max-width: 992px) {
    .usps-menu .usps-menu-list {
        margin: unset;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 28px;
        overflow-x: auto;
        white-space: nowrap;
        position: relative;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .usps-menu .usps-menu-list::-webkit-scrollbar {
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    .usps-menu .usps-menu-list {
        gap: 16px;
    }
}

/* CART */
.cart-items-list .woocommerce-cart-form__cart-item .product-name a {
    text-decoration: none !important;
    color: var(--tertiary);
    font-weight: var(--h-font-weight);
}

.cart-items-list .woocommerce-cart-form__cart-item .product-price,
.cart-items-list .woocommerce-cart-form__cart-item .product-subtotal {
    color: var(--secondary);
    font-weight: var(--h-font-weight);
}

.lef-freegift-zero {
    font-weight: var(--h-font-weight);
}

/* Match the cart quantity field to the single product page widget
   (white pill with round +/- buttons). The markup is identical; only the
   single-product styling is scoped to body.single-product, so mirror it here. */
.cart-items-list .quantity {
    height: 47px;
    border: 1px solid var(--darkgray);
    background: var(--white);
    color: var(--white-content);
    min-width: 150px;
}

.cart-items-list .quantity input {
    background: var(--white);
    color: var(--white-content);
}

.cart-items-list .quantity button {
    height: 41px;
    width: 41px;
    background: var(--gray) !important;
    color: var(--gray-content) !important;
    border-radius: 50px;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.cart-items-list .quantity button:hover {
    background: var(--gray-darkened) !important;
    color: var(--gray-content) !important;
}

.cart-items-list .woocommerce-cart-form__cart-item .product-remove .desktop-only a {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--error) 70%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--error-content);
    text-decoration: none !important;
    transition: background .3s ease-in-out;
    /* Hide the literal "×" text glyph; its asymmetric side-bearings make it
       sit off-centre. Render a properly centred icomoon xmark glyph instead. */
    font-size: 0;
}

.cart-items-list .woocommerce-cart-form__cart-item .product-remove .desktop-only a::before {
    content: "\ef20";
    font-family: 'icomoon';
    font-size: 11px;
    line-height: 1;
}

.cart-items-list .woocommerce-cart-form__cart-item .product-remove .desktop-only a:hover {
    background: var(--error);
}

@media only screen and (max-width: 379px) {
    .cart-items-list .quantity {
        border-radius: var(--btn-border-radius) !important;
        margin-right: 10px;
        padding-right: 10px;
        width: 100% !important;
    }
}

/* CHECKOUT */
.lef-no-distraction.woocommerce-checkout header {
    z-index: 3;
    position: relative;
}

.lef-no-distraction.woocommerce-checkout .usps-menu .container {
    z-index: 3;
    position: relative;
}

/* ---------- Product description: read more / read less toggle ---------- */
.lef-wc-product-description {
    position: relative;
}

.lef-wc-product-description.is-collapsible.is-collapsed {
    max-height: 560px;
    overflow: hidden;
}

.lef-wc-product-description.is-collapsible.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 85%);
    pointer-events: none;
    z-index: 1;
}

/* Uses the normal theme button (.btn.bg-darkgray); only the toggle-specific
   bits (outline reset, collapsed positioning, chevron rotation) live here. */
.product-description-toggle {
    cursor: pointer;
    /* The theme button uses `transition: all`, which animates the transform when
       the button switches between its collapsed (absolute, translateX(-50%)) and
       expanded (in-flow) position — causing a horizontal slide. Limit the
       transition to colour/opacity so the position change is instant. */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.product-description-toggle:focus,
.product-description-toggle:focus-visible,
.product-description-toggle:active {
    outline: none;
    box-shadow: none;
}

.product-description-toggle .icon {
    transition: transform 0.2s ease;
}

.lef-wc-product-description.is-collapsible.is-collapsed .product-description-toggle {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 2;
}

.lef-wc-product-description.is-collapsible:not(.is-collapsed) .product-description-toggle {
    display: flex;
    margin: 16px auto 0;
}

.lef-wc-product-description.is-collapsible:not(.is-collapsed) .product-description-toggle .icon {
    transform: rotate(180deg);
}

/* BRAND OVERVIEW BLOCK */
.brand-overview {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.brand-overview .alphabet-nav {
    text-align: center;
}

.brand-overview .alphabet-nav__heading {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 800;
    color: var(--tertiary);
    text-align: center;
}

.brand-overview .alphabet-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.brand-overview .alphabet-links .btn {
    min-width: 48px;
    justify-content: center;
}

.brand-overview .letter-section {
    scroll-margin-top: 120px;
}

.brand-overview .letter-heading {
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--darkgray);
    font-size: 32px;
    font-weight: 800;
    color: var(--tertiary);
    line-height: 1;
}

.brand-overview .brands-grid.row {
    row-gap: 20px;
}

.brand-overview .brand-card-col {
    display: flex;
}

.brand-overview .brand-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 20px 24px;
    background: var(--gray);
    color: var(--gray-content);
    border: 1px solid var(--darkgray);
    border-radius: var(--general-border-radius);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.brand-overview .brand-card:hover {
    border-color: var(--primary);
}

.brand-overview .brand-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.brand-overview .product-count {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--darkgray);
    color: var(--tertiary);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.brand-overview .brand-label {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--secondary);
    color: var(--white);
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.brand-overview .brand-name {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--tertiary);
    text-decoration: none;
}

.brand-overview .brand-info {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tertiary);
    text-decoration: none;
}

.brand-overview .brand-info > *:first-child {
    margin-top: 0;
}

.brand-overview .brand-info > *:last-child {
    margin-bottom: 0;
}

.brand-overview .brand-link.btn {
    margin: 0;
    margin-top: auto;
    padding-top: 12px;
    align-self: flex-start;
}

.brand-overview .brand-link.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

@media (max-width: 600px) {
    .brand-overview .letter-heading {
        font-size: 26px;
    }
}

/* ---------- DELIVERYDAY (shortcodes) ---------- */
.deliveryday-message,
.deliveryday-countdown {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4em;
}

.deliveryday-message .deliveryday-check,
.deliveryday-countdown .deliveryday-check {
    color: var(--succes);
    font-size: 18px;
    flex-shrink: 0;
}

.deliveryday-countdown .deliveryday-countdown-time {
    color: var(--secondary);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* ---------- SLIDERS: disable on mobile, horizontal scroll instead ---------- */
.slider-element .card {
    height: calc(100% - 30px);
}

@media only screen and (max-width: 991px) {
    .slider-element:not(.hero-slider) {
        display: flex !important;
        margin: unset;
        flex-wrap: nowrap;
        gap: 15px;
        overflow-x: auto;
        padding-bottom: 11px;
    }

    .slider-element:not(.hero-slider) .card {
        height: calc(100% - 15px);
    }

    .slider-element:not(.hero-slider).slider-initialized {
        display: flex;
    }

    .slider-element:not(.hero-slider)::-webkit-scrollbar {
        height: 2px;
    }

    .slider-element:not(.hero-slider)::-webkit-scrollbar-thumb {
        background: var(--black);
        border-radius: 10px;
        cursor: pointer;
    }

    .slider-element:not(.hero-slider)::-webkit-scrollbar-track {
        background: var(--gray);
    }

    .slider-element:not(.hero-slider) .tns-item {
        min-width: 80%;
        max-width: 80%;
        width: 80% !important;
        flex: 0 0 80%;
        overflow: hidden;
    }

    /* tiny-slider leaves cloned slides in the DOM even when disabled — hide them */
    .slider-element:not(.hero-slider) .tns-slide-cloned {
        display: none !important;
    }

    /* tiny-slider sets inline transform/width on the wrappers for the desktop config — reset */
    .slider-element:not(.hero-slider).tns-slider,
    .slider-element:not(.hero-slider) {
        transform: none !important;
        width: auto !important;
    }

    .tns-outer:has(.slider-element:not(.hero-slider)),
    .tns-outer:has(.slider-element:not(.hero-slider)) .tns-ovh,
    .tns-outer:has(.slider-element:not(.hero-slider)) .tns-inner {
        width: auto !important;
        overflow: visible !important;
    }

    /* Hide tiny-slider prev/next controls when the slider is replaced with horizontal scroll */
    .tns-outer:has(.slider-element:not(.hero-slider)) > .tns-controls {
        display: none !important;
    }
}

/* ---------- SMOOTH SCROLL FOR IN-PAGE ANCHORS ---------- */
/* Jump buttons (e.g. on the klantenservice page) scroll smoothly to their
   target section; scroll-margin-top keeps the target clear of the page top. */
html {
    scroll-behavior: smooth;
}

:target {
    scroll-margin-top: 30px;
}

/* ---------- DIRECT TO: DRAG-TO-SCROLL ---------- */
/* The strip is wheel/touch scrollable and also click-and-drag scrollable
   (see dist/js/direct-to.js). Show grab cursors and lock selection while dragging. */
.direct-to .direct-to-buttons {
    cursor: grab;
}

.direct-to .direct-to-buttons.is-dragging {
    cursor: grabbing;
    user-select: none;
}

/* Block link activation/native image-drag while a drag is in progress. */
.direct-to .direct-to-buttons.is-dragging a {
    pointer-events: none;
}

/* ---------- HERO SLIDER: PREVENT LOAD "BOUNCE" ---------- */
/* Before tiny-slider initialises, the parent theme renders the raw slides as a
   shrink-to-fit flex row. A single slide is therefore squeezed into a narrow
   (~250px) column and balloons in height (~711px vs the final ~393px). The
   moment tns() runs it collapses to its real size, and everything below the
   hero jumps up — that height change is the load "bounce".

   Fix: while the slider is not yet initialised, lay the first slide out at the
   exact size it will have once initialised, so nothing shifts when tns() runs.
   All rules are gated on :not(.slider-initialized); the parent adds that class
   the instant it builds the slider, after which these rules stop applying. */

/* Override the parent's flex row: block flow + full-width single slide. */
.hero-slider.slider-element:not(.slider-initialized) {
    display: block;
}
.hero-slider.slider-element:not(.slider-initialized) > .hero-slide-outer {
    width: 100%;
    display: flow-root; /* contain the slide's 18px vertical margins so the
                           reserved height matches the initialised height */
}
/* Show only the first slide; the slider reveals the rest once it is ready. */
.hero-slider.slider-element:not(.slider-initialized) > .hero-slide-outer:not(:first-child) {
    display: none;
}
/* The slider renders its pagination dots below the slides at every breakpoint
   (data-slider config: nav:true, controls:false). Reserve that row's height
   up-front so the content below doesn't shift down when the dots appear. */
.hero-slider.slider-element:not(.slider-initialized) {
    padding-bottom: 22px;
}

/* ---------- HERO SLIDER: PAGINATION DOTS ---------- */
/* Tiny Slider builds .tns-nav (one button per slide, .tns-nav-active on the current
   one) into .tns-outer below the slides. Only the hero opts in via nav:true in
   hero-slider.php, but .tns-outer carries no identifying class of its own, so scope
   these on the hero slider inside it. The arrows are off for the hero: they sat
   outside the banner and did not read as part of it. */
.tns-outer:has(.hero-slider) > .tns-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding-top: 16px;
}

.tns-outer:has(.hero-slider) > .tns-nav button {
    width: 14px;
    height: 6px;
    padding: 0;
    margin: 0; /* the global button margin would otherwise add 7.5px on every side */
    border: 0;
    border-radius: 3px;
    background: var(--tertiary);
    opacity: .25;
    cursor: pointer;
    transition: width .25s ease, opacity .25s ease, background-color .25s ease;
}

.tns-outer:has(.hero-slider) > .tns-nav button:hover {
    opacity: .5;
}

/* The active slide stretches into a wider pill in the brand colour. */
.tns-outer:has(.hero-slider) > .tns-nav button.tns-nav-active {
    width: 28px;
    background: var(--primary);
    opacity: 1;
}

.tns-outer:has(.hero-slider) > .tns-nav button:focus,
.tns-outer:has(.hero-slider) > .tns-nav button:focus-visible {
    outline: none;
}

/* ---------- SLIDERS: CLOSE THE tiny-slider LAYOUT GAP ---------- */
/* The parent theme loads tiny-slider's stylesheet via an async import() that
   only resolves AFTER tns() has restructured the DOM and added
   .slider-initialized. In that gap the track is neither clipped nor laid out
   horizontally, so for a moment every slide spreads across the row and the
   height settles a beat later. Ship only the few essential tiny-slider layout
   rules here (in the <head>) so the track is correct the instant tns() builds
   it. These match the upstream rules; the parent's copy harmlessly re-applies
   when its stylesheet finally loads. */
.tns-outer {
    position: relative;
}
.tns-ovh {
    overflow: hidden; /* clip the track to the visible slide(s) immediately */
}
.tns-slider {
    transition: all 0s;
}
.tns-slider > .tns-item {
    box-sizing: border-box;
}
.tns-horizontal.tns-subpixel {
    white-space: nowrap;
}
.tns-horizontal.tns-subpixel > .tns-item {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
}
.tns-visually-hidden {
    /* tiny-slider's "Slide X of Y" a11y live region — keep it off-screen from the
       first paint so it never flashes as visible text and shifts layout on init. */
    position: absolute;
    left: -10000em;
}

/* ---------- MOBILE MENU: SEARCH FIELD ---------- */
/* Configurable shortcode (AJAX Search Lite) rendered above the mobile menu list. */
.mobile-menu-search {
    margin-bottom: 15px;
}

/* The leflite parent styles the ASL search box with a fixed min-width: 526px
   (sized for the header). Inside the narrow mobile menu that overflows the
   screen and clips the rounded border, so constrain it to the menu width here.
   Higher specificity than the parent rule, scoped to the mobile menu only so
   the header search keeps its width. */
.mobile-menu-search .asl_w_container,
.mobile-menu-search .asl_w {
    width: 100% !important;
    max-width: 100% !important;
}

.mobile-menu-search .asl_w_container .asl_w .probox {
    min-width: 0 !important;
    width: 100% !important;
}

/* MY ACCOUNT */
.woocommerce-login .login-form-holder {
    border: 1px solid var(--darkgray);
}

.woocommerce-login .login-form-holder input {
    background: var(--white);
}

/* Show/hide-password toggle: make the button a square that matches the password
   field's height. The height already tracks the field via the flex row
   (align-self: stretch); we set the width to the same value so it stays square.
   !important is needed to beat the parent theme's more specific login selectors.
   (aspect-ratio can't be used: in this flex row the icon's content width wins,
   so the width has to be set explicitly.) */
.woocommerce-form .woocommerce-form-row .password-input .show-password-input {
    flex: 0 0 39.8px !important;
    width: 39.8px !important;
    min-width: 39.8px !important;
    align-self: stretch !important; /* height = password field height */
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* LANGUAGE NOTIFICATION */
body .lef-ms-geo {
    background: var(--gray);
    color: var(--gray-content);
    border-bottom: 1px solid var(--darkgray);
}

body .lef-ms-geo .lef-ms-geo__inner {
    padding: 5px 0;
}

body .lef-ms-geo .lef-ms-geo__inner .lef-ms-geo__no {
    background: var(--darkgray);
    color: var(--darkgray-content);
}

body .lef-ms-geo .lef-ms-geo__inner .lef-ms-geo__no:hover {
    background: var(--darkgray-darkened);
    color: var(--darkgray-content);
}

/* ---------------------------------- [order_total_message] ---------------------------------- */
/* Both message variants are rendered; the inactive one carries the hidden attribute
   and is flipped server-side and by dist/js/order-total-message.js. */
.order-total-message [hidden] {
    display: none;
}

/* ---------------------------------- Free shipping progress notice ---------------------------------- */
/* Ported from steentjeswereld; the tokens resolve to this theme own palette. */
.cart-free-shipping-holder {
    background: var(--primary);
    color: var(--primary-content);
    border-radius: var(--general-border-radius);
    padding: 30px 30px 25px 30px;
    margin-bottom: 30px;
    position: relative;
    display: block;
    z-index: 2;
}

.cart-free-shipping-holder .free-shipping-progress {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 99px;
    height: 10px;
    margin-bottom: 16px;
    position: relative;
}

.cart-free-shipping-holder .free-shipping-progress__bar {
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 99px;
    transition: width 0.4s ease;
}

.cart-free-shipping-holder .free-shipping-progress__truck {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--white);
    color: var(--primary);
    width: 30px;
    height: 30px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: left 0.4s ease;
}

.cart-free-shipping-holder .free-shipping-progress__truck .icon {
    font-size: 13px;
    margin: 0;
}

.cart-free-shipping-holder .free-shipping-notice-text {
    margin-bottom: 0;
}

/* POSTCODE API */
.wcnlpc-error:not(:empty) {
    width: 100%;
    background: var(--error);
    color: var(--error-content) !important;
    padding: 10px 15px;
    border-radius: 0;
}

.wcnlpc-manual,
.wcnlpc-address {
    display: none;
}

#billing_postcode_field.form-row-first, 
#shipping_postcode_field.form-row-first {
    margin-right: unset;
}

.woocommerce-page form .form-row-quart-first, .woocommerce form .form-row-quart-first {
    margin-right: unset !important;
}

.woocommerce form .form-row-quart, .woocommerce-page form .form-row-quart, .woocommerce form .form-row-quart-first, .woocommerce-page form .form-row-quart-first {
    width: calc(25% - 11px);
}

.woocommerce-billing-fields__field-wrapper .form-row#billing_street_name_field,
.woocommerce-shipping-fields__field-wrapper .form-row#shipping_street_name_field {
    width: calc(50% - 7px);
}

.woocommerce form.checkout input[readonly] {
    color: var(--black);
    background-color: var(--gray);
}