body {
  overflow-x: clip !important;
}
#place_order{margin-bottom: 90px !important}
@font-face {
    font-family: 'Apex New';
    src: url('fonts/ApexNew-Bold.woff2') format('woff2'),
        url('fonts/ApexNew-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Apex New';
    src: url('fonts/ApexNew-BoldItalic.woff2') format('woff2'),
        url('fonts/ApexNew-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Apex New Book';
    src: url('fonts/ApexNew-Book.woff2') format('woff2'),
        url('fonts/ApexNew-Book.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Apex New Book';
    src: url('fonts/ApexNew-BookItalic.woff2') format('woff2'),
        url('fonts/ApexNew-BookItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Apex New';
    src: url('fonts/ApexNew-Heavy.woff2') format('woff2'),
        url('fonts/ApexNew-Heavy.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Apex New';
    src: url('fonts/ApexNew-Medium.woff2') format('woff2'),
        url('fonts/ApexNew-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Apex New';
    src: url('fonts/ApexNew-LightItalic.woff2') format('woff2'),
        url('fonts/ApexNew-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Apex New';
    src: url('fonts/ApexNew-HeavyItalic.woff2') format('woff2'),
        url('fonts/ApexNew-HeavyItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Apex New';
    src: url('fonts/ApexNew-Light.woff2') format('woff2'),
        url('fonts/ApexNew-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Apex New';
    src: url('fonts/ApexNew-MediumItalic.woff2') format('woff2'),
        url('fonts/ApexNew-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Apex New';
    src: url('fonts/ApexNew-Thin.woff2') format('woff2'),
        url('fonts/ApexNew-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Apex New';
    src: url('fonts/ApexNew-ThinItalic.woff2') format('woff2'),
        url('fonts/ApexNew-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Apex New Ultra';
    src: url('fonts/ApexNew-Ultra.woff2') format('woff2'),
        url('fonts/ApexNew-Ultra.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Apex New Ultra';
    src: url('fonts/ApexNew-UltraItalic.woff2') format('woff2'),
        url('fonts/ApexNew-UltraItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* hide login button when logged in */
.logged-in .loginbtn {
display: none !important;
}

/* hide logout button when logged out */
.logoutbtn {
display: none !important;
}

/* show logout button when logged in */
.logged-in .logoutbtn {
display: flex !important;
}

/* Show login button in the mobile menu */
body.et-fb .loginbtn {
display: flex !important;
}

.woocommerce-ordering, .woocommerce-result-count {display: none !important;}
.page-header-overlay-color::after {

  opacity: .45;
}
.footerlogo{max-width: 250px !important;}
#footercontact{margin-top: 90px;}
#footer-outer #footer-widgets .widget h4{font-size: 18px;}

.nectar_icon_wrap[data-style="shadow-bg"].socialiconfooter:not([data-color="white"]) .nectar_icon i{
  color: #000 !important;
}
.nectar_icon_wrap[data-style="shadow-bg"].socialiconfooter:not([data-color="white"]) .nectar_icon {
background-color: #ffffff !important;border-radius: 50px;line-height: 37.5px;height: 37.5px;width: 37.5px;
}

#header-outer.dark-slide{ 
   /*backdrop-filter: blur(12px) !important;*/ 
   background: linear-gradient(to top,rgba(255,255,255,0) 0,rgba(0,0,0,0) 1%,rgba(0,0,0,0.04) 16%,rgba(0,0,0,0.23) 75%,rgba(0,0,0,0.33) 100%) !important;
background: linear-gradient( to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0.35) 36%, rgba(255, 255, 255, 0.72) 75%, rgba(255, 255, 255, 1) 100% ) !important;
}
.home .container-wrap{background-color: #000 !important;}
.div-with-max-width{display: block !important;}
#header-outer .nectar-global-section-megamenu{background-color: transparent !important;}
.megamenu-border-radius{border-top-left-radius: 10px;border-bottom-left-radius: 10px;}
.megamenu-border-radius #menu-menu-section{padding: 0;}
.menu-content #menu-menu-section li a{font-size: 16px !important;}
.menu-content .wpb_text_column{font-size: 14px !important;line-height: 22px;}
.refmega .menu-item-hidden-text{min-height: 300px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;}
.refmega .sub-menu{border-radius: 10px;}
.refmega .sub-menu > .sub-menu{font-size: 16px;}
.menutext .menu-title-text{font-size: 14px;}

.refmega .menu-item-hidden-text{width: 400px;}
.formenuwidths{max-width: 180px;padding-left: 30px;}
.boldmenu > a > span{font-weight: 600 !important;}

.nectar-fancy-box[data-style="color_box_basic"] .inner{align-items: flex-end;
  display: flex;}
  .nectar-fancy-box[data-style="color_box_basic"]{padding: 40px 40px 40px 60px;}
  .nectar-fancy-box[data-style="color_box_basic"] .inner h3{font-size: 40px;font-weight: 400;}


  .right_padding_desktop_4pct{padding-right: 4% !important;}

  body .container-wrap .inner_row[data-column-margin="90px"] .child_column{padding-left: 45px;
  padding-right: 45px;}
    body .container-wrap .inner_row[data-column-margin="60px"] .child_column{padding-left: 1%;
  padding-right: 45px;}

  .single-product h1{font-size: 30px !important;}

  #graysection-single{margin-top: 40px;margin-bottom: 40px;}
  .nospaceleft{padding-left: 1% !important;}
  .prod-tabs .wpb_tabs_nav{display: flex;justify-content: space-between;}
  .prod-tabs .tab-item a{padding-left: 0 !important;padding-right: 20px !important;}
  .prod-tabs .wpb_tabs_nav::before, #tab-videos::before , #tab-videos::after{
  position: absolute; /* new */

  content: "";
  height: 100%;
  width: 100%;
  opacity: 0;
}
.split-features .vc_column-inner .wpb_wrapper{columns: 2;column-gap: 40px;}
.iwithtext{display:inline-block;}

.larger-text{text-transform: uppercase;font-size: 22px;margin-bottom: 30px !important;}
.conditions{}

.parent-pageid-6262 .nectar_hook_global_section_footer .first-section{background-color: #000;}
.parent-pageid-6262 .nectar_hook_global_section_footer .nectar-scrolling-text-inner{color: #ffffff !important;}
.parent-pageid-6262 .nectar_hook_global_section_footer .vc_row.bottom_margin_5pct {
  margin-bottom: 0 !important;
}
.woocommerce-breadcrumb{display: none !important;}
.extrah3marginbottom h3{padding-bottom: 0.8em;font-weight: 500 !important;}
#tab-videos {display: flex !important;justify-content: space-between;flex-wrap: wrap;gap: 5%;}
#tab-videos .videos-layout{flex: 0 0 30%;}
.nectar-video-box{margin-bottom: 20px !important;}

.staggs-popup-active #header-outer{z-index: 0 !important;}
.staggs-configurator-main .tooltip span {color: #ffffff;}
.woocommerce-page .staggs-configurator-main button[type="submit"].single_add_to_cart_button {
  margin-top: 0;
}

.um a.um-button, .um input[type=submit].um-button, .um input[type=submit].um-button:focus{background: #000 !important;color: #ffffff !important;border-radius: 200px !important;}

.nectar-social.fixed.woo {display: none !important;}
.staggs-configurator-popup .staggs-product-view .staggs-view-gallery__image img {
  max-height: 60vh !important;
}

.staggs-configurator-bottom-bar div.staggs-cart-form-button {
  margin-bottom: 80px;
}

.staggs-product-options .option-group-title .title{font-family: ivymode;font-weight: 600;}
 .staggs-product-options .option-group-summary {
    font-size: 14px;
    padding-top: 5px !important;
  }
  .staggs-configurator-main .staggs-product-options .required-indicator {
display: none !important;
}
.staggs-full .option-group-wrapper, .staggs-stepper .option-group-wrapper, .staggs-splitter .option-group-wrapper {
  background-color: #f6f6f6 !important;
}
.staggs-product-options.border-squared .option-group-options.icons .icon img, .staggs-product-options.border-squared .option-group-options.icons .icon{border-radius: 50px !important;}
.option-group-wrapper .option-group.total {
  z-index: 5;
  margin: 30px 40px;
}
 .option-group-wrapper label .option {background-color: #fff !important;}
 .option-name .option-label{font-weight: 600;}
 .option-content .option-note{font-size: 14px;line-height: 20px;}

 .nectar-slide-in-cart.style_slide_in_click {
  background-color: #fff !important;
}
body .nectar-slide-in-cart.style_slide_in_click .header > span, body .nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart, body .nectar-slide-in-cart.style_slide_in_click .widget_shopping_cart .cart_list.woocommerce-mini-cart .mini_cart_item a{color: #000 !important;}
.material .style_slide_in_click .close-cart::before{background-color: rgb(0, 0, 0) !important;}

.button.staggs-configure-product-button{
  background-color: #000 !important;
  padding: 20px 40px !important;
  font-size: 18px !important;
  font-weight: 300 !important ;

border-radius: 25px !important;
}
.cart_item .product-info{position: relative;}
.cart_item .product-info .woocommerce-Price-amount{}
.cart_item .product-info small{/*position: absolute;bottom: 0;right: 0;max-width: 25%;*/font-size: 14px;line-height: 18px;text-align: right;}

.woocommerce-checkout-review-order-table .product-image {

  display: none;
}.woocommerce-checkout-review-order-table .product-info {
  padding-right: 0px;
  float: right;
  width: 100%;
}

.staggs-summary-widget .staggs-summary-title{margin-left: -20px;font-family: ivymode;
  font-weight: 600;}


  .staggs-summary-widget .staggs-summary-items{margin-left: -20px;}
    .staggs-summary-widget .staggs-summary-items li{list-style: none;margin-bottom: 10px;display: flex;justify-content: left;}
    .staggs-summary-widget .staggs-summary-items li strong{font-weight: bold;}
    .staggs-summary-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.staggs-summary-items li {
  display: flex;
  align-items: flex-start; /* Align text to the top if it wraps */

}
.staggs-summary-items li p{padding: 0;}
.staggs-summary-items strong {
  min-width: 150px; /* adjust as needed */
  display: inline-block;
}
/*.bottom-bar-right form.cart{display: none;}
.bottom-bar-right .sku_wrapper, .staggs-configurator-bottom-bar{display: none !important;}*/
  .staggs-configurator-popup.popup-vertical .staggs-product-view {
    padding: 80px 0 0px 0px !important;
  }
  body:not(.logged-in) .staggs-configurator-popup.popup-vertical .staggs-product-view {
    padding: 30px 0 0px 0px !important;
  }
  
  .staggs-configurator-popup .staggs-configurator-bottom-bar .bottom-bar-right{position: absolute;
  right: 180px;
  bottom: -64px;
  background: #fff;
  padding: 20px !important;
  border-radius: 10px;}
  
   .staggs-configurator-popup.popup-vertical .option-group-wrapper {
  /*  padding-bottom: 330px !important;*/
  }
  
  @media (max-width: 1200px) {
	  
	   .staggs-configurator-popup .staggs-configurator-bottom-bar .bottom-bar-right{ right: 30px;}
  }
  
  
  
  body:not(.logged-in) div.staggs-configurator-bottom-bar {
    /* Your styles here */
    display: none !important;
}

 .sku-message {max-width: 100%;
  margin-top: 5px;
  padding: 10px;
  box-sizing: border-box;

  margin-left: 0px;}


 

  
.sku-message.error{border: 1px solid red}
.sku-message.success{border: 1px solid green}
.sku-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.sku-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
} 

  /* WebKit (Chrome, Safari) */
  #csl-radius-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--kooka-orange);
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -6px; /* Align thumb vertically */
  }

  /* Firefox */
  #csl-radius-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--kooka-orange);
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
  }

  /* Track color for Firefox */
  #csl-radius-input::-moz-range-track {
    background: #444;
    height: 6px;
    border-radius: 3px;
  }

  /* IE */
  #csl-radius-input::-ms-thumb {
    width: 18px;
    height: 18px;
    background: var(--kooka-orange);
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
  }

  #csl-radius-input::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
    height: 6px;
  }
  /* #csl-search is a plain single column now - no flex-wrap/rangecolumnone/
     rangecolumntwo split (removed per direct instruction; the real,
     current single-column styling lives further down this file, under
     "Search controls"). */

/* --- Force WooCommerce Order Action Buttons to Look Like "Configure" Button --- */

.woocommerce table.woocommerce-orders-table {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}

.woocommerce table.woocommerce-orders-table th {
  background: #fafafa;
  color: #111;
  font-weight: 600;
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.woocommerce table.woocommerce-orders-table td,
.woocommerce table.woocommerce-orders-table th {
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  color: #222;
}

/* STACK buttons vertically */
.woocommerce-orders-table__cell-order-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;
}

/* Override all WC button styles */
.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-orders-table__cell-order-actions .woocommerce-button,
.woocommerce-orders-table__cell-order-actions .button.alt,
.woocommerce-orders-table__cell-order-actions .button.view,
.woocommerce-orders-table__cell-order-actions .button.pay {
  display: block !important;
  width: 100% !important;
  background: #000 !important;
  color: #fff !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  padding: 10px 0 !important;
  border-radius: 999px !important;
  text-align: center !important;
  border: none !important;
  font-family: inherit !important;
  line-height: 1.2 !important;
  transition: background-color 0.2s ease !important;
}

/* Hover effect */
.woocommerce-orders-table__cell-order-actions .button:hover {
  background-color: #222 !important;
  color: #fff !important;
}
.woocommerce-MyAccount-content .wc-item-meta{margin-top: 30px;}

.staggs-summary-widget{padding: 20px 40px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background: #fff !important;
  margin: 40px !important;}

#configurator-options .option-group{padding: 20px 20px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background: #fff !important;
  margin: 0px 40px 40px 40px !important;}
  
.staggs-product-options  .option-group.total{padding: 20px 20px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background: #fff !important;
  margin: 0px 40px 40px 40px !important;}
 .staggs-product-options  .option-group.total .sku_wrapper{text-align: center;}
 .staggs-product-options  .option-group.total .sku_wrapper .sku {  font-weight: bold;}
 
  .staggs-product-options  .product_meta .sku_wrapper{text-align: center;}
 .staggs-product-options  .product_meta .sku_wrapper .sku {  font-weight: bold;}

.option-group-wrapper label input:checked + .option{border-width: 2px !important;}
#configurator-options .option-group .option-group-header{padding: 0;}
#configurator-options .option-group .option-group-options{padding: 0;}

.woocommerce-Address-title h2{font-size: 45px;
  line-height: 60px;}
.woocommerce-account .addresses .title .edit{background: #000;
  color: #fff;
  border-radius: 30px;
  padding: 4px 12px;
  font-size: 13px;}


.leaflet-touch .leaflet-bar a{text-decoration: none;}
.woocommerce-table__product-name ul.wc-item-meta {margin-left: 0;
  margin-top: 25px;}

.woocommerce-MyAccount-content h2{margin-bottom: 20px !important}

body.tax-product_cat-accessories ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 30px; /* adjust spacing */
}
body.tax-product_cat-accessories ul.products li.product {
  width: auto !important;
}

.extend-img-width{width: 100% !important;
  max-width: 100vw !important;
  display: block;}
.link_wrap .fa{margin-right: 5px;width: 20px;}


.col-2.is-sticky {
  outline: 2px dashed red !important;
  background: #fff;
}
.col-2.is-sticky {
  z-index: 100;
}
body:not(.woocommerce-order-received) .col2-set{display: flex;
  justify-content: space-between;}
/* Make the sidebar sticky */
body:not(.woocommerce-order-received) .col-2 {
  position: sticky;
  top: 100px;
  align-self: flex-start;
  height: calc(100vh - 120px); /* Viewport height minus top offset and padding */
  overflow: hidden; /* Prevent overflow from child */
}

/* Make order content scrollable within sidebar */
#order_review {
  max-height: 100%;
  overflow-y: auto;
  padding-right: 15px; /* optional scroll gap */
}
/* "Desired Delivery Month" checkout field. Base layout only - the Fratelli
   skin (bordered ivory panel, dark label) is in css/fratelli-woo.css.
   NB: the inherited Artusi version loaded a background image from imgur.com
   (external request on every checkout) with white label text - removed. */
.woocommerce .form-row.custom-delivery-month {
    padding: 18px 20px;
    margin-bottom: 20px;
}
.woocommerce .form-row.custom-delivery-month label {
    font-weight: 500;
    font-size: 13px;
}
.woocommerce .form-row.custom-delivery-month select {
    width: 100%;
    padding: 12px;
    font-size: 15px;
}

.custom-myaccount-sidebar-text{box-shadow: 0px 0px 4px 0px rgba(0,0,0,.5);
  padding: 10px 20px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;}

/* Product loop card - restyled to match the designer's real HTML/CSS reference
   (fratelli-plp-cooktops.html, sent directly - exact CSS values read from its
   <style> block, not measured/approximated from a flattened PDF image like
   the first pass. Card style only, not its markup/class names - applied on
   top of our existing WooCommerce hooks/classes. Colours: --grey-band
   #EDEBE6, --grey-text #65625D, --line #E4E1DA, orange already matches
   --nectar-accent-color, no new value needed. */
ul.products li.product {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-self: stretch;
  min-height: 0;
  background: #fff;
  overflow: hidden;
  border: 1px solid #e4e1da;
  border-radius: 6px;
  box-shadow: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
ul.products li.product:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}
ul.products li.product .product-wrap {
  position: relative;
  height: 220px;
  background: #edebe6;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul.products li.product .product-wrap > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.woocommerce ul.products li.product .product-wrap img, .woocommerce-page ul.products li.product .product-wrap img {
  width: auto !important;
  max-width: 74%;
  max-height: 74%;
  height: auto;
  object-fit: contain;
}
.kpd-new-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--nectar-accent-color);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
}
.kpd-loop-sku {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #65625d;
  font-weight: 500;
  margin: 18px 18px 4px;
}
ul.products li.product .woocommerce-loop-product__title {
  margin: 0 18px 8px !important;
  padding: 0 !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
/* .kpd-loop-sku is only rendered when the product has a SKU, so when it's
   absent the title becomes the element directly after .product-wrap
   (adjacent sibling selector) - give it the SKU line's own top margin so
   spacing above the title stays consistent either way. */
ul.products li.product .product-wrap + .woocommerce-loop-product__title {
  margin-top: 18px !important;
}
.kpd-loop-description {
  margin: 0 18px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #65625d;
}
.kpd-loop-description p {
  margin: 0;
}
.kpd-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 18px 8px;
}
.woocommerce ul.products li.product .kpd-price-row .price, .woocommerce-page ul.products li.product .kpd-price-row .price {
  display: inline-block;
  font-size: 19px;
  font-weight: 800;
  color: #000 !important;
  margin: 0;
}
.woocommerce ul.products li.product .kpd-price-row .kpd-price-unavailable, .woocommerce-page ul.products li.product .kpd-price-row .kpd-price-unavailable {
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  color: #65625d !important;
}
.kpd-rrp-label {
  display: inline-block;
  font-size: 11px;
  color: #65625d;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.kpc-compare-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #65625d;
  cursor: pointer;
  margin: 8px 18px 14px;
}
.kpc-compare-toggle input[type="checkbox"] {
  appearance: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid #c9c6bf;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  flex: none;
  margin: 0;
}
.kpc-compare-toggle input[type="checkbox"]:checked {
  background: var(--nectar-accent-color);
  border-color: var(--nectar-accent-color);
}
.kpc-compare-toggle input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
ul.products li.product .wpb_row {
  margin-top: auto;
  padding: 0 18px 20px;
}
ul.products li.product .wpb_wrapper {
  text-align: center;
}
a.kpd-view-product-btn.nectar-button {
  display: block;
  width: 100%;
  border-radius: 999px !important;
  padding: 12px 28px !important;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
a.kpd-view-product-btn.nectar-button span {
  text-transform: uppercase;
}

/* Background color comes from Salient's own --nectar-accent-color custom
   property (theme's configured Accent Color, Kooka > Accent Colors) - not
   hardcoded here. */
a.kooka-where-to-buy-button.button.alt {
  display: inline-flex;
  align-items: center;
  background-color: var(--nectar-accent-color) !important;
  border-color: transparent !important;
  color: #fff !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 14px;
  padding: 16px 32px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
}
a.kooka-where-to-buy-button.button.alt:hover {
  filter: brightness(0.9);
}

/* Cart icon (nav trigger + slide-in panel) and the category-grid hover
   quick add-to-cart button hidden entirely in brochure mode */
body.kooka-shop-disabled .cart-menu-wrap,
body.kooka-shop-disabled .nectar-slide-in-cart,
body.kooka-shop-disabled .nectar-slide-in-cart-bg,
body.kooka-shop-disabled .product-add-to-cart {
  display: none !important;
}
  .custom-myaccount-sidebar-text p{margin: 0;padding: 0;}

/* Homepage "Complete Home Solution" intro paragraph: nectar_responsive_text's
   max_width sets a fixed-width box but doesn't center it - text inside was
   centered, but the box itself sat flush against the container's left edge. */
.kooka-solution-intro {
  margin-left: auto;
  margin-right: auto;
}

/* Icon grid is inset from the container edges in the design, not full-width
   edge-to-edge like the heading/paragraph above it. */
.kooka-solution-icons-inner {
  max-width: 92%;
  margin-left: auto;
  margin-right: auto;
}
/* Icons were filling the whole column width - design shows a small,
   centered graphic well short of the column's own width. */
.kooka-solution-col .image-wrap {
  max-width: 125px;
  margin-left: auto;
  margin-right: auto;
}

/* "Expert Craftsmanship" section - image cards row */
/* vc_row_inner carries its own negative left/right margins by default,
   causing it to bleed past the container on both sides - same root cause
   as the earlier icon-grid inset issue, just needing the opposite fix
   (zero it out entirely instead of adding more inset) since this row
   should align flush with the container, not sit narrower than it. */
/* Card title/text - fancy_box's image_above_text_underline style just
   outputs our raw <h4>Title</h4>Lorem text content as-is, inheriting the
   site's default serif heading font. Design shows a small bold uppercase
   sans-serif label instead. */
.nectar-fancy-box.nectar-underline .text h4 {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #1a1a1a;
  margin: 20px 0 8px;
}
.nectar-fancy-box.nectar-underline .text {

  
}
.nectar-fancy-box.nectar-underline + .nectar-button {
  margin-top: 16px;
}

/* FRATELLI */
.kooka-solution-icons-inner .nectar-fancy-box[data-style="image_above_text_underline"] .text {
  padding: 20px 0 0 0 !important;font-size: 15px;font-weight: bold;text-transform: uppercase;
}

.nectar-flickity .nectar-fancy-box[data-style="image_above_text_underline"] .text {
  padding: 20px 5vw 0 0 !important;
  text-align: left;
}

/* Fratelli Button - standalone WPBakery element (fratelli_button shortcode,
   include/vc-modules.php + include/vc-mapping.php). Solid accent-colour
   pill, uppercase text left / arrow icon right. Built as its own element
   instead of reusing Salient's nectar_cta arrow-animation style, which
   absolutely-positions its arrow/line and can't be restyled reliably. */
a.fratelli-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  background-color: var(--nectar-accent-color);
  color: #fff !important;
  text-decoration: none !important;
  text-transform: uppercase;
  font-weight: bold !important;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: 999px;
}
a.fratelli-button .fratelli-button-arrow {
  display: inline-flex;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
a.fratelli-button:hover .fratelli-button-arrow {
  transform: translateX(5px);
}
a.fratelli-button .fratelli-button-arrow svg {
  display: block;
}
.nectar-fancy-box .fratelli-button {
  margin-top: 20px;
}

/* Fratelli Trust Bar - standalone WPBakery element (fratelli_trust_bar shortcode,
   include/vc-modules.php + include/vc-mapping.php). Icons are exact vector
   traces pulled from the homepage design PDF's own paths, not hand-drawn
   approximations. Icon set replaced 2026-08-21 (all 4 now share one
   138.2x141.7 viewBox, unlike the old set - no more per-icon size override
   needed). */
.fratelli-trust-bar {
  background-color: #f3f4f4;
  padding: 26px 20px;
}
.fratelli-trust-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 36px;
}
.fratelli-trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.fratelli-trust-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: #1a1a1a;
}
.fratelli-trust-icon svg,
.fratelli-trust-icon img {
  height: 54px;
  width: auto;
  display: block;
}
.fratelli-trust-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: #1a1a1a;
}
.fratelli-trust-divider {
  width: 1px;
  height: 32px;
  background-color: #000;
  flex-shrink: 0;
}
/* <=1100px responsive rules for this component now live in responsive.css,
   not here - see the note there. */

/* Kooka Retailer Logos - standalone WPBakery element (kooka_retailer_logos
   shortcode, include/vc-modules.php + include/vc-mapping.php). "Where To
   Buy" online retailer grid. Full-colour logos, no tinted section
   background - each logo sits in a fixed-size box (not just height-capped)
   so wildly different source aspect ratios (a wide wordmark vs. a squarer
   mark) don't read as visually unbalanced against each other. */
.kooka-retailer-logos {
  padding: 60px 20px;
}
.kooka-retailer-logos-head {
  text-align: center;
  margin-bottom: 40px;
}
.kooka-retailer-logos-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 36px 48px;
}
.kooka-retailer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 60px;
}
.kooka-retailer-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Fratelli 6-column footer (include/footer-widgets.php + child-theme override
   of includes/partials/footer/main-widgets.php) - plain flexbox instead of
   Salient's span_X grid, so the first (logo) column can be wider than the
   other 5 without needing an awkward 12-column fraction. */
#footer-widgets.fratelli-footer-widgets-6col .fratelli-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 30px;
}
#footer-widgets.fratelli-footer-widgets-6col .fratelli-footer-col-wide {
  flex: 0 0 26%;
  max-width: 26%;
  margin-left: -30px;
}
#footer-widgets.fratelli-footer-widgets-6col .fratelli-footer-col {
  flex: 1 1 0;
  min-width: 120px;
}
/* <=999px: switched to CSS grid, see responsive.css - wide column becomes
   its own full-width row (logo left, socials right), other columns wrap
   in an auto-fit grid respecting a min column width instead of fixed
   percentage breakpoints. */


.nectar-fancy-box[data-style="image_above_text_underline"].aspect-1-1 .box-bg {
  padding-bottom: calc((1 / 1) * 100%);
}
body #page-header-bg h1{text-transform: uppercase;}
/* Breadcrumb overlaid on the category page-header hero
   (include/category-hero-breadcrumb.php, salient_shop_header() override).
   Sits before .row (i.e. before the title's .col span_6), reusing Salient's
   own .container class for identical centering/max-width to the H1 below
   it. position:absolute takes it out of normal flow so it doesn't add
   height above .row and disrupt the title's own vertical centering inside
   the fixed-height hero - #page-header-bg is already position:relative in
   Salient's own CSS, so it positions against that. */
.fratelli-category-breadcrumb {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 101;
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.fratelli-category-breadcrumb a,
.fratelli-category-breadcrumb span {
  color: #fff;
  opacity: 0.85;font-weight: 100 !important;
  text-decoration: none;
}
.fratelli-category-breadcrumb a:hover {
  opacity: 1;
  text-decoration: underline;
}
.fratelli-category-breadcrumb-sep {
  margin: 0 8px;
  opacity: 0.6;
}

/* Main menu top-level items only, uppercase - the "Main Menu" aria-label +
   > direct-child chain excludes dropdown/sub-menu items and the separate
   pull-left/pull-right/secondary nav menus, which also use .sf-menu. */
nav[aria-label="Main Menu"] > ul.sf-menu > li > a .nectar-text-reveal-button__text {
  text-transform: uppercase;
}


.kcf-sidebar summary{font-weight: bold;}

/* ============================================================================
   PDP redesign (2026-07-27) - Parts 2-5: Engineered In Detail (tab-nav +
   alternating feature blocks), Technical Specifications accordion, Resources
   card grid, cross-sell "Complete The Kitchen" grid. Values matched directly
   against the designer mockup's own CSS (fratelli-pdp-oven-AON610NB.html),
   not eyeballed - palette/spacing/type-scale pulled from its :root vars and
   .feature-tabs/.specs-section/.resources-section/.cross-sell rules.
   ============================================================================ */

:root {
  /* PDP accent + ink now come from fratelli-tokens.css
     (--accent-primary = garnet #8c1c1c, --text-primary = ink #141311) */
  --pdp-grey-band: #F3F3F1;
  --pdp-grey-text: #65625D;
  --pdp-line: #E4E1DA;
}

.pdp-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4; /* pin: Salient's reset applies line-height:inherit here */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 10px;
}
.pdp-section-heading {
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15; /* pin: don't inherit a broken length from an ancestor */
  text-transform: none;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

/* --- Features & Benefits: 3-column card grid (engineered_in_detail_section) --- */
.pdp-features-section {
  padding: clamp(44px, 5vw, 68px) 0;
}
.pdp-features-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
.pdp-features-title {
  text-align: center;
  margin: 0 0 clamp(32px, 4vw, 48px);
}
.pdp-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px);
}
.pdp-feature-card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
  margin-bottom: 22px;
}
.pdp-feature-card-img {
  /* Oversized + shifted up so the scroll parallax (js/custom.js) can move it
     +/-30px inside the media box without ever exposing an edge. */
  width: 100%;
  height: calc(100% + 60px);
  margin-top: -30px;
  object-fit: cover;
  display: block;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
/* Stop the alt text flashing in the box before the bitmap loads. */
.pdp-feature-card-media img,
.pdp-related-card-media img,
.woocommerce-product-gallery img {
  color: transparent;
  font-size: 0;
}
@media (prefers-reduced-motion: reduce) {
  .pdp-feature-card-img { will-change: auto; transform: none; }
}
.pdp-feature-card-eyebrow {
  display: block;
  margin-bottom: 10px;
}
.pdp-feature-card-heading {
  margin: 0 0 10px;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.25;
  font-weight: 500;
  text-transform: none;
  color: var(--text-primary);
}
.pdp-feature-card-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(20, 19, 17, 0.6);
}
@media (max-width: 1000px) {
  .pdp-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pdp-features-grid { grid-template-columns: 1fr; }
}

/* --- Spec accordion — lives INSIDE the right buy column (reference), no
       section band, no heading, just the panels under the ships note. --- */
.pdp-buybox-specs {
  margin-top: 30px;
  border-top: 1px solid var(--pdp-line, #E4E1DA);
}
.pdp-accordion {
  margin: 0;
}
.pdp-acc-item {
  border-bottom: 1px solid var(--pdp-line, #E4E1DA);
}
.pdp-acc-header {
  width: 100%;
  appearance: none;
  background: none;
  border: none;
  text-align: left;
  padding: 18px 2px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pdp-acc-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.pdp-acc-icon::before,
.pdp-acc-icon::after {
  content: '';
  position: absolute;
  background: var(--accent-primary);
}
.pdp-acc-icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  transform: translateY(-50%);
}
.pdp-acc-icon::after {
  left: 50%;
  top: 0;
  width: 1.5px;
  height: 100%;
  transform: translateX(-50%);
  transition: transform 0.25s ease;
}
.pdp-acc-item.is-open .pdp-acc-icon::after {
  transform: translateX(-50%) scaleY(0);
}
.pdp-acc-panel {
  display: none;
  padding: 0 2px 22px;
}
.pdp-acc-item.is-open .pdp-acc-panel {
  display: block;
}
.pdp-spec-list {
  margin: 0;
  padding: 0;
}
.pdp-spec-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 0;
  font-size: 13.5px;
  line-height: 1.4;
  border-bottom: 1px solid rgba(20, 19, 17, 0.06);
}
.pdp-spec-row:last-child {
  border-bottom: 0;
}
.pdp-spec-row dt {
  color: var(--pdp-grey-text, #65625D);
  margin: 0;
}
.pdp-spec-row dd {
  margin: 0;
  color: var(--text-primary);
  text-align: right;
}
.pdp-spec-row--single dd {
  text-align: left;
}

/* --- Downloads — right buy column, under the accordion (reference) --- */
.pdp-buybox-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pdp-grey-text, #65625D);
  margin: 26px 0 12px;
}
.pdp-buybox-downloads {
  margin-top: 8px;
}
.pdp-downloads-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pdp-download-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--pdp-line, #E4E1DA);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pdp-download-card:hover {
  border-color: var(--text-primary);
  background: var(--paper, #faf8f3);
}
.pdp-download-text {
  display: block;
  min-width: 0;
}
.pdp-download-name {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
}
.pdp-download-desc {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--pdp-grey-text, #65625D);
}
.pdp-download-cta {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-primary);
}

/* --- Funzioni "Ten ways to cook" (fratelli_funzioni_section, woo.php) --- */
.pdp-funzioni-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
.pdp-funzioni + .pdp-funzioni {
  margin-top: 40px;
}
.pdp-funzioni-head {
  text-align: center;
  margin-bottom: 40px;
}
.pdp-funzioni-head .pdp-eyebrow {
  color: var(--accent-primary);
}
.pdp-funzioni-sub {
  margin: 12px 0 0;
  font-size: 14px;
  color: rgba(20, 19, 17, 0.55);
}
/* "Main oven" / "Secondary oven" label above each cavity's grid (twin only) */
.pdp-funzioni-cavity {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pdp-grey-text, #65625D);
}
.pdp-funzioni-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(20, 19, 17, 0.12);
  border-top: 1px solid rgba(20, 19, 17, 0.14);
  border-left: 1px solid rgba(20, 19, 17, 0.14);
}
.pdp-funzioni-cell {
  background: #fff;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid rgba(20, 19, 17, 0.14);
  border-bottom: 1px solid rgba(20, 19, 17, 0.14);
}
.pdp-funzioni-icon {
  display: block;
  width: 28px;
  height: 28px;
  color: var(--text-primary);
}
.pdp-funzioni-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pdp-funzioni-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}
.pdp-funzioni-desc {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(20, 19, 17, 0.6);
}
@media (max-width: 1000px) {
  .pdp-funzioni-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .pdp-funzioni-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- "You may also like" — 4 related range cookers (fratelli_pdp_related_products) --- */
.pdp-related-section {
  padding: clamp(48px, 6vw, 80px) 0;
  border-top: 1px solid var(--pdp-line, #E4E1DA);
}
.pdp-related-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
.pdp-related-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.pdp-related-viewall {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-primary);
  text-decoration: none;
}
.pdp-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
.pdp-related-card {
  display: block;
  text-decoration: none;
}
.pdp-related-card-media {
  display: block;
  background: #fff;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 14px;
}
.pdp-related-card-media .pdp-related-card-img,
.pdp-related-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.pdp-related-card:hover .pdp-related-card-media img {
  transform: scale(1.06);
}
.pdp-related-card-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-500, #7d766a);
}
.pdp-related-card-name {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}
.pdp-related-card-price {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
@media (max-width: 1000px) {
  .pdp-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pdp-related-grid { grid-template-columns: 1fr; }
}

/* --- Cross-sell "Complete The Kitchen" (legacy, unhooked on Fratelli) --- */
.pdp-cross-sell {
  padding: 90px 0;
  text-align: center;
}
.pdp-cross-sell-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
.pdp-cross-sell-head {
  margin-bottom: 50px;
}
.pdp-cross-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 22px;
}
.pdp-cross-card {
  display: block;
  flex: 1 1 0;
  min-width: 100px;
  max-width: 300px;
  background: var(--pdp-grey-band);
  border-radius: 6px;
  padding: 22px 16px;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.pdp-cross-card:hover {
  transform: translateY(-4px);
}
.pdp-cross-card.current {
  border: 2px solid var(--accent-primary);
}
.pdp-cross-card svg {
  width: 32px;
  height: 32px;
  color: var(--accent-primary);
  margin: 0 auto 12px;
  display: block;
}
.pdp-cross-card-image {
  max-width: 100%;
  max-height: 130px;
  width: auto;
  object-fit: contain;
  margin: 0 auto 14px;
  display: block;
}
.pdp-cross-card-name {
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
  color: var(--text-primary);
  line-height: 20px;
}
.pdp-cross-card-link {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.zoomImg{display: none !important;}

/* ============================================================================
   PDP Buy Box rebuild (2026-07-27). Values matched against the mockup's own
   CSS (.buy-box/.product-title/.model-row/.price-row/.bullet-list/.dims-row/
   .reassure-row in fratelli-pdp-oven-AON610NB.html), same convention as the
   rest of the PDP work - not eyeballed.
   ============================================================================ */

.summary.entry-summary {
  padding-top: 6px;
}
.summary.entry-summary .product_title.entry-title {
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.1;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 10px 0 8px;
}
.pdp-model-row {
  font-size: 13px;
  color: var(--pdp-grey-text, #65625D);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
/* Buy-box eyebrow ("MODERNA RANGE") is a muted warm grey in the reference,
   not the garnet used for the Funzioni / feature-card eyebrows. */
.pdp-eyebrow.pdp-buybox-eyebrow {
  color: var(--warm-500, #7d766a);
}
.pdp-price-row {
  display: block;
  margin: 4px 0 22px;
}
.pdp-price-row .price.pdp-price {
  display: block;
  font-size: 30px;
  font-weight: 700;
  margin: 0 !important;
  padding-bottom: 0 !important;
}
.pdp-price-note {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--pdp-grey-text, #65625D);
}
.pdp-ships-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--pdp-grey-text, #65625D);
}
.pdp-product-desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: #4a483f;
  margin: 0 0 24px;
  max-width: 48ch;
}
.pdp-product-desc p {
  margin: 0 0 1em;
}
.pdp-product-desc p:last-child {
  margin-bottom: 0;
}
.pdp-bullet-list {
  list-style: none;
  margin: 0 0 28px;
  padding-top: 22px;
  border-top: 1px solid var(--pdp-line, #E4E1DA);
}
.pdp-bullet-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.55;
  padding: 9px 0;
  color: #2b2a27;
}
.pdp-bullet-list li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
  margin-top: 8px;
}
.pdp-dims-row {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  border-top: 1px solid var(--pdp-line, #E4E1DA);
  border-bottom: 1px solid var(--pdp-line, #E4E1DA);
  padding: 20px 0;
  margin-bottom: 28px;
}
.pdp-dims-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pdp-dims-item svg {
  width: 26px;
  height: 26px;
  color: var(--accent-primary);
  flex: none;
}
.pdp-dims-value {
  font-size: 15px;
  font-weight: 600;
  display: block;
}
.pdp-dims-label {
  font-size: 11px;
  color: var(--pdp-grey-text, #65625D);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.summary.entry-summary a.kooka-where-to-buy-button.button.alt {
  display: flex;
  width: fit-content;
  margin-bottom: 18px;
}
.pdp-fav-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--pdp-grey-text, #65625D);
  letter-spacing: 0.03em;
  text-decoration: none;
}
.pdp-fav-link:hover {
  color: var(--accent-primary);
}
.pdp-fav-link svg {
  width: 14px;
  height: 14px;
}
.pdp-reassure-row {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.pdp-reassure-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--pdp-grey-text, #65625D);
  letter-spacing: 0.02em;
}
.pdp-reassure-item svg {
  width: 20px;
  height: 20px;
  color: var(--accent-primary);
  flex: none;
}
@media (max-width: 900px) {
  .summary.entry-summary .product_title.entry-title {
    font-size: 34px;
  }
  .pdp-dims-row {
    gap: 20px;
  }
}

/* --- PDP breadcrumb (above gallery/buy-box, 2026-07-28) --- */
.pdp-breadcrumb-wrap {

  margin: 0 auto 20px;
  padding: 0;
}
.pdp-breadcrumb {
  font-size: 12px;
  color: var(--pdp-grey-text, #65625D);
  letter-spacing: 0.02em;
}
.pdp-breadcrumb a {
  color: var(--pdp-grey-text, #65625D);
  text-decoration: none;
}
.pdp-breadcrumb a:hover {
  color: var(--accent-primary);
}
.pdp-breadcrumb-sep {
  margin: 0 6px;
  color: #C9C6BF;
}
@media only screen and (max-width: 690px) {
  .height_phone_300px .divider{height: 300px !important;}
}
@media (max-width: 690px) {
.reverse_columns_column_phone .row_col_wrap_12_inner{flex-direction: column-reverse;}
}
.woocommerce-product-gallery .product-slider .slider{background:#F3F3F1 ;}
/* PDP "Engineered In Detail" blades - split_line_heading h3 uppercase */
#pdp-feature-tabs .nectar-split-heading h3 {
  text-transform: uppercase;
}

/* --- PDP add-to-cart: full-width solid black bar (reference) --- */
.single-product .summary.entry-summary form.cart {
  margin-bottom: 0;
  display: block;
}
.single-product .summary.entry-summary form.cart .quantity {
  display: none; /* qty is pinned to 1 (kooka-storefront) and hidden */
}
.single-product .summary.entry-summary form.cart .single_add_to_cart_button,
.single-product .summary.entry-summary form.cart button.single_add_to_cart_button {
  display: block;
  width: 100%;
  margin: 22px 0 0;
  padding: 21px 28px;
  background: var(--ink-950) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.2s ease;
}
.single-product .summary.entry-summary form.cart .single_add_to_cart_button:hover {
  background: var(--garnet-700) !important;
}


/* --- Kooka elements (Service Request page + reusable page-building blocks, 2026-07-28) --- */
.kooka-container {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
}
.kooka-eyebrow {
  color: var(--accent-primary) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 24px;
}
/* Salient's own skin CSS (salient/css/build/skin-material.css: "p{padding-
   bottom:1.5em}") sets a blanket bottom padding on every <p>, stacking
   invisibly on top of any margin-bottom this file sets - confirmed via
   devtools computed styles (.kooka-quote .kooka-eyebrow showed 24px
   margin-bottom PLUS an uncontested 1.5em padding-bottom). This file only
   ever targeted margin, never padding, so every <p> in every Kooka element
   was affected, not just the eyebrow - reset broadly here rather than
   patching one selector at a time. */
[class*="kooka-"] p,
.kooka-eyebrow {
  padding-bottom: 0;
}

/* Hero - dark bg image + gradient overlay, matches kooka-promotions' .apm-archive-hero.
   Full-bleed break-out - sits inside Salient's .container.main-content (max-width +
   centered), same reasoning as .pdp-feature-block/.category-landing-band. */
.kooka-hero-banner {
  position: relative;
  background: #111 center/cover no-repeat;
  color: #fff;
  padding: 220px 0 180px;
  min-height: 480px;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.kooka-hero-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.45), rgba(0,0,0,.15));
}
.archive .page-header-bg-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.45), rgba(0,0,0,.15));
}
.kooka-hero-banner-content {
  position: relative;
  z-index: 1;
}
.kooka-hero-banner-content h1 {
  font: 300 clamp(36px, 5vw, 70px)/1.13 Figtree, sans-serif;
  text-align: left;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.kooka-hero-banner-content p {
  font: 400 17px/1.5 Figtree, sans-serif;
  text-align: left;
  color: #fff;
  max-width: 520px;
  margin: 0 0 24px;
}
.kooka-hero-banner-content .kooka-eyebrow {
  color: #ff8a4c;font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.kooka-hero-banner-cta {
  margin-top: 8px;
}
.kooka-contact-info h3{color: #fff;letter-spacing: .12em !important;
  margin-bottom: 15px !important;
  font-size: 13px !important;}
/* Legacy Artusi accent aliases, kept so the large body of PLP / compare /
   category / cross-sell rules below need no churn. Values now point at the
   Fratelli tokens in fratelli-tokens.css (garnet accent, warm ink/paper). */
:root {
  --kooka-orange: var(--accent-primary); /* garnet #8c1c1c (was Artusi #f15a24) */
  --kooka-black: var(--ink-950);         /* #141311 */
  --kooka-pale: var(--ivory-100);        /* #f2efe7 */
  --kooka-line: var(--steel-300);        /* #d8dad9 */
}

/* Text Intro - eyebrow/heading/body(+button). Width is always controlled by the
   WPBakery row/column it's placed in - no max-width here, ever. */
.kooka-text-intro {
  text-align: center;
  padding: 70px 0;
}
.kooka-text-intro .kooka-container {
  width: auto;
  padding: 0;
}
.kooka-text-intro h2,
.kooka-split-copy h2,
.kooka-text-split-heading h2,
.kooka-form-heading h2 {
  letter-spacing: -0.025em;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 14px;
  text-transform: uppercase;
}
.kooka-text-intro p:not(.kooka-eyebrow),
.kooka-split-copy p:not(.kooka-eyebrow),
.kooka-text-split-heading p:not(.kooka-eyebrow),
.kooka-form-heading p:not(.kooka-eyebrow) {
  color: #686868;
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}
.kooka-text-intro--left {
  text-align: left;
  padding: 0;
}

/* Text/Image and Text/Contact split sections - self-contained CSS Grid, matching
   .service-intro/.service-contact exactly rather than manually-tuned WPBakery
   column widths. */
.kooka-split {
  display: grid;
  align-items: center;
  padding: 110px 7.5vw;
}
/* Default (no bg="pale"/"black") image variant: full-height edge-to-edge
   bleed, matching the reference's .story-split/.story-copy exactly - the
   image column is deliberately wider than copy (always the 2nd DOM child;
   the reverse/rtl trick below only flips which physical side each track
   renders on, never which content is in which track). This is the base/
   desktop rule, same specificity as the existing max-width:900px stacking
   rule further down, so that rule still wins at small viewports without
   needing any min-width guard here (never mobile-first in this codebase -
   see responsive.css's own "Non-Mobile First Method" header). */
.kooka-split--image {
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  padding: 0;
  min-height: 670px;
  align-items: stretch;
}
.kooka-split--image.kooka-split--reverse {
  direction: rtl;
}
.kooka-split--image.kooka-split--reverse > * {
  direction: ltr;
}
.kooka-split--image:not(.kooka-split--bg-pale):not(.kooka-split--bg-black) .kooka-split-copy {
  padding: 140px 9vw 50px 9vw;
}
.kooka-split-image {
  position: relative;
  overflow: hidden;
  min-height: 570px;
}
.kooka-split--image:not(.kooka-split--bg-pale):not(.kooka-split--bg-black) .kooka-split-image {
  min-height: 100%;
}
.kooka-parallax-layer {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.kooka-split--contact {
  grid-template-columns: 1fr 0.8fr;
  align-items: start;
  gap: 10vw;
}

/* When a Kooka Text + Contact Split sits inside a full_width_background row
   (Salient wraps that row type in its own padded .container, unlike
   full_width_content which is edge-to-edge) - the row already provides
   the horizontal inset, so .kooka-split's own left/right padding would
   double up. Scoped to Salient's own "full-width-section" row class
   (confirmed via the rendered DOM, not assumed) so the Service Request
   page's contact split - a full_width_content row, no such wrapper -
   is unaffected. */
.full-width-section .kooka-split {
  padding-left: 30px;
  padding-right: 30px;
}
.full-width-section .kooka-split--contact {
  grid-template-columns: 1fr 1.3fr;
}

@media (max-width: 900px) {
  .kooka-split--image,
  .kooka-split--contact {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  /* .full-width-section .kooka-split--contact (2-class specificity, no media
     query guard, further up) otherwise beats this single-class stacking
     rule at every width - match its specificity here so mobile still wins. */
  .full-width-section .kooka-split--contact {
    grid-template-columns: 1fr;
  }
}

/* Warranty "Feature" layout - black bg, image full-bleed in its own cell, copy
   owns its own padding instead of the base .kooka-split padding (values lifted
   from the reference's .warranty-feature/.warranty-feature__copy exactly). */
.kooka-split--bg-black {
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  padding: 0;
  align-items: center;
  min-height: 570px;
  background: var(--kooka-black);
  color: #fff;
}
.kooka-split--bg-black .kooka-split-copy {
  padding: 40px 10vw 40px 8vw;
}
.kooka-split--bg-black .kooka-split-copy h2,
.kooka-split--bg-black .kooka-split-copy p:not(.kooka-eyebrow) {
  color: #fff;
}

/* Points list (Warranty Feature's "01 Keep your proof of purchase" rows) */
.kooka-points {
  border-top: 1px solid #414141;
  margin-top: 28px;
}
.kooka-points .kooka-point {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px 0;
  font-size: 13px;
  color: #d6d6d6;
  border-bottom: 1px solid #414141;
}
.kooka-points .kooka-point b {
  color: var(--kooka-orange);
  letter-spacing: 0.12em;
  font-size: 10px;
}

/* Warranty "Details" layout - pale bg, list left / static image pair right */
.kooka-split--bg-pale {
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  padding: 110px 7.5vw;
  align-items: start;
  background: var(--kooka-pale);
}
.kooka-split-image--stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 18px;
  padding-top: 25px;
  min-height: auto;
  overflow: visible;
  position: static;
}
.kooka-split-image--stack img {
  display: block;
  width: 100%;
  height: auto;
}

/* Numbered exclusions/conditions list (kooka_point children with
   list_style="numbered" inside a Kooka Text + Image Split) - numbering comes
   from kooka_point_shortcode's own counter (server-side), not CSS. */
.kooka-numbered-list {
  list-style: none;
  border-top: 1px solid #ccc;
  margin: 32px 0 0;
  padding: 0;
}
.kooka-numbered-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 18px 0;
  color: #666;
  border-bottom: 1px solid #ccc;
}
.kooka-numbered-list li span {
  color: var(--kooka-orange);
  letter-spacing: 0.12em;
  font-size: 10px;
  font-weight: 700;
}

/* Text Split - two text-only columns (heading+eyebrow one side, free-form rich
   text aside the other). Values from .warranty-intro/.warranty-conditions. */
.kooka-text-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12vw;
  padding: 110px 7.5vw;
  align-items: start;
}
.kooka-text-split--narrow-left {
  grid-template-columns: 0.85fr 1.15fr;
  gap: 11vw;
}
.kooka-text-split-aside {
  color: #686868;
  font-size: 17px;
  line-height: 1.6;
}
.kooka-text-split-aside > p {
  margin: 0 0 24px;
}
.kooka-text-split-aside > p:last-child {
  margin-bottom: 0;
}
/* Narrow-left ratio is used for detail/legal-style content (e.g. Warranty's
   Exclusions & Conditions) where each top-level paragraph in the aside is its
   own divided block - the even-ratio layout (e.g. Warranty Intro) is plain
   running copy and should not get this treatment. */
.kooka-text-split--narrow-left .kooka-text-split-aside > p {
  border-bottom: 1px solid var(--kooka-line);
  margin: 0 0 26px;
  padding-bottom: 24px;
  font-size: 16px;
}
.kooka-text-split--narrow-left .kooka-text-split-aside > p:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.kooka-text-split-aside h3 {
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 11px !important;
  margin: 0 0 14px;
  color: var(--text-primary);
}
.kooka-split-image.kooka-split-image--stack > img:first-child{
  transform: translateY(100px);
}
.kooka-text-split-aside a {
  color: var(--kooka-orange);
  border-bottom: 1px solid var(--kooka-orange);
  text-decoration: none;
}
.kooka-aside-box {
  border-left: 3px solid var(--kooka-orange);
  background: var(--kooka-pale);
  margin-top: 35px;
  padding: 34px;
}
.kooka-aside-box p {
  color: #555;
  font-size: 14px;
  margin: 0;
}

/* Text Split - Black background variant (About page "Our Heritage"). Full-bleed
   like every other dark Kooka section - same break-out technique as .kooka-hero-banner. */
.kooka-text-split--bg-black {
  background: var(--kooka-black);
  color: #fff;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.kooka-text-split--bg-black .kooka-text-split-heading h2,
.kooka-text-split--bg-black .kooka-split-copy p:not(.kooka-eyebrow) {
  color: #fff;
}
.kooka-text-split--bg-black .kooka-text-split-aside {
  color: #aaa;
}

/* Orange background variant (Retailers page "Need A Hand?" band) - eyebrow
   goes dark (ink) for contrast against the orange fill, matching the
   reference's .retailer-help .eyebrow{color:#1a1a1a} exactly; everything
   else stays white/near-white. */
.kooka-text-split--bg-orange {
  background: var(--kooka-orange);
  color: #fff;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.kooka-text-split--bg-orange .kooka-text-split-heading .kooka-eyebrow {
  color: var(--text-primary) !important;
}
.kooka-text-split--bg-orange .kooka-text-split-heading h2,
.kooka-text-split--bg-orange .kooka-text-split-heading p:not(.kooka-eyebrow) {
  color: #fff;
}
.kooka-text-split--bg-orange .kooka-text-split-aside {
  color: #fff5ef;
}
.kooka-text-split--bg-orange .fratelli-button {
  background: var(--text-primary);
}

/* Split link - bordered top-line arrow link (About page "Discover Fratelli →"),
   distinct from fratelli-button's solid pill. Used by kooka_text_image_split's
   optional cta_text/cta_link. */
.kooka-split-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--kooka-line);
  color: var(--kooka-orange);
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}
.kooka-split--bg-black .kooka-split-link,
.kooka-split--bg-black .kooka-split-copy .kooka-split-link {
  border-top-color: #414141;
}

.kooka-split-portrait {
  margin-top: 30px;
  max-width: 200px;
}
.kooka-split-portrait img {
  display: block;
  width: 110px;
  height: auto;
}

@media (max-width: 900px) {
  .kooka-split--bg-black,
  .kooka-split--bg-pale,
  .kooka-text-split,
  .kooka-text-split--narrow-left,
  .kooka-text-split--bg-black,
  .kooka-text-split--bg-orange {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .kooka-text-split--bg-black,
  .kooka-text-split--bg-orange {
    padding: 60px 7.5vw;
  }
  .kooka-split--bg-black .kooka-split-copy {
    padding: 60px 7.5vw;
  }
  .kooka-split--bg-black .kooka-split-image {
    min-height: 500px;
  }
}

/* Steps - numbered process, 3 equal columns with dividers */
.kooka-steps {
  background: var(--kooka-pale);
  /* Full-bleed break-out - sits inside Salient's .container.main-content
     (max-width + centered), same reasoning as .kooka-hero-banner. Without this, the
     grid's own 10vw padding computes against the viewport (vw units always
     do) on top of the container's own inset, double-indenting the content
     and starving each column of width until headings wrap. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.kooka-steps-grid {
  display: grid;
  grid-template-columns: repeat(var(--kooka-steps-cols, 3), 1fr);
  padding: 70px 0;
}
.kooka-step {
  border-right: 1px solid var(--kooka-line);
  padding: 20px 52px;
}
.kooka-steps:not(.kooka-steps--cards) .kooka-step:first-child {
  border-left: 1px solid var(--kooka-line);
}

.kooka-step-number {
  display: block;
  color: var(--kooka-orange);
  letter-spacing: 0.13em;
  font-size: 10px;
  font-weight: 700;
}
.kooka-steps .kooka-step h3 {
  margin: 16px 0 10px;
  /* !important - Salient's own dynamically-generated per-page stylesheet
     (salient-dynamic-styles.css) enqueues AFTER this file regardless of
     selector specificity, via a broad "body h3, .row .col h3, ..." rule
     at 30px/600 that a same-specificity local selector can't beat on
     source order alone. */
  font-size: 15px !important;
  text-transform: uppercase;
  color: var(--text-primary);
}
.kooka-steps .kooka-step-body p {
  color: #686868;
  margin: 0;
}
@media (max-width: 900px) {
  .kooka-steps-grid {
    grid-template-columns: 1fr !important;
    padding: 40px 7.5vw;
  }
  .kooka-step {
    border-right: 0;
    border-bottom: 1px solid var(--kooka-line);
  }
  .kooka-step:last-child {
    border-bottom: 0;
  }
}

/* Steps - Cards variant (About page "Brand Foundations"): pale bordered cards on
   a white section, eyebrow + full-sentence heading, no auto-number. */
.kooka-steps--cards {
  background: #fff;
  padding-bottom: 80px;
}
.kooka-steps--cards .kooka-steps-grid {
  /* Right/bottom edges come from each .kooka-step--card's own border-right/
     border-bottom, matching the reference's per-article borders exactly -
     a previous attempt also added border-right/border-bottom here on the
     container, which just doubled up against each card's own border and
     rendered as a visible double line. Container only needs top/left. */
  border-top: 1px solid var(--kooka-line);
  border-left: 1px solid var(--kooka-line);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
}
.kooka-step--card {
  background: var(--kooka-pale);
  border-right: 1px solid var(--kooka-line);
  border-bottom: 1px solid var(--kooka-line);
  padding: 46px;
}
.kooka-step--card .kooka-eyebrow {
  margin-bottom: 14px;
}
.kooka-step--card h2 {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
  text-transform: none;
  margin: 0;
  color: var(--text-primary);
}

/* Quote - full-bleed dark bg-image section, centered eyebrow + large quote + CTA
   (About page "Our Mission"). Same break-out/overlay technique as .kooka-hero-banner. */
.kooka-quote {
  position: relative;
  background: #111 center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 150px 0;
  overflow: hidden;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.kooka-quote-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}
.kooka-quote-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}
.kooka-quote .kooka-eyebrow {
  color: #ff8a4c;
  justify-content: center;
  margin-bottom: 24px;
}
.kooka-quote blockquote {
  font-size: 34px;
  font-weight: 300;
  line-height: 1.35;
  margin: 0 0 32px;
  padding: 0;
  color: #fff;
}
/* Salient's own default blockquote styling adds a decorative absolute-positioned
   ::before with a 4px solid orange left border (a blog-quote accent bar) - not
   wanted for this centered mission-statement treatment, confirmed via
   getComputedStyle (border-left: 4px solid rgb(225,102,55)) rather than assumed. */
.kooka-quote blockquote::before {
  display: none;
}

/* A Kooka Text Intro used as a plain section-title immediately before a Kooka Steps
   grid (Values, Brand Foundations) double-pads otherwise - the intro's own
   bottom padding plus the steps grid's own top padding stack to ~140px, vs the
   reference's single ~65px section-title margin. Adjacent-sibling scoped so
   standalone usage of either element (its own padding, used elsewhere) is
   unaffected. Also adds the reference's border-top rule above the numbered
   grid, matching .values-grid exactly (the cards variant already has its own
   border-top via .kooka-steps--cards .kooka-steps-grid). */
.kooka-text-intro + .kooka-steps:not(.kooka-steps--cards) .kooka-steps-grid {
  padding-top: 0;
  border-top: 1px solid var(--kooka-line);
}

/* Steps - "plain" variant (Technology page: "engineering" 3-col grid and the
   "ten ways to cook" 5-col grid). Bordered cells like the default variant but
   no auto-number, sentence-case headings, tighter padding so 5 columns don't
   wrap, and per-row bottom borders since items wrap onto multiple rows. */
.kooka-steps .kooka-step--plain {
  padding: 26px 32px;
  border-bottom: 1px solid var(--kooka-line);
}
.kooka-steps .kooka-step--plain h3 {
  margin: 0 0 8px;
  text-transform: none;
  font-size: 15px !important;
  letter-spacing: 0;
}
.kooka-text-intro + .kooka-steps .kooka-steps-grid:has(.kooka-step--plain) {
  border-top: 1px solid var(--kooka-line);
}
@media (max-width: 1100px) {
  .kooka-steps-grid:has(.kooka-step--plain) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 900px) {
  .kooka-steps--cards .kooka-steps-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 690px) {
  .kooka-quote {
    padding: 90px 0;
  }
  .kooka-quote blockquote {
    font-size: 24px;
  }
}

/* Contact methods list (Kooka Text + Contact Split's up to 3 fixed items) -
   numbered row, matches the reference's .contact-list exactly. */
.kooka-contact-methods {
  border-top: 1px solid var(--kooka-line);
  margin-top: 50px;
}
.kooka-contact-method {
  display: grid;
  grid-template-columns: 42px 1fr;
  padding: 24px 0;
  border-bottom: 1px solid var(--kooka-line);
}
.kooka-contact-method > span {
  color: var(--kooka-orange);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.kooka-contact-method h3 {
  margin: 0 0 0px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 25px !important;
}
/* Prefixed with .kooka-split-copy (the real, always-present ancestor - see
   kooka_text_contact_split_shortcode) to match the specificity of the
   existing ".kooka-split-copy p:not(.kooka-eyebrow)" rule (0,2,1) - a bare
   ".kooka-contact-method p" (0,1,1) loses to it and every declaration here
   gets silently overridden, confirmed via computed style before this fix. */
.kooka-split-copy .kooka-contact-method a,
.kooka-split-copy .kooka-contact-method p {
  margin: 0;
  color: #686868;
  font-size: 14px;
  line-height: 1.55;
  text-decoration: none;
}
.kooka-contact-method a:hover {
  color: var(--kooka-orange);
}

/* Form-holding aside (e.g. a Gravity Forms embed) - pale box, light-touch
   typography to match the rest of the Kooka library without fighting GF's
   own framework CSS. Scoped so it never touches the Kooka Contact Info card
   variant used elsewhere (Service Request), which has its own dark box. */
.kooka-split-contact:has(.gform_wrapper) {
  background: var(--kooka-pale);
  padding: 55px;
}
.kooka-split-contact .gfield_label {
  letter-spacing: 0.13em;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}
/* !important throughout - salient-dynamic-styles.css always loads after
   custom.css regardless of specificity (its own input[type=...] rules set
   a dark rgb(17,17,17) background/pill radius sitewide), confirmed via
   matched-rule inspection rather than assumed. Established convention,
   see the store locator's own search input fix for precedent. */
.kooka-split-contact .ginput_container input:not([type="checkbox"]):not([type="radio"]),
.kooka-split-contact .ginput_container select,
.kooka-split-contact .ginput_container textarea {
  width: 100%;
  color: var(--text-primary) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #aaa !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
}
.kooka-split-contact .ginput_container input:not([type="checkbox"]):not([type="radio"]):focus,
.kooka-split-contact .ginput_container select:focus,
.kooka-split-contact .ginput_container textarea:focus {
  border-color: var(--kooka-orange) !important;
  outline: 0 !important;
}
.kooka-split-contact input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--kooka-orange);
  margin: 0 8px 0 0 !important;
}
.kooka-split-contact .gform_footer {
  margin-top: 10px;
}
.kooka-split-contact .gform_button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  background: var(--kooka-orange);
  color: #fff;
  border: 0;
  border-radius: 200px;
  letter-spacing: 0.1em;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

/* Contact Info - dark card: eyebrow / opening hours / appointment note / address
   grid / phone. Always used inside a Kooka Text + Contact Split's aside slot. */
.kooka-split-contact .kooka-contact-info {
  background: var(--kooka-black);
  color: #fff;
  padding: 52px;
}
.kooka-contact-info .kooka-eyebrow {
  margin-bottom: 0;
}
.kooka-contact-info h3 {
  letter-spacing: 0.12em;
  margin-bottom: 15px;
  font-size: 13px;
  text-transform: uppercase;
}
.kooka-contact-info > p:not(.kooka-eyebrow) {
  color: #bbb;
  margin: 0;
}
.kooka-contact-info p strong {
  color: #fff;
}
.kooka-contact-appointment {
  border-bottom: 1px solid #424242;
  padding-bottom: 23px;
}
.kooka-contact-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 26px 0;
}
.kooka-contact-addresses p {
  color: #aaa;
  font-size: 13px;
  margin: 0;
}
.kooka-contact-addresses strong {
  color: #fff;
  letter-spacing: 0.12em;
  font-size: 10px;
  text-transform: uppercase;
}
.kooka-contact-info small {
  color: #aaa;
  letter-spacing: 0.14em;
  margin-bottom: 5px;
  font-size: 9px;
  display: block;
  text-transform: uppercase;
}
.kooka-contact-info > a {
  color: var(--kooka-orange);
  font-size: 27px;
  font-weight: 500;
  text-decoration: none;
}
.kooka-contact-info > a:hover {
  text-decoration: underline;
}
@media (max-width: 690px) {
  .kooka-hero-banner {
    padding: 140px 0 70px;
  }
}

/* --- Products mega menu (2026-07-29, Global Section version) - self-contained
   CSS Grid, sized entirely by whatever Salient's own mega-menu width-XX class
   sets on the .nectar-global-section-megamenu wrapper it renders inside. --- */
/* Matches F&P's actual layout: a 3-column grid of categories (wraps into
   multiple rows, not one wide single row) beside a fixed-width image tile -
   not a fixed row-count, since the number of categories is managed entirely
   via the WP menu (Appearance > Menus, children of the Products item) and
   can grow/shrink without needing a CSS edit. */
/* Salient's own dynamic stylesheet caps the panel at 70em via its
   .width-75 class (mega_menu_width='75' on the Products menu item) - full
   viewport-edge-to-edge width instead, same full-bleed break-out technique
   as .kooka-hero-banner/.kooka-steps elsewhere in this file. !important is needed
   because Salient's own JS (align-left/align-middle positioning) also sets
   an inline left/right offset sized for the narrower 70em width - this
   overrides both the class-based width cap and that inline positioning. */
#header-outer nav > ul > .megamenu.nectar-megamenu-menu-item.width-75 > .nectar-global-section-megamenu,
#header-outer nav > ul > .megamenu.nectar-megamenu-menu-item.width-75 > ul {
  width: 100vw !important;
  left: 50% !important;
  right: auto !important;
  margin-left: -50vw !important;
}
.kooka-megamenu {
  display: flex;
  align-items: stretch;
  background: #fff;
 max-width: 100vw;
  margin: 0 ;padding: 50px;
}
.kooka-megamenu-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  flex: 2 1 0;
  min-width: 0;
  padding: 28px;
  gap: 28px 32px;
}
.kooka-megamenu-column {
  min-width: 0;
}
.kooka-megamenu-column-heading {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  color: var(--text-primary) !important;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  margin: 0 0 14px;
}
.kooka-megamenu-column-icon {
  width: 40px !important;
  height: 40px !important;
  flex-shrink: 0;
  margin: -10px 0px 0px -20px !important;
  position: relative;
  display: inline-block;
  background-color: var(--kooka-orange);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.kooka-megamenu-column-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 30px;
}
.kooka-megamenu-divider {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  margin: 4px 0;
}
.kooka-megamenu-divider::after {
  content: '';
  width: 80%;
  height: 1px;
  background: var(--pdp-line);
}
.kooka-megamenu-column-links a {
  color: #555 !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.kooka-megamenu-column-links a:hover {
  color: var(--kooka-orange);
}
.kooka-megamenu-tile {
  position: relative;
  flex: 1 1 0;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  /* Bleeds out to the panel's outer edge on top/right/bottom (cancelling
     .kooka-megamenu's 50px padding there) - but NOT on the left, which
     should sit flush against .kooka-megamenu-columns, not overlap it. */
  margin: -50px -50px -50px 0;
}
.kooka-megamenu-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Dark at both top (heading) and bottom (copy+CTA), lighter in the middle
     so the photo still shows through - heading and copy/CTA are no longer
     clustered in one group at the bottom. */
  background: linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.8) 100%);
}
.kooka-megamenu-tile-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  padding-left: 24px;  padding-right: 24px;background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.8),
    transparent
  );
}
.kooka-megamenu-tile-bottom {
  display: flex;
  flex-direction: column;
}
.kooka-megamenu-tile-heading {
  display: block;
  color: #fff;
  text-transform: uppercase;
  font: 400 19px/1.15 Figtree, sans-serif;
  margin-bottom: 8px;
}
.kooka-megamenu-tile-copy {
  display: block;
  color: #ddd;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 14px;
  max-width: 200px;
}
.kooka-megamenu-tile-cta {
  display: inline-block;
  /* Salient's own #top nav ul li .nectar-global-section-megamenu a
     {color:inherit} rule has ID-level specificity that beats a plain class
     selector regardless of source order - !important is the correct,
     established fix for this file (used throughout for the same reason). */
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.6);
  padding: 10px 16px;
  text-decoration: none;
  width: fit-content;
}
.kooka-megamenu-tile-cta:hover {
  background: rgba(255,255,255,.1);
  border-color: #fff;
}

/* --- Retailers page (2026-07-30): restyle of the kooka-store-locator plugin's
   [store_locator] shortcode output. Plugin owns all behaviour (search,
   geolocation, radius filter, Leaflet map). The plugin's own static markup
   WAS changed (kooka-store-locator.php, v1.4->1.5) - #csl-search and
   #csl-store-list-wrapper are now wrapped together in a real
   <aside class="csl-aside">, sibling to #csl-map inside one
   <div class="csl-locator"> - so this is a plain 2-item grid, no :has()/
   display:contents trick needed (an earlier pass here did that, since
   el_class doesn't work on this theme's own vc_row - vc_row.php's
   shortcode_atts() array never declares el_class/el_id at all, so passing
   either to any vc_row is silently dropped - but Luca asked for the
   markup itself to change instead, which is the cleaner fix). Full-bleed
   break-out (100vw) so the row spans edge-to-edge, same technique as
   .kooka-hero-banner/.kooka-steps elsewhere in this file. */
.csl-locator {
  display: grid;
  grid-template-columns: minmax(420px, .82fr) minmax(0, 1.35fr);
  min-height: 820px;
  border-top: 1px solid var(--kooka-line);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.csl-aside {
  display: flex;
  flex-direction: column;
}
#csl-search {
  margin-bottom: 0 !important;
  padding: 58px 5vw 0 7.5vw;
}
#csl-store-list-wrapper {
  width: auto;
  max-height: none;
  overflow: visible;
  border: 0;
  padding: 0 5vw 40px 7.5vw;
  box-sizing: border-box;
}
#csl-map {
  width: auto;
  height: auto;
  min-height: 470px;
  border: 0;
  margin-bottom: 0;
  background: #e9e8e3;
}
@media (max-width: 900px) {
  .csl-locator {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  #csl-search,
  #csl-store-list-wrapper {
    padding: 40px 7.5vw 0;
  }
  #csl-map {
    height: 400px;
    min-height: 400px;
  }
}

/* Search controls. Salient applies its own sitewide defaults to plain
   <input>/<button> tags (a dark input background/white text meant for
   inputs sitting on a dark section, and a 200px pill border-radius on
   every button, confirmed via getComputedStyle rather than assumed) -
   this whole block was rendering with a near-black address field and
   pill-shaped buttons as a result, since none of these rules had ever
   set background/color/border-radius explicitly. Every rule below now
   sets all three so nothing is left for a Salient default to fill in. */
#csl-search label {
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 0;
  font-size: 9px;
  font-weight: 700;
  display: block;
  color: var(--text-primary);
}
.rangeopt {
  margin-bottom: 0;
}
.foraddressflex {
  border: 1px solid #bdbdb9;
  display: flex;
}
#csl-location-input {
  background: #fff !important;
  color: var(--text-primary) !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0;
  flex: 1;
  min-width: 0;
  padding: 17px 16px !important;
  margin-right: 0 !important;
  font-size: 14px;
}
#csl-location-input::placeholder {
  color: #999;
}
#csl-search-btn {
  background: var(--text-primary) !important;
  color: #fff !important;
  border-radius: 0 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 0;
  margin: 0 !important;
  padding: 0 20px !important;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.csl-results-header {
  border-top: 1px solid var(--kooka-line);
  border-bottom: 1px solid var(--kooka-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 27px 5vw 0 7.5vw;
  padding: 19px 0;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-primary);
}
.csl-results-header #csl-reset-btn {
  margin: 0 !important;
}
/* Sits below the address row, not inside it - matches the reference's
   .location-button (plain orange text, no fill), moved out of
   .foraddressflex in the plugin's own markup (kooka-store-locator.php
   v1.5) so this is a real sibling, not a CSS reflow trick. */
#csl-use-my-location {
  background: none !important;
  color: var(--kooka-orange) !important;
  border-radius: 0 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 0;
  padding: 15px 0 0 !important;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  display: block;
  text-align: left;
}
#csl-use-my-location span {
  vertical-align: -2px;
  margin-right: 7px;
  font-size: 18px;
}
.range-wrapper {
  margin-bottom: 0;
}
#csl-radius-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #444;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  accent-color: var(--kooka-orange);
  margin: 0 !important;
}
#csl-reset-btn {
  background: none !important;
  color: #777 !important;
  border-radius: 0 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 0;
  font-size: 9px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 0 !important;
}
#csl-error-msg {
  margin-top: 14px !important;
}

/* Store list - CSS counter gives the "01/02/03..." badge without touching
   the plugin's JS, which only ever writes name/address/phone/website into
   each <li> (no number). Numbering continues correctly across the
   plugin's own state-grouping <h4> headings, since only <li> increments
   the counter. */
#csl-store-list {
  counter-reset: csl-item;
  border-bottom: 1px solid var(--kooka-line);
}
#csl-store-list h4 {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #999 !important;
  font-size: 10px !important;
  font-weight: 700;
  border-bottom: 0 !important;
  margin: 24px 0 4px !important;
  padding: 0 !important;
}
#csl-store-list h4:first-child {
  margin-top: 0 !important;
}
#csl-store-list li {
  counter-increment: csl-item;
  position: relative;
  list-style: none;
  border-bottom: 1px solid var(--kooka-line);
  padding: 25px 0 25px 54px !important;
  margin-bottom: 0 !important;
}
#csl-store-list li:hover {
  background: var(--kooka-pale);
}
/* Shopping cart icon, not the counter number - user's explicit call. The
   counter (counter-reset/counter-increment on the parent) is left in place
   even though the number is no longer shown, in case a numbered variant is
   wanted again later - harmless, counters with nothing reading them cost
   nothing. Inline SVG (feather-icons "shopping-cart" glyph, MIT licensed),
   stroke baked in as white directly rather than CSS mask/currentColor -
   simpler than a two-layer mask when the badge is a solid-colour circle. */
#csl-store-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25px;
  width: 30px;
  height: 30px;
  background-color: var(--kooka-orange);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  border-radius: 50%;
}
#csl-store-list li strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 5px;
}
#csl-store-list li .fas {
  display: none;
}
#csl-store-list li > div {
  color: #666 !important;
  font-size: 13px !important;
  margin: 0 0 3px !important;
}
#csl-store-list li > div:has(a) {
  display: flex !important;
  gap: 20px;
  margin-top: 0px !important;
}
#csl-store-list li > div:has(a) + div:has(a) {
  margin-top: 4px !important;
}
#csl-store-list li > div a {
  color: var(--kooka-orange) !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 9px !important;
  font-weight: 700;
  text-decoration: none !important;
}

/* Map popups (Leaflet-generated, same inline-styled HTML source as the
   list items) - hide the FontAwesome icons for consistency with the list. */
.leaflet-popup-content .fas {
  display: none;
}
.leaflet-popup-content a {
  color: var(--kooka-orange) !important;
}
body #footer-outer .fratelli-footer-row .widget h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}
#footer-outer[data-custom-color="true"] #footer-widgets a:not(.nectar-button) {
  font-size: 14px !important;
}
#gform_wrapper_1 .gfield--type-checkbox .gform-field-label--type-inline{font-size: 12px !important;}
.gform_wrapper input[type="date"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="password"]:focus,
.gform_wrapper input[type="search"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
  box-shadow: 0 0 0px rgba(0, 0, 0, 0);
}

/* Kooka Form Section - pale full-bleed section, centered white shadowed card
   (recipe lifted directly from the reference's .service-request/
   .service-form-card/.service-form-heading). */
.kooka-form-section {
  background: var(--kooka-pale);
  padding: 110px 7.5vw;
}
.kooka-form-card {
  background: #fff;
  max-width: 1180px;
  margin: 0 auto;
  padding: 78px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.09);
}
/* HubSpot's own inline form (and any other embed dropped in here). Exact
   values below are lifted directly from the reference's own compiled CSS
   (.service-field/.service-form>h3/.button/.service-submit/.service-consent
   in the concept site's bundle), not approximated - HubSpot's own default
   form CSS never loads on this site at all (checked: no
   hs-forms.net/hscollectedforms.net stylesheet in document.styleSheets),
   so every property needs an explicit value here. Salient's sitewide input
   background/color no longer conflicts (fixed at the theme options level),
   so those aren't !important - but skin-material.css's own border/
   border-radius (2px solid transparent / 4px) still does, confirmed via
   matched-rule inspection, hence !important on just those. */
.kooka-form-embed input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.kooka-form-embed select,
.kooka-form-embed textarea {
  width: 100%;
  min-height: 60px;
  color: #202020;
  letter-spacing: 0;
  background: #fff;
  border: 1px solid #c9c9c6 !important;
  border-radius: 0 !important;
  padding: 16px;
  font-size: 14px;
}
.kooka-form-embed input:not([type="checkbox"]):not([type="radio"]):not([type="submit"])::placeholder,
.kooka-form-embed textarea::placeholder {
  color: #9a9a9a;
}
.kooka-form-embed input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.kooka-form-embed select:focus,
.kooka-form-embed textarea:focus {
  border-color: var(--kooka-orange) !important;
  box-shadow: 0 0 0 2px rgba(241, 90, 36, 0.12);
  outline: 0;
}
.kooka-form-embed input[type="checkbox"],
.kooka-form-embed input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  margin-top: 3px;
  accent-color: var(--kooka-orange);
}
/* .kooka-form-embed.kooka-form-embed (class doubled, not a typo) - Salient's
   dynamically-generated stylesheet marks nearly all of its own button/
   label rules !important too, so plain !important alone ties on
   specificity and salient-dynamic-styles.css still wins since it always
   loads last. Doubling the class is a harmless, instance-agnostic way to
   out-specificity it without hardcoding this page's #service-request-form
   id into an otherwise-reusable element's CSS. */
.kooka-form-embed.kooka-form-embed .hs-button,
.kooka-form-embed.kooka-form-embed input[type="submit"] {
  width: 100% !important;
  min-height: 62px;
  background: var(--kooka-orange) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  margin-top: 8px;
  padding: 18px 28px !important;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
/* HubSpot's own field labels - plain <span> text, no styling at all by
   default. Reference's .service-field label spec. */
.kooka-form-embed.kooka-form-embed label {
  display: block !important;
  margin-bottom: 10px !important;
  color: #202020 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.hs-form-booleancheckbox{list-style: none;}
.pika-lendar {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.gform_wrapper.gravity-theme .gfield_required{font-size: 10px !important;}
.pika-table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed;
  box-sizing: border-box;
}
.kooka-form-embed.kooka-form-embed li {list-style: none;}
.kooka-form-embed.kooka-form-embed label.hs-error-msg{color: red !important;}
.pika-table th,
.pika-table td {
  width: 14.2857%;
  padding: 0;
  box-sizing: border-box;
}

.pika-table .pika-button {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* salient-dynamic-styles.css has a literal "label span{color:accent}" rule
   (Salient's own theme styling, not scoped to any form plugin) that beats
   plain inheritance from the label rule above regardless of the label's
   own color - the span needs its own explicit override. Scoped to
   --hubspot (via the kooka-form-embed--{source} class set in
   kooka_form_section_shortcode()) since HubSpot's own required-asterisk
   span is .hs-form-required - unscoped, this rule would also catch
   Gravity Forms' .gfield_required span, which isn't excluded here and
   uses its own color rule below. */
.kooka-form-embed.kooka-form-embed--hubspot label span:not(.hs-form-required) {
  color: #202020 !important;margin-bottom: 0;
  display: inline-block;
  margin-top: 20px;
}
.kooka-form-embed .hs-form-required {
  color: var(--kooka-orange);
}
.kooka-form-embed.kooka-form-embed--gravity .gfield_required {
  color: var(--kooka-orange) !important;
}
.kooka-form-embed.kooka-form-embed--gravity select {
  color: #000 !important;
}
/* Section-break text ("Please provide your Name & Contact Details.") is a
   bold <p><strong> rich-text block, not a real heading tag - styled to
   the reference's .service-form>h3 spec as closely as real copy
   differences allow. Scoped to :has(strong) so the long plain-<p> legal
   disclaimer rich-text block (no <strong>, confirmed via DOM inspection)
   stays normal body copy instead of also going uppercase/bordered. */
.kooka-form-embed .hs-richtext:has(> p > strong) {
  margin: 22px 0 -5px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--kooka-line);
}
.kooka-form-embed .hs-richtext:has(> p > strong):first-child {
  margin-top: 0;
}
.kooka-form-embed .hs-richtext strong {
  display: block;
  color: #202020;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.kooka-form-embed .hs-richtext p {
  color: #707070;
  font-size: 13px;
  line-height: 1.6;
}
.kooka-form-embed fieldset {
  margin-bottom: 20px;
}
.hs-form fieldset {
  max-width: 100% !important;
}

.kooka-form-heading {
  margin-bottom: 25px;
}