/*
Theme Name: Stek
Theme URI: 
Author: 
Author URI: 
Description: A modular WordPress starter theme with ACF block support, custom utilities, and reusable components for rapid development.
Version: 1.0.3
Requires at least: 5.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stek
Tags: custom-menu, custom-logo, editor-style, featured-images, flexible-header, custom-colors, block-styles, wide-blocks

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/
#main-navigation{
    padding:13px 0;
    background: #fff;
    position: sticky;
    top:0;
    width:100%;
    z-index:1000;
	min-height:68px;
	    display: flex;
    align-items: center;
	margin-bottom: -68px;
}
body.home #main-navigation{
    background: linear-gradient(180deg,rgba(25, 30, 42, 0.4) 0%, rgba(25, 30, 42, 0) 100%);
    transition-duration:0.3s;
}




/*
 * Contact Form 7 - design shim
 *
 * Contact Form 7 renders its own markup, which does not match the classes the
 * STEK design uses (.radio1, .checkbox1, .btn .icon). Rather than fight the
 * plugin's output, this file maps CF7's markup onto the same visual result,
 * scoped to .form1 so no other CF7 form on the site is affected.
 *
 * Applies to forms rendered inside .form1, e.g. templates/registration-form.php.
 */


/* ---------------------------------------------------------------- wrappers */


/* CF7 wraps every field in an inline span; the design expects a block. */

.form1 .wpcf7-form-control-wrap {
    display: block;
}


/*
 * Contact Form 7 runs the form template through wpautop(), which wraps each
 * field in a <p>. The grid markup survives it; only the paragraph spacing has
 * to go, so the fields sit in the design's own .form-group rhythm.
 */

.form1 .wpcf7 p {
    margin: 0;
}


/* The design pads the groups that hold radios, checkboxes or a question. */

.form1 .form-group:has(.wpcf7-radio),
.form1 .form-group:has(.wpcf7-checkbox) {
    padding-top: 16px;
}


/* ------------------------------------------------- radios and checkboxes */


/* Each CF7 list item stands in for a .radio1 / .checkbox1 block. */

.form1 .wpcf7-list-item {
    display: block;
    margin: 0 0 12px;
    line-height: 1.3;
}

.form1 .wpcf7-list-item:last-child {
    margin-bottom: 0;
}

.form1 .wpcf7-list-item>label {
    display: block;
    margin: 0;
    font-weight: inherit;
}

.form1 .wpcf7-list-item input[type=radio],
.form1 .wpcf7-list-item input[type=checkbox] {
    position: absolute;
    opacity: 0;
}

.form1 .wpcf7-list-item input+.wpcf7-list-item-label {
    font-size: 0.875rem;
    font-weight: 500;
    padding-left: 26px;
    position: relative;
    margin: 0;
    line-height: 18px;
    display: inline-block;
    color: #191E2A;
}

.form1 .wpcf7-list-item input+.wpcf7-list-item-label::before,
.form1 .wpcf7-list-item input+.wpcf7-list-item-label::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border: 1px solid #AEC9C9;
    border-radius: 50px;
    position: absolute;
    left: 0;
    top: 0;
    transition-duration: 0.1s;
    cursor: pointer;
}

.form1 .wpcf7-list-item input+.wpcf7-list-item-label::after {
    background-color: #0088FF;
    border: none;
    width: 12px;
    height: 12px;
    left: 3px;
    top: 3px;
    opacity: 0;
}

.form1 .wpcf7-list-item input+.wpcf7-list-item-label:hover::before {
    border-color: #191E2A;
}

.form1 .wpcf7-list-item input:checked+.wpcf7-list-item-label::after {
    opacity: 1;
}


/* Checkboxes are square with a tick instead of a filled dot. */

.form1 .wpcf7-checkbox .wpcf7-list-item input+.wpcf7-list-item-label::before {
    border-radius: 2px;
}

.form1 .wpcf7-checkbox .wpcf7-list-item input+.wpcf7-list-item-label::after {
    background: transparent;
    border-radius: 0;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    width: 11px;
    height: 6px;
    top: 5px;
    left: 4px;
    transform: rotate(-45deg);
}

.form1 .wpcf7-checkbox .wpcf7-list-item input:checked+.wpcf7-list-item-label::before {
    background-color: #0088FF;
}


/* Keyboard users need to see which option has focus, since the input is hidden. */

.form1 .wpcf7-list-item input:focus-visible+.wpcf7-list-item-label::before {
    outline: 2px solid #0088FF;
    outline-offset: 2px;
}


/* ------------------------------------------------------------- validation */

.form1 .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #D63638;
}

.form1 .form-control.wpcf7-not-valid {
    outline-color: #D63638;
}

.form1 .wpcf7-radio.wpcf7-not-valid .wpcf7-list-item input+.wpcf7-list-item-label::before,
.form1 .wpcf7-checkbox.wpcf7-not-valid .wpcf7-list-item input+.wpcf7-list-item-label::before {
    border-color: #D63638;
}


/* CF7's own response box, restyled as the Bootstrap alert the theme uses. */

.form1 .wpcf7 form .wpcf7-response-output {
    margin: 0 0 24px;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.875rem;
    font-weight: 500;
}

.form1 .wpcf7 form.sent .wpcf7-response-output {
    background-color: #E6F5EE;
    color: #00603A;
}

.form1 .wpcf7 form.invalid .wpcf7-response-output,
.form1 .wpcf7 form.unaccepted .wpcf7-response-output,
.form1 .wpcf7 form.payment-required .wpcf7-response-output {
    background-color: #FCEAEA;
    color: #9B1C1C;
}

.form1 .wpcf7 form.failed .wpcf7-response-output,
.form1 .wpcf7 form.aborted .wpcf7-response-output,
.form1 .wpcf7 form.spam .wpcf7-response-output {
    background-color: #FDF3E7;
    color: #8A5300;
}

/* Single product */
.woocommerce button.button.alt.btn,
.woocommerce a.button.alt.btn,
.woocommerce input.button.alt.btn {
    background-color: var(--theme-color);
    color: #fff;
}

.woocommerce button.button.alt.btn:hover,
.woocommerce a.button.alt.btn:hover,
.woocommerce input.button.alt.btn:hover {
    background-color: var(--theme-color-dark, var(--theme-color));
    color: #fff;
}

.product-content .added_to_cart,
.product-content .single_add_to_cart_button.added::after {
    display: none;
}

.product-content .woocommerce-variation-price,
.product-content .woocommerce-variation-availability {
    display: none;
}

:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) :is(.woocommerce-Price-amount, .woocommerce-Price-currencySymbol) {
    font-weight: inherit;
}

.price .woocommerce-Price-amount,
.price .woocommerce-Price-currencySymbol {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.price del,
.price ins {
    display: inline;
}

.card4 .price {
    color: var(--bs-heading-color);
    font-size: 1.25rem !important;
}

@media (max-width: 767px) {
    .card4 .price {
        font-size: 1.125rem !important;
    }
}

/* Mobile Menu */
#mobile-nav {
    display: none;
    z-index: 99999;
}
#mobile-nav .stek-mm .mm-panel{
  padding-top:56px;
}

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

/* WooCommerce styles its remove link as a red 1em circle (with !important); the
   design's is a normal "Verwijder" link with an icon. */
.cart-item a.remove {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
    font-size: 0.875rem;
    line-height: inherit;
    border-radius: 0;
}

.woocommerce .cart-item a.remove,
.woocommerce .cart-item a.remove:hover {
    color: #191E2A !important;
    background: none;
}

/* The totals list: the design's rows are "label span + plain value text", so the
   value wrapper takes the row's own colour and weight rather than the bold dark
   .list5 li span styling, and WooCommerce's price spans inside it follow suit. */
.cart_totals .list5 li > .stek-value {
    font-weight: inherit;
    color: inherit;
    text-align: right;
}

.cart_totals .list5 li .woocommerce-Price-amount,
.cart_totals .list5 li bdi {
    font-weight: inherit;
    color: inherit;
}

/* WooCommerce floats the totals into a 48% column of a two-column cart; in the
   design they fill the box in the right-hand column. */
.woocommerce-cart .box1 .cart-collaterals,
.woocommerce-cart .box1 .cart-collaterals .cart_totals {
    width: 100%;
    float: none;
}

/* WooCommerce sets its buttons to 700; the design's .btn is 600. */
.woocommerce div.product form.cart button.single_add_to_cart_button.btn {
    font-weight: 600;
}

/* WooCommerce restyles the checkout button as a big block link; the design's is
   a normal full-width .btn. */
.woocommerce-cart .wc-proceed-to-checkout {
    padding: 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.btn {
    display: inline-flex;
    width: 100%;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    /* .btn is a pill in the design; WooCommerce squares its buttons off. */
    border-radius: 250px;
    margin-bottom: 0;
}

/* The design's button tightens up below 768px, the same breakpoint it uses for
   headings. */
@media (max-width: 767px) {
    .woocommerce-cart .wc-proceed-to-checkout a.checkout-button.btn {
        padding: 8px 20px;
    }
}

/* The backorder note sits inside the product link, so it would take the link
   colour; the design treats it as small muted text. */
.cart-item .backorder_notification {
    color: #5C7F7F;
}

/* WooCommerce sizes the quantity field at 3.631em; the design's stepper is a
   fixed 40px field between the two buttons. Applies to the cart and the product
   page, which share the component. */
.woocommerce .quantity.qty input.qty,
.woocommerce-page .quantity.qty input.qty {
    width: 40px;
}

/* 23-09-26 */
.list5 li span.woocommerce-Price-currencySymbol {
    color: inherit;
}
.qty input[type="number"].qty{border-radius:0;}

#content > div:first-of-type:has(.section) {
    background: linear-gradient(rgb(244, 251, 251) 0%, white 100%);
}
.woocommerce button.button.alt.btn, .woocommerce a.button.alt.btn, .woocommerce input.button.alt.btn {
    display: flex;
    align-items: center;
    border-radius: 100px;
}
.woocommerce button.button.alt.btn:hover,
.woocommerce a.button.alt.btn:hover,
.woocommerce input.button.alt.btn:hover,
.woocommerce button.button.alt.btn:focus,
.woocommerce a.button.alt.btn:focus,
.woocommerce input.button.alt.btn:focus{
background:var(--theme-dark-color);
}

.logo-list {
    padding: 0 20px;
}
@media (max-width: 991px) {
    .logo-list  {
        padding: 0;
    }
}
.product-content p.lead {
    margin-bottom: 4px;
}
.list6 li span.text-theme>a {
    color: inherit !important;
}
.list6 li span.text-theme:hover{color:var(--theme-color) !important; text-decoration:underline;}
.product-img {
    margin: 0 101px;
}
@media (max-width: 1199px){.product-img {
    margin: 0 60px;
}}
@media (max-width: 767px){.product-img {
    margin: 0 32px;
}}
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button{background:var(--theme-color); transition-duration:0.3s; color:#fff;
    padding: 12px 20px;
    border-radius: 100px;}
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button:hover{background:var(--theme-dark-color); color:#fff;}
.woocommerce-info,.woocommerce-message {
    border-top-color: var(--theme-color);
  background:#fff;
  border-bottom-left-radius:8px; 
  border-bottom-right-radius:8px;
  color:#191E2A;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.woocommerce-info::before{color:var(--theme-color);}
.woocommerce-message{ border-top-color: #00BB6E; outline: none;}
.woocommerce-message::before{ color: #00BB6E;}

/* --------------------------------------------------------------------------
   Checkout
   -------------------------------------------------------------------------- */

/* The design marks required fields with * and says nothing about the rest, so
   WooCommerce's "(optional)" suffix is left out. */
.woocommerce-checkout .form1 .optional {
    display: none;
}

/* WooCommerce wraps every field in <p class="form-row">; on the design's grid
   that paragraph is just the column, so its own spacing stands down. */
.woocommerce-checkout .form1 p.form-row {
    margin-bottom: 0;
}

/* WooCommerce's form-row rules outrank the design's .form1 .form-group
   .form-control, so the design's own values are restated here for the fields
   it wraps. */
/* WooCommerce gives every form row padding: 3px, which replaces the grid
   gutter the design's columns rely on. */
.woocommerce-checkout .form1 .form-group.form-row {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-bottom: 16px;
}

/* #payment .form-row gets 1em from WooCommerce; the design's button sits flush. */
.woocommerce-checkout #payment div.form-row.place-order,
.woocommerce-checkout .form1 div.form-row.place-order {
    padding: 0;
    margin-bottom: 0;
}

/* The coupon field is its own component: a flat input inside .discount-field,
   so it keeps out of the field styling above. */
.woocommerce-checkout .form1 .form-group .discount-field input.input-text,
.woocommerce-cart .form1 .form-group .discount-field input.input-text {
    height: auto;
    padding: 0;
    background-color: transparent;
}

.woocommerce-checkout .form1 .form-group input.input-text,
.woocommerce-checkout .form1 .form-group textarea,
.woocommerce-checkout .form1 .form-group select {
    height: 40px;
    padding: 6px 12px;
    background-color: #F4FBFB;
    color: #01223C;
    font-weight: 500;
    line-height: 1.5;
}

.woocommerce-checkout .form1 .form-group label {
    display: inline-block;
    line-height: 1.4;
}

/* Same as the cart's: WooCommerce restyles its own buttons. */
.woocommerce-checkout .form1 #place_order.btn {
    display: inline-flex;
    width: 100%;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 250px;
    float: none;
}

@media (max-width: 767px) {
    .woocommerce-checkout .form1 #place_order.btn {
        padding: 8px 20px;
    }
}
.woocommerce form .form-row .input-text, .woocommerce form .form-row select{border-color:transparent;}
.woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select{outline-color:transparent;}
:where(.woocommerce) .select2-container .select2-dropdown, :where(.woocommerce) .select2-container .select2-selection{
border-radius: 4px;
    background-color: #F4FBFB;
    border: none;
    outline: 1px solid #AEC9C9;
    height: 40px;
    color: #01223C;
    font-size: 0.875rem;
    font-weight: 500;
    transition-duration: 0.3s;
      display: flex;
    align-items: center;
}
:where(.woocommerce) .select2-container .select2-dropdown:hover, :where(.woocommerce) .select2-container .select2-selection:hover{    outline-color: rgb(25, 30, 42);}
:where(.woocommerce) .select2-container .select2-selection--single .select2-selection__rendered{ color: #01223C; font-weight:500;}
.list5 li span.text-secondary *{ color:inherit;}
.list5 li span.stek-value,.list5 li span.stek-value span{color:#5C7F7F;}

a[data-bs-toggle="modal"]:not([href]) {
    cursor: pointer;
}
.card3 > a {
    display: flex;
    flex-direction: column;
    flex: 1;
    color:inherit;
}

.card3 .figure1 img {
    height: auto;
}
#banner.overlay1 .figure1::after{   z-index: 2; background: linear-gradient(90deg,rgba(25, 30, 42, 0.45) 0%, rgba(25, 30, 42, 0) 100%);}
  #banner.overlay1 .figure1::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 48%;
        height: 100%;
        z-index: 1;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 100%);
        mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 100%);
        pointer-events: none;
    }

@media(max-width:767px){
  #banner.overlay1 .figure1::before{display:none;}
}

.tab-wrapper .tab-menu::after {
    content: none;
    animation: none;
}

.tab-wrapper.has-tab-scroll .tab-menu {
    justify-content: flex-start;
}

.tab-wrapper .tab-menu>.tab-menu-next {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    align-self: center;
    position: sticky;
    right: 0;
    z-index: 2;
    margin-left: -44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--theme-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath d='M1 1L7 7L1 13' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.tab-wrapper.has-tab-scroll:not(.is-tab-scroll-end) .tab-menu>.tab-menu-next {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.tab-wrapper .tab-menu>.tab-menu-next:focus-visible {
    outline: 2px solid #191E2A;
    outline-offset: 2px;
}

.tab-wrapper .tab-menu.is-tab-dragging {
    scroll-behavior: auto;
    user-select: none;
    -webkit-user-select: none;
}
#topbar p{font-weight:500;}
.card4 .price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stek-mm-overlay {
    width: 100vw;
    height: calc(100vh - 69px);
      transition: initial !important;
    transition-duration: 0.3s !important;
    left: 100vw !important;
    visibility: visible !important;
}
.stek-mm-open .stek-mm-overlay {
    left: 0 !important;
      transition: initial !important;
    transition-duration: 0.3s !important;
}
.stek-mm-overlay[hidden] {
    display: block !important;
}
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
    background: #F0F4FA;
}
.account-modal .btn{min-width:236px; padding-top:8px;padding-bottom:8px;}

@media(min-width:768px){
#footer .footer-bottom p.copyright{
    text-align: left;
}
}

.woocommerce form .form-row .required {
    color: #01223C;
}
.search-wrapper .search label::before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 40px;
    position: absolute;
    z-index: 1;
    left: -39px;
    top: -20px;
}

.card2 > a {
    color: inherit;
  display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* Site search (searchform.php): only the placeholder until you type; the close button shows once there is text. */
.search-wrapper-site .search-filed input:placeholder-shown + .close-btn {
    visibility: hidden;
}

.grecaptcha-badge {
    visibility: hidden;
}



.filter-container  .filter-item {
    display: flex;
}
.filter-container .filter-item .box3 {
    display: flex;
    flex-direction: column;
}	

.filter-container .filter-item .box3 .link1 {
    margin-top: auto;
}

.cmodal1 .cmodal-content .inner-wrapper .map1 img{
 width: auto;
    height: auto;
    aspect-ratio: 4 / 2.2;
}
.cmodal1 .cmodal-content .inner-wrapper {
    overflow: auto;
}
.cmodal1 .cmodal-content .inner-wrapper .map1 {width:100%;}