/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/


@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');


.lightbox {
    text-align: left !important; 
    line-height: 1.6 !important; 
}

.wpb_content_element {
	margin-bottom:0px !important;
}


.front-header-banner>.banner-inner>.banner-layers.container {
	max-width:80% !important;
}
/*.header-hero-usp {
	max-width:30% !important;
}*/
.interest-badge {
	
}


/***** BOOKING SHOWROOM *****/
.amelia-v2-booking #amelia-container.am-fs__wrapper {
	margin:60px auto !important;
}


/*************************/
/***** TOP COVER IMG *****/
/*************************/
.cover-img-col {
	padding-left: 0px !important;
	padding-right:0px !important;
}



/*********************************/
/***** NEW LAYOUT 2023-07-17 *****/
/*********************************/
.top-content-row {
	padding-top:3em;
	
}
.window-type-text {
	padding-top:1em;
}

.section-window-blog {
	padding-top:60px !important;
	padding-bottom:30px !important;
}

/********************************************************/
/*************** POPUP SOMMARERBJUDANDE *****************/
/********************************************************/
.summer-offer-row .col{
	padding-bottom:0px;
}

.summer-header-row .col{
	padding-left:0px;
	padding-right:0px
}

.offer-content-text {
	width:60%;
	margin:auto;
}


/************************/
/***** OM FÖTERAGET *****/
/************************/
.contact-info-row> .col {
	padding-bottom:0px !important;
}
.contact-info-row> .col-inner> p {
	margin-bottom:0px !important;
}

.contact-info-row {
	
}
.contact-hours td{
	font-size:100% !important;
}

/******************************/
/***** ENERGY SAVING PAGE *****/
/******************************/
.energy-btn {
	margin-top:1em;
}
.energy-txt {
	max-width:1200px;
}
.energy-blurb-text {
	font-weight:600;
	font-size:1.2em;
	color:white;
	background-color:rgb(22, 58, 85);
	padding-top:0.5em;
	padding-bottom:0.5em;
}
.energy-blurb-text p{
	margin-bottom:0px;
}
.last-content-row {
	border-top:1px solid lightgray;
	padding-top:30px;
}

/**************************************/
/*************** MENU *****************/
/**************************************/
.menu-usp-col {
	padding-top:0.5em;
	padding-bottom:0.5em;
}
.menu-usp-img {
	margin-bottom:0px !important;
}




/********************************************/
/*************** FRONT PAGE *****************/
/********************************************/

.blurbs-heading-col {
	padding: 60px 15px 30px;
}

.read-more-btn {
	margin-top:30px;
}

.blurs-mob-text {
	margin-bottom:1em;
}
.blurs-mob-row {
	border-bottom: 1px dashed darkgray;
}

.blurs-top-row {
	margin-top:4px;
	margin-bottom:4px;
}
.blurs-second-row {
	margin-top:4px;
	margin-bottom:4px;
}

.blurs-img-box {
	padding-top:0px;
	padding-bottom:2em;
}
.blurs-img-box>.box-text {
	padding-left: 1.5em;
    padding-right: 1.5em;
}

.front-banner-box {
	margin-top:4px;
	margin-bottom:5px;
}

.front-last-blurs {
	margin-top:5px;
	margin-bottom:5px;
}

.front-blurb {
	border-right:4px solid white;
}
.front-blurb>.col-inner {
	padding-left:0px !important;
	padding-right:0px !important;
}
.front-blurb-left {
	border-left:4px solid white;
}
.front-blurb-right {
	border-right:4px solid white;
}

.header-img-text {
	background-color:#dcdcdc;
	color: #173a56 !important;
	padding:0.5em !important;
	font-weight:700;
	font-family:'Didot';
	float:left;
	margin-right:1.5em;
}

.contact-us-front-page-text {
	background-color: #163a55;
}



/********************************************************/
/*************** COMPANY LANDING PAGE *******************/
/********************************************************/
.header-img-text-company h1{
	font-size:2em !important;
	background-color:#dcdcdc;
	color: #173a56 !important;
	padding:0.5em !important;
	font-weight:700;
	font-family:'Didot';
	float:left;
	margin-right:1.5em;
}


/******************************************************/
/*************** MAIN LANDING PAGES *******************/
/******************************************************/

.slider-heading {
	color: #153653 !important; 
	font-family: didot !important; 
	font-weight: 600 !important; 
	padding: 0.5em !important;
}

.custom-main-page-heading{
	font-size:2.5rem !important;
	color: #183a56;
	text-align:center;
}

.custom-lead-paragraph {
	font-size:1.7rem;
	text-align:center;
	font-weight:700;
	margin-bottom:0.5em !important;
}
.custom-lead-paragraph-small {
	font-size:1.3rem;
	text-align:center;
	font-style: italic;
	
}
.custom-icon-text {
	font-family: 'Playfair Display', serif !important;
	font-size:1.5rem !important;
	font-weight:500 !important;
	color:#fff !important;
}

.top-main-cover-img {
	padding: 0 0 30px !important;
}

/* Steps row is for träfönster landing page **/
.steps-row {
	margin-top:1em;
	margin-bottom:2em;
}

.steps-col {
	background-color: #ededed;
    padding-top: 1em;
    border: 1px solid lightgray;
	max-width:32%;
}

/* CUSTOMER REVIEWS */
.custom-customer-name {
	font-size:1.5vw;
	font-weight:600;
	margin-bottom:0.5em;
}

.large-quote {   
    position: relative;
    padding: 0.5em 2em 0.5em 3em;
	border-left:none !important;
	font-size:1vw;
}

.large-quote:before {
    font-family: Georgia, serif;
    position: absolute;
    font-size: 5em;
    line-height: 1;
    top: 0;
    left: 0;
    content: "\201C";
}
.large-quote:after {
    font-family: Georgia, serif;
    position: absolute;
    font-size:5em;
    line-height: 1;
    right:0;
    bottom:-0.5em;
    content: "\201D";
}

.custom-review-description {
	font-size:1vw;
}

/* DIVIDER SECTIOn */
.divider-section-text-large {
	font-family: 'Playfair Display', serif !important;
	font-size:2em;
	font-weight:700;
	text-align:center;
	color:#fff;
	margin-bottom:0px;
}

.custom-section-col {
	padding-bottom:0px;
}

/* CTA */
.custom-cta-col {
	font-size:1.2em;
}
.custom-cta-col h3{
	font-size:1.5em;
}
.custom-cta-inner-col {
	padding-bottom:0px;
}
.custom-cta-button {
	color: #183a56;
	font-weight:400;
	border:none;
}
.custom-cta-button:hover {
	color: #183a56;
	font-weight:400;
	background-color:#f7e663;
}
.custom-cta-button-inverted {
	font-weight:400;
	border:none;
}


/******************************************/
/***** EXAMPLE QUOTE DOWNLOAD BUTTONS *****/
/******************************************/
.quote-btn-avans.inactive-btn {
	opacity: .6;
}

.quote-btn-sekel.inactive-btn {
	opacity: .6;
}



/*******************************************/
/*************** DK / NO *******************/
/*******************************************/
.custom-heading-blue {
	margin-bottom: 1em !important;
    padding-top: 0.3em !important;
    padding-right: 0.3em !important;
    padding-bottom: 0.3em !important;
    padding-left: 1em !important;
    background-color: #043b58 !important;

}
.custom-heading-blue h2{
	color:white;
	margin-bottom:0px !important;

}


/********************************************/
/*************** GENERICS *******************/
/********************************************/

/*************** ADD CUSTOM CSS HERE.   ***************/

/*.front-slider {
	margin-top:-30px;

}*/

/* Hide border of form output on page /designa-dina-fonster-och-begar-offert/ */
#wpcf7-f59317-p61206-o1 .wpcf7-response-output {   
    border: none !important;
}


/********************** USP in header **********************/
.usp-header {
	color: #fff;
    font-weight: 600;
    font-size: small;
}
.usp-span{
	margin-right:1em;
}
.usp-div-shop {
	text-align:center;
	padding-top:1em;
	padding-bottom:1em;
}

/*************** Headings on product pages (not store)   ***************/
.blue-heading-h1 {
	font-size: 28px !important;
    color: #ffffff !important;
    text-align: left !important;
    font-family: Raleway !important;
    font-weight: 400 !important;
    font-style: normal !important;
	background-color: #043b58 !important;
	margin-bottom: 1em !important;
	margin-top: 1em !important;
    padding-top: 0.3em !important;
    padding-right: 0.3em !important;
    padding-bottom: 0.3em !important;
    padding-left: 0.3em !important;
}

.blue-heading-h2 {
	font-size: 22px !important;
    color: #ffffff !important;
    text-align: left !important;
    font-family: Raleway !important;
    font-weight: 400 !important;
    font-style: normal !important;
	background-color: #043b58 !important;
	margin-bottom: 1em !important;
	margin-top: 1em !important;
    padding-top: 0.3em !important;
    padding-right: 0.3em !important;
    padding-bottom: 0.3em !important;
    padding-left: 0.3em !important;
}

.blue-heading-h3 {
	font-size: 18px !important;
    color: #ffffff !important;
    text-align: left !important;
    font-family: Raleway !important;
    font-weight: 400 !important;
    font-style: normal !important;
	background-color: #043b58 !important;
	margin-bottom: 1em !important;
	margin-top: 1em !important;
    padding-top: 0.3em !important;
    padding-right: 0.3em !important;
    padding-bottom: 0.3em !important;
    padding-left: 0.3em !important;
}

/*************** Product pages (not the store) ********************/
.ul-utforanden {
	padding-left:2em;
}

.pewc-radio-image-wrapper img{
	display:block;
	margin:auto;
}

/*************** Shortcode button styling   [button class="blue-button" size="medium" style="primary" text=" " link=" " target=""]   ***************/
.blue-button {
	border-radius: 5px;
    background-color: #043b58 !important;
	background-image: linear-gradient(to bottom,rgba(255,255,255,.2) 0,rgba(255,255,255,.01) 100%);
    background-repeat: repeat-x;
	margin-bottom:2em;
}

.blue-button a:hover {
    background-color: #1d5674 !important;
	background-image: linear-gradient(to bottom,rgba(255,255,255,.2) 0,rgba(255,255,255,.01) 100%);
}


/*************** CTA elements from bakery library styling   ***************/
.cta-contact {
    color:#fff !important;
    background-color:#043b58 !important;
}
.cta-contact h2 {
    color:#fff !important;

}

#cta-btn-contact a {
    color:#043b58;
    background-color:#fee94a !important;
    border:none;
}
#cta-btn-contact a:hover {
    background-color:#efdf65 !important;
}

.cta-webshop {
    color:#000000 !important;
    background-color:#fee94a !important;
}

#cta-btn-webshop a {
    color:#fff;
    background-color:#043b58 !important;
    border:none;
}
#cta-btn-webshop a:hover {
    background-color:#1d5674 !important;
}

.usp-img-text h3 {
    font-size: 18px;
    text-align: left;
    font-family: Raleway;
    font-weight: 500;
    font-style: normal;
    margin-top:1em;
}

/***************  Widget sidebar  **********************/

.new-sidebar {
	margin:1em;
	padding-bottom:1em;

}

.new-sidebar a {
	
	color:#FFEB35;
	font-size:13px;
}

.widget-link {
	background-color:#FFEB35;
	color:#000;
	font-size:13px;
}

h2.widget-title {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
    padding: 5px 1rem 5px 1rem;
    background-color: #ececec;
    font-family: 'Raleway';
    line-height: 40px;
}

.new-sidebar ul {
	margin:1em 0 1em 1em;
}

.custom-html-widget ul {
	margin-top:1em;
	margin-left:1em;
}

.col-divided {
    padding-right: 0px;
    border-right: none; 
}

/***************  Wills new blog Widget sidebar  **********************/



/********************************************/
/*************** BLOGG ****************/
/********************************************/

/***** BLOG PAGE *****/
.blog-post-cat-title h3 {
	font-size: 1.5vw !important;
	background-color:#183a56 !important;
	padding:0.5em !important;

}

.blog-page-category-text {
	padding-bottom:0px !important;
}

.meta-before-post {
	background-color:#183a56;	
	padding-left:1em;
	padding-right:1em;
	padding-top:0.5em;
	padding-bottom:0.5em;
	font-weight:700;
	font-size:1vw;
	text-align:left;
}
.archive-meta-before-post {
	background-color:#183a56;	
	padding-left:1em;
	padding-right:1em;
	padding-top:0.5em;
	padding-bottom:0.5em;
	font-weight:700;
	font-size:1vw;
}
.meta-before-post-left {
	color:#fff;	
}
.meta-before-post-right {
	float:right;
	color:#fae759;
}

.blog-page-divider-col {
	padding-bottom:0px !important;
}


/* COVER PAGE */

.blog-cover-img-row {
	border-bottom:10px solid #fae759;
}
.blog-cover-img-col {
	padding:0 !important;
}

/* Checkout button in cart */
.more-link {
	background-color:#163a55 !important;
	color:#ffffff !important;
	border-radius:5px !important;
	line-height:2.4em !important;
}
.more-link:hover {
	background-color:#163a55 !important;
	color:#ffffff !important;
	border-radius:5px !important;
	line-height:2.4em !important;
}



/********************************************/
/*************** WOOCOMMERCE ****************/
/********************************************/

/****************/
/***** CART *****/
/****************/


/* Nicer output of meta data */
.cart_item > .product-name dl {
	font-size: .7em !important;
}
.cart_item > .product-name dl {
	font-size: .7em !important;
}
dl.variation dt {
    font-weight: bold !important;
}


/********************************************/
/*************** Product page  ***************/
/********************************************/


.woocommerce-variation.single_variation{
	display:none !important;
}

/* Scale information list images and fix margins in section with free accesories*/
td.pewc-information-image {
    width: 70px !important;
}
td.pewc-information-image img {
    margin:0.5em !important;
}

td.pewc-information-label {
	padding-left:2em !important;
}



/* center product gallery images */
.woocommerce-product-gallery__image {
	text-align:center;
}
/* dont scale up images in heignt */
.product-thumbnails img, .product-gallery-slider img {
    max-height: 600px;
	width:auto;
}

/* Green border for checkboxes in product add ons */
.pewc-checkbox-image-wrapper label input:checked + img {
    border: 4px solid #34e516;
}

.pewc-radio-image-wrapper label input:checked + img {
    border: 4px solid #34e516;
}

.measure-validation {
	color: red;
}


/* Add to cart button on single page */
.single_add_to_cart_button {
	background-color:#163a55 !important;
	color:#fbe759;
}
.single_add_to_cart_button:hover {
	background-color:#2c5a7c !important;
	color:#fbe759;
	box-shadow: inset 0 0 0 100px rgba(0,0,0,0);
}

.read-more-wrapper {
	margin-top:2em;
}
.read-more-content-div {
	display:none;
}

.read-more-content-div img{
    margin-right:1em;
}

.read-more-text {
	margin:1em;
}

.pewc-item-calculation {
	display:none;
}

.pewc-variation-dependent.active {
    display: none;
    visibility: visible;
}

/* Make Total sum float to the right in product page */
.pewc-total-only .pewc-total-field {
    float: right !important;
}


/********************************************************/
/**************** PRODUCT CONFIGURATOR ******************/
/********************************************************/

.db_wing {
	position: relative !important;
}

.db_segment {
	position: relative !important;
}

.left-arrow {
	z-index:100 !important;
	position: relative !important;
	font-weight:600 !important;
}
.right-arrow {
	z-index:100 !important;
	position: relative !important;
	font-weight:600 !important;
}

.door-knob {
	z-index:100 !important;
	position: relative !important;
	font-weight:600 !important;
}


/********************************************/
/**************** Checkout ******************/
/********************************************/
.methods {
	
	padding:1em;
	background-color: rgba(0,0,0,0.01);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 3px;
}


/***************************************************/
/*************** Breadcrumbs ***********************/
/***************************************************/
.breads {
	margin-bottom: 1em !important;
}

/* breadcrumbs in product page */
.product-breadcrumb-container {
	margin-bottom:1em;
}

/***************************************************/
/***************** Filtering ***********************/
/***************************************************/

.cat-item a{
	background: none !important;	
	color:#334862 !important;
}

.cat-parent a {
	background: none !important;
	color:#334862 !important;
}

/***************************************************/
/**************** Archive ********************/
/***************************************************/

/******* Category description *******/
div.term-description { 
	overflow:auto; 
	height:auto; }

div.term-description-closed { 
	overflow:hidden; 
	height:100px; 
}
button.toggle-cat-desc-btn {
	margin-top:1em;
	margin-bottom:2em;
	border-radius: 5px;
}
.separator-border {
	border-top: solid #ececec 1px;
	margin-bottom:1em;
}

/** product title **/
.product-title {
	text-transform: uppercase;
	font-weight:600;
}

div.shop-main-desc { 
	overflow:auto; 
	height:auto; }

div.shop-main-desc-closed { 
	overflow:hidden; 
	height:100px; 
}

/*********** Hide prices from archives/catalog **************/
.price-wrapper {
	display:none;
}

/*************** Category grid images ********************/
.products.has-equal-box-heights .box-image {
    padding-top: 100% !important;
}


/**************** Product materials table ********************/

.box-text-products {
	padding-bottom:0em;
}
.material-table-wrapper {
	max-width:50%;

}
.material-table-wrapper table {
	border-collapse:collapse;
}
.material-table-wrapper table th {
	border:none;
	
}
.material-table-wrapper table tr {
	border:none;
}
.material-table-wrapper table td {
	padding: 1em;
	/*border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;*/
	
	border: 1px solid #ececec;
	text-align:center;
}

/**************** category material buttons ********************/
.material-buttons-wrapper {
	max-width:100%;
	/*margin-top:-90%;*/	
	padding-left:0.5em;
	margin-top:0.5em;
	text-align:center;

}
.material-btn {
	margin-bottom:.5em;
	border-radius:5px;
}
.is-xssmall {
	font-size:0.6em;
}

/********** custom badges on archive page **********/
.custom-badge-wrapper {
	top: 10%;
    right: 10%;
    z-index: 999;
    position: absolute;
}

.custom-badge {
	font-size: 0.6em;
	margin-bottom: 0.5em;
    border-radius: 5px;
	background-color: var(--primary-color);
	color:#fff;
	padding-left:0.5em;
	padding-right:0.5em;
}

/***************************************************/
/********************  Cart  ***********************/
/***************************************************/
.shop_table {
	font-size:110% !important; 
}

.cart-sidebar {
	margin-bottom:10%;
}

/***************  Cart - shipping  **********************/
.shipping__list_item {
	margin-bottom:1em !important;
}
.shipping-method-description {
	text-align:left;
}
.shipping__list_label {
	font-size:1em !important;
	
}

#terminal_field {
	width:100%;
	text-align:left !important;
}

/***************  Cart - wasa  **********************/
.wasa-heading {
	margin-bottom:-0.5em;
}
.wasa-img {
	margin-bottom:1em;
}
.wasa-monthly {
	margin-bottom:0.5em !important;
}
span.fee {
	font-size:1.3em;
	font-weight:700;
}
.deal-div {
	margin-top:0.5em;
}
.deal-info {
	font-size:0.8em;
}

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

/* Checkout button in cart */
.checkout-button {
	background-color:#163a55 !important;
	color:#fbe759;
	border-radius:5px;
}
.checkout-button:hover {
	background-color:#2c5a7c !important;
	color:#fbe759;
	box-shadow: inset 0 0 0 100px rgba(0,0,0,0);
}

.button-continue-shopping {
 	/*background-color:#163a55;*/
	border-radius:5px;
}
.update-cart {
	border-radius:5px;
}

/********************************************************/
/********************  Mini Cart  ***********************/
/********************************************************/
.widget_shopping_cart p.total {
    font-size: 14px !important;
    text-align: left !important;
}


/***************************************************/
/********************  Checkout  *******************/
/***************************************************/

/* Checkout button in checkout */
#place_order {
	background-color:#163a55 !important;
	color:#fbe759;
	border-radius:5px;
}
#place_order:hover {
	background-color:#2c5a7c !important;
	color:#fbe759;
	box-shadow: inset 0 0 0 100px rgba(0,0,0,0);
}


#transaction_type_field label.radio {
    margin: 0em 0em 0em 0em !important;
    width: 85% !important;
	vertical-align: top;
}

#transaction_type_field label:first-of-type {
	margin-bottom:1em !important;
}


/*************** SET EQUAL HEIGHT TO PAGE IMAGES ********************/
.guidegrid-img img {
    height: 200px !important;
    object-fit: cover;
}


/*************** ADD TABLET ONLY CSS HERE  ***************/
@media only screen and (max-width: 1180px) { 
	
	/* Payment options in checkout */
	#transaction_type_field label.radio {
		margin: 0em 0em 0em 0em !important;
		width: 90% !important;
		vertical-align: top;
		display: inline !important;
	}
	#transaction_type_field label.radio::after {
		content:"\a" !important;
    	white-space: pre !important;
	}
	#transaction_type_field label:first-of-type {
		margin-bottom:1em !important;
	}

}



/*************** ADD MOBILE ONLY CSS HERE  ***************/
@media only screen and (max-width: 48em) {
	
	.slider-heading {
		font-size:2em !important;
	}
	
	
	/*************** 3 column checkboxes and radio groups should only be 2 column on phone ********************/
	.pewc-radio-images-wrapper.pewc-columns-3 .pewc-radio-image-wrapper,
	.pewc-checkboxes-images-wrapper.pewc-columns-3 .pewc-checkbox-image-wrapper {
		width: 100% !important;
	}
	
	/***** BLOG PAGE MOBILE *****/
	.blog-post-cat-title h3 {
		font-size: 3vw !important;
		background-color:#183a56;
		padding:0.5em !important;
	}
	.meta-before-post {
		font-size:2vw;

	}
	.archive-meta-before-post {
		font-size:2vw;
	}
	
	#logo img {
		padding: 15px 0 !important;
	}
	
	/* SUMMER CAMPAING */
	.offer-content-text {
		width:90%;
		margin:auto;
	}
	
	/* Payment options in checkout */
	#transaction_type_field label.radio {
		margin: 0em 0em 0em 0em !important;
		width: 80% !important;
		vertical-align: top;
		display: inline !important;
	}
	#transaction_type_field label.radio::after {
		content:"\a" !important;
    	white-space: pre !important;
	}
	#transaction_type_field label:first-of-type {
		margin-bottom:1em !important;
	}
}

/*************** LARGE SCREEN ONLY CSS HERE  ***************/
@media only screen and (min-width: 1800px) {

	
	/***** BLOG PAGE MOBILE *****/
	.archive-meta-before-post {
		font-size:0.8vw;
	}
}

/*************** EXTRA LARGE SCREEN ONLY CSS HERE  ***************/
@media only screen and (min-width: 2140px) {

	
	/***** BLOG PAGE MOBILE *****/
	.archive-meta-before-post {
		font-size:0.7vw;
	}
}


/* ================================================================
   KF ADDITIONS — appended to original working style.css
   These are safe additions only. No WoodMart overrides.
   No opacity/visibility on PEWC images. No ul.products grid changes.
   ================================================================ */

/* ── PEWC group headings — navy accordion style ── */
div[class^="pewc-group-wrap"] .pewc-group-heading-wrapper {
    background: #163A55 !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    cursor: pointer;
}
div[class^="pewc-group-wrap"] .pewc-group-heading-wrapper h3 {
    color: #ffffff !important;
    background: transparent !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* ── Strip default PEWC borders/shadows ── */
.pewc-group-wrap,
.pewc-group-content-wrapper,
.pewc-item,
.pewc-item-field-wrapper {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ── PEWC radio/checkbox image grid (2 cols) ── */
.pewc-radio-images-wrapper,
.pewc-checkboxes-images-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
}

/* ── Individual option card ── */
.pewc-radio-image-wrapper,
.pewc-checkbox-image-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #183752 !important;
    margin-top: 8px !important;
    padding: 8px 6px 4px !important;
    line-height: 1.45 !important;
    min-height: 52px !important;
    border-top: 1px solid #eef2f5 !important;
    word-break: break-word !important;
}
.pewc-radio-image-wrapper:hover,
.pewc-checkbox-image-wrapper:hover {
    border-color: #163A55 !important;
    box-shadow: 0 2px 8px rgba(22,58,85,.12) !important;
}

/* Selected state (:has() for modern + .pewc-checked class for Safari) */
.pewc-radio-image-wrapper:has(input:checked),
.pewc-checkbox-image-wrapper:has(input:checked),
.pewc-radio-image-wrapper.pewc-checked,
.pewc-checkbox-image-wrapper.pewc-checked {
    border-color: #163A55 !important;
    background: #eaf0f6 !important;
    box-shadow: 0 0 0 3px rgba(22,58,85,.15) !important;
}

/* Checkmark on selected radio card */
.pewc-radio-image-wrapper:has(input:checked)::after,
.pewc-radio-image-wrapper.pewc-checked::after {
    content: "\2713";
    position: absolute;
    top: 6px; right: 6px;
    width: 20px; height: 20px;
    background: #163A55;
    color: #fff;
    border-radius: 50%;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
}

/* Labels inside cards */
.pewc-radio-image-wrapper label,
.pewc-checkbox-image-wrapper label {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    cursor: pointer !important;
}

/* Images — display/size only. NO opacity override (custom-products.js controls that) */
.pewc-radio-image-wrapper img,
.pewc-radio-image-wrapper label picture img,
.pewc-checkbox-image-wrapper img,
.pewc-checkbox-image-wrapper label picture img {
    width: 100% !important;
    height: auto !important;
    max-height: 110px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    display: block !important;
    margin: 0 auto !important;
    border: none !important;
    min-height: 40px;
    background: #f5f7f9;
}

/* Option description text */
.pewc-radio-image-desc {
    display: block !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #2d3748 !important;
    margin-top: 6px !important;
    line-height: 1.3 !important;
}

/* Prices under option cards */
.pewc-radio-image-wrapper .pewc-child-product-price,
.pewc-radio-image-wrapper .pewc-child-product-price-label,
.pewc-radio-image-wrapper .woocommerce-Price-amount,
.pewc-checkbox-image-wrapper .pewc-child-product-price,
.pewc-checkbox-image-wrapper .pewc-child-product-price-label,
.pewc-checkbox-image-wrapper .woocommerce-Price-amount {
    display: block !important;
    text-align: center !important;
    color: #163A55 !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    margin-top: 6px !important;
}

/* Hide PEWC separator dots/theme elements */
.pewc-separator     { display: none !important; }
.pewc-theme-element { display: none !important; }

/* ── Drawing board card ── */
.kf-drawing-card {
    background: #fff;
    border: 1px solid #e2e8ed;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(22,58,85,.06);
}
.kf-drawing-card-header {
    font-size: 12px;
    font-weight: 700;
    color: #163A55;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid #e2e8ed;
}

/* ── Category FAQ description below products ── */
.kf-cat-desc-below {
    max-width: 1200px;
    margin: 24px auto 0;
    padding: 0 20px;
}
.kf-cat-desc-below .term-description,
.kf-cat-desc-below div.term-description {
    font-size: 15px;
    line-height: 1.8;
    color: #2d3748;
}

/* ── Material filter buttons — compact pill style ── */
.material-btn {
    display: inline-block !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    background: #f0f4f7 !important;
    color: #163A55 !important;
    border: 1px solid #d1dce5 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    white-space: nowrap !important;
    line-height: 1.5 !important;
}
.material-btn:hover {
    background: #163A55 !important;
    color: #fff !important;
    border-color: #163A55 !important;
}
.material-buttons-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 4px 0 !important;
    margin-top: 4px !important;
    text-align: left !important;
    /* Raise above WoodMart card cover link */
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
}
.material-buttons-wrapper a {
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
}

/* Allow subcategory cards to overflow so buttons are reachable */
.woocommerce ul.products li.product-category {
    overflow: visible !important;
}

/* WoodMart card cover link stays below our material buttons */
.product-category .wd-entities-title a,
.product-category .wd-entities-title a::before {
    z-index: 2 !important;
}

/* ── Add-to-cart button — navy/yellow brand colors ── */
.single_add_to_cart_button {
    background: #163A55 !important;
    color: #FFEB34 !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 8px !important;
}
.single_add_to_cart_button:hover {
    background: #0f2a3f !important;
    box-shadow: 0 4px 16px rgba(22,58,85,.3) !important;
}

/* ── PEWC total price — navy box with yellow price ── */
.pewc-total-only {
    background: #163A55 !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    margin: 12px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
#pewc-grand-total-label {
    color: rgba(255,255,255,.75) !important;
    font-size: 13px !important;
}
.pewc-total-only .pewc-total-field {
    color: #FFEB34 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    float: none !important;
}
.pewc-total-only .pewc-total-field .woocommerce-Price-amount {
    color: #FFEB34 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    background: transparent !important;
}

/* Sub-prices inside each option card */
.pewc-group-wrap .woocommerce-Price-amount,
.pewc-item .pewc-child-product-price,
.pewc-child-product-price-label {
    color: #163A55 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

/* ── Checkout / Cart buttons ── */
.checkout-button {
    background: #163A55 !important;
    color: #FFEB34 !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
}
#place_order {
    background: #163A55 !important;
    color: #FFEB34 !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
}

/* ── Subcategory page sidebar layout fix ── */
.tax-product_cat .wd-main-content-wrap { min-width: 0; }

/* ── Static pages: prevent content from overflowing ── */
/* Static page override removed — was breaking homepage */

/* Mobile PEWC grid */
@media only screen and (max-width: 767px) {
    .pewc-radio-images-wrapper,
    .pewc-checkboxes-images-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .pewc-radio-image-wrapper img,
    .pewc-checkbox-image-wrapper img {
        max-height: 80px !important;
    }
}


/* ================================================================
   KF FINAL ADDITIONS — Single product layout, sticky sidebar,
   custom ATC, footer, mega menu, PEWC 3-col desktop fix
   ================================================================ */

/* ──────────────────────────────────────────────────────────────
   1. STICKY RIGHT COLUMN  (.kf-sticky set in WPBakery layout)
   The WoodMart layout has a 1/3 column with el_class="kf-sticky"
   hiding on tablet/mobile (vc_hidden-md vc_hidden-sm vc_hidden-xs)
   This makes it position:sticky on desktop only.
──────────────────────────────────────────────────────────────── */
@media (min-width: 993px) {
    .vc_col-sm-4.kf-sticky,
    .wpb_column.kf-sticky,
    .kf-sticky {
        position: sticky !important;
        top: 88px !important;
        align-self: flex-start !important;
        z-index: 10;
    }
}

/* ──────────────────────────────────────────────────────────────
   2. PRICE BOX (woodmart_single_product_price in right column)
   Navy background + yellow text already set via WPBakery inline CSS,
   but we ensure the WooCommerce price inside renders correctly.
──────────────────────────────────────────────────────────────── */
.kf-sticky .wd-product-price .price,
.kf-sticky .wd-product-price .woocommerce-Price-amount {
    color: #FFEB34 !important;
    font-weight: 900 !important;
}
.kf-sticky .wd-product-price del,
.kf-sticky .wd-product-price del .woocommerce-Price-amount {
    color: rgba(251,215,44,0.6) !important;
    font-size: 0.75em !important;
}
/* "Du sparar" savings text */
.kf-sticky .wd-saving-label {
    color: rgba(255,255,255,0.85) !important;
    font-size: 13px !important;
}

/* ──────────────────────────────────────────────────────────────
   3. CUSTOM STICKY CTA  (.kf-sticky-cta in WPBakery vc_raw_html)
   Contains: qty pill + "Lägg I Varukorgen" button + price note
──────────────────────────────────────────────────────────────── */
.kf-sticky-cta {
    background: transparent;
    padding: 0;
}

/* Top row: qty pill */
.kf-cta-top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

/* Qty pill: − [number] + */
.kf-qty-pill {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid #e2e8ed !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: #fff !important;
    height: 46px !important;
    width: fit-content !important;
}
.kf-qty-btn {
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: none !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    color: #163A55 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s !important;
    line-height: 1 !important;
}
.kf-qty-btn:hover {
    background: #f0f4f7 !important;
}
.kf-qty-input {
    width: 56px !important;
    height: 44px !important;
    border: none !important;
    text-align: center !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #163A55 !important;
    background: transparent !important;
    outline: none !important;
    -moz-appearance: textfield !important;
}
.kf-qty-input::-webkit-outer-spin-button,
.kf-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Main ATC button */
.kf-cta-btn {
    display: block !important;
    width: 100% !important;
    padding: 14px 20px !important;
    background: #163A55 !important;
    color: #FFEB34 !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: background 0.18s, box-shadow 0.18s !important;
    position: relative !important;
}
.kf-cta-btn:hover {
    background: #0f2a3f !important;
    box-shadow: 0 4px 16px rgba(22,58,85,.28) !important;
}
/* Loading spinner on ATC button */
.kf-cta-btn.loading {
    pointer-events: none !important;
    opacity: 0.88 !important;
    padding-right: 44px !important;
}
.kf-cta-btn.loading::after {
    content: "" !important;
    position: absolute !important;
    right: 14px !important; top: 50% !important;
    width: 16px !important; height: 16px !important;
    margin-top: -8px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,235,52,.4) !important;
    border-top-color: #FFEB34 !important;
    animation: kfSpin 0.8s linear infinite !important;
}
@keyframes kfSpin { to { transform: rotate(360deg); } }

/* "Priset uppdateras setelah val" note */
.kf-cta-note {
    margin-top: 8px !important;
    font-size: 12px !important;
    color: #64748b !important;
    text-align: center !important;
}

/* Price target span (synced by layout JS) */
.kf-price-target {
    font-weight: 900;
}
.kf-price-target .woocommerce-Price-amount {
    font-size: inherit !important;
    font-weight: 900 !important;
}

/* ──────────────────────────────────────────────────────────────
   4. DRAWING BOARD (in .drawboard-placeholder vc_column_text)
──────────────────────────────────────────────────────────────── */
.drawboard-placeholder #drawBoard {
    width: 100% !important;
    height: 230px !important;
    display: flex !important;
    padding: 1em;
    background: #f0f4f8;
    border: 1px solid #e2e8ed;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}
.drawboard-placeholder #drawBoard-data {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 6px;
    line-height: 1.5;
}

/* ──────────────────────────────────────────────────────────────
   5. PEWC IMAGE OPTION GRID — 3 columns on desktop (Glastyper fix)
   2 cols on mobile (already set above for max-width:767px)
──────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .pewc-radio-images-wrapper,
    .pewc-checkboxes-images-wrapper {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    /* But force 2-col for groups that explicitly set 2 columns */
    .pewc-radio-images-wrapper.pewc-columns-2,
    .pewc-checkboxes-images-wrapper.pewc-columns-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ──────────────────────────────────────────────────────────────
   6. PEWC CHECKBOX IMAGE WRAPPERS (same card style as radio)
──────────────────────────────────────────────────────────────── */
.pewc-checkbox-image-wrapper {
    border: 2px solid #e2e8ed !important;
    border-radius: 8px !important;
    padding: 10px 8px 8px !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
}
.pewc-checkbox-image-wrapper:hover {
    border-color: #163A55 !important;
    box-shadow: 0 2px 8px rgba(22,58,85,.12) !important;
}
.pewc-checkbox-image-wrapper:has(input:checked),
.pewc-checkbox-image-wrapper.pewc-checked {
    border-color: #163A55 !important;
    background: #eaf0f6 !important;
    box-shadow: 0 0 0 3px rgba(22,58,85,.15) !important;
}
.pewc-checkbox-image-wrapper label {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    cursor: pointer !important;
}
.pewc-checkbox-image-wrapper img,
.pewc-checkbox-image-wrapper label picture img {
    width: 100% !important;
    height: auto !important;
    max-height: 110px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    display: block !important;
    margin: 0 auto !important;
    border: none !important;
    min-height: 40px;
    background: #f5f7f9;
}
.pewc-checkbox-image-wrapper .pewc-child-product-price,
.pewc-checkbox-image-wrapper .pewc-child-product-price-label,
.pewc-checkbox-image-wrapper .woocommerce-Price-amount {
    display: block !important;
    text-align: center !important;
    color: #163A55 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    margin-top: 3px !important;
}

/* ──────────────────────────────────────────────────────────────
   7. MOBILE STICKY BAR — always visible on mobile (from layout)
   The .ax-mobile-cta in the WPBakery layout has its own CSS
   (base64 in vc_raw_html). We just ensure price is readable.
──────────────────────────────────────────────────────────────── */
#ax-mobile-price .woocommerce-Price-amount,
#ax-mobile-price {
    color: #163A55 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}
#ax-btn-submit-mobile {
    background: #163A55 !important;
    color: #FFEB34 !important;
}

/* ──────────────────────────────────────────────────────────────
   8. MEGA MENU  (.kron-mega-* classes used in WPBakery header blocks)
──────────────────────────────────────────────────────────────── */
.kron-mega { display:flex!important;flex-direction:row!important;align-items:stretch!important;gap:30px!important;width:100%!important;min-height:280px!important;padding:0 0 24px!important;margin-top:-10px!important; }
.kron-mega-nav { flex:1!important;padding-right:20px!important;border-right:1px solid rgba(22,58,85,.12)!important; }
.kron-mega-cards { flex:2!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:20px 30px!important;align-content:start!important; }
.kron-mega-cards.grid-5 { grid-template-columns:repeat(5,1fr)!important; }
.kron-mega-promo { flex:1!important;border-radius:10px!important;overflow:hidden!important;box-shadow:0 4px 24px rgba(22,58,85,.18)!important;display:flex!important;flex-direction:column!important;background:#193a56!important; }
.kron-mega-cell { display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:6px!important; }
a.kron-mega-cell-title,.kron-mega-nav-title { font-weight:700!important;color:#193a56!important;text-decoration:none!important;line-height:1.3!important;display:block!important;margin-bottom:5px!important; }
a.kron-mega-cell-title:hover { color:#0f2a3f!important; }
.kron-mega-nav-all { display:block!important;font-weight:700!important;color:#193a56!important;text-decoration:none!important;padding-bottom:8px!important;margin-bottom:12px!important;border-bottom:2px solid rgba(22,58,85,.13)!important; }
.kron-mega-cell-links,.kron-mega-nav-list { list-style:none!important;padding:0!important;margin:0!important; }
.kron-mega-cell-links li,.kron-mega-nav-list li { list-style-type:none!important;margin:0!important; }
.kron-mega-cell-links li a,.kron-mega-nav-list li a { color:#5a6a7a!important;text-decoration:none!important;padding:4px 0!important;display:flex!important;align-items:center!important;gap:8px!important;font-size:14px!important;transition:all .2s ease!important; }
.kron-mega-cell-links li a::before,.kron-mega-nav-list li a::before { content:'›'!important;color:#193a56!important;font-weight:700!important;font-size:16px!important;line-height:1; }
.kron-mega-cell-links li a:hover,.kron-mega-nav-list li a:hover { color:#193a56!important;padding-left:4px!important; }
.kron-mega-promo-img { width:100%!important;height:160px!important;object-fit:cover!important; }
.kron-mega-promo-body { flex:1!important;background:#193a56!important;padding:20px!important;display:flex!important;flex-direction:column!important; }
.kron-mega-promo-sub { text-transform:uppercase!important;letter-spacing:.1em!important;color:rgba(255,255,255,.5)!important;font-size:11px!important;margin-bottom:5px!important; }
.kron-mega-promo-title { color:#fff!important;font-size:22px!important;margin:0 0 10px!important; }
.kron-mega-promo-text { color:rgba(255,255,255,.8)!important;font-size:14px!important;line-height:1.5!important;margin-bottom:20px!important; }
a.kron-mega-promo-btn { margin-top:auto!important;padding:12px!important;background:#FFEB34!important;color:#163A55!important;border-radius:6px!important;font-weight:700!important;text-decoration:none!important;text-align:center!important; }
.nav-link-text { color:inherit!important; }

/* ──────────────────────────────────────────────────────────────
   9. FOOTER  (.kron-master-footer block in WPBakery footer)
──────────────────────────────────────────────────────────────── */
.kron-master-footer { background:#193a56!important;color:#fff!important;padding:60px 0 0!important;width:100%!important; }
.footer-inner-container { max-width:1200px;margin:0 auto;padding:0 20px;display:flex;flex-direction:column;gap:40px; }
.footer-brand-column { text-align:center;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:40px; }
.footer-brand-logo { max-width:200px;margin-bottom:25px; }
.footer-contact-block { font-size:14px;line-height:1.8;margin-bottom:25px; }
.footer-trust-badges { display:flex;justify-content:center;gap:15px; }
.footer-links-wrapper { display:grid;grid-template-columns:1fr;gap:30px;text-align:center; }
.footer-title { font-size:14px;font-weight:800;letter-spacing:.1em;margin-bottom:20px!important;color:#fff!important; }
.footer-list { list-style:none!important;padding:0!important;margin:0!important; }
.footer-list li a { color:rgba(255,255,255,.8)!important;text-decoration:none!important;padding:8px 0!important;display:block;font-size:15px; }
.footer-link-highlight { color:#FFEB34!important;font-weight:700!important; }
.footer-copyright-bar { margin-top:50px;background:rgba(0,0,0,.2);padding:20px 0;font-size:12px;color:rgba(255,255,255,.5); }
.copyright-container { max-width:1200px;margin:0 auto;padding:0 20px;text-align:center; }
@media (min-width:1024px) {
    .footer-inner-container { flex-direction:row!important;align-items:flex-start!important; }
    .footer-brand-column { flex:1!important;text-align:left!important;border-bottom:none!important;padding-bottom:0!important; }
    .footer-trust-badges { justify-content:flex-start!important; }
    .footer-links-wrapper { flex:3!important;grid-template-columns:repeat(4,1fr)!important;text-align:left!important; }
}


/* ================================================================
   KF FIX PATCH — All targeted issue fixes
   Applied after the main additions block
   ================================================================ */

/* ── FIX: Mega menu arrow is already fixed inline above ── */

/* ── FIX: PEWC option card — price label on its own line below name ── */
/* The issue: name and price run together "Personsäkerhetsglas1,029kr"  */
/* Fix: ensure the price amount is block-level and separated from desc  */

.pewc-radio-image-wrapper .pewc-radio-image-desc {
    display: block !important;
    margin-top: 5px !important;
    line-height: 1.3 !important;
}

/* Price block — separate from description text */
.pewc-radio-image-wrapper .pewc-child-product-price,
.pewc-radio-image-wrapper .pewc-child-product-price-label {
    display: block !important;
    margin-top: 3px !important;
    padding-top: 2px !important;
    border-top: 1px solid #f0f0f0 !important;
}

/* The woocommerce-Price-amount bdi inside the price label */
.pewc-radio-image-wrapper .pewc-child-product-price bdi,
.pewc-radio-image-wrapper .pewc-child-product-price-label bdi {
    display: inline !important;
}

/* Same for checkbox variants */
.pewc-checkbox-image-wrapper .pewc-radio-image-desc {
    display: block !important;
    margin-top: 5px !important;
}
.pewc-checkbox-image-wrapper .pewc-child-product-price,
.pewc-checkbox-image-wrapper .pewc-child-product-price-label {
    display: block !important;
    margin-top: 3px !important;
    padding-top: 2px !important;
    border-top: 1px solid #f0f0f0 !important;
}

/* ── FIX: Hide the SECOND add-to-cart button on desktop ──
   The WPBakery layout has woodmart_single_product_add_to_cart in
   the left 2/3 col which renders the full form.cart including ATC button.
   PEWC appends its total + the same button again at the bottom of the form.
   On desktop the right sticky col (.kf-sticky) has the custom .kf-cta-btn,
   so we hide the standard WC button and qty from the left column on desktop. */

@media (min-width: 993px) {
    /* On desktop: visually hide the WC ATC button + qty from the left column.
       CRITICAL: Use visibility:hidden (NOT display:none) so the button stays
       in the DOM and can be triggered by jQuery for WooCommerce AJAX.
       display:none breaks WC/WoodMart AJAX cart — the click event doesn't fire. */
    .single-product .vc_col-sm-8 form.cart .single_add_to_cart_button,
    .single-product .wpb_column:not(.kf-sticky) form.cart .single_add_to_cart_button {
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important; /* prevent accidental clicks */
    }
    /* Hide default WC qty stepper (the custom .kf-qty-pill replaces it) */
    .single-product .vc_col-sm-8 form.cart > div.quantity {
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
}

/* ── FIX: Mobile sticky bar — use .ax-mobile-cta from WPBakery layout ──
   The layout already has .ax-mobile-cta in vc_raw_html with its own CSS.
   Replace the inline style with better branding + always-visible behaviour.
   We SHOW it always (not only on scroll) and style it with navy/yellow. */

/* Hide any duplicate/conflicting mobile bars */
#kf-sticky-bar { display: none !important; }

/* Override the ax-mobile-cta to always show on mobile (was display:none by default) */
@media (max-width: 767px) {
    .single-product .ax-mobile-cta {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
        background: #fff !important;
        box-shadow: 0 -3px 16px rgba(0,0,0,.15) !important;
        padding: 10px 15px !important;
        border-top: 1px solid #eee !important;
    }
    .ax-cta-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
    }
    /* Price in mobile bar */
    #ax-mobile-price {
        font-size: 17px !important;
        font-weight: 800 !important;
        color: #163A55 !important;
        flex: 1 !important;
    }
    #ax-mobile-price .woocommerce-Price-amount {
        color: #163A55 !important;
        font-size: 17px !important;
        font-weight: 800 !important;
    }
    /* Qty group */
    .ax-qty-group {
        display: flex !important;
        border: 1.5px solid #163A55 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    .ax-qty-group button {
        width: 36px !important;
        height: 40px !important;
        border: none !important;
        background: #f5f5f5 !important;
        font-weight: bold !important;
        font-size: 18px !important;
        cursor: pointer !important;
        color: #163A55 !important;
    }
    #ax-qty-mobile {
        width: 40px !important;
        text-align: center !important;
        border: none !important;
        background: #fff !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        color: #163A55 !important;
    }
    /* Cart submit button */
    #ax-btn-submit-mobile {
        background: #163A55 !important;
        color: #FFEB34 !important;
        border: none !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 10px !important;
        font-size: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }
    /* Add bottom padding to product page so content doesn't hide behind bar */
    body.single-product {
        padding-bottom: 80px !important;
    }
}

/* ── FIX: Sidebar — ensure text is readable ──
   WoodMart layered nav widget inside navy sidebar needs white text.
   The original style.css already has .widget>ul>li>a { color:#fff }
   but WoodMart's own widget overrides it. Force it here. */

.wd-sidebar .widget_layered_nav ul li a,
.wd-sidebar .widget_layered_nav ul li a span,
.wd-sidebar .woocommerce-widget-layered-nav-list__item a {
    color: rgba(255,255,255,.9) !important;
    text-decoration: none !important;
}
.wd-sidebar .widget_layered_nav ul li a:hover {
    color: #FFEB34 !important;
}
.wd-sidebar .widget_layered_nav .woocommerce-widget-layered-nav-list__item-count {
    color: rgba(255,255,255,.6) !important;
    background: rgba(255,255,255,.1) !important;
    border-radius: 10px !important;
    padding: 1px 6px !important;
    font-size: 11px !important;
    margin-left: 4px !important;
}
/* Sidebar product category links */
.wd-sidebar .widget_product_categories .product-categories li a {
    color: rgba(255,255,255,.9) !important;
}
.wd-sidebar .widget_product_categories .product-categories li a:hover {
    color: #FFEB34 !important;
}
.wd-sidebar .widget_product_categories .product-categories .current-cat > a {
    color: #FFEB34 !important;
    font-weight: 700 !important;
}

/* ── FIX: WoodMart filter panel (after clicking Filter button) ──
   The floating filter panel that WoodMart shows needs readable styling. */
.wd-filter-area-sidebar {
    background: #fff !important;
    padding: 20px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8ed !important;
    box-shadow: 0 4px 20px rgba(22,58,85,.12) !important;
}
.wd-filter-area-sidebar .widget-title {
    color: #163A55 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    background: transparent !important;
    padding: 8px 0 !important;
    border-bottom: 2px solid #163A55 !important;
    margin-bottom: 10px !important;
}
.wd-filter-area-sidebar .woocommerce-widget-layered-nav-list__item a {
    color: #2d3748 !important;
    font-size: 13px !important;
    padding: 4px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.wd-filter-area-sidebar .woocommerce-widget-layered-nav-list__item.woocommerce-widget-layered-nav-list__item--chosen a {
    color: #163A55 !important;
    font-weight: 700 !important;
}

/* ── FIX: PEWC Glastyper 2-col layout ──
   Screenshot shows 2×2 grid. Keep 2-col on all sizes for this section
   since images + prices fit well at 2-col. Revert the 3-col desktop change. */
@media (min-width: 768px) {
    .pewc-radio-images-wrapper,
    .pewc-checkboxes-images-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
/* But show image at proper height */
.pewc-radio-image-wrapper img,
.pewc-radio-image-wrapper label picture img,
.pewc-checkbox-image-wrapper img {
    max-height: 120px !important;
    min-height: 60px !important;
}

/* ── FIX: Category description shown only ONCE below products ──
   The original term-description above is hidden by WoodMart when we
   removed woocommerce_archive_description. Our kf-cat-desc-below 
   shows it below instead. */
.kf-cat-desc-below {
    margin: 24px 0 0 !important;
    padding: 20px !important;
    background: #fff !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8ed !important;
}
.kf-cat-desc-below h2,
.kf-cat-desc-below h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #163A55 !important;
    margin: 20px 0 12px !important;
}

/* ── FIX: Sidebar PRODUKTKATEGORIER heading ── */
.wd-sidebar .widget-title,
.wd-sidebar .widgettitle {
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: .1em !important;
    font-weight: 800 !important;
    color: rgba(255,255,255,.6) !important;
    background: transparent !important;
    padding: 0 0 8px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.15) !important;
    margin-bottom: 12px !important;
}

/* Ensure homepage and WPBakery pages are NOT constrained by our CSS */
.home .wd-content-area,
.page-id-home .wd-content-area {
    max-width: 100% !important;
    overflow: visible !important;
}


/* ================================================================
   KF TARGETED FIXES — Based on screenshot analysis
   ================================================================ */

/* ── FIX: Sidebar padding — archive pages ── */
.wd-sidebar .widget {
    padding: 16px !important;
}
.wd-sidebar {
    background: #163A55 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    padding: 4px 0 !important;
}
/* PRODUKTKATEGORIER heading */
.wd-sidebar .wd-widget-title,
.wd-sidebar .widget > h3,
.wd-sidebar .widget > .widget-title,
.wd-sidebar .widgettitle {
    font-size: 10px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,.5) !important;
    background: rgba(0,0,0,.15) !important;
    padding: 10px 16px !important;
    margin: 0 0 4px !important;
    border-bottom: none !important;
    font-weight: 700 !important;
}

/* ── FIX: USP icons bar ("Begär offert" / "Alltid snabba" / "Bästa garantier") ──
   These are rendered via a WPBakery HTML block using .usp-div-shop class.
   They were visible on the live Flatsome site. Ensure they show on WoodMart. */
.usp-div-shop {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important;
    padding: 10px 20px !important;
    flex-wrap: wrap !important;
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
}
.usp-div-shop .usp-span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #2d3748 !important;
}
/* WoodMart header builder section containing USP */
.wd-header .usp-div-shop {
    border-bottom: none !important;
}

/* ── FIX: custom-badge-wrapper — ensure display and z-index work on WoodMart cards ── */
.custom-badge-wrapper {
    top: 8px !important;
    right: 8px !important;
    z-index: 9 !important;
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    pointer-events: none !important;
}
.custom-badge {
    font-size: 0.65em !important;
    border-radius: 4px !important;
    background: #163A55 !important;
    color: #fff !important;
    padding: 2px 7px !important;
    white-space: nowrap !important;
    display: block !important;
}
/* WoodMart product cards need position:relative */
.wd-products .product-image-wrapper,
.wd-products .product.type-product,
li.product .product-image-wrapper {
    position: relative !important;
}

/* ── FIX: Price label consistency ──
   DevTools shows the price is in:
   p.price.pewc-main-price > span.pewc-label-before + span.woocommerce-Price-amount
   
   The "Pris" label comes from: 
   1) woodmart_single_product_price block in the .kf-sticky col — already styled navy bg
   2) pewc-label-before span — may be empty on some products
   
   Goal: price always shows as "Pris X,XXXkr" in the navy sticky box */
.kf-sticky .pewc-label-before {
    display: inline !important;
    color: rgba(255,255,255,.75) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-right: 4px !important;
}
/* If pewc-label-before is empty (non-PEWC products), show "Pris" via ::before */
.kf-sticky .price .pewc-main-price .pewc-label-before:empty::before {
    content: "Pris" !important;
    color: rgba(255,255,255,.75) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
/* Ensure the price amount in sticky col is always yellow */
.kf-sticky .price .woocommerce-Price-amount,
.kf-sticky .price bdi,
.kf-sticky .woocommerce-Price-amount.amount {
    color: #FFEB34 !important;
    font-size: 28px !important;
    font-weight: 900 !important;
}
.kf-sticky .price del .woocommerce-Price-amount {
    color: rgba(251,215,44,0.5) !important;
    font-size: 14px !important;
}
/* "Du sparar" in sticky */
.kf-sticky .wd-saving-label,
.kf-sticky .saving-label,
.kf-sticky .price .price-suffix {
    color: rgba(255,255,255,.7) !important;
    font-size: 12px !important;
    display: block !important;
}

/* ── FIX: Mobile sticky bar — FULL REDESIGN to match reference screenshot ──
   Reference shows: white/light bg | "Du sparar: X kr" + "Ditt pris: X kr" | cart button
   We keep the .ax-mobile-cta structure from the WPBakery layout.
   
   To HIDE WoodMart's own mobile bottom nav bar on single product pages,
   go to: WoodMart → Theme Settings → General → Mobile bottom navbar → OFF
   
   Our replacement bar is always visible at bottom. */

@media (max-width: 767px) {
    /* Override the inline CSS from the vc_raw_html block */
    .single-product .ax-mobile-cta {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
        /* Match reference: white background, top shadow */
        background: #fff !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,.12) !important;
        padding: 10px 16px 12px !important;
        border-top: 1px solid #e8edf2 !important;
    }
    .ax-cta-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        max-width: 480px !important;
        margin: 0 auto !important;
    }
    .ax-cta-info {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
    }
    /* Price display - "Ditt pris: X,XXX kr" */
    #ax-mobile-price {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #163A55 !important;
        line-height: 1.2 !important;
    }
    #ax-mobile-price .woocommerce-Price-amount {
        color: #163A55 !important;
        font-weight: 900 !important;
    }
    /* Savings line above price */
    .ax-mobile-save-label {
        font-size: 11px !important;
        color: #64748b !important;
        margin-bottom: 2px !important;
    }
    .ax-cta-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    /* Qty group */
    .ax-qty-group {
        display: flex !important;
        align-items: center !important;
        border: 1.5px solid #163A55 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        height: 44px !important;
    }
    .ax-qty-group button {
        width: 36px !important;
        height: 100% !important;
        border: none !important;
        background: #f0f4f7 !important;
        font-weight: 700 !important;
        font-size: 18px !important;
        cursor: pointer !important;
        color: #163A55 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #ax-qty-mobile {
        width: 38px !important;
        text-align: center !important;
        border: none !important;
        background: #fff !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        color: #163A55 !important;
        height: 100% !important;
    }
    /* Cart icon button — navy circle */
    #ax-btn-submit-mobile {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        background: #163A55 !important;
        color: #fff !important;
        border: none !important;
        font-size: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        box-shadow: 0 2px 8px rgba(22,58,85,.3) !important;
        transition: background .15s !important;
    }
    #ax-btn-submit-mobile:hover { background: #0f2a3f !important; }
    /* Space so page content doesn't go under the bar */
    body.single-product { padding-bottom: 80px !important; }
}

/* ── FIX: Hide WoodMart mobile bottom navbar on single product pages ──
   This conflicts with our .ax-mobile-cta bar. 
   User should also set: WoodMart → Theme Settings → General → Mobile bottom navbar → OFF */
@media (max-width: 767px) {
    .single-product .wd-bottom-bar,
    .single-product .wd-mobile-bottom-bar {
        display: none !important;
    }
}

/* ── FIX: PEWC addon options on mobile — fix image card sizing ── */
@media (max-width: 767px) {
    .pewc-radio-image-wrapper,
    .pewc-checkbox-image-wrapper {
        padding: 8px 6px 6px !important;
    }
    .pewc-radio-image-wrapper img,
    .pewc-checkbox-image-wrapper img {
        max-height: 80px !important;
        min-height: 50px !important;
    }
    .pewc-radio-image-desc {
        font-size: 10px !important;
    }
    .pewc-radio-image-wrapper .pewc-child-product-price,
    .pewc-checkbox-image-wrapper .pewc-child-product-price {
        font-size: 10px !important;
    }
}

/* ── FIX: PEWC price label position — price on new line after name ── */
/* Make the price-wrapper always block so name + price stack vertically */
.pewc-radio-image-wrapper .pewc-child-product-price-label,
.pewc-radio-image-wrapper .pewc-price-wrapper,
.pewc-checkbox-image-wrapper .pewc-child-product-price-label,
.pewc-checkbox-image-wrapper .pewc-price-wrapper {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 4px !important;
}

/* ── FIX: Custom badge z-index (WoodMart product card hover state) ── */
.wd-products li.product:hover .custom-badge-wrapper,
li.product:hover .custom-badge-wrapper {
    z-index: 20 !important;
}


/* ================================================================
   KF FINAL COMPREHENSIVE PATCH
   Fixes: PEWC accordion bleeding, sticky column, card styling,
          ATC hide (safe), mobile bar, price display
   Based on: previous custom CSS analysis + WPBakery layout code
   ================================================================ */

/* ────────────────────────────────────────────────────────────
   1. STICKY RIGHT COLUMN (1/3 col, el_class="kf-sticky")
   
   WPBakery row = display:flex on desktop.
   For position:sticky to work on a flex child:
   - parent must NOT have overflow:hidden/auto
   - child needs align-self:flex-start
   
   The WPBakery column wrapper is:
   .wpb_column.kf-sticky.vc_col-sm-4
     > .vc_column-inner
       > .wpb_wrapper (content here)
   
   We target the outer .kf-sticky which is the flex child.
────────────────────────────────────────────────────────────── */
@media (min-width: 993px) {
    /* The WPBakery row container must not clip sticky children */
    .single-product .vc_row .vc_row-fluid,
    .single-product .vc_row-fluid,
    .single-product .wpb_row,
    .single-product .vc_column_container {
        overflow: visible !important;
    }

    /* Apply sticky to the outer WPBakery column wrapper */
    .single-product .wpb_column.kf-sticky,
    .single-product .kf-sticky.vc_column_container,
    .single-product div.kf-sticky {
        position: sticky !important;
        top: 90px !important;
        align-self: flex-start !important;
        z-index: 50 !important;
        /* max-height prevents sticky col from being taller than viewport */
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
        overflow-x: visible !important;
        scrollbar-width: none !important; /* Hide scrollbar */
    }
    .single-product div.kf-sticky::-webkit-scrollbar { display: none !important; }
}

/* ────────────────────────────────────────────────────────────
   2. PEWC ACCORDION — prevent text bleeding through closed tabs
   
   PEWC adds/removes CSS classes and inline styles when opening/closing groups.
   When closed, the .pewc-group-content-wrapper gets hidden.
   But descriptions (.pewc-item .pewc-item-title, .pewc-field-description)
   sometimes show outside the content wrapper.
   
   Fix: ensure all content below the heading is invisible when group is closed.
   PEWC adds class like `pewc-open` or uses style="display:none" on content.
────────────────────────────────────────────────────────────── */

/* Card container — match prev CSS style */
.pewc-radio-image-wrapper,
.pewc-checkbox-image-wrapper {
    border: 2px solid #f2f2f2 !important;
    border-radius: 12px !important;
    padding: 8px !important;
    background: #fff !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-sizing: border-box !important;
}
.pewc-radio-image-wrapper:hover,
.pewc-checkbox-image-wrapper:hover {
    border-color: #193A56 !important;
    background: #f8fafc !important;
    box-shadow: 0 4px 12px rgba(25,58,86,.10) !important;
}

/* Selected state */
.pewc-radio-image-wrapper:has(input:checked),
.pewc-checkbox-image-wrapper:has(input:checked),
.pewc-radio-image-wrapper.pewc-checked,
.pewc-checkbox-image-wrapper.pewc-checked {
    border: 2px solid #193A56 !important;
    background: #f0f4f8 !important;
    box-shadow: 0 0 0 3px rgba(25,58,86,.15) !important;
}

/* Checkmark badge */
.pewc-radio-image-wrapper:has(input:checked)::after,
.pewc-radio-image-wrapper.pewc-checked::after {
    content: "¹3" !important;
    position: absolute !important;
    top: 8px !important; right: 8px !important;
    width: 20px !important; height: 20px !important;
    background: #193A56 !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
    line-height: 1 !important;
}

/* Images — keep aspect ratio, no opacity override */
.pewc-radio-image-wrapper img,
.pewc-radio-image-wrapper label picture img,
.pewc-checkbox-image-wrapper img,
.pewc-checkbox-image-wrapper label picture img {
    width: 100% !important;
    height: auto !important;
    max-height: 110px !important;
    min-height: 50px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    display: block !important;
    margin: 0 auto !important;
    border: none !important;
    background: #f5f7f9 !important;
    /* NO opacity/visibility override — custom-products.js controls those */
}

/* Labels inside cards */
.pewc-radio-image-wrapper label,
.pewc-checkbox-image-wrapper label {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    cursor: pointer !important;
}

/* Option name text */
.pewc-radio-image-desc {
    display: block !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-top: 6px !important;
    line-height: 1.3 !important;
    width: 100% !important;
}

/* Price on its own line, clearly separated */
.pewc-radio-image-wrapper .pewc-child-product-price,
.pewc-radio-image-wrapper .pewc-child-product-price-label,
.pewc-checkbox-image-wrapper .pewc-child-product-price,
.pewc-checkbox-image-wrapper .pewc-child-product-price-label {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #193A56 !important;
    margin-top: 3px !important;
    padding-top: 3px !important;
    border-top: 1px solid rgba(25,58,86,.08) !important;
    clear: both !important;
}
.pewc-radio-image-wrapper .woocommerce-Price-amount,
.pewc-checkbox-image-wrapper .woocommerce-Price-amount {
    display: inline !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #193A56 !important;
}

/* ────────────────────────────────────────────────────────────
   4. STICKY CTA CARD STYLING
   From the WPBakery layout: .kf-sticky-cta contains
   qty pill (.kf-qty-pill) + ATC button (.kf-cta-btn)
   Matches the previous custom CSS look
────────────────────────────────────────────────────────────── */
.single-product .kf-sticky-cta {
    background: #fff !important;
    border: 1px solid rgba(17,17,17,.10) !important;
    border-radius: 14px !important;
    padding: 14px !important;
}
.single-product .kf-cta-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

/* Qty pill */
.single-product .kf-qty-pill {
    display: flex !important;
    align-items: center !important;
    border: 1px solid rgba(17,17,17,.14) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    height: 44px !important;
    background: #fff !important;
}
.single-product .kf-qty-btn {
    width: 44px !important;
    height: 44px !important;
    border: none !important;
    background: transparent !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    color: #111 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.single-product .kf-qty-btn:hover { background: #f5f5f5 !important; }
.single-product .kf-qty-input {
    width: 54px !important;
    height: 44px !important;
    border: none !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    outline: none !important;
    padding: 0 !important;
    background: transparent !important;
    -moz-appearance: textfield !important;
    color: #111 !important;
}
.single-product .kf-qty-input::-webkit-outer-spin-button,
.single-product .kf-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ATC button — from prev CSS */
.single-product .kf-cta-btn {
    width: 100% !important;
    background: #183752 !important;
    color: #FFEB34 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    display: block !important;
    text-align: center !important;
    transition: filter .15s ease !important;
}
.single-product .kf-cta-btn:hover { filter: brightness(.95) !important; }
.single-product .kf-cta-btn.loading {
    pointer-events: none !important;
    opacity: .92 !important;
    padding-right: 44px !important;
}
.single-product .kf-cta-btn.loading::after {
    content: "" !important;
    position: absolute !important;
    right: 16px !important; top: 50% !important;
    width: 14px !important; height: 14px !important;
    margin-top: -7px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,235,52,.4) !important;
    border-top-color: #FFEB34 !important;
    animation: kfSpin .8s linear infinite !important;
}
@keyframes kfSpin { to { transform: rotate(360deg); } }

.single-product .kf-cta-note {
    margin-top: 8px !important;
    font-size: 12px !important;
    color: #64748b !important;
    text-align: center !important;
}

/* ────────────────────────────────────────────────────────────
   5. HIDE STANDARD WC ATC ON DESKTOP (SAFE VERSION)
   Only hide the button and default qty, NOT variations or PEWC
────────────────────────────────────────────────────────────── */
@media (min-width: 993px) {
    /* Hide default WC qty+button only — NOT PEWC groups or variation selects */
    .single-product form.cart > div.quantity,
    .single-product form.cart .single_add_to_cart_button {
        display: none !important;
    }
    /* But show them inside the kf-sticky column (handled by .kf-cta-btn there) */
}

/* ────────────────────────────────────────────────────────────
   6. PEWC TOTAL PRICE — navy bar with yellow amount
────────────────────────────────────────────────────────────── */
.single-product .pewc-total-only {
    background: #163A55 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    margin: 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.single-product #pewc-grand-total-label {
    color: rgba(255,255,255,.75) !important;
    font-size: 13px !important;
}
.single-product .pewc-total-field {
    color: #FFEB34 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    float: none !important;
}
.single-product .pewc-total-field .woocommerce-Price-amount {
    color: #FFEB34 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    background: transparent !important;
}

/* ────────────────────────────────────────────────────────────
   7. MOBILE STICKY BAR — always visible, navy/yellow design
   The .ax-mobile-cta in WPBakery layout has its own inline CSS
   (bottom:65px from the encoded HTML).
   We override to make it bottom:0 and always visible.
────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .single-product .ax-mobile-cta {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;       /* was 65px in inline CSS */
        left: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
        background: #fff !important;
        box-shadow: 0 -3px 16px rgba(0,0,0,.15) !important;
        padding: 10px 16px 14px !important;
        border-top: 1px solid #e8ecf0 !important;
    }
    /* Ensure the bar is appended to body by the layout JS */
    body.single-product { padding-bottom: 80px !important; }
    
    /* Hide WoodMart's own mobile bottom bar */
    body.single-product .wd-bottom-bar,
    body.single-product .wd-mobile-bottom-bar,
    body.single-product .wd-sticky-atc { display: none !important; }
}

/* ────────────────────────────────────────────────────────────
   8. PEWC GROUP GRID — 2x2 always (per previous working version)
────────────────────────────────────────────────────────────── */
.pewc-radio-images-wrapper,
.pewc-checkboxes-images-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
}

/* ────────────────────────────────────────────────────────────
   9. VARIATION TABLE — 2-col grid (from prev custom CSS)
────────────────────────────────────────────────────────────── */
.single-product table.variations tbody {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    width: 100% !important;
}
.single-product table.variations tr {
    display: flex !important;
    flex-direction: column !important;
    border: none !important;
}
.single-product table.variations td.label {
    display: block !important;
    width: 100% !important;
    padding: 0 0 6px !important;
    border: none !important;
    font-weight: 600 !important;
}
.single-product table.variations td.value {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
}
.single-product table.variations tr td:before { display: none !important; }

/* ────────────────────────────────────────────────────────────
   10. MOBILE RESPONSIVE — product options
────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .single-product table.variations tbody {
        grid-template-columns: 1fr !important;
    }
    .pewc-radio-image-wrapper img,
    .pewc-checkbox-image-wrapper img {
        max-height: 80px !important;
    }
    .pewc-radio-image-desc {
        font-size: 10px !important;
    }
}


/* ================================================================
   TARGETED FIX — Accordion bleed + Mobile bar
   ================================================================ */

/* ── MOBILE STICKY BAR — JavaScript override ──
   The vc_raw_html inline <style> uses bottom:65px!important which wins
   over our external stylesheet. Fix via JS (see pewc-init.js update).
   CSS-only fallback with maximum specificity: */

html body.single-product .ax-mobile-cta {
    bottom: 0 !important;
}

/* ================================================================
   PEWC VISUAL STYLING — Safe version
   
   RULE: We NEVER set display, visibility, overflow, height, or
   max-height on PEWC group-wrap or group-content-wrapper.
   PEWC's own JavaScript controls show/hide completely.
   We only change colours, borders, fonts, and layout of OPEN cards.
   ================================================================ */

/* ── Group heading — navy accordion header ── */
div[class^="pewc-group-wrap"] .pewc-group-heading-wrapper,
div[class*="pewc-group-wrap"] .pewc-group-heading-wrapper {
    background: #163A55 !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    margin-bottom: 2px !important;
    cursor: pointer !important;
}
div[class^="pewc-group-wrap"] .pewc-group-heading-wrapper h3,
div[class*="pewc-group-wrap"] .pewc-group-heading-wrapper h3 {
    color: #fff !important;
    background: transparent !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
}

/* ── Remove PEWC default borders/shadows ── */
.pewc-group-wrap,
.pewc-group-content-wrapper,
.pewc-item,
.pewc-item-field-wrapper,
.pewc-item::before,
.pewc-item::after {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ── Image option card grid — 2×2 ── */
.pewc-radio-images-wrapper,
.pewc-checkboxes-images-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 10px !important;
}

/* ── Individual option card (visual only) ── */
.pewc-radio-image-wrapper,
.pewc-checkbox-image-wrapper {
    border: 2px solid #f2f2f2 !important;
    border-radius: 12px !important;
    padding: 8px !important;
    background: #fff !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
    cursor: pointer !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-sizing: border-box !important;
}
.pewc-radio-image-wrapper:hover,
.pewc-checkbox-image-wrapper:hover {
    border-color: #193A56 !important;
    background: #f8fafc !important;
    box-shadow: 0 4px 12px rgba(25,58,86,.10) !important;
}

/* Selected card */
.pewc-radio-image-wrapper:has(input:checked),
.pewc-checkbox-image-wrapper:has(input:checked),
.pewc-radio-image-wrapper.pewc-checked,
.pewc-checkbox-image-wrapper.pewc-checked {
    border: 2px solid #193A56 !important;
    background: #f0f4f8 !important;
    box-shadow: 0 0 0 3px rgba(25,58,86,.15) !important;
}

/* Checkmark badge on selected radio */
.pewc-radio-image-wrapper:has(input:checked)::after,
.pewc-radio-image-wrapper.pewc-checked::after {
    content: "¹3" !important;
    position: absolute !important;
    top: 8px !important; right: 8px !important;
    width: 20px !important; height: 20px !important;
    background: #193A56 !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
    line-height: 1 !important;
}

/* Labels inside cards */
.pewc-radio-image-wrapper label,
.pewc-checkbox-image-wrapper label {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    cursor: pointer !important;
}

/* Images — size/display only, NO opacity override */
.pewc-radio-image-wrapper img,
.pewc-radio-image-wrapper label picture img,
.pewc-checkbox-image-wrapper img,
.pewc-checkbox-image-wrapper label picture img {
    width: 100% !important;
    height: auto !important;
    max-height: 110px !important;
    min-height: 50px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    display: block !important;
    margin: 0 auto !important;
    border: none !important;
    background: #f5f7f9 !important;
}

/* Option name */
.pewc-radio-image-desc {
    display: block !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-top: 6px !important;
    line-height: 1.3 !important;
    width: 100% !important;
}

/* Price on its own line */
.pewc-radio-image-wrapper .pewc-child-product-price,
.pewc-radio-image-wrapper .pewc-child-product-price-label,
.pewc-checkbox-image-wrapper .pewc-child-product-price,
.pewc-checkbox-image-wrapper .pewc-child-product-price-label {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #193A56 !important;
    margin-top: 3px !important;
    padding-top: 3px !important;
    border-top: 1px solid rgba(25,58,86,.08) !important;
}
.pewc-radio-image-wrapper .woocommerce-Price-amount,
.pewc-checkbox-image-wrapper .woocommerce-Price-amount {
    display: inline !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #193A56 !important;
}

/* Hide separator dots */
.pewc-separator { display: none !important; }
.pewc-theme-element { display: none !important; }

/* PEWC total price — navy bar */
.single-product .pewc-total-only {
    background: #163A55 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    margin: 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.single-product #pewc-grand-total-label {
    color: rgba(255,255,255,.75) !important;
    font-size: 13px !important;
}
.single-product .pewc-total-field {
    color: #FFEB34 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    float: none !important;
}
.single-product .pewc-total-field .woocommerce-Price-amount {
    color: #FFEB34 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    background: transparent !important;
}

/* Sub-prices inside groups */
.pewc-group-wrap .woocommerce-Price-amount,
.pewc-item .pewc-child-product-price,
.pewc-child-product-price-label {
    color: #193A56 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

/* ── Mobile: keep 2-col grid ── */
@media (max-width: 600px) {
    .pewc-radio-images-wrapper,
    .pewc-checkboxes-images-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .pewc-radio-image-wrapper img,
    .pewc-checkbox-image-wrapper img {
        max-height: 80px !important;
    }
    .pewc-radio-image-desc { font-size: 10px !important; }
}


/* ================================================================
   REMAINING TARGETED FIXES
   ================================================================ */

/* ── FIX 1: Glastyper grid — 3 columns on desktop, 2 on mobile ──
   The reference screenshot shows a clean 3-col grid.
   Our grid was set to repeat(2,1fr) everywhere which looked cramped.
   On desktop 3-col matches the original site; 2-col on mobile is fine. */
@media (min-width: 600px) {
    .pewc-radio-images-wrapper,
    .pewc-checkboxes-images-wrapper {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
}
/* Keep 2-col for explicitly 2-column groups */
@media (min-width: 600px) {
    .pewc-radio-images-wrapper.pewc-columns-2,
    .pewc-checkboxes-images-wrapper.pewc-columns-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
/* Mobile always 2-col */
@media (max-width: 599px) {
    .pewc-radio-images-wrapper,
    .pewc-checkboxes-images-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

/* ── FIX 2: Scroll jump after selecting addon option ──
   WoodMart or PEWC fires a scroll event when a variation/option is selected.
   Disable smooth scroll for PEWC interactions on the product page. */
.single-product html,
.single-product body {
    scroll-behavior: auto !important;
}
/* Prevent PEWC's jQuery animations from causing scroll jumps */
.pewc-group-content-wrapper {
    scroll-margin-top: 0 !important;
}
.pewc-item:focus,
.pewc-item:focus-within,
.pewc-radio-image-wrapper:focus,
.pewc-checkbox-image-wrapper:focus {
    scroll-margin-top: 0 !important;
}

/* ── FIX 3: Mobile sticky bar number input — hide native spinner arrows ──
   #ax-qty-mobile is type="number" which shows browser native up/down arrows.
   These don't work with our custom +/- buttons and look bad. */
#ax-qty-mobile {
    -moz-appearance: textfield !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
#ax-qty-mobile::-webkit-outer-spin-button,
#ax-qty-mobile::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

/* ── FIX 4: Mobile sticky bar visual cleanup ──
   Make the bar cleaner to match reference screenshot (image 5) */
@media (max-width: 767px) {
    .ax-cta-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }
    .ax-cta-info { flex: 1 !important; }
    #ax-mobile-price {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #163A55 !important;
        white-space: nowrap !important;
    }
    .ax-cta-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }
    .ax-qty-group {
        display: flex !important;
        align-items: center !important;
        border: 1.5px solid #163A55 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        height: 40px !important;
    }
    .ax-qty-group button {
        width: 34px !important;
        height: 38px !important;
        border: none !important;
        background: #f0f4f7 !important;
        font-weight: 700 !important;
        font-size: 18px !important;
        cursor: pointer !important;
        color: #163A55 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }
    #ax-qty-mobile {
        width: 36px !important;
        text-align: center !important;
        border: none !important;
        background: #fff !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        color: #163A55 !important;
        height: 38px !important;
        padding: 0 !important;
    }
    #ax-btn-submit-mobile {
        width: 46px !important;
        height: 46px !important;
        border-radius: 10px !important;
        background: #163A55 !important;
        color: #fff !important;
        border: none !important;
        font-size: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }
}

/* =====================================================
   SESSION 3 FIXES
   ===================================================== */

/* Fix: Hide qty controls on addon items in checkout order summary */
.woocommerce-checkout .product-quantity .quantity {
    display: none !important;
}

/* Fix: Hide Photoswipe/lightbox text leak on non-product pages */
body:not(.single-product) .pswp__caption,
body:not(.single-product) .pswp__ui--fit .pswp__top-bar {
    display: none !important;
}

/* Fix: ATC button spinner stuck state — add visual feedback */
.single_add_to_cart_button.loading {
    pointer-events: none;
    opacity: 0.7;
}


/*************** CTA elements from bakery library styling   ***************/
.cta-contact {
    color:#fff !important;
    background-color:#043b58 !important;
}
.cta-contact h2 {
    color:#fff !important;

}

#cta-btn-contact a {
    color:#043b58;
    background-color:#fee94a !important;
    border:none;
}
#cta-btn-contact a:hover {
    background-color:#efdf65 !important;
}

.cta-webshop {
    color:#000000 !important;
    background-color:#fee94a !important;
}

#cta-btn-webshop a {
    color:#fff;
    background-color:#043b58 !important;
    border:none;
}
#cta-btn-webshop a:hover {
    background-color:#1d5674 !important;
}

.usp-img-text h3 {
    font-size: 18px;
    text-align: left;
    font-family: Raleway;
    font-weight: 500;
    font-style: normal;
    margin-top:1em;
}