/* =========================================================
   SUNFLAKE MAIN CSS
   Purpose: Central stylesheet for all custom Sunflake styles
   Author: Bas / Sunflake
   Last Updated: 2025-11-19

   Notes for developers:
   - Keep all custom CSS inside this file (except TEMP or QUARANTINE).
   - Always document: Component + Page/Location + Purpose + Date.
   - Mobile-only styles belong in Section 10 (bottom of this file).
   - Anything uncertain goes to sunflake-quarantine.css.
   ========================================================= */


/* ---------------------------------------------------------
   01. GLOBAL STYLES
   Description: Universal styles affecting multiple locations.
   --------------------------------------------------------- */

/* Global — Trust icons grid component */
.sf-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    align-items: start;
    margin-top: 12px;
}

/* Global — Trust icon item layout */
.sf-trust .item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

/* Global — Trust icon graphic */
.sf-ico {
    width: 22px;
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: #ff9100;
}

/* Global — Trust icon text styling */
.sf-txt {
    font-size: 15px;
    line-height: 1.35;
}

.sf-txt small {
    display: block;
    opacity: 0.8;
    font-size: 13px;
    line-height: 1.3;
}

/* Global — Steps component (Stappenplan) */
.sf-steps {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 0 6px;
    text-align: center;
}

.sf-steps__title {
    margin: 0 0 18px;
    color: #0c2a34;
}

.sf-steps__list {
    list-style: none;
    margin: 0;
    padding: 10px 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    position: relative;
}

.sf-steps__list::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 34px;
    width: 100%;
    max-width: 980px;
    height: 2px;
    background: #e9eef2;
    z-index: 0;
}

.sf-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sf-step__badge {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 3px solid #ff9100;
    color: #ff9100;
    font-weight: 700;
    font-size: 18px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .03);
}

.sf-step__content {
    margin-top: 10px;
    max-width: 240px;
}

.sf-step__heading {
    margin: 0 0 6px;
    font-size: 16px;
    color: #0c2a34;
}

.sf-step__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #66757f;
}

/* Global — Inline CTA link (e.g. “Liever eerst een vraag? Mail ons”) */
.sf-cta-inline {
    display: inline-flex;
    gap: 6px;
    justify-content: center;
    align-items: baseline;
    margin-top: 8px;
}

.sf-cta-inline a {
    display: inline;
    font-weight: 600;
    text-decoration: none;
}

.sf-cta-inline a:hover {
    text-decoration: underline;
}


/* Global — Trust block component (#sf-trust) */
#sf-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    align-items: start;
    margin-top: 16px;
}

#sf-trust .item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

#sf-trust .ico {
    color: #ff9100;
    font-size: 20px;
    line-height: 1;
    min-width: 22px;
}

#sf-trust .txt {
    font-size: 15px;
    line-height: 1.35;
}

#sf-trust .txt small {
    display: block;
    opacity: 0.8;
    font-size: 13px;
    line-height: 1.3;
}

/* Global — checkmark icon color and size */
.fa-check {
    color: #0B3D4F;
    font-size: 16px;
}

/* Global — Custom font (Red Rock) */
@font-face {
    font-family: 'redrock';
    src: url('/wp-content/uploads/red_rock-webfont.eot');
    src: url('/wp-content/uploads/red_rock-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/uploads/red_rock-webfont.woff2') format('woff2'),
         url('/wp-content/uploads/red_rock-webfont.woff') format('woff'),
         url('/wp-content/uploads/red_rock-webfont.ttf') format('truetype'),
         url('/wp-content/uploads/red_rock-webfont.svg#redrockregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Utility — Apply Red Rock font */
.redrock {
    font-family: 'redrock';
}

/* Global — button styling to match brand color */
.button.alt,
.button.checkout,
.checkout-button,
.secondary {
    background-color: #86af75;
}

/* Global — countdown timer component styling */
.wv-countdown {
    background: none;
    display: inline-block;
}

.countdown-timer {
    display: inline-block;
    margin-left: 20px;
}

.wv-countdown span.cnt-num {
    padding: 2px 3px;
    display: inline-block;
    background: #0B3D4F;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    margin: 0 2px;
}

/* Global — utility classes for device-specific content */
.desktop-only { display: block; }
.mobile-only { display: none; }

/* Global — widget title font */
.widget-title {
    font-family: Roboto, sans-serif;
}

/* Global — form expand button text color */
.is-form.expand.button.wp-element-button {
    color: white;
}

/* Global — hide Pinterest pin overlay */
.hidden-pin {
    display: none;
}

/* =========================================================
   GLOBAL COMPONENT — ACCORDION
   Reusable accordion styling across product pages, FAQs, and content blocks
   ========================================================= */

/* Default accordion item */
.accordion-item {
    background: #f1efe9;
    margin-bottom: 10px;
    border-radius: 20px;
    padding: 10px;
}

/* Dark mode variant */
.dark .accordion-item {
    background: #292933;
}

/* Accordion titles */
.accordion-title {
    border-top: 0;
    font-size: 90%;
    font-weight: 700;
}

/* Active title — remove background */
.accordion-title.active {
    background-color: transparent;
}

/* Icon inside accordion toggle */
.accordion-item .toggle i {
    font-size: 1em;
}

/* Inner content container */
.accordion-inner {
    padding: 1em;
}

/* ---------------------------------------------------------
   Variant: Large Accordion Blocks (.accordion-big)
   Used for bigger accordions (FAQs, large sections)
   --------------------------------------------------------- */
.accordion-big .accordion-item {
    background: #F6F9FD;
    margin-bottom: 10px;
    border-radius: 10px;
    padding: 10px;
}

.accordion-big .accordion-title {
    border-top: 0;
    font-size: 115%;
}

/* =========================================================
   GLOBAL COMPONENT — LIST BULLETS
   Custom bullet icons used across product pages, blogs, and content blocks
   ========================================================= */

/* Specific bullet color styles */
ul li.bullet-checkmark::before {
    color: #ffffff;
    background: #84ad74;
}

ul li.bullet-cross::before {
    color: #FA7268;
}

ul li.bullet-arrow::before {
    color: #171717;
}

ul li.bullet-star::before {
    color: #FFCD6D;
}

/* Shared bullet base styling */
ul li.bullet-checkmark::before,
ul li.bullet-cross::before,
ul li.bullet-arrow::before,
ul li.bullet-star::before {
    height: 25px;
    width: 25px;
    line-height: 25px;
    border-radius: 99px;
    font-size: 80%;
    text-align: center;
}


/* ---------------------------------------------------------
   02. TYPOGRAPHY & COLORS
   Description: Font adjustments, color overrides, text fixes.
   --------------------------------------------------------- */

/* Global Layout — remove padding on message wrapper */
#wrapper > .message-wrapper {
    padding-bottom: 0;
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   03. HEADER & NAVIGATION
   Description: Menu styling, sticky header, top bar, highlights.
   Location: Site-wide header, mobile menu.
   --------------------------------------------------------- */


/* Header nav — Black Friday menu highlight
   Target: main menu item with ID 40056 that links to the BF Sale category.
   Note: Seasonal — can be disabled after Black Friday if desired.
*/
#menu-item-40056 > a {
    background: #d93a4b;
    color: #fff !important;
    padding: 3px 7px;
    border-radius: 4px;
    font-weight: 600;
}

#menu-item-40056 > a:hover {
    background: #c23343;
    color: #fff !important;
}

/* Header — nav-dark small HTML block styling */
.nav-dark .nav > li.html {
    font-size: 12px;
    line-height: 18px;
}

.nav-dark .nav > li.html a {
    line-height: 18px;
    font-size: 12px;
    padding: 0;
    color: #fff;
}

/* Header — spacing & alignment for menu icons */
#main-menu .menu-item.has-icon-left > a {
    display: flex;
    align-items: center;
}

#main-menu .menu-item.has-icon-left > a picture,
#main-menu .menu-item.has-icon-left > a svg {
    margin-right: 5px;
    display: block;
    flex-shrink: 0;
    height: 35px;
    width: 35px;
}

/* Header — Rotate Top Bar (default desktop behavior) */
.rotate-top-bar > * {
    display: none;
}

/* Header — coupon seal / discount badge in top bar */
.coupon_top {
    border: 1px dashed #2e4c2a;
    padding: 0 5px;
    font-style: normal;
    background: #b5d6a3;
    color: white;
    font-weight: bold;
}

/* Header — center align main navigation */
.header-nav.header-nav-main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Header — show quantity control inside mini cart */
body .ux-mini-cart-qty .ux-quantity.quantity.buttons_added {
    display: block !important;
}

/* Header — Mini Cart: style "Bekijk winkelwagen" button */
.woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout) {
    background-color: transparent !important;
    border: 2px solid #f98821 !important;
    color: #f98821 !important;
    padding: 5px 10px !important;
    border-radius: 3px;
    font-size: 14px !important;
    line-height: normal !important;
    transition: all 0.3s ease-in-out;
}

/* Header — Mini Cart: hover effect */
.woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout):hover {
    background-color: #f98821 !important;
    color: #ffffff !important;
}

/* Header — hide 'Winkelwagen' title in mini cart */
.cart-popup-title.text-center {
    display: none;
}

/* Header — nav-dark HTML block font size override */
.nav-dark .nav > li.html a {
    font-size: 14px;
}

/* Header — WWK sidebar tab position fix */
body .wwk--sidebar-mobile .wwk--tab {
    left: 4px;
    float: left !important;
}

/* Top banner adjustments */
.header-block.block-html-after-header .icon-box-text .text p {
    margin: 0;
}

.header-block.block-html-after-header.z-1 .col-inner {
    padding: 0 !important;
}

.header-block.block-html-after-header.z-1 .row.row-collapse.align-middle.align-center.hide-for-medium {
    padding: 10px 0 !important;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    gap: 100px;
    justify-content: center !important;
}

.header-block.block-html-after-header.z-1 .row.row-collapse.align-middle.align-center.hide-for-medium .large-3 {
    flex-basis: content;
}

/* 03. HEADER — Top banner layout (tablet sizes) */
@media (min-width: 768px) and (max-width: 1024px) {
  .header-block.block-html-after-header.z-1 .row.row-collapse.align-middle.align-center.hide-for-medium {
      display: flex;
      flex-flow: nowrap;
      gap: 25px;
      justify-content: center !important;
  }

  .is-small,
  .is-small.button {
      font-size: .6em !important;
  }

  #text-754663628 {
      font-size: .6em !important;
  }
}

/* 03. HEADER — Larger tablet widths */
@media (min-width: 1028px) and (max-width: 1162px) {
  .header-block.block-html-after-header.z-1 .row.row-collapse.align-middle.align-center.hide-for-medium {
      display: flex;
      flex-flow: nowrap;
      gap: 50px;
      justify-content: center !important;
  }
}

/* 03. HEADER — Max height restriction */
.header-block.block-html-after-header.z-1 {
    max-height: 45px;
}

/* 03. HEADER — Stuck header tweaks */
@media (min-width: 980px) and (max-width: 1140px) {
  body .stuck .header-main {
      height: 100% !important;
      padding-bottom: 20px !important;
  }
}



/* ---------------------------------------------------------
   04. HOMEPAGE
   Description: Styles specific to homepage sections & banners.
   --------------------------------------------------------- */

/* Logo slider spacing */
.margin-auto-slider > .slider > .flickity-viewport > .flickity-slider > .ux-logo {
    margin: 0 20px;
}


/* ---------------------------------------------------------
   05. PRODUCT PAGE
   Description: Gallery, pricing block, badges, spacing, tabs.
   Location: Single product pages (WooCommerce single-product.php)
   --------------------------------------------------------- */


/* Product Page — adjust font sizes for quantity discount table */
.awdr-bulk-customizable-table {
    font-size: 16px;
}
.awdr_discount_bar {
    font-size: 15px;
}

/* Product Page — hide Bol.com block on pre-order products */
body.product-pre-order .bolcom-block {
    display: none !important;
}

/* Product Page — hide share icons row */
body.single-product div.social-icons.share-row {
    display: none !important;
}

/* Product Page — hide SKU line */
.product-main .sku_wrapper {
    display: none !important;
}

/* Product Page — Tooltip component (USP tooltips) */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
}

.tooltip .tooltiptext {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 999;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.4;
    width: max-content;
    max-width: 250px;
    transition: opacity 0.3s;
    white-space: normal;
    word-wrap: break-word;
}

/* ---------------------------------------
   OLD PRICE — SALE PRICE STYLING
   --------------------------------------- */

/* Old price (del) grey and consistent */
del .woocommerce-Price-amount,
del .amount {
    color: #7d7d7d !important; /* soft grey */
    opacity: 0.8 !important;
}

/* Stronger line-through */
del {
    text-decoration: line-through !important;
    opacity: 0.9 !important;
}

/* Spacing between old and new prices */
del,
ins {
    margin-right: 6px;
}

/* Force grey color for the strike-through line */
del,
del span,
del .woocommerce-Price-amount {
    text-decoration-color: #7d7d7d !important;
}

/* add close box to our lightbox video */
.mfp-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 26px;
    padding: 6px 12px;
    border-radius: 4px;
    z-index: 99999 !important;
    cursor: pointer;
    line-height: 1;
}

/* Fix oversized vertical videos in Flatsome lightbox */
.mfp-content video,
.mfp-content .ux-video video {
    max-height: 90vh !important;
    max-width: 500px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    object-fit: contain !important;
}

/* Fix Flatsome lightbox for vertical videos */
.mfp-content {
    max-width: 480px !important; /* breedte van de video-container */
    margin: 0 auto !important;
}

.mfp-figure:before {
    display: none !important;
}

.mfp-content video {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}


/* Product Page — Tooltip visible on hover */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Product Page — Trust icons below AddtoCart */
.sf-trustlogos {
    text-align:center;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
    padding:12px 0;
}

/* Titel */
.sf-trustlogos-title {
    font-size:12px;
    letter-spacing:.05em;
    color:#666;
    text-transform:uppercase;
    font-weight:600;
    margin:0 0 10px;
}

/* Logo container */
.sf-trustlogos-row {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:24px;
    flex-wrap:nowrap;
}

/* Logo base styling */
.sf-trustlogos-row img {
    height:36px;        /* Desktop standaard */
    width:auto;
    filter:grayscale(100%);
    opacity:.9;
    vertical-align:middle;
}

/* Mobiel */
@media (max-width: 768px) {
    .sf-trustlogos-row {
        gap:16px;
        flex-wrap:wrap;
    }
    .sf-trustlogos-row img {
        height:28px;    /* Automatische mobiele schaal */
    }
}

/* Product Page — hide paragraph under custom gallery */
.custom-product-page .custom-gallery + .col.custom .col .col-inner > p {
    display: none;
}

/* Product Page — spacing under price container */
.product-price-container p {
    margin-bottom: 10px;
}

/* Product Page — review link color fix (discount label compatibility) */
.woocommerce-review-link {
    color: black;
}

/* Product Page — discount label styling */
.discount-amount {
    border: 1px solid #86af75;
    background: #ceedc1;
    width: fit-content;
    margin-top: 0;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    font-size: 12px;
    border-radius: 300px;
    height: 29px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    border-width: 1px !important;
    color: #000 !important;
}

.discount-amount .discount-label {
    margin-right: 5px;
}

/* Product Page — smaller product title for breadcrumbs area */
.page-title.shop-page-title.product-page-title {
    height: 25px;
    padding-top: 5px;
}

.page-title-inner {
    min-height: 0 !important;
    padding-top: 0 !important;
}

/* Product Page — margin below product title */
.product-title-container {
    margin-bottom: 10px;
}

/* Product Page — change NEW badge color to brand color */
.badge-inner.new-bubble {
    background-color: #1a4e62;
}

/* Product Page — change in-stock text and icon color */
.stock.in-stock::before {
    content: "\2022";
    color: #84AD74;
    margin-right: 8px;
}
.stock.in-stock {
    color: #84AD74;
}

/* Product Page — smaller USP text */
.usp-pp {
    font-size: 0.9em;
}

/* Verberg quantity overal */
body.single-product .ux-quantity.quantity.buttons_added {
    display: none !important;
}

/* Toon quantity bij alle koelelementen producten (drie product IDs) */
body.postid-52273 .ux-quantity.quantity.buttons_added,
body.postid-35239 .ux-quantity.quantity.buttons_added,
body.postid-32864 .ux-quantity.quantity.buttons_added {
    display: flex !important;
}


/* Product Page — variation price size */
.woocommerce-variation-price {
    font-size: 1em;
}

/* Product Page — 3-step image rounded */
.steptrans {
    border-radius: 50%;
    overflow: hidden;
}

/* Product Page — 3-step badge below image */
.badge-step {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background-color: #005a87;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
}

/* Product Page — add to cart button styling */
.single_add_to_cart_button.button {
    flex: 1 1 auto;
    padding: 4px;
    font-size: 18px;
    text-transform: none;
}

/* Product Page — smaller free shipping text */
.ux-free-shipping__notice {
    font-size: 12px;
}

/* Product Page — enlarge BackInStock button */
#backinstock_button {
    width: 100%;
}

/* Product Page — custom bullet spacing on PDP lists */
.single-product ul li.bullet-checkmark {
    padding: 5px 0 5px 30px;
    border: 0;
}

/* Product Page — allow full-width layout */
.single-product .container-width {
    max-width: 100%;
}

/* Product Page — product section title adjustments */
.product-section-title.uppercase {
    text-transform: none;
    letter-spacing: 0;
    padding: 30px 0 0 0;
    font-size: 130%;
}

/* Hide product tabs based on parent class */
.hide-product-tab #accordion-ux_video_tab,
.hide-product-tab #accordion-reviews,
.hide-product-tab #accordion-ux_custom_tab {
    display: none;
}

.unhide-product-tab #accordion-description,
.unhide-product-tab #accordion-additional_information,
.unhide-product-tab #accordion-reviews {
    display: none;
}

.review-product-tab #accordion-description,
.review-product-tab #accordion-ux_video_tab,
.review-product-tab #accordion-additional_information,
.review-product-tab #accordion-ux_custom_tab {
    display: none;
}

/* Disable review link click */
.not-clickable .woocommerce-product-rating a.woocommerce-review-link,
.no-link .woocommerce-product-rating a.woocommerce-review-link {
    pointer-events: none;
}


/* 4-column thumbnail layout */
.small-columns-4 .flickity-slider > .col,
.small-columns-4 > .col {
    flex-basis: 16%;
    max-width: 16%;
}

/* Hide zoom button */
a.zoom-button.button.is-outline.circle.icon.tooltip.hide-for-small {
    display: none;
}

/* Gallery slider arrow styling */
.slider .flickity-prev-next-button:hover .arrow,
.slider .flickity-prev-next-button svg {
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 0 20px rgba(255,255,255,0.52);
}

.slider .flickity-prev-next-button {
    box-shadow: none;
    opacity: 1;
}

/* Review stars layout */
#accordion-reviews .stars span a {
    font-size: 0;
    margin: 0;
}

#accordion-reviews .stars span a:after {
    font-size: 16px;
}

#accordion-reviews .stars span {
    display: flex;
    flex-direction: column;
}



/* ---------------------------------------------------------
   06. CART & SIDECART
   Description: Sidecart plugin styles, cart layout, spacing.
   Location: Cart page + sidecart drawer.
   --------------------------------------------------------- */

/* Sidecart — adjust spacing for header section */
.fkcart-pt-16 {
    padding-top: 30px;
}

/* Sidecart — spacing below "Go to checkout" button */
.fkcart-checkout-info {
    margin-bottom: 18px;
}

/* Sidecart — hide variation/options selector */
.fkcart-select-options {
    display: none !important;
}

/* Sidecart — checkout button text size & padding */
.fkcart-checkout--text {
    font-size: 18px;
    padding: 5px 0;
}

/* Checkout — hide company field in shipping */
#shipping_company_field {
    display: none;
}

/* Cart/Checkout — hide WooCommerce info message on cart page (post ID 8) */
#post-8 .woocommerce-info {
    display: none;
}

/* Cart/Checkout — hide payment span text */
.payment-span-text {
    display: none;
}

/* Cart — hide shipping calculator on cart page */
body.woocommerce-cart .woocommerce-shipping-calculator {
    display: none;
}


/* =========================================================
   PRODUCT PAGE — STICKY ADD TO CART
   Custom layout and hiding unwanted elements inside the sticky bar
   ========================================================= */

/* Full-width sticky ATC wrapper */
.sticky-add-to-cart-wrapper {
    width: 100% !important;
}

/* Hide AWDR discount elements inside sticky bar */
.sticky-add-to-cart .awdr-bulk-customizable-table,
.sticky-add-to-cart .awdr_discount_bar,
.sticky-add-to-cart .awdr_discount_bar_content {
    display: none !important;
}

/* Force variations form to stack vertically */
.add-to-cart-container form.variations_form {
    display: flex !important;
    flex-direction: column !important;
}

/* Base layout for add-to-cart blocks (when sticky is inactive) */
.sticky-add-to-cart:not(.sticky-add-to-cart--active),
.woocommerce-variation-add-to-cart:not(.sold-individually) {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 0;
}

/* Quantity layout */
.sticky-add-to-cart:not(.sticky-add-to-cart--active) .quantity,
.woocommerce-variation-add-to-cart:not(.sold-individually) .quantity {
    display: inline-flex;
    margin-right: 1em;
    white-space: nowrap;
    vertical-align: top;
    height: 100%;
    margin-bottom: 10px; /* consistent value */
    opacity: 1;
}

/* Add to cart button grows to fill space */
.sticky-add-to-cart:not(.sticky-add-to-cart--active) .single_add_to_cart_button,
.woocommerce-variation-add-to-cart:not(.sold-individually) .single_add_to_cart_button {
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}

/* Main product form layout */
.add-to-cart-container form {
    display: flex !important;
}

/* Variation form: force vertical stacking */
.add-to-cart-container form.variations_form {
    display: flex !important;
    flex-direction: column !important;
}

/* Sticky ATC wrapper should always be full width */
.sticky-add-to-cart-wrapper {
    width: 100% !important;
}

/* Quantity input styling */
.quantity {
    display: inline-table;
    margin-bottom: 10px;
}

.quantity .button.minus {
    border-right: 1px solid rgba(221, 221, 221, 0) !important;
}

.quantity .button.plus {
    border-left: 1px solid rgba(221, 221, 221, 0) !important;
}

.quantity input {
    padding-bottom: 1px;
}

/* Sticky ATC product form inside mini-bar */
.sticky-add-to-cart__product form.cart {
    display: flex;
    flex-direction: row;
}

/* Variation wrapper full width */
.single_variation_wrap {
    width: 100%;
}

/* Swatches form layout */
form.variations_form.cart.ux-swatches-js-attached {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.single_variation_wrap{
    width: 100%;
}
form.variations_form.cart.ux-swatches-js-attached{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;

}

/* Default cart form alignment (PDP) */
form.cart {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start; /* fixed duplication */
}

/* Remove auto-margin on collapsed text elements */
.collapse p,
.tagline.collapse,
.collapse h1,
.collapse h2,
.collapse h3,
.collapse h4,
.h1.collapse,
.collapse.headline,
.headline.collapse {
    margin-bottom: 0;
}

/* Header elements typography override on product pages */
.h1, .h2, .h3, .h4,
h1, h2, h3, h4 {
    font-weight: normal !important;
    text-rendering: optimizeSpeed;
    text-transform: none;
    margin-top: 0;
    line-height: 130% !important;
}

/* ⚠️ Possibly unused – PDP custom block targeting a random ID */
#col-1279593884 > div > div.add-to-cart-container.form-minimal.is-normal > form > div {
    display: none;
}

/* PDP flickity gallery thumbnails */
.flex-control-thumbs li {
    width: 16%;
}

/* PDP product data tables */
th.label {
    font-size: 19px;
}

/* =========================================================
   06. CART & CHECKOUT STYLING
   Custom WooCommerce checkout + cart layout and UX
   ========================================================= */

/* ------------------------------
   Product thumbnails
   ------------------------------ */
.product-thumbnail img,
.cross-sells img {
    border-radius: 10px !important;
    border: 1px solid #d6d6d6;
}

/* ------------------------------
   Page background
   ------------------------------ */
.woocommerce-cart #main,
.woocommerce-checkout #main {
    background-color: #f8f8f8;
}

/* ------------------------------
   Sidebar + totals box styling
   ------------------------------ */
.cart-collaterals .cart-sidebar,
.woocommerce-checkout .checkout .has-border,
.woocommerce-order .is-well,
.woocommerce-checkout .is-well {
    border-radius: 10px;
    border: 2px #fff solid !important;
    background-color: #fff;
    box-shadow: 0 5px 20px rgba(0,0,0,.15) !important;
    padding: 30px !important;
}

/* Remove unwanted left divider between columns */
.row-divided > .col + .col:not(.large-12) {
    border-left: 0 !important;
}

/* ------------------------------
   Checkout button styling
   ------------------------------ */
button#place_order,
.button.checkout-button,
.off-canvas-cart .button.checkout {
    line-height: 3em !important;
    min-height: 3em;
    font-size: 17px;
    padding: 4px;
    text-transform: none;
}

/* ------------------------------
   Borders inside checkout tables
   ------------------------------ */
td,
th,
.page-checkout .cart-sidebar .widget-title,
.page-checkout .shop_table thead th,
.page-checkout .cart_totals th.product-name {
    border-bottom: 1px solid #d6d6d6;
}

/* Billing fields top separator */
.woocommerce-billing-fields {
    border-top: 1px solid #d6d6d6;
}

/* ------------------------------
   Coupon styling
   ------------------------------ */
.coupon button.is-form {
    border: 2px solid #777 !important;
    color: #777 !important;
    background-color: #fff;
    text-shadow: none;
    margin-top: 5px;
}

.coupon button.is-form:hover {
    border: 2px solid #171717 !important;
    color: #fff !important;
    background-color: #171717;
}

.woocommerce-form-coupon-toggle a {
    color: #171717;
    text-decoration: underline !important;
}

/* Coupon input box */
.checkout_coupon.has-border {
    border: 2px dashed #171717 !important;
    border-radius: 10px;
    padding: 30px;
}

.checkout_coupon .button {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* ------------------------------
   WooCommerce alerts & messages
   ------------------------------ */
ul.message-wrapper li {
    margin: 0;
}

.woocommerce-invalid input,
input.wpcf7-not-valid {
    border-color: #FA7268;
    color: #FA7268;
}

/* Error message */
.woocommerce-error.message-wrapper {
    border: 1px solid #FA7268;
    background: #FEEFF3;
    margin-bottom: 20px;
    border-radius: 10px;
    padding: 10px 15px;
    font-size: 90%;
}

/* Success message container */
.message-container.success-color {
    border: 1px solid #00AD42;
    background: #eff6ed;
    margin-bottom: 20px;
    border-radius: 10px;
    padding: 10px 15px;
    font-size: 90%;
}

/* Success text */
.woocommerce-page .success-color {
    color: #00AD42;
}

/* Savings row formatting */
p.woocommerce-mini-cart__savings {
    display: flex;
    justify-content: space-between;
}

p.woocommerce-mini-cart__savings:nth-child(2) {
    display: none;
}

/* Payment badge on cart/mini-cart */
span.payment-span-text {
    color: white !important;
    background: #84ad74 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    position: absolute;
    right: 15px;
    top: 13px;
}

/* Ensure checkout button visible */
.wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward {
    display: block !important;
}

/* ---------------------------------------------------------
   07. CHECKOUT
   Description: Checkout page layout, fields, buttons, upsells.
   Location: WooCommerce checkout + FunnelKit Checkout
   --------------------------------------------------------- */
/* Checkout — adjust padding for free shipping notice */
.woocommerce-checkout .ux-free-shipping {
    padding: 15px 0;
}

/* Checkout — FunnelKit tweaks */

/* Verberg laatste blok links */
.wfacp-left-wrapper .div_wrap_sec:last-child {
    display: none;
}

/* Verberg promises/USP block */
.wfacp_promises_0 {
    display: none;
}

/* NL adres: huisnummer + toevoeging breedte fix */
#wfacp_checkout_form p#shipping_house_number_field,
#wfacp_checkout_form #shipping_house_number_suffix_field,
#wfacp_checkout_form p#billing_house_number_field,
#wfacp_checkout_form #billing_house_number_suffix_field {
    width: 25%;
    margin-right: 0 !important;
}

/* Readonly velden grijs maken */
body .wfacp_main_form.woocommerce #wfacp_checkout_form input[readonly] {
    color: #aaa;
    background-color: #ddd;
}

body .wfacp_main_form.woocommerce #wfacp_checkout_form .wfacp_readonly label {
    background: transparent;
}

/* ---------------------------------------------------------
   08. UPSELLS (Product, Cart, Checkout)
   Description: Cross-sell / up-sell styling (FunnelKit, Woo).
   Locations:
   - Checkout upsell
   - Post-purchase upsell
   - On-product-page upsell blocks
   --------------------------------------------------------- */
/* Upsell (Checkout / Cart / PDP) — Coupon Upsell Widget (CUW)
   Premium styling for FunnelKit / Cart Upsell box
   Location: upsell modules on cart & checkout
---------------------------------------------------------------- */

.cuw-badge .cuw-offer-title {
    padding: 3px 9px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    background: #0a596f !important;
    border-top-left-radius: 7px !important;
    border-bottom-right-radius: 7px !important;
}

.cuw-container {
    border: 2px dashed #e2e2e2 !important;
    border-radius: 10px !important;
    padding: 14px !important;
}

.cuw-product-section {
    display: flex !important;
    gap: 16px !important;
    align-items: flex-start !important;
}

.cuw-product-image img {
    width: 98px !important;
    height: auto !important;
    border-radius: 8px !important;
}

.cuw-product-title {
    font-size: 15px !important;
    font-weight: 500 !important;
    margin: 0 0 4px 0 !important;
    color: #1d1d1d !important;
    line-height: 1.3 !important;
}

.cuw-product-price {
    margin: 0 !important;
    line-height: 1.05 !important;
    font-size: 14px !important;
}

.cuw-product-price del {
    margin-right: 3px !important;
    opacity: 0.8 !important;
}

.cuw-product-price ins {
    margin-left: 0 !important;
}

.cuw-product-quantity .cuw-qty {
    width: 40px !important;
    height: 26px !important;
    border-radius: 4px !important;
}

.cuw-product-quantity .cuw-plus,
.cuw-product-quantity .cuw-minus {
    transform: scale(0.92) !important;
    opacity: 0.8 !important;
}

/* Variants inside upsell — always hidden (we only push default variant) */
.cuw-product-variants {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* Upsell description bullets — compact premium look */
.cuw-offer-description {
    font-size: 13px !important;
    color: #4a4a4a !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
    white-space: pre-line !important;
    line-height: 1.14 !important;
}

.cuw-offer-description br {
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Upsell CTA button — brand green */
.cuw-offer-cta-section {
    background: #84ad74 !important;
    border-radius: 6px !important;
    text-align: center !important;
    margin-top: 12px !important;
    transition: background-color .15s ease-in-out !important;
}

.cuw-button {
    padding: 6px 10px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.1px !important;
}

/* CTA hover state */
.cuw-offer-cta-section:hover {
    background: #7aa66b !important;
}

/* Hide quantity in one-click upsell - checkout only */
.woocommerce-checkout .cuw-product-quantity {
    display: none !important;
}

/* ---------------------------------------------------------
   09. B2B BLOCKS (Corporate Gifting / Relatiegeschenken)
   Description: Styles for B2B banners, blocks, pages, CTA’s.
   Location: B2B landing page + B2B components on PDP.
   --------------------------------------------------------- */

/* B2B — relationship gift icon sizing */
.relatiegeschenk-tekst .icon {
    width: 22px;
    font-size: 17px;
}

/* B2B — Trustline styling on quotation request forms */
.sf-trustline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    color: #666;
    font-size: 15px;
    margin: -10px 0 25px;
    text-align: center;
}

.sf-trustline span:not(:last-child)::after {
    content: " • ";
    margin-left: 8px;
}

/* B2B — hide USP bar on quotation request page */
.page-id-39532 .header-block.block-html-after-header {
    display: none !important;
}


/* ---------------------------------------------------------
   10. BLOG & INFORMATIONAL PAGES
   Description: Styling for articles, FAQ pages, generic content.
   --------------------------------------------------------- */

/* Blog Meta — Hide author/date/permalink (Blog pages) */
.entry-author-link,
.entry-permalink,
.entry-date,
.entry-meta { display: none; }

/* Blog — hide post date */
.post-date {
    display: none !important;
}

/* =========================================================
   Comparison Tables (WV Flextable)
   Used for Top 5 / Best X style SEO articles
   ========================================================= */
table.wv-flextable.wv-comparetable {
    margin-bottom: 30px;
}

/* Header */
table.wv-flextable.wv-comparetable thead {
    background: #0099CC !important;
}

table.wv-flextable.wv-comparetable thead tr.wv-table-head td,
table.wv-flextable.wv-comparetable thead tr.wv-table-head th {
    color: #fff;
    font-weight: bold;
    padding: 7px;
    margin: 0;
}

/* Hide extra columns on smaller screens */
@media (max-width: 1230px) {
    table.wv-flextable.wv-comparetable thead tr.wv-table-head td,
    table.wv-flextable.wv-comparetable thead tr.wv-table-head th {
        display: none;
    }

    table.wv-flextable.wv-comparetable thead tr.wv-table-head td.wv-label-col,
    table.wv-flextable.wv-comparetable thead tr.wv-table-head th.wv-label-col {
        display: block;
        text-align: center;
    }
}

/* Even row background */
table.wv-flextable.wv-comparetable tbody tr.wv-table-row:nth-child(even) {
    background: #fbfbfb;
}

/* Mobile row flex layout */
@media (max-width: 1230px) {
    table.wv-flextable.wv-comparetable tbody tr.wv-table-row {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #DCDCDC;
        border-top: none;
    }
}

/* Product column */
table.wv-flextable.wv-comparetable tbody tr.wv-table-row td.wv-product-col {
    border-bottom: 1px solid #DCDCDC;
    width: 15%;
    text-align: center;
}

table.wv-flextable.wv-comparetable tbody tr.wv-table-row td.wv-product-col img {
    max-height: 110px;
    margin: 0;
    height: auto;
    max-width: 60%;
}

/* Label column */
table.wv-flextable.wv-comparetable tbody tr.wv-table-row td.wv-label-col {
    font-weight: bold;
    border-bottom: 1px solid #DCDCDC;
    width: 25%;
    padding: 7px;
}

/* Specs column */
table.wv-flextable.wv-comparetable tbody tr.wv-table-row td.wv-spec-col {
    border-bottom: 1px solid #DCDCDC;
    width: 35%;
    padding: 7px;
    line-height: 23px;
    font-size: 14px;
    color: #3A3A3A;
}

table.wv-flextable.wv-comparetable tbody tr.wv-table-row td.wv-spec-col ul.wv-spec-list li {
    line-height: 23px;
    font-size: 14px;
    color: #3A3A3A;
}

/* Price column */
table.wv-flextable.wv-comparetable tbody tr.wv-table-row td.wv-price-col {
    width: 25%;
    border-bottom: 1px solid #DCDCDC;
    padding: 7px;
    text-align: center;
}

table.wv-flextable.wv-comparetable tbody tr.wv-table-row td.wv-price-col a {
    font-size: 12px;
}

table.wv-flextable.wv-comparetable tbody tr.wv-table-row td.wv-price-col a.btn {
    background: #ff6322;
    color: #fff;
    border: 1px solid #ff6322;
    width: 100%;
    max-width: 260px;
    text-transform: lowercase;
}

table.wv-flextable.wv-comparetable tbody tr.wv-table-row td.wv-price-col a.btn:hover {
    background: #de4c0f;
    border: 1px solid #de4c0f;
}

/* Mobile ordering rules */
@media (max-width: 1230px) {
    table.wv-flextable.wv-comparetable tbody tr.wv-table-row td {
        order: 2 !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: column;
        width: 100% !important;
        border: none !important;
        text-align: center;
        margin: 0;
    }

    table.wv-flextable.wv-comparetable tbody tr.wv-table-row td.wv-product-col {
        order: 2 !important;
        border: none;
    }

    table.wv-flextable.wv-comparetable tbody tr.wv-table-row td.wv-product-col img {
        margin: 5px 0 !important;
        width: auto;
    }

    table.wv-flextable.wv-comparetable tbody tr.wv-table-row td.wv-label-col {
        order: 1 !important;
        border: none;
    }

    table.wv-flextable.wv-comparetable tbody tr.wv-table-row td.wv-spec-col {
        order: 3 !important;
        border: none;
        padding: 0 !important;
        text-align: left;
        padding-left: 7px !important;
    }

    table.wv-flextable.wv-comparetable tbody tr.wv-table-row td.wv-spec-col ul {
        margin: 0;
        margin-left: 20px;
    }

    table.wv-flextable.wv-comparetable tbody tr.wv-table-row td.wv-price-col {
        order: 4 !important;
        border: none;
    }
}

/* Comparison label */
.wv-label {
    padding: 5px 10px;
    background: #bcd0e1;
    color: #000;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}

/* Remove left indentation from <ol> in content blocks */
.col-inner ol li {
    margin-left: 0;
}



/* ---------------------------------------------------------
   11. MISCELLANEOUS COMPONENTS
   Description: Anything that doesn’t fit other categories yet.
   Keep minimal; move to proper section later.
   --------------------------------------------------------- */

/* reCAPTCHA badge verbergen (Google-compliant) */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Misc — Kabel organizers comparison table */
.kabel-organizers-tabel-table tr th,
.kabel-organizers-tabel-table tr td {
    text-align: center;
    width: 100px;
}

.kabel-organizers-tabel-table tr:nth-child(even) {
    background-color: #fbfbfb;
}

.kabel-organizers-tabel-table th {
    background-color: #f5f5f5;
}

/* Global video overlay / play button style */
.overlay-icon,
.button.open-video {
    background-color: #FFCD6D;
    color: #121718;
    opacity: 1;
    width: 3em;
    height: 3em;
    line-height: 3em;
    border: 0;
}

/* Normalize testimonial typography */
.testimonial-text {
    font-style: normal !important;
}

/* Button span line-height fix */
.button span {
    line-height: inherit;
}

/* Hide 2nd mini-cart footer item */
.ux-mini-cart-footer:nth-child(2) {
    visibility: hidden;
    height: 0;
    padding: 0;
}


/* ---------------------------------------------------------
   12. MOBILE ONLY (<=768px)
   Description: All mobile overrides grouped in one place.
   --------------------------------------------------------- */


/* =========================================================
   A. MOBILE GLOBAL COMPONENTS (Reusable UI components)
   Breakpoints above 768px OR global components used sitewide
   ========================================================= */

/* Global — Trust icons (<=900px, <=540px) */
@media (max-width: 900px) {
    .sf-trust {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 540px) {
    .sf-trust {
        grid-template-columns: 1fr;
    }
}

/* Global — Steps component (<=900px, <=560px) */
@media (max-width: 900px) {
    .sf-steps__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 28px;
    }
    .sf-steps__list::before {
        display: none;
    }
}
@media (max-width: 560px) {
    .sf-steps__list {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .sf-step__badge {
        width: 52px;
        height: 52px;
    }
}

/* Global — Trust block (#sf-trust) */
@media (max-width: 900px) {
    #sf-trust {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 540px) {
    #sf-trust {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   B. MAIN MOBILE BREAKPOINT (<=768px)
   All page-specific or small-device overrides
   ========================================================= */

/* Base mobile styles (up to 768px) */
@media (max-width: 768px) {

  /* Global utility visibility */
  .desktop-only { 
      display: none; 
  }
  .mobile-only { 
      display: block; 
  }

  /* Sticky add-to-cart bar (base mobile) */
  .sticky-add-to-cart {
      padding: 12px 8px;
  }
  .sticky-add-to-cart .button {
      font-size: 18px;
      padding: 10px 16px;
  }

  /* Active sticky bar: hide quantity */
  .sticky-add-to-cart--active .quantity {
      display: none !important;
  }

  /* Hide all items — Flatsome will set one item to display:block via JS */
  .rotate-top-bar > * {
      display: none;
  }

  /* Make the currently active item (with inline display:block) visible as flex */
  .rotate-top-bar > *[style*="display: block"] {
      display: inline-flex !important;
  }

  /* Add a little breathing room above the rotating text */
  .rotate-top-bar {
      padding-top: 6px;
      font-size: 90%;
  }

  /* -------------------------------------------------
     BUSINESS TOGGLE (mobile-only)
     ------------------------------------------------- */

  #billing_business_toggle_field {
    margin: 14px 0 8px;
  }

  #billing_business_toggle_field label {
    font-weight: normal;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
  }

  #billing_business_toggle_field input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
  }

}

/* Product page — sticky add-to-cart layout tweaks (<=549px) */
@media (max-width: 549px) {
  .sticky-add-to-cart-wrapper .sticky-add-to-cart__product img,
  .sticky-add-to-cart-wrapper .product-title-small,
  .sticky-add-to-cart-wrapper .stock,
  .sticky-add-to-cart-wrapper .quantity {
      display: none !important;
  }

  .sticky-add-to-cart-wrapper form.cart {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 16px;
  }
}

/* B2B trustline (<=520px) */
@media (max-width: 520px) {
  .sf-trustline {
      flex-wrap: wrap;
      gap: 4px;
      line-height: 1.5;
  }
  .sf-trustline span:not(:last-child)::after {
      content: "";
  }
}

/* Small mobile and B2B hero adjustments (<=480px) */
@media (max-width: 480px) {

  /* Tooltip position fix */
  .tooltip .tooltiptext {
      left: 0;
      right: auto;
      transform: none;
  }

  /* Checkout product image spacing */
  .woocommerce-checkout-review-order-table .product-name img {
      margin-right: 10px;
      vertical-align: middle;
  }

  /* B2B hero headings */
  .banner h1,
  .banner h2,
  .banner h3 {
      font-size: 22px !important;
      line-height: 1.25 !important;
  }

  /* B2B subtext */
  .banner p {
      font-size: 15px !important;
      line-height: 1.5 !important;
  }

  /* B2B USP text */
  .sf-usps div {
      font-size: 14px !important;
  }
  .sf-usps small {
      font-size: 12px !important;
  }

  /* Sticky offerte button */
  .sticky-offerte-btn {
      position: fixed;
      bottom: 15px;
      left: 15px;
      right: 15px;
      background-color: #ff9100;
      color: #fff;
      font-size: 17px;
      font-weight: 700;
      text-align: center;
      padding: 14px 0;
      border-radius: 30px;
      box-shadow: 0 5px 15px rgba(255,145,0,0.3);
      z-index: 9999;
  }
  .sticky-offerte-btn:hover {
      background-color: #e68000;
  }

  /* Hide sorting on mobile category pages */
  .woocommerce-ordering,
  .category-filtering {
      display: none;
  }

  /* Extra compact sticky button on very small screens */
  .sticky-add-to-cart {
      padding: 8px 6px;
  }
  .sticky-add-to-cart .button {
      font-size: 16px;
      padding: 8px 20px;
  }

  /* Breadcrumb + title tweaks */
  .page-title.shop-page-title.product-page-title {
      height: 30px;
  }
  .breadcrumbs {
      text-align: left;
  }
  .page-title-inner {
      padding-top: 0;
  }
}

  /* PDP price spacing: only on current price (ins), not on crossed-out price */
  .single-product .price ins .woocommerce-Price-amount {
      display: inline-block;
      margin-bottom: 10px;
  }

  /* B2B relationship gift block — extra spacing below intro text */
  .col-inner .relatiegeschenk-tekst {
      display: block !important;
      margin-bottom: 22px !important;
  }

  /* PDP: reduce whitespace between title and price */
  .single-product .product-title,
  .single-product .product-title-small {
      margin-bottom: 8px !important;
      padding-bottom: 0 !important;
  }