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;
}

body[data-bg-header="true"] #header-outer[data-permanent-transparent="1"].transparent.dark-slide{
  background: #fff !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;}

.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;}

 .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;}

.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%;
}

 .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(--wwa-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(--wwa-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(--wwa-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;}

.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 */
}
/* Style the wrapper */
.woocommerce .form-row.custom-delivery-month {
    background: #f9f9f9;
    padding: 15px;
    border: 2px solid #ccc;
    border-radius: 6px;
    margin-bottom: 20px;
    background: url(https://i.imgur.com/If8HEIj.jpg);
  border: none;
}

/* Style the label */
.woocommerce .form-row.custom-delivery-month label {
    font-weight: bold !important;
    color: #fff;
    font-size: 16px;
}
.woocommerce .form-row.custom-delivery-month label .optional{  color: #fff;font-weight: 400 !important;font-style: italic;}

/* Style the select dropdown */
.woocommerce .form-row.custom-delivery-month select {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #aaa;
    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
   (artusi-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;
}
/* Distinct per-status colours (2026-09-23) - kpd-status-new left on the
   brand accent above (default). First Outgoing attempt (#e95b20, borrowed
   from kooka-promotions' apm-status-upcoming) read as basically the same
   orange as New at badge size - real screenshot caught it, not just a
   caching issue (confirmed the correct CSS was being served). Switched to
   a genuinely different hue (amber/gold, not another red-orange) instead
   of a same-family shade. Commercial is a neutral dark tone since it's an
   audience label, not an urgency signal. */
/* "Promo" tag (kooka-promotions APM_Tags) - top-right, opposite the status badge. */
.kpd-promo-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: linear-gradient(135deg, #700000 0.000%, #d71029 50.000%, #700000 100.000%);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
}
.kpd-status-outgoing {
  background: #c9971c;
}
.kpd-status-commercial {
  background: #2c2c2c;
}
.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, WWA > 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;
}

/* ARTUSI */
.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;
}

/* Category landing page subcategory icon row (category_landing_intro() in
   woo.php) - separate classes from .kooka-solution-icons-inner/.kooka-
   solution-col above (the homepage's own WPBakery-authored version of this
   pattern, untouched) since this row is now plain flexbox instead of fixed
   bootstrap fraction columns, so it adapts to any subcategory count instead
   of only fitting the original 4-icon/12-unit design. */
.kooka-category-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  max-width: 92%;
  margin: 0 auto;
}
.kooka-category-icon {
  flex: 1 1 0;
  min-width: 100px;
  max-width: 160px;
  text-align: center;
}
.kooka-category-icon .image-wrap {
  max-width: 125px;
  margin-left: auto;
  margin-right: auto;
}
.kooka-category-icon .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;
}

/* Artusi Button - standalone WPBakery element (artusi_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.artusi-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.artusi-button .artusi-button-arrow {
  display: inline-flex;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
a.artusi-button:hover .artusi-button-arrow {
  transform: translateX(5px);
}
a.artusi-button .artusi-button-arrow svg {
  display: block;
}
.nectar-fancy-box .artusi-button {
  margin-top: 20px;
}

/* Artusi Trust Bar - standalone WPBakery element (artusi_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). */
.artusi-trust-bar {
  background-color: #f3f4f4;
  padding: 26px 20px;
}
.artusi-trust-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 36px;
}
.artusi-trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.artusi-trust-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: #1a1a1a;
}
.artusi-trust-icon svg,
.artusi-trust-icon img {
  height: 54px;
  width: auto;
  display: block;
}
.artusi-trust-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: #1a1a1a;
}
.artusi-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. */

/* WWA Retailer Logos - standalone WPBakery element (wwa_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. */
.wwa-retailer-logos {
  padding: 60px 20px;
}
.wwa-retailer-logos-head {
  text-align: center;
  margin-bottom: 40px;
}
.wwa-retailer-logos-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 36px 48px;
}
.wwa-retailer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 60px;
}
.wwa-retailer-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Artusi 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.artusi-footer-widgets-6col .artusi-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 30px;
}
#footer-widgets.artusi-footer-widgets-6col .artusi-footer-col-wide {
  flex: 0 0 26%;
  max-width: 26%;
  margin-left: -30px;
}
#footer-widgets.artusi-footer-widgets-6col .artusi-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. */
.artusi-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;
}
.artusi-category-breadcrumb a,
.artusi-category-breadcrumb span {
  color: #fff;
  opacity: 0.85;font-weight: 100 !important;
  text-decoration: none;
}
.artusi-category-breadcrumb a:hover {
  opacity: 1;
  text-decoration: underline;
}
.artusi-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 (artusi-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-orange: #F25C23;
  --pdp-ink: #1A1A1A;
  --pdp-grey-band: #F3F3F1;
  --pdp-grey-text: #65625D;
  --pdp-line: #E4E1DA;
}

.pdp-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pdp-orange);
  margin-bottom: 10px;
}
.pdp-section-heading {
  font-size: 32px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pdp-ink);
  margin: 0;
}

/* --- Engineered In Detail: header + sticky tab-nav --- */
.pdp-feature-tabs {
  padding-top: 100px;
  background: #fff;
}
.pdp-feature-tabs-head {
  text-align: center;
  margin-bottom: 40px;
  padding: 0 40px;
}
.pdp-tab-nav {
  position: sticky;
  /* Fallback for before JS runs - kept in sync with #header-outer's real,
     currently-visible position/height at runtime by custom.js (it hides/
     reveals via a translateY class toggle, not a height change, and this
     "top" offset has to track that or the nav either leaves a dead gap or
     sits under it). */
  top: 95px;
  z-index: 80;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--pdp-line);
  transition: top 0.3s ease;
  
  /* position:sticky doesn't resolve left:50%/right:50% the same way
     position:relative does elsewhere in this file (confirmed live -
     that combo left the box positioned off to the right of the
     viewport instead of centered). Pure margin-based full-bleed works
     regardless of position value. */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}
/* Salient itself offsets #header-outer by the WP admin bar's height
   (.admin-bar #header-outer{top:32px}, core admin bar CSS) - same static
   fallback treatment here, before JS takes over with a live measurement. */
body.admin-bar .pdp-tab-nav {
  top: 127px;
}
.pdp-tab-nav-inner {

  margin: 0 auto;
  max-width: 100%;
  padding: 0 clamp(16px, 3vw, 40px);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.pdp-tab-btn {
  appearance: none;
  background: none;
  border: none;
  position: relative;
  padding: clamp(12px, 1.6vw, 18px) clamp(10px, 1.8vw, 26px);
  font-size: clamp(10px, 0.8vw, 13px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pdp-grey-text);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.pdp-tab-btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--pdp-orange);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.pdp-tab-btn:hover {
  color: var(--pdp-ink);
}
.pdp-tab-btn.is-active {
  color: var(--pdp-ink);
}
.pdp-tab-btn.is-active::after {
  transform: scaleX(1);
}
.pdp-tab-index {
  color: var(--pdp-orange);
  margin-right: clamp(4px, 0.5vw, 8px);
  font-size: clamp(9px, 0.85vw, 13px);
}

/* --- Engineered In Detail: alternating 50/50 blocks --- */
.pdp-feature-block {
  scroll-margin-top: 140px;
  padding: 90px 0;
  /* Full-bleed break-out - this section sits inside Salient's own
     .container.main-content (max-width + centered), so without this the
     alt background stops at that container's edge instead of the
     viewport edge. body{overflow-x:clip} (already set elsewhere in this
     file) keeps the negative margins from creating a horizontal scrollbar. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.pdp-feature-block--alt {
  background-color: var(--pdp-grey-band);
}
.pdp-feature-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
.pdp-feature-grid {
  display: flex;
  align-items: center;
  gap: 80px;
}
.pdp-feature-grid.pdp-feature-grid--reverse {
  flex-direction: row-reverse;
}
.pdp-feature-media-col,
.pdp-feature-text-col {
  flex: 1 1 50%;
  min-width: 0;
}
.pdp-feature-media-col {
  aspect-ratio: 4 / 3.15;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(150deg, #232323, #0a0a0a);
}
.pdp-feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pdp-feature-heading {
  font-size: 32px;
  line-height: 1.08;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--pdp-ink);
}
.pdp-feature-body p {
  font-size: 15.5px;
  line-height: 1.75;
  color: #4a4842;
  max-width: 46ch;
}
@media (max-width: 900px) {
  .pdp-feature-grid,
  .pdp-feature-grid.pdp-feature-grid--reverse {
    flex-direction: column;
  }
}

/* --- Technical Specifications accordion --- */
.pdp-specs-section {
  background: var(--pdp-grey-band);
  padding: 90px 0;
  /* Full-bleed break-out, same reasoning as .pdp-feature-block above -
     this section also sits inside Salient's .container.main-content. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.pdp-specs-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
.pdp-specs-head {
  text-align: center;
  margin-bottom: 50px;
}
.pdp-accordion {
  max-width: 860px;
  margin: 0 auto;
}
.pdp-acc-item {
  border-bottom: 1px solid #DAD7CF;
}
.pdp-acc-header {
  width: 100%;
  appearance: none;
  background: none;
  border: none;
  text-align: left;
  padding: 24px 4px;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--pdp-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pdp-acc-icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.pdp-acc-icon::before,
.pdp-acc-icon::after {
  content: '';
  position: absolute;
  background: var(--pdp-orange);
  border-radius: 2px;
}
.pdp-acc-icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}
.pdp-acc-icon::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
  transition: transform 0.25s ease;
}
.pdp-acc-item.is-open .pdp-acc-icon::after {
  transform: translateX(-50%) rotate(90deg);
}
.pdp-acc-panel {
  display: none;
  padding: 0 4px 28px;
}
.pdp-acc-item.is-open .pdp-acc-panel {
  display: block;
}
.pdp-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pdp-spec-grid li {
  font-size: 14.5px;
  color: #3d3b37;
  padding: 9px 0;
  border-bottom: 1px dashed #DAD7CF;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.pdp-spec-grid li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pdp-orange);
  margin-top: 8px;
}
@media (max-width: 700px) {
  .pdp-spec-grid {
    grid-template-columns: 1fr;
  }
}
.pdp-spec-drawing {
  text-align: center;
  padding: 10px 0 28px;
}
.pdp-spec-drawing img {
  max-width: 100%;
  height: auto;
}

/* --- Resources card grid --- */
.pdp-resources-section {
  padding: 90px 0;
  background: var(--pdp-grey-band);
  /* Full-bleed break-out, same reasoning as .pdp-feature-block above. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.pdp-resources-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
.pdp-resources-head {
  text-align: center;
  margin-bottom: 50px;
}
.pdp-resources-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.pdp-resource-card {
  display: block;
  flex: 0 1 273px;
  background: #fff;
  border: 1px solid var(--pdp-line);
  border-radius: 6px;
  padding: 36px 22px;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.pdp-resource-card:hover {
  transform: translateY(-4px);
  border-color: var(--pdp-orange);
}
.pdp-resource-card svg {
  width: 32px;
  height: 32px;
  color: var(--pdp-orange);
  margin: 0 auto 18px;
  display: block;
}
.pdp-resource-label {
  font-size: 17px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  color: var(--pdp-ink);
}
.pdp-resource-cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pdp-orange);
}
@media (max-width: 900px) {
  .pdp-resource-card {
    flex: 1 1 calc(50% - 11px);
  }
}

/* --- Cross-sell "Complete The Kitchen" --- */
.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(--pdp-orange);
}
.pdp-cross-card svg {
  width: 32px;
  height: 32px;
  color: var(--pdp-orange);
  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(--pdp-ink);
  line-height: 20px;
}
.pdp-cross-card-link {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pdp-orange);
  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 artusi-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: 46px;
  line-height: 1.02;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 14px 0 10px;
}
/* The product title is an <h1>; the generic `.single-product h1{font-size:30px !important}` rule
   (kept for other pages) would shrink it, so restate the size for the product title only. */
.single-product .summary.entry-summary h1.product_title.entry-title {
  font-size: 46px !important;
}
.pdp-model-row {
  font-size: 13px;
  color: var(--pdp-grey-text, #65625D);
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}
.pdp-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 22px;
}
.pdp-price-row .price.pdp-price {
  font-size: 32px;
  font-weight: 700;
  margin: 0 !important;padding-bottom: 0 !important;
}
.pdp-price-note {
  font-size: 12px;
  color: var(--pdp-grey-text, #65625D);
}
.pdp-product-desc {
  font-size: 15.5px;
  line-height: 1.7;
  color: #3d3b37;
  margin-bottom: 0px;
  max-width: 52ch;
}
.pdp-product-desc {
  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(--pdp-orange, #F25C23);
  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(--pdp-orange, #F25C23);
  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(--pdp-orange, #F25C23);
}
.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(--pdp-orange, #F25C23);
  flex: none;
}
@media (max-width: 900px) {
  .summary.entry-summary .product_title.entry-title {
    font-size: 34px;
  }
  .single-product .summary.entry-summary h1.product_title.entry-title {
    font-size: 34px !important;
  }
  .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(--pdp-orange, #F25C23);
}
.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;
}

/* --- Top-level category landing pages (Cooking, etc., 2026-07-28) --- */
/* Intro (heading/body/icon row) uses the WPBakery fancy_box shortcode
   pattern lifted from the homepage - already styled by the .kooka-solution-*
   rules above (search "kooka-solution"), no new CSS needed for it. */

/* Blades: literally the same shortcode markup as engineered_in_detail_
   section() (PDP) - reuses .pdp-feature-tabs/.pdp-eyebrow's existing CSS,
   just its own id (no tab-nav here) so the uppercase-heading rule needs its
   own selector too. */
#category-landing-blades .nectar-split-heading h3 {
  text-transform: uppercase;
}

/* Full-width single-image band between the blades and the cross-sell grid. */
.category-landing-band {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  line-height: 0;
}
.category-landing-band-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 640px;
}

/* --- WWA elements (Service Request page + reusable page-building blocks, 2026-07-28) --- */
.wwa-container {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
}
.wwa-eyebrow {
  color: var(--pdp-orange) !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 (.wwa-quote .wwa-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 WWA element
   was affected, not just the eyebrow - reset broadly here rather than
   patching one selector at a time. */
[class*="wwa-"] p,
.wwa-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. */
.wwa-hero {
  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;
}
.wwa-hero-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));
}
.wwa-hero-content {
  position: relative;
  z-index: 1;
}
.wwa-hero-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;
}
.wwa-hero-content p {
  font: 400 17px/1.5 Figtree, sans-serif;
  text-align: left;
  color: #fff;
  max-width: 520px;
  margin: 0 0 24px;
}
.wwa-hero-content .wwa-eyebrow {
  color: #f15a24;font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.wwa-hero-cta {
  margin-top: 8px;
}
.wwa-contact-info h3{color: #fff;letter-spacing: .12em !important;
  margin-bottom: 15px !important;
  font-size: 13px !important;}
/* Values below are lifted directly from the reference concept build's own
   stylesheet (computed CSS pulled via its RSC payload + asset bundle,
   2026-07-28) - colours, spacing, grid proportions, font sizes are not
   eyeballed. --wwa-orange/--wwa-black/--wwa-pale/--wwa-line match its
   :root custom properties exactly. */
:root {
  --wwa-orange: #f15a24;
  --wwa-black: #070908;
  --wwa-pale: #f2f3f3;
  --wwa-line: #d9d9d6;
}

/* Text Intro - eyebrow/heading/body(+button). Width is always controlled by the
   WPBakery row/column it's placed in - no max-width here, ever. */
.wwa-text-intro {
  text-align: center;
  padding: 70px 0;
}
.wwa-text-intro .wwa-container {
  width: auto;
  padding: 0;
}
.wwa-text-intro h2,
.wwa-split-copy h2,
.wwa-text-split-heading h2,
.wwa-form-heading h2 {
  letter-spacing: -0.025em;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 14px;
  text-transform: uppercase;
}
.wwa-text-intro p:not(.wwa-eyebrow),
.wwa-split-copy p:not(.wwa-eyebrow),
.wwa-text-split-heading p:not(.wwa-eyebrow),
.wwa-form-heading p:not(.wwa-eyebrow) {
  color: #686868;
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}
.wwa-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. */
.wwa-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). */
.wwa-split--image {
  grid-template-columns: 1fr 1.1fr;
  gap: 0;
  padding: 0;
  min-height: 670px;
  align-items: stretch;
}
.wwa-split--image.wwa-split--reverse {
  direction: rtl;
}
.wwa-split--image.wwa-split--reverse > * {
  direction: ltr;
}
.wwa-split--image:not(.wwa-split--bg-pale):not(.wwa-split--bg-black) .wwa-split-copy {
  padding: 140px 9vw 50px 9vw;
}
.wwa-split-image {
  position: relative;
  overflow: hidden;
  min-height: 570px;
}
.wwa-split--image:not(.wwa-split--bg-pale):not(.wwa-split--bg-black) .wwa-split-image {
  min-height: 100%;
}
.wwa-parallax-layer {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.wwa-split--contact {
  grid-template-columns: 1fr 0.8fr;
  align-items: start;
  gap: 10vw;
}

/* When a WWA 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 .wwa-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 .wwa-split {
  padding-left: 30px;
  padding-right: 30px;
}
.full-width-section .wwa-split--contact {
  grid-template-columns: 1fr 1.3fr;
}

@media (max-width: 900px) {
  .wwa-split--image,
  .wwa-split--contact {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  /* .full-width-section .wwa-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 .wwa-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 .wwa-split padding (values lifted
   from the reference's .warranty-feature/.warranty-feature__copy exactly). */
.wwa-split--bg-black {
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  padding: 0;
  align-items: center;
  min-height: 570px;
  background: var(--wwa-black);
  color: #fff;
}
.wwa-split--bg-black .wwa-split-copy {
  padding: 40px 10vw 40px 8vw;
}
.wwa-split--bg-black .wwa-split-copy h2,
.wwa-split--bg-black .wwa-split-copy p:not(.wwa-eyebrow) {
  color: #fff;
}

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

/* Warranty "Details" layout - pale bg, list left / static image pair right */
.wwa-split--bg-pale {
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  padding: 110px 7.5vw;
  align-items: start;
  background: var(--wwa-pale);
}
.wwa-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;
}
.wwa-split-image--stack img {
  display: block;
  width: 100%;
  height: auto;
}

/* Numbered exclusions/conditions list (wwa_point children with
   list_style="numbered" inside a WWA Text + Image Split) - numbering comes
   from wwa_point_shortcode's own counter (server-side), not CSS. */
.wwa-numbered-list {
  list-style: none;
  border-top: 1px solid #ccc;
  margin: 32px 0 0;
  padding: 0;
}
.wwa-numbered-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 18px 0;
  color: #666;
  border-bottom: 1px solid #ccc;
}
.wwa-numbered-list li span {
  color: var(--wwa-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. */
.wwa-text-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12vw;
  padding: 110px 7.5vw;
  align-items: start;
}
.wwa-text-split--narrow-left {
  grid-template-columns: 0.85fr 1.15fr;
  gap: 11vw;
}
.wwa-text-split-aside {
  color: #686868;
  font-size: 17px;
  line-height: 1.6;
}
.wwa-text-split-aside > p {
  margin: 0 0 24px;
}
.wwa-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. */
.wwa-text-split--narrow-left .wwa-text-split-aside > p {
  border-bottom: 1px solid var(--wwa-line);
  margin: 0 0 26px;
  padding-bottom: 24px;
  font-size: 16px;
}
.wwa-text-split--narrow-left .wwa-text-split-aside > p:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.wwa-text-split-aside h3 {
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 11px !important;
  margin: 0 0 14px;
  color: var(--pdp-ink);
}
.wwa-split-image.wwa-split-image--stack > img:first-child{
  transform: translateY(100px);
}
.wwa-text-split-aside a {
  color: var(--wwa-orange);
  border-bottom: 1px solid var(--wwa-orange);
  text-decoration: none;
}
.wwa-aside-box {
  border-left: 3px solid var(--wwa-orange);
  background: var(--wwa-pale);
  margin-top: 35px;
  padding: 34px;
}
.wwa-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 WWA section - same break-out technique as .wwa-hero. */
.wwa-text-split--bg-black {
  background: var(--wwa-black);
  color: #fff;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.wwa-text-split--bg-black .wwa-text-split-heading h2,
.wwa-text-split--bg-black .wwa-split-copy p:not(.wwa-eyebrow) {
  color: #fff;
}
.wwa-text-split--bg-black .wwa-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. */
.wwa-text-split--bg-orange {
  background: var(--wwa-orange);
  color: #fff;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.wwa-text-split--bg-orange .wwa-text-split-heading .wwa-eyebrow {
  color: var(--pdp-ink) !important;
}
.wwa-text-split--bg-orange .wwa-text-split-heading h2,
.wwa-text-split--bg-orange .wwa-text-split-heading p:not(.wwa-eyebrow) {
  color: #fff;
}
.wwa-text-split--bg-orange .wwa-text-split-aside {
  color: #fff5ef;
}
.wwa-text-split--bg-orange .artusi-button {
  background: var(--pdp-ink);
}

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

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

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

/* Steps - numbered process, 3 equal columns with dividers */
.wwa-steps {
  background: var(--wwa-pale);
  /* Full-bleed break-out - sits inside Salient's .container.main-content
     (max-width + centered), same reasoning as .wwa-hero. 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;
}
.wwa-steps-grid {
  display: grid;
  grid-template-columns: repeat(var(--wwa-steps-cols, 3), 1fr);
  padding: 70px 0;
}
.wwa-step {
  border-right: 1px solid var(--wwa-line);
  padding: 20px 52px;
}
.wwa-steps:not(.wwa-steps--cards) .wwa-step:first-child {
  border-left: 1px solid var(--wwa-line);
}

.wwa-step-number {
  display: block;
  color: var(--wwa-orange);
  letter-spacing: 0.13em;
  font-size: 10px;
  font-weight: 700;
}
.wwa-steps .wwa-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(--pdp-ink);
}
.wwa-steps .wwa-step-body p {
  color: #686868;
  margin: 0;
}
@media (max-width: 900px) {
  .wwa-steps-grid {
    grid-template-columns: 1fr !important;
    padding: 40px 7.5vw;
  }
  .wwa-step {
    border-right: 0;
    border-bottom: 1px solid var(--wwa-line);
  }
  .wwa-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. */
.wwa-steps--cards {
  background: #fff;
  padding-bottom: 80px;
}
.wwa-steps--cards .wwa-steps-grid {
  /* Right/bottom edges come from each .wwa-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(--wwa-line);
  border-left: 1px solid var(--wwa-line);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
}
.wwa-step--card {
  background: var(--wwa-pale);
  border-right: 1px solid var(--wwa-line);
  border-bottom: 1px solid var(--wwa-line);
  padding: 46px;
}
.wwa-step--card .wwa-eyebrow {
  margin-bottom: 14px;
}
.wwa-step--card h2 {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
  text-transform: none;
  margin: 0;
  color: var(--pdp-ink);
}

/* Quote - full-bleed dark bg-image section, centered eyebrow + large quote + CTA
   (About page "Our Mission"). Same break-out/overlay technique as .wwa-hero. */
.wwa-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;
}
.wwa-quote-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}
.wwa-quote-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}
.wwa-quote .wwa-eyebrow {
  color: #f15a24;
  justify-content: center;
  margin-bottom: 24px;
}
.wwa-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. */
.wwa-quote blockquote::before {
  display: none;
}

/* A WWA Text Intro used as a plain section-title immediately before a WWA 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 .wwa-steps--cards .wwa-steps-grid). */
.wwa-text-intro + .wwa-steps:not(.wwa-steps--cards) .wwa-steps-grid {
  padding-top: 0;
  border-top: 1px solid var(--wwa-line);
}
@media (max-width: 900px) {
  .wwa-steps--cards .wwa-steps-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 690px) {
  .wwa-quote {
    padding: 90px 0;
  }
  .wwa-quote blockquote {
    font-size: 24px;
  }
}

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

/* Form-holding aside (e.g. a Gravity Forms embed) - pale box, light-touch
   typography to match the rest of the WWA library without fighting GF's
   own framework CSS. Scoped so it never touches the WWA Contact Info card
   variant used elsewhere (Service Request), which has its own dark box. */
.wwa-split-contact:has(.gform_wrapper) {
  background: var(--wwa-pale);
  padding: 55px;
}
.wwa-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. */
.wwa-split-contact .ginput_container input:not([type="checkbox"]):not([type="radio"]),
.wwa-split-contact .ginput_container select,
.wwa-split-contact .ginput_container textarea {
  width: 100%;
  color: var(--pdp-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #aaa !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
}
.wwa-split-contact .ginput_container input:not([type="checkbox"]):not([type="radio"]):focus,
.wwa-split-contact .ginput_container select:focus,
.wwa-split-contact .ginput_container textarea:focus {
  border-color: var(--wwa-orange) !important;
  outline: 0 !important;
}
.wwa-split-contact input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--wwa-orange);
  margin: 0 8px 0 0 !important;
}
.wwa-split-contact .gform_footer {
  margin-top: 10px;
}
.wwa-split-contact .gform_button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  background: var(--wwa-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 WWA Text + Contact Split's aside slot. */
.wwa-split-contact .wwa-contact-info {
  background: var(--wwa-black);
  color: #fff;
  padding: 52px;
}
.wwa-contact-info .wwa-eyebrow {
  margin-bottom: 0;
}
.wwa-contact-info h3 {
  letter-spacing: 0.12em;
  margin-bottom: 15px;
  font-size: 13px;
  text-transform: uppercase;
}
.wwa-contact-info > p:not(.wwa-eyebrow) {
  color: #bbb;
  margin: 0;
}
.wwa-contact-info p strong {
  color: #fff;
}
.wwa-contact-appointment {
  border-bottom: 1px solid #424242;
  padding-bottom: 23px;
}
.wwa-contact-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 26px 0;
}
.wwa-contact-addresses p {
  color: #aaa;
  font-size: 13px;
  margin: 0;
}
.wwa-contact-addresses strong {
  color: #fff;
  letter-spacing: 0.12em;
  font-size: 10px;
  text-transform: uppercase;
}
.wwa-contact-info small {
  color: #aaa;
  letter-spacing: 0.14em;
  margin-bottom: 5px;
  font-size: 9px;
  display: block;
  text-transform: uppercase;
}
.wwa-contact-info > a {
  color: var(--wwa-orange);
  font-size: 27px;
  font-weight: 500;
  text-decoration: none;
}
.wwa-contact-info > a:hover {
  text-decoration: underline;
}
@media (max-width: 690px) {
  .wwa-hero {
    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 .wwa-hero/.wwa-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;
}
.wwa-megamenu {
  display: flex;
  align-items: stretch;
  background: #fff;
 max-width: 100vw;
  margin: 0 ;padding: 50px;
}
.wwa-megamenu-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  flex: 2 1 0;
  min-width: 0;
  padding: 28px;
  gap: 28px 32px;
}
.wwa-megamenu-column {
  min-width: 0;
}
.wwa-megamenu-column-heading {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  color: var(--pdp-ink) !important;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  margin: 0 0 14px;
}
.wwa-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(--wwa-orange);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.wwa-megamenu-column-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 30px;
}
.wwa-megamenu-divider {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  margin: 4px 0;
}
.wwa-megamenu-divider::after {
  content: '';
  width: 80%;
  height: 1px;
  background: var(--pdp-line);
}
.wwa-megamenu-column-links a {
  color: #555 !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.wwa-megamenu-column-links a:hover {
  color: var(--wwa-orange);
}
.wwa-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
     .wwa-megamenu's 50px padding there) - but NOT on the left, which
     should sit flush against .wwa-megamenu-columns, not overlap it. */
  margin: -50px -50px -50px 0;
}
.wwa-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%);
}
.wwa-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
  );
}
.wwa-megamenu-tile-bottom {
  display: flex;
  flex-direction: column;
}
.wwa-megamenu-tile-heading {
  display: block;
  color: #fff;
  text-transform: uppercase;
  font: 400 19px/1.15 Figtree, sans-serif;
  margin-bottom: 8px;
}
.wwa-megamenu-tile-copy {
  display: block;
  color: #ddd;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 14px;
  max-width: 200px;
}
.wwa-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;
}
.wwa-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
   .wwa-hero/.wwa-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(--wwa-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(--pdp-ink);
}
.rangeopt {
  margin-bottom: 0;
}
.foraddressflex {
  border: 1px solid #bdbdb9;
  display: flex;
}
#csl-location-input {
  background: #fff !important;
  color: var(--pdp-ink) !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(--pdp-ink) !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(--wwa-line);
  border-bottom: 1px solid var(--wwa-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(--pdp-ink);
}
.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(--wwa-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(--wwa-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(--wwa-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(--wwa-line);
  padding: 25px 0 25px 54px !important;
  margin-bottom: 0 !important;
}
#csl-store-list li:hover {
  background: var(--wwa-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(--wwa-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(--pdp-ink);
  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(--wwa-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(--wwa-orange) !important;
}
body #footer-outer .artusi-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);
}

/* WWA 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). */
.wwa-form-section {
  background: var(--wwa-pale);
  padding: 110px 7.5vw;
}
.wwa-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. */
.wwa-form-embed input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wwa-form-embed select,
.wwa-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;
}
.wwa-form-embed input:not([type="checkbox"]):not([type="radio"]):not([type="submit"])::placeholder,
.wwa-form-embed textarea::placeholder {
  color: #9a9a9a;
}
.wwa-form-embed input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.wwa-form-embed select:focus,
.wwa-form-embed textarea:focus {
  border-color: var(--wwa-orange) !important;
  box-shadow: 0 0 0 2px rgba(241, 90, 36, 0.12);
  outline: 0;
}
.wwa-form-embed input[type="checkbox"],
.wwa-form-embed input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  margin-top: 3px;
  accent-color: var(--wwa-orange);
}
/* .wwa-form-embed.wwa-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. */
.wwa-form-embed.wwa-form-embed .hs-button,
.wwa-form-embed.wwa-form-embed input[type="submit"] {
  width: 100% !important;
  min-height: 62px;
  background: var(--wwa-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. */
.wwa-form-embed.wwa-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;}
.gform_wrapper.gravity-theme .gform_validation_errors > h2 {
  font-size: 13.2px !important;
}
.pika-table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed;
  box-sizing: border-box;
}
.wwa-form-embed.wwa-form-embed li {list-style: none;}
.wwa-form-embed.wwa-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 wwa-form-embed--{source} class set in
   wwa_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. */
.wwa-form-embed.wwa-form-embed--hubspot label span:not(.hs-form-required) {
  color: #202020 !important;margin-bottom: 0;
  display: inline-block;
  margin-top: 20px;
}
.wwa-form-embed .hs-form-required {
  color: var(--wwa-orange);
}
.wwa-form-embed.wwa-form-embed--gravity .gfield_required {
  color: var(--wwa-orange) !important;
}
.wwa-form-embed.wwa-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. */
.wwa-form-embed .hs-richtext:has(> p > strong) {
  margin: 22px 0 -5px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--wwa-line);
}
.wwa-form-embed .hs-richtext:has(> p > strong):first-child {
  margin-top: 0;
}
.wwa-form-embed .hs-richtext strong {
  display: block;
  color: #202020;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.wwa-form-embed .hs-richtext p {
  color: #707070;
  font-size: 13px;
  line-height: 1.6;
}
.wwa-form-embed fieldset {
  margin-bottom: 20px;
}
.hs-form fieldset {
  max-width: 100% !important;
}

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

/* --- Promotion callout banners (kooka-promotions, class-promotion-banners.php) ---
   Single-line text bar everywhere (category/subcategory archives and PDP) -
   client feedback was that an earlier full image/card version was too busy,
   including on category pages where a per-context split briefly kept the
   card. Reference was F&P's plain single-line site-wide offer bar. */
.apm-promo-banner-list {
  margin: 0 0 44px;
}
.apm-promo-banner-list.apm-promo-banner-list--category {
  margin: 0 0 44px;
  top: -70px;
  position: relative;
}
.apm-promo-banner-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  background-color: #ef5a23;
  padding: 16px 24px;
  margin-bottom: 44px;
  font-family: Figtree, sans-serif;
  text-align: center;
}
.apm-promo-banner-bar-text {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.apm-promo-banner-bar-link {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: underline;
  white-space: nowrap;
}
.apm-promo-banner-bar-link:hover {
  color: #fff;
}
/* Category/subcategory archives only - full-bleed edge to edge, breaking out
   of Salient's contained .container wrapper (same margin-calc full-bleed
   pattern as .pdp-tab-nav above - plain width:100vw + negative margin,
   works regardless of any sticky ancestor). The PDP bar stays contained,
   matching the rest of that page's width. */
.apm-promo-banner-list--category .apm-promo-banner-bar {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/* --- PDP gallery product video slide (include/product-video.php,
   woocommerce/single-product/product-image.php) --- */
.product-video-slide .woocommerce-product-gallery__image,
.woocommerce-product-gallery__image.product-video-slide {
  position: relative;
}
.product-video-iframe,
.product-video-el {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
}
.product-video-thumb .thumb-inner {
  position: relative;
}
.product-video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.product-video-play-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}

/* Quick-search dropdown: for product results, show the SKU (added via
   nectar_quick_search_after_result_item in woo.php) instead of the generic
   "Product" post-type label. Every other post type in the dropdown keeps
   its own label - only a .meta-type immediately followed by our .meta-sku
   sibling gets hidden. */
.search-post-item .meta-type:has(+ .meta-sku) {
  display: none;
}

/* Bazaarvoice reviews section on the PDP (markup: kooka-bazaarvoice plugin,
   Kooka_BV_Display). Matches the PDP's other full-width sections. Only the
   placeholder renders for now. The "body" prefix on the text rules
   keeps Salient's generic p/h3 styling from winning. */
.kbv-reviews {
  padding: 90px 0 30px;
  text-align: center;
}
.kbv-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
.kbv-head {
  margin-bottom: 30px;
}
.kbv-preview-note {
  display: inline-block;
  margin: 0 0 36px;
  padding: 8px 16px;
  border: 1px dashed var(--pdp-line);
  border-radius: 4px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #777;
}
.kbv-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 40px;
}
.kbv-score {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--pdp-ink);
}
.kbv-stars {
  color: var(--pdp-orange);
  font-size: 22px;
  letter-spacing: 3px;
  line-height: 1;
}
.kbv-stars .kbv-star--off {
  color: #d6d6d6;
}
.kbv-count {
  margin-top: 6px;
  font-size: 14px;
  color: #777;
}
.kbv-write {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid var(--pdp-ink);
  border-radius: 40px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pdp-ink);
}
.kbv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  text-align: left;
}
.kbv-card {
  background: #fff;
  border: 1px solid var(--pdp-line);
  border-radius: 6px;
  padding: 28px 26px;
}
body .kbv-reviews .kbv-card h3 {
  margin: 12px 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--pdp-ink);
}
body .kbv-reviews .kbv-card p {
  margin: 0 0 14px;
  padding-bottom: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}
.kbv-meta {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #888;
}

/* Inline Ratings (tiles, compare headers) and PDP Rating Summary - placeholders
   for the Bazaarvoice widgets of the same name. */
.kbv-inline,
.kbv-rating-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.kbv-inline {
  margin: 4px 0 8px;
  justify-content: flex-start;
}
.kbv-inline .kbv-stars,
.kbv-rating-summary .kbv-stars {
  font-size: 15px;
  letter-spacing: 2px;
}
/* Tile lines all carry the 18px side margin (see .kpd-loop-sku). */
ul.products li.product .kbv-inline {
  margin: 0 18px 10px;
}
.kbv-inline-count {
  font-size: 13px;
  color: #777;
}
.kbv-rating-summary {
  margin: 4px 0 14px;
  text-decoration: none;
}
.kbv-summary-link {
  font-size: 13px;
  color: var(--pdp-ink);
  text-decoration: underline;
}
.kpc-product-col .kbv-inline {
  justify-content: center;
}

/* --- Windows classic-scrollbar fix for Salient's full-width rows (2026-09-26) ---
   Salient sizes its full-width rows/backgrounds as calc(100vw - var(--scroll-bar-w)) with a half-scrollbar
   margin; on real Windows Chrome that left black strips at the sides of the sections, while plain 100vw
   lines up. Restated with extra specificity (html body ...) AND !important so it wins over both of
   Salient's rules (one of which is itself !important). Mac is unaffected (scrollbar 0). */
html body .full-width-content.blog-fullwidth-wrap,
html body .full-width-content.nectar-shop-outer,
html body .nectar-slider-wrap[data-full-width=true],
html body .page-submenu .full-width-content,
html body .page-submenu>.full-width-section,
html body .portfolio-filters-inline.full-width-content,
html body .portfolio-filters-inline.full-width-section:not(.non-fw),
html body .post-area.full-width-content.standard-minimal,
html body .single-product .product[data-gallery-style=left_thumb_sticky][data-gallery-variant=fullwidth] .single-product-wrap,
html body .wpb_row.full-width-content,
html body .wpb_row.full-width-content.has-global-section .wpb_row.full-width-content,
html body .wpb_row.full-width-section .mobile-video-image,
html body .wpb_row.full-width-section .templatera_shortcode>.wpb_row.full-width-section>.row-bg-wrap,
html body .full-width-section .nectar-parallax-scene,
html body .full-width-section .row-bg-wrap,
html body .full-width-section.parallax_section .row-bg-wrap,
html body .full-width-section>.nectar-shape-divider-wrap,
html body .full-width-section>.video-color-overlay,
html body[data-aie=long-zoom-out] .first-section .row-bg-wrap,
html body[data-aie=long-zoom-out] .top-level.full-width-section .row-bg-wrap,
html body[data-aie=zoom-out] .first-section .row-bg-wrap,
html body[data-aie=zoom-out] .top-level.full-width-section .row-bg-wrap,
html body[data-col-gap] .vc_row-fluid .span_12.post-area.full-width-content.standard-minimal,
html body .full-width-section>.nectar-video-wrap {
  margin-left: -50vw !important;
  left: 50% !important;
  width: 100vw !important;
}