:root {
	--wd-text-font: "Work Sans", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 16px;
	--wd-title-font: "Oswald", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 700;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Mulish", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 700;
	--wd-entities-title-transform: none;
	--wd-entities-title-color: rgb(36,36,36);
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Mulish", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 700;
	--wd-widget-title-transform: none;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Mulish", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: capitalize;
	--wd-header-el-font-size: 15px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(4,81,116);
	--wd-alternative-color: rgb(250,153,57);
	--btn-default-font-family: "Oswald", Arial, Helvetica, sans-serif;
	--btn-default-font-weight: 500;
	--btn-default-transform: inherit;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-font-family: "Oswald", Arial, Helvetica, sans-serif;
	--btn-accented-font-weight: 700;
	--btn-accented-transform: inherit;
	--btn-accented-bgcolor: rgb(4,81,116);
	--btn-accented-bgcolor-hover: rgb(4,81,116);
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: rgb(250,153,57);
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: rgb(248,248,248);
	background-image: url(https://staging.smartcut.co.za/wp-content/uploads/2022/05/popup-banner.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: left top;
}
.wd-footer {
	background-color: #ffffff;
	background-image: none;
}
html .wd-nav.wd-nav-secondary > li > a {
	font-family: "Mulish", Arial, Helvetica, sans-serif;
	font-weight: 800;
}
html .product.wd-cat .wd-entities-title, html .product.wd-cat.cat-design-replace-title .wd-entities-title, html .wd-masonry-first .wd-cat:first-child .wd-entities-title {
	font-size: 18px;
	text-transform: none;
}
html .wd-nav-mobile > li > a {
	text-transform: none;
}
.whb-general-header .wd-nav.wd-nav-secondary > li > a {
	font-weight: 400;
	color: rgb(119,119,119);
}
.whb-general-header .wd-nav.wd-nav-secondary > li:hover > a, .whb-general-header .wd-nav.wd-nav-secondary > li.current-menu-item > a {
	color: rgb(36,36,36);
}
html .entry-summary .single_add_to_cart_button, .wd-single-add-cart .single_add_to_cart_button, html .wd-sticky-btn-cart .single_add_to_cart_button, html .wd-sticky-btn-cart .wd-sticky-add-to-cart, html .wd-sticky-btn.wd-quantity-overlap div.quantity :is(input[type],.btn) {
	font-family: "Oswald", Arial, Helvetica, sans-serif;
	font-weight: 500;
	font-size: 10px;
	text-transform: inherit;
	background: rgb(250,153,57);
}
html .entry-summary .single_add_to_cart_button:hover, .wd-single-add-cart .single_add_to_cart_button:hover, html .wd-sticky-btn-cart .single_add_to_cart_button:hover, html .wd-sticky-btn-cart .wd-sticky-add-to-cart:hover, html .wd-sticky-btn.wd-quantity-overlap .cart:hover > div.quantity :is(input[type],.btn), html .wd-sticky-btn.wd-quantity-overlap .cart:hover > div.quantity+.button {
	background: rgb(250,153,57);
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
	--wd-form-color: rgb(119,119,119);
	--wd-form-placeholder-color: rgb(119,119,119);
	--wd-form-bg: rgba(15,15,15,0.04);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
.woocommerce-product-gallery {
	--wd-gallery-gap: 15px;
}
.woocommerce-product-gallery.thumbs-position-left {
	--wd-thumbs-width: 150px;
}

@media (max-width: 1024px) {
	html .product.wd-cat .wd-entities-title, html .product.wd-cat.cat-design-replace-title .wd-entities-title, html .wd-masonry-first .wd-cat:first-child .wd-entities-title {
		font-size: 16px;
	}
	.woocommerce-product-gallery {
		--wd-gallery-gap: 10px;
	}

}

@media (max-width: 768.98px) {
	html .product.wd-cat .wd-entities-title, html .product.wd-cat.cat-design-replace-title .wd-entities-title, html .wd-masonry-first .wd-cat:first-child .wd-entities-title {
		font-size: 16px;
	}
	.woocommerce-product-gallery {
		--wd-gallery-gap: 4px;
	}

}
:root{
--wd-container-w: 1390px;
--wd-form-brd-radius: 5px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 5px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 5px;
}

@media (min-width: 1390px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: rgb(40,89,184);
}

/* ----------------------------------------------------------
   1. Woodmart product button wrapper alignment
   ----------------------------------------------------------
   Purpose:
   - Makes the Woodmart add-to-cart / quote button wrapper behave
     like a centred flex container.
   ---------------------------------------------------------- */

.wd-add-btn.wd-add-btn-replace {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* ----------------------------------------------------------
   2. Addify quote button full-width styling
   ----------------------------------------------------------
   Purpose:
   - Makes Addify quote buttons on product cards stretch across
     the full available width.
   - Removes unwanted margin.
   - Prevents overflow by including padding and borders in width.
   ---------------------------------------------------------- */

.afrfqbt.button.add_to_cart_button.product_type_simple {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   3. Addify product card hover text replacement support
   ----------------------------------------------------------
   Purpose:
   - Hides the normal Addify product card button text on hover.
   - Allows theme/plugin ::before or ::after hover content to show.

   Important:
   - This is only for the product card/archive Addify buttons.
   - Do not apply this to single product buttons, as they may go
     blank or shrink if no pseudo-element replacement exists.
   ---------------------------------------------------------- */

.afrfqbt.button.add_to_cart_button.product_type_simple:hover {
  font-size: 0 !important;
}

.afrfqbt.button.add_to_cart_button.product_type_simple:hover::before,
.afrfqbt.button.add_to_cart_button.product_type_simple:hover::after {
  font-size: 16px !important;
}


/* ----------------------------------------------------------
   4. Single product cart form alignment
   ----------------------------------------------------------
   Purpose:
   - Keeps the quantity selector and product button aligned in one row.
   - Controls the spacing between the quantity selector and button.
   - Creates one shared height value for both elements.

   Adjustment guide:
   - Change --quote-row-height to control total height.
   - Change gap to control spacing between quantity and button.
   ---------------------------------------------------------- */

.single-product form.cart {
  --quote-row-height: 50px;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 20px !important;
}


/* ----------------------------------------------------------
   5. Single product quantity selector wrapper
   ----------------------------------------------------------
   Purpose:
   - Makes the full quantity selector match the shared button height.
   - Removes unwanted theme/plugin spacing.
   ---------------------------------------------------------- */

.single-product form.cart .quantity {
  height: var(--quote-row-height) !important;
  min-height: var(--quote-row-height) !important;
  display: flex !important;
  align-items: stretch !important;
  align-self: center !important;
  margin: 0 !important;
}


/* ----------------------------------------------------------
   6. Quantity minus, number input and plus button height
   ----------------------------------------------------------
   Purpose:
   - Forces all three quantity selector parts to use the same height.
   ---------------------------------------------------------- */

.single-product form.cart .quantity .minus,
.single-product form.cart .quantity .plus,
.single-product form.cart .quantity .qty {
  height: var(--quote-row-height) !important;
  min-height: var(--quote-row-height) !important;
  line-height: var(--quote-row-height) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}


/* ----------------------------------------------------------
   7. Single product button height and alignment
   ----------------------------------------------------------
   Purpose:
   - Makes both possible single product buttons match the quantity
     selector height:
     1. Addify "Add to Quote" button
     2. Default WooCommerce "Add to Cart" button

   Important:
   - This does not hide any buttons.
   - It only fixes height, alignment and spacing.
   ---------------------------------------------------------- */

.single-product form.cart .afrfqbt_single_page.button.single_add_to_cart_button,
.single-product form.cart button.single_add_to_cart_button.button.alt {
  height: var(--quote-row-height) !important;
  min-height: var(--quote-row-height) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}


/* ----------------------------------------------------------
   8. Single product button hover animation
   ----------------------------------------------------------
   Purpose:
   - Adds a clean hover animation to single product buttons.
   - Keeps text visible.
   - Prevents the button from shrinking or going blank.

   Important:
   - Do not use font-size: 0 on single product buttons.
   ---------------------------------------------------------- */

.single-product form.cart .afrfqbt_single_page.button.single_add_to_cart_button,
.single-product form.cart button.single_add_to_cart_button.button.alt {
  transition: all 0.25s ease-in-out !important;
  transform: translateY(0);
  font-size: 16px !important;
}

.single-product form.cart .afrfqbt_single_page.button.single_add_to_cart_button:hover,
.single-product form.cart button.single_add_to_cart_button.button.alt:hover {
  transform: translateY(-2px);
  font-size: 16px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
}


/* ----------------------------------------------------------
   9. Footer copyright bar height reduction
   ----------------------------------------------------------
   Purpose:
   - Makes the bottom copyright section much shorter.
   - Reduces the top and bottom padding added by Woodmart.
   - Keeps the copyright text vertically centred.

   Main adjustment:
   - padding-top / padding-bottom controls the height.
   - Use 6px for compact.
   - Use 4px for extra compact.
   ---------------------------------------------------------- */

.wd-copyrights.copyrights-wrapper {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  min-height: unset !important;
}


/* ----------------------------------------------------------
   10. Footer copyright inner container cleanup
   ----------------------------------------------------------
   Purpose:
   - Removes any extra spacing inside the copyright container.
   - Keeps the text aligned neatly.
   ---------------------------------------------------------- */

.wd-copyrights.copyrights-wrapper .container,
.wd-copyrights.copyrights-wrapper .wd-grid-g {
  min-height: unset !important;
  align-items: center !important;
  row-gap: 0 !important;
}


/* ----------------------------------------------------------
   11. Footer copyright text sizing
   ----------------------------------------------------------
   Purpose:
   - Slightly reduces the copyright text size.
   - Reduces line-height so the section takes up less vertical space.
   ---------------------------------------------------------- */

.wd-copyrights.copyrights-wrapper .wd-col-start {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}


/* ----------------------------------------------------------
   12. Quote page 1390px full container width
   ----------------------------------------------------------
   Purpose:
   - Uses Woodmart's main container width of 1390px.
   - Makes the quote page content stretch to the full available
     theme container width.
   ---------------------------------------------------------- */

body:has(form.woocommerce-cart-form.addify-quote-form.template_one) {
  --wd-container-w: 1390px !important;
}

body:has(form.woocommerce-cart-form.addify-quote-form.template_one) .site-content,
body:has(form.woocommerce-cart-form.addify-quote-form.template_one) .entry-content,
body:has(form.woocommerce-cart-form.addify-quote-form.template_one) .woocommerce {
  width: 100% !important;
  max-width: 1390px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   13. Addify quote page full-width form wrapper
   ----------------------------------------------------------
   Purpose:
   - Targets the exact Addify quote form.
   - Makes the full quote form use all available width.
   ---------------------------------------------------------- */

form.woocommerce-cart-form.addify-quote-form.template_one {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   14. Addify quote table wrapper full-width
   ----------------------------------------------------------
   Purpose:
   - Makes the quote product table wrapper span the full form width.
   ---------------------------------------------------------- */

form.woocommerce-cart-form.addify-quote-form.template_one .adf-quote-detail-wrap {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   15. Addify quote table full-width
   ----------------------------------------------------------
   Purpose:
   - Makes the quote product table span the full available width.
   ---------------------------------------------------------- */

form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table,
form.woocommerce-cart-form.addify-quote-form.template_one table.addify-quote-form__contents {
  width: 100% !important;
  max-width: 100% !important;
  display: table !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   16. Addify quote table cell layout
   ----------------------------------------------------------
   Purpose:
   - Keeps the table cells stable and readable when using full width.
   ---------------------------------------------------------- */

form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table th,
form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table td,
form.woocommerce-cart-form.addify-quote-form.template_one table.addify-quote-form__contents th,
form.woocommerce-cart-form.addify-quote-form.template_one table.addify-quote-form__contents td {
  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   17. Addify quote form fields wrapper full-width
   ----------------------------------------------------------
   Purpose:
   - Makes the quote form section span the same width as the table.
   - Targets the updated Addify wrappers.
   ---------------------------------------------------------- */

form.woocommerce-cart-form.addify-quote-form.template_one .af_quote_fields,
form.woocommerce-cart-form.addify-quote-form.template_one .af-quote-field-table,
form.woocommerce-cart-form.addify-quote-form.template_one .quote-fields {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   18. Addify quote fields layout
   ----------------------------------------------------------
   Purpose:
   - Allows Addify half-width fields to sit side by side.
   - Allows full-width fields to span the full form width.
   ---------------------------------------------------------- */

form.woocommerce-cart-form.addify-quote-form.template_one .quote-fields {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px 20px !important;
}


/* ----------------------------------------------------------
   19. Reset individual Addify field spacing
   ----------------------------------------------------------
   Purpose:
   - Removes plugin default field spacing that can restrict width.
   ---------------------------------------------------------- */

form.woocommerce-cart-form.addify-quote-form.template_one .quote-fields .addify-option-field {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   20. Half-width quote fields
   ----------------------------------------------------------
   Purpose:
   - Keeps Addify half-width fields side by side on desktop.
   - Accounts for the 20px column gap.
   ---------------------------------------------------------- */

form.woocommerce-cart-form.addify-quote-form.template_one .quote-fields .adf_half_width {
  width: calc(50% - 10px) !important;
  max-width: calc(50% - 10px) !important;
  flex: 0 0 calc(50% - 10px) !important;
}


/* ----------------------------------------------------------
   21. Full-width quote fields
   ----------------------------------------------------------
   Purpose:
   - Makes full-width fields span the full form width.
   ---------------------------------------------------------- */

form.woocommerce-cart-form.addify-quote-form.template_one .quote-fields .adf_full_width {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}


/* ----------------------------------------------------------
   22. Quote form field background
   ----------------------------------------------------------
   Purpose:
   - Gives quote form fields a soft light-grey background.
   ---------------------------------------------------------- */

form.woocommerce-cart-form.addify-quote-form.template_one .quote-fields input,
form.woocommerce-cart-form.addify-quote-form.template_one .quote-fields textarea,
form.woocommerce-cart-form.addify-quote-form.template_one .quote-fields select {
  background-color: #f8f8f8 !important;
  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   23. Quote form fields full-width inside their containers
   ----------------------------------------------------------
   Purpose:
   - Makes inputs, textareas and selects fill their field container.
   ---------------------------------------------------------- */

form.woocommerce-cart-form.addify-quote-form.template_one .quote-fields input:not([type="checkbox"]):not([type="radio"]),
form.woocommerce-cart-form.addify-quote-form.template_one .quote-fields textarea,
form.woocommerce-cart-form.addify-quote-form.template_one .quote-fields select {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}


/* ----------------------------------------------------------
   24. Quote form field focus state
   ----------------------------------------------------------
   Purpose:
   - Adds Smart Cut orange focus styling when a customer clicks
     into a field.
   ---------------------------------------------------------- */

form.woocommerce-cart-form.addify-quote-form.template_one .quote-fields input:focus,
form.woocommerce-cart-form.addify-quote-form.template_one .quote-fields textarea:focus,
form.woocommerce-cart-form.addify-quote-form.template_one .quote-fields select:focus {
  border-color: #fa9939 !important;
  box-shadow: 0 0 5px rgba(250, 153, 57, 0.5) !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}


/* ----------------------------------------------------------
   25. Quote form labels
   ----------------------------------------------------------
   Purpose:
   - Keeps labels neat and close to their fields.
   ---------------------------------------------------------- */

form.woocommerce-cart-form.addify-quote-form.template_one .quote-fields label {
  display: block !important;
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
}


/* ----------------------------------------------------------
   26. Submit row full-width
   ----------------------------------------------------------
   Purpose:
   - Makes the submit button row span the full form width.
   ---------------------------------------------------------- */

form.woocommerce-cart-form.addify-quote-form.template_one .form_row {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  float: none !important;
  clear: both !important;
  margin-top: 20px !important;
  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   27. Request Quotation button full-width
   ----------------------------------------------------------
   Purpose:
   - Makes the final Request Quotation button span the full width.
   - Keeps the button text centred.
   ---------------------------------------------------------- */

form.woocommerce-cart-form.addify-quote-form.template_one .addify_checkout_place_quote,
form.woocommerce-cart-form.addify-quote-form.template_one button.addify_checkout_place_quote,
form.woocommerce-cart-form.addify-quote-form.template_one .button.alt.addify_checkout_place_quote {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 5px !important;
  border: none !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease-in-out !important;
}


/* ----------------------------------------------------------
   28. Request Quotation button hover
   ----------------------------------------------------------
   Purpose:
   - Adds a clean hover effect without changing the button text.
   ---------------------------------------------------------- */

form.woocommerce-cart-form.addify-quote-form.template_one .addify_checkout_place_quote:hover,
form.woocommerce-cart-form.addify-quote-form.template_one button.addify_checkout_place_quote:hover,
form.woocommerce-cart-form.addify-quote-form.template_one .button.alt.addify_checkout_place_quote:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
}


/* ----------------------------------------------------------
   29. Mobile 2-column Addify quote product layout
   ----------------------------------------------------------
   Purpose:
   - Converts each quote product row into a compact 2-column card.
   - Left column = product image.
   - Right column = product name, SKU and quantity.
   - Saves vertical space compared to the fully stacked version.
   ---------------------------------------------------------- */

@media (max-width: 768px) {

  /* Table wrapper */
  form.woocommerce-cart-form.addify-quote-form.template_one .adf-quote-detail-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* Convert table structure into mobile blocks */
  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table,
  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table thead,
  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table tbody,
  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table tr,
  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Hide desktop table headings */
  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table thead {
    display: none !important;
  }

  /* Product card becomes 2 columns */
  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table tr.cart_item {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 85px 1fr !important;
    grid-template-areas:
      "image product"
      "image quantity" !important;
    column-gap: 14px !important;
    row-gap: 8px !important;
    margin-bottom: 14px !important;
    padding: 14px 34px 14px 14px !important;
    border: 1px solid var(--brdcolor-gray-300, rgba(0, 0, 0, 0.105)) !important;
    border-radius: 5px !important;
    background-color: #fff !important;
  }

  /* Remove button */
  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table td.product-remove {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    width: auto !important;
    padding: 0 !important;
    text-align: right !important;
  }

  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table td.product-remove a.remove {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  /* Image column */
  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table td.product-thumbnail {
    grid-area: image !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    text-align: center !important;
  }

  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table td.product-thumbnail img {
    width: 75px !important;
    max-width: 75px !important;
    height: auto !important;
  }

  /* Product details column */
  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table td.product-name {
    grid-area: product !important;
    padding: 0 !important;
    text-align: left !important;
  }

  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table td.product-name a {
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
  }

  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table td.product-name p {
    margin: 4px 0 0 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  /* Quantity under product name */
  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table td.product-quantity {
    grid-area: quantity !important;
    padding: 0 !important;
    text-align: left !important;
  }


  /* Quantity selector */
  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table td.product-quantity .quantity {
    width: 110px !important;
    max-width: 110px !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table td.product-quantity .quantity .minus,
  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table td.product-quantity .quantity .plus {
    width: 28px !important;
    min-width: 28px !important;
    height: 29px !important;
    min-height: 29px !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 29px !important;
    flex: 0 0 28px !important;
    box-sizing: border-box !important;
  }

  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table td.product-quantity .quantity .qty {
    width: 42px !important;
    min-width: 42px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 30px !important;
    text-align: center !important;
    flex: 0 0 42px !important;
    box-sizing: border-box !important;
  }

  /* Quote form fields stack on mobile */
  form.woocommerce-cart-form.addify-quote-form.template_one .quote-fields {
    gap: 14px 0 !important;
  }

  form.woocommerce-cart-form.addify-quote-form.template_one .quote-fields .adf_half_width,
  form.woocommerce-cart-form.addify-quote-form.template_one .quote-fields .adf_full_width {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Request Quotation button */
  form.woocommerce-cart-form.addify-quote-form.template_one .addify_checkout_place_quote {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ----------------------------------------------------------
   29.1 Hide Update Quote button on normal quote page mobile
   ----------------------------------------------------------
   Purpose:
   - Removes the unwanted "Update Quote" button showing on the
     normal Request a Quote page on mobile.
   - Keeps the product quantity selector visible.
   - This is for the normal quote page, not the popup.
   ---------------------------------------------------------- */

@media (max-width: 768px) {

  form.woocommerce-cart-form.addify-quote-form.template_one .afrfq_update_quote_btn,
  form.woocommerce-cart-form.addify-quote-form.template_one button[name="update_quote"] {
    display: none !important;
    visibility: hidden !important;
  }

  form.woocommerce-cart-form.addify-quote-form.template_one table.addify-quote-form__contents td.actions,
  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table td.actions {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  form.woocommerce-cart-form.addify-quote-form.template_one table.addify-quote-form__contents tr:has(td.actions),
  form.woocommerce-cart-form.addify-quote-form.template_one table.shop_table tr:has(td.actions) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }
}


/* ----------------------------------------------------------
   29.2 Remove bottom spacing after last mobile quote product box
   ----------------------------------------------------------
   Purpose:
   - Keeps spacing between product boxes.
   - Removes the extra white space after the final product box.
   ---------------------------------------------------------- */

@media (max-width: 768px) {
  form.woocommerce-cart-form.addify-quote-form.template_one table.addify-quote-form__contents tr.cart_item:not(:has(~ tr.cart_item)) {
    margin-bottom: 0 !important;
  }
}


/* ----------------------------------------------------------
   30. Addify quote popup table styling
   ----------------------------------------------------------
   Purpose:
   - Styles only the popup product table.
   - Keeps the original popup/form structure untouched.
   ---------------------------------------------------------- */

.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents {
  width: 100% !important;
  margin: 0 0 18px 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}


/* ----------------------------------------------------------
   31. Addify quote popup table headings
   ---------------------------------------------------------- */

.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents th {
  background-color: #045174 !important;
  color: #ffffff !important;
  padding: 12px 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
  border: none !important;
}


/* ----------------------------------------------------------
   32. Addify quote popup table cells
   ---------------------------------------------------------- */

.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents td {
  padding: 12px 10px !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  color: #242424 !important;
  vertical-align: middle !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}


/* ----------------------------------------------------------
   33. Addify quote popup product content
   ---------------------------------------------------------- */

.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two td.product-thumbnail {
  width: 90px !important;
  text-align: center !important;
}

.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two td.product-thumbnail img {
  width: 70px !important;
  max-width: 70px !important;
  height: auto !important;
}

.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two td.product-name {
  text-align: left !important;
}

.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two td.product-name a {
  color: #242424 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two td.product-name a:hover {
  color: #fa9939 !important;
}

.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two td.product-name p {
  margin: 4px 0 0 0 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: #767676 !important;
}


/* ----------------------------------------------------------
   34. Addify quote popup remove button
   ---------------------------------------------------------- */

.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two td.product-remove {
  width: 42px !important;
  text-align: center !important;
}

.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two td.product-remove a.remove {
  color: #242424 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two td.product-remove a.remove:hover {
  color: #fa9939 !important;
}


/* ----------------------------------------------------------
   35. Addify quote popup quantity selector
   ---------------------------------------------------------- */

.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two td.product-quantity {
  width: 120px !important;
  text-align: center !important;
}

.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two td.product-quantity .quantity {
  width: 104px !important;
  max-width: 104px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two td.product-quantity .quantity .minus,
.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two td.product-quantity .quantity .plus {
  width: 30px !important;
  min-width: 30px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 32px !important;
  flex: 0 0 30px !important;
  box-sizing: border-box !important;
}

.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two td.product-quantity .quantity .qty {
  width: 44px !important;
  min-width: 44px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 32px !important;
  text-align: center !important;
  flex: 0 0 44px !important;
  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   36. Addify quote popup footer buttons
   ----------------------------------------------------------
   Purpose:
   - Styles only the Continue Shopping and Next Step buttons.
   - Keeps the Next Step button blue on mobile after clicking.
   - Adds a subtle shrink effect when the button is tapped/clicked.
   ---------------------------------------------------------- */

.afrfq-popup-form-inner .afrfq-left-button,
.afrfq-popup-form-inner .afrfq-right-button,
.afrfq-popup-form-inner .afrfq-popup-form-button,
.afrfq-popup-form-inner .afrfq-popup-form-button-primary {
  min-height: 42px !important;
  padding: 10px 18px !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: transform 0.12s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out !important;
}


/* Continue Shopping button */

.afrfq-popup-form-inner .afrfq-left-button {
  background-color: #f7f7f7 !important;
  color: #242424 !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  transform: scale(1) !important;
}

.afrfq-popup-form-inner .afrfq-left-button:hover,
.afrfq-popup-form-inner .afrfq-left-button:focus {
  background-color: #efefef !important;
  color: #242424 !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: none !important;
  outline: none !important;
  transform: scale(1) !important;
}

.afrfq-popup-form-inner .afrfq-left-button:active {
  background-color: #efefef !important;
  color: #242424 !important;
  transform: scale(0.97) !important;
  box-shadow: none !important;
  outline: none !important;
}


/* Next Step button */

.afrfq-popup-form-inner .afrfq-right-button,
.afrfq-popup-form-inner .afrfq-popup-form-button-primary,
.afrfq-popup-form-inner .afrfq-right-button:hover,
.afrfq-popup-form-inner .afrfq-popup-form-button-primary:hover,
.afrfq-popup-form-inner .afrfq-right-button:focus,
.afrfq-popup-form-inner .afrfq-popup-form-button-primary:focus {
  background-color: #045174 !important;
  border-color: #045174 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
  transform: scale(1) !important;
}


/* Next Step button click/tap feedback */

.afrfq-popup-form-inner .afrfq-right-button:active,
.afrfq-popup-form-inner .afrfq-popup-form-button-primary:active {
  background-color: #045174 !important;
  border-color: #045174 !important;
  color: #ffffff !important;
  transform: scale(0.97) !important;
  box-shadow: none !important;
  outline: none !important;
}


/* ----------------------------------------------------------
   37. Addify quote popup mobile product layout
   ----------------------------------------------------------
   Purpose:
   - Makes the popup table mobile friendly.
   - Uses a clean 2-column product card layout.
   - Adds small left/right spacing to each product block.
   - Allows the right-side product content to shrink properly.
   ---------------------------------------------------------- */

@media (max-width: 768px) {

  .afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents,
  .afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents thead,
  .afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents tbody,
  .afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents tr,
  .afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents thead {
    display: none !important;
  }

  .afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents {
    border: none !important;
    margin: 0 !important;
  }

  .afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents tr.cart_item {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 80px minmax(0, 1fr) !important;
    grid-template-areas:
      "image product"
      "image quantity" !important;
    column-gap: 12px !important;
    row-gap: 7px !important;

    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    margin: 2px 6px 4px 6px !important;

    padding: 12px 32px 12px 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
  }

  .afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents td.product-remove {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
  }

  .afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents td.product-thumbnail {
    grid-area: image !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
  }

  .afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents td.product-thumbnail img {
    width: 70px !important;
    max-width: 70px !important;
    height: auto !important;
  }

  .afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents td.product-name {
    grid-area: product !important;
    padding: 0 !important;
    text-align: left !important;
    border: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents td.product-name a {
    font-size: 13px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents td.product-name p {
    margin-top: 3px !important;
    font-size: 11px !important;
  }

  .afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents td.product-quantity {
    grid-area: quantity !important;
    width: auto !important;
    padding: 0 !important;
    text-align: left !important;
    border: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents td.product-quantity::before {
    display: none !important;
    content: none !important;
  }

  .afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents td.product-quantity .quantity {
    width: 104px !important;
    max-width: 104px !important;
    margin: 0 !important;
    justify-content: flex-start !important;
  }
}

/* ----------------------------------------------------------
   38. Hide Addify popup Update Quote rows
   ---------------------------------------------------------- */

.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two .afrfq_update_quote_btn,
.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two button[name="update_quote"],
.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents td.actions,
.afrfq-popup-form-inner form.addify-quote-form.popup-form-template_two table.addify-quote-form__contents tr:has(td.actions) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}@media (min-width: 1025px) {
	/* ===== Quote icon — Woodmart header tools match ===== */

/* Reset Woodmart header text wrapper used for the shortcode */
.whb-column .wd-header-text.reset-last-child {
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
}

/* Reset Addify list item */
li#quote-li-icon {
	list-style: none;
	margin: 0;
	padding-inline: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Make the link itself match Woodmart wd-design-6 icon circle */
li#quote-li-icon .afrq-menu-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(0, 0, 0, 0.105);
	border-radius: 42px;
	color: var(--wd-header-el-color, #333);
	text-decoration: none;
	box-sizing: border-box;
	font-size: 0;
	line-height: 1;
	transition: border-color .25s ease, color .25s ease;
}

/* Hover state */
li#quote-li-icon .afrq-menu-item:hover {
	color: var(--wd-header-el-color-hover, rgba(51,51,51,.6));
	border-color: var(--brdcolor-gray-500, rgba(0, 0, 0, 0.2));
}

/* Remove default Dashicons box behaviour */
li#quote-li-icon .dashiconsc {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	color: inherit;
	font-size: 0;
	line-height: 1;
}

/* Woodmart cart glyph */
li#quote-li-icon .dashiconsc::before {
	content: "\f105" !important;
	font-family: "woodmart-font" !important;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	color: inherit;
}

/* Count badge — matches Woodmart values */
li#quote-li-icon .totalitems {
	position: absolute;
	z-index: 1;
	top: -3px;
	inset-inline-end: -7px;
	display: block;
	width: var(--wd-count-size, 18px);
	min-width: var(--wd-count-size, 18px);
	height: var(--wd-count-size, 18px);
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
	color: var(--wd-primary-color, rgb(4,81,116));
	text-align: center;
	letter-spacing: 0;
	font-size: 11px;
	font-weight: 400;
	line-height: var(--wd-count-size, 18px);
	box-sizing: border-box;
}

/* Hide badge if Addify outputs zero or empty */
li#quote-li-icon .totalitems:empty {
	display: none;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
	/* ----------------------------------------------------------
   1. Mobile single product form wrapping
   ----------------------------------------------------------
   Purpose:
   - Allows the quantity selector and product button to wrap neatly
     on smaller screens.
   - Reduces the gap slightly for mobile layouts.

   flex-wrap: wrap;
   - Allows the quantity selector and button to move onto another
     line if there is not enough space.

   gap: 15px;
   - Controls the spacing between the quantity selector and button.
   ---------------------------------------------------------- */

.single-product form.cart {
  flex-wrap: wrap !important;
  gap: 15px !important;
}


/* ----------------------------------------------------------
   2. Mobile search bar slight width increase
   ----------------------------------------------------------
   Purpose:
   - Makes the mobile search bar slightly wider so it lines up
     better with the mobile header content.
   - Expands only the search form area, not the full mobile header.

   width: calc(100% + 10px);
   - Adds 10px total extra width.

   margin-left: -5px;
   margin-right: -5px;
   - Splits the extra width equally on both sides so the search bar
     stays centred.

   Adjustment guide:
   - 10px = subtle increase
   - 14px = slightly wider
   - 20px = much wider
   ---------------------------------------------------------- */

.whb-column_mobile5 .wd-header-search-form-mobile {
  width: calc(100% + 10px) !important;
  max-width: calc(100% + 10px) !important;
  margin-left: -5px !important;
  margin-right: -5px !important;
  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   3. Mobile search form full width inside adjusted wrapper
   ----------------------------------------------------------
   Purpose:
   - Ensures the actual search form and input fill the adjusted
     mobile search wrapper.
   - Prevents the inner search form from staying smaller while
     the outer wrapper expands.
   ---------------------------------------------------------- */

.whb-column_mobile5 .wd-header-search-form-mobile .searchform,
.whb-column_mobile5 .wd-header-search-form-mobile .searchform input.s {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* ==========================================================
   MOBILE / TABLET QUOTE ICON
   Purpose:
   - Makes the Addify quote icon in the mobile header visually
     match Woodmart's mobile cart/header tool styling.
   ========================================================== */


/* ----------------------------------------------------------
   4. Mobile quote icon header wrapper
   ----------------------------------------------------------
   Purpose:
   - Makes the Woodmart header text wrapper behave like a normal
     mobile header tool.
   - Adds right-side spacing so the quote/cart icon does not sit
     too close to the edge.

   padding: 0 10px 0 0;
   - top: 0
   - right: 10px
   - bottom: 0
   - left: 0
   ---------------------------------------------------------- */

.whb-mobile-right .wd-header-text.reset-last-child {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 6px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: inherit;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   5. Reset Addify quote icon list item
   ----------------------------------------------------------
   Purpose:
   - Removes default list styling from the Addify quote icon item.
   - Keeps the quote icon centred inside the mobile header tool area.
   ---------------------------------------------------------- */

li#quote-li-icon {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   6. Mobile quote icon outer link
   ----------------------------------------------------------
   Purpose:
   - Makes the Addify quote link behave like a Woodmart header
     cart/tool link.
   - Sets the clickable icon area to 32px by 32px.
   - Hides any unwanted text by setting font-size to 0.
   ---------------------------------------------------------- */

li#quote-li-icon .afrq-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--wd-header-el-color, #333);
  text-decoration: none;
  box-sizing: border-box;
  font-size: 0;
  line-height: 1;
}


/* ----------------------------------------------------------
   7. Mobile quote icon hover state
   ----------------------------------------------------------
   Purpose:
   - Matches Woodmart's softer hover behaviour for header tools.
   ---------------------------------------------------------- */

li#quote-li-icon .afrq-menu-item:hover {
  color: var(--wd-header-el-color-hover, rgba(51, 51, 51, .6));
}


/* ----------------------------------------------------------
   8. Mobile quote icon wrapper
   ----------------------------------------------------------
   Purpose:
   - Controls the inner icon wrapper.
   - Keeps the icon centred and sized like a Woodmart mobile cart icon.
   ---------------------------------------------------------- */

li#quote-li-icon .dashiconsc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--wd-tools-icon-base-width, 20px);
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: 0;
  line-height: 1;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   9. Woodmart mobile cart glyph for quote icon
   ----------------------------------------------------------
   Purpose:
   - Replaces the Addify/Dashicons icon with Woodmart's cart-style
     glyph so it visually matches the rest of the mobile header.

   content: "\f105";
   - Uses the Woodmart cart icon glyph.

   font-family: "woodmart-font";
   - Ensures the correct Woodmart icon font is used.
   ---------------------------------------------------------- */

li#quote-li-icon .dashiconsc::before {
  content: "\f105" !important;
  font-family: "woodmart-font" !important;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: inherit;
}


/* ----------------------------------------------------------
   10. Quote count badge
   ----------------------------------------------------------
   Purpose:
   - Styles the Addify quote count badge to visually match the
     Woodmart mobile cart count badge.

   position: absolute;
   - Places the badge over the quote/cart icon.

   inset-inline-end: 0;
   - Keeps the badge aligned to the end side of the icon.
   - Works better for left-to-right and right-to-left layouts.
   ---------------------------------------------------------- */

li#quote-li-icon .totalitems {
  z-index: 1;
  position: absolute;
  top: 1px;
  inset-inline-end: 0;
  display: block;
  width: var(--wd-count-size, 15px);
  min-width: var(--wd-count-size, 15px);
  height: var(--wd-count-size, 15px);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--wd-primary-color);
  box-shadow: none;
  color: #fff;
  text-align: center;
  letter-spacing: 0;
  font-family: inherit;
  font-size: 9px;
  font-weight: 400;
  line-height: var(--wd-count-size, 15px);
  vertical-align: middle;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   11. Hide empty quote count badge
   ----------------------------------------------------------
   Purpose:
   - Hides the badge if Addify outputs an empty count.
   - Keeps the header clean when there are no quote items.
   ---------------------------------------------------------- */

li#quote-li-icon .totalitems:empty {
  display: none;
}
}

@media (min-width: 577px) and (max-width: 767px) {
	/* ----------------------------------------------------------
   1. Mobile single product form wrapping
   ----------------------------------------------------------
   Purpose:
   - Allows the quantity selector and product button to wrap neatly
     on smaller screens.
   - Reduces the gap slightly for mobile layouts.

   flex-wrap: wrap;
   - Allows the quantity selector and button to move onto another
     line if there is not enough space.

   gap: 15px;
   - Controls the spacing between the quantity selector and button.
   ---------------------------------------------------------- */

.single-product form.cart {
  flex-wrap: wrap !important;
  gap: 15px !important;
}


/* ----------------------------------------------------------
   2. Mobile search bar slight width increase
   ----------------------------------------------------------
   Purpose:
   - Makes the mobile search bar slightly wider so it lines up
     better with the mobile header content.
   - Expands only the search form area, not the full mobile header.

   width: calc(100% + 10px);
   - Adds 10px total extra width.

   margin-left: -5px;
   margin-right: -5px;
   - Splits the extra width equally on both sides so the search bar
     stays centred.

   Adjustment guide:
   - 10px = subtle increase
   - 14px = slightly wider
   - 20px = much wider
   ---------------------------------------------------------- */

.whb-column_mobile5 .wd-header-search-form-mobile {
  width: calc(100% + 10px) !important;
  max-width: calc(100% + 10px) !important;
  margin-left: -5px !important;
  margin-right: -5px !important;
  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   3. Mobile search form full width inside adjusted wrapper
   ----------------------------------------------------------
   Purpose:
   - Ensures the actual search form and input fill the adjusted
     mobile search wrapper.
   - Prevents the inner search form from staying smaller while
     the outer wrapper expands.
   ---------------------------------------------------------- */

.whb-column_mobile5 .wd-header-search-form-mobile .searchform,
.whb-column_mobile5 .wd-header-search-form-mobile .searchform input.s {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* ==========================================================
   MOBILE / TABLET QUOTE ICON
   Purpose:
   - Makes the Addify quote icon in the mobile header visually
     match Woodmart's mobile cart/header tool styling.
   ========================================================== */


/* ----------------------------------------------------------
   4. Mobile quote icon header wrapper
   ----------------------------------------------------------
   Purpose:
   - Makes the Woodmart header text wrapper behave like a normal
     mobile header tool.
   - Adds right-side spacing so the quote/cart icon does not sit
     too close to the edge.

   padding: 0 10px 0 0;
   - top: 0
   - right: 10px
   - bottom: 0
   - left: 0
   ---------------------------------------------------------- */

.whb-mobile-right .wd-header-text.reset-last-child {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 6px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: inherit;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   5. Reset Addify quote icon list item
   ----------------------------------------------------------
   Purpose:
   - Removes default list styling from the Addify quote icon item.
   - Keeps the quote icon centred inside the mobile header tool area.
   ---------------------------------------------------------- */

li#quote-li-icon {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   6. Mobile quote icon outer link
   ----------------------------------------------------------
   Purpose:
   - Makes the Addify quote link behave like a Woodmart header
     cart/tool link.
   - Sets the clickable icon area to 32px by 32px.
   - Hides any unwanted text by setting font-size to 0.
   ---------------------------------------------------------- */

li#quote-li-icon .afrq-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--wd-header-el-color, #333);
  text-decoration: none;
  box-sizing: border-box;
  font-size: 0;
  line-height: 1;
}


/* ----------------------------------------------------------
   7. Mobile quote icon hover state
   ----------------------------------------------------------
   Purpose:
   - Matches Woodmart's softer hover behaviour for header tools.
   ---------------------------------------------------------- */

li#quote-li-icon .afrq-menu-item:hover {
  color: var(--wd-header-el-color-hover, rgba(51, 51, 51, .6));
}


/* ----------------------------------------------------------
   8. Mobile quote icon wrapper
   ----------------------------------------------------------
   Purpose:
   - Controls the inner icon wrapper.
   - Keeps the icon centred and sized like a Woodmart mobile cart icon.
   ---------------------------------------------------------- */

li#quote-li-icon .dashiconsc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--wd-tools-icon-base-width, 20px);
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: 0;
  line-height: 1;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   9. Woodmart mobile cart glyph for quote icon
   ----------------------------------------------------------
   Purpose:
   - Replaces the Addify/Dashicons icon with Woodmart's cart-style
     glyph so it visually matches the rest of the mobile header.

   content: "\f105";
   - Uses the Woodmart cart icon glyph.

   font-family: "woodmart-font";
   - Ensures the correct Woodmart icon font is used.
   ---------------------------------------------------------- */

li#quote-li-icon .dashiconsc::before {
  content: "\f105" !important;
  font-family: "woodmart-font" !important;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: inherit;
}


/* ----------------------------------------------------------
   10. Quote count badge
   ----------------------------------------------------------
   Purpose:
   - Styles the Addify quote count badge to visually match the
     Woodmart mobile cart count badge.

   position: absolute;
   - Places the badge over the quote/cart icon.

   inset-inline-end: 0;
   - Keeps the badge aligned to the end side of the icon.
   - Works better for left-to-right and right-to-left layouts.
   ---------------------------------------------------------- */

li#quote-li-icon .totalitems {
  z-index: 1;
  position: absolute;
  top: 1px;
  inset-inline-end: 0;
  display: block;
  width: var(--wd-count-size, 15px);
  min-width: var(--wd-count-size, 15px);
  height: var(--wd-count-size, 15px);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--wd-primary-color);
  box-shadow: none;
  color: #fff;
  text-align: center;
  letter-spacing: 0;
  font-family: inherit;
  font-size: 9px;
  font-weight: 400;
  line-height: var(--wd-count-size, 15px);
  vertical-align: middle;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   11. Hide empty quote count badge
   ----------------------------------------------------------
   Purpose:
   - Hides the badge if Addify outputs an empty count.
   - Keeps the header clean when there are no quote items.
   ---------------------------------------------------------- */

li#quote-li-icon .totalitems:empty {
  display: none;
}
}

@media (max-width: 576px) {
	/* ----------------------------------------------------------
   1. Mobile single product form wrapping
   ----------------------------------------------------------
   Purpose:
   - Allows the quantity selector and product button to wrap neatly
     on smaller screens.
   - Reduces the gap slightly for mobile layouts.

   flex-wrap: wrap;
   - Allows the quantity selector and button to move onto another
     line if there is not enough space.

   gap: 15px;
   - Controls the spacing between the quantity selector and button.
   ---------------------------------------------------------- */

.single-product form.cart {
  flex-wrap: wrap !important;
  gap: 15px !important;
}


/* ----------------------------------------------------------
   2. Mobile search bar slight width increase
   ----------------------------------------------------------
   Purpose:
   - Makes the mobile search bar slightly wider so it lines up
     better with the mobile header content.
   - Expands only the search form area, not the full mobile header.

   width: calc(100% + 10px);
   - Adds 10px total extra width.

   margin-left: -5px;
   margin-right: -5px;
   - Splits the extra width equally on both sides so the search bar
     stays centred.

   Adjustment guide:
   - 10px = subtle increase
   - 14px = slightly wider
   - 20px = much wider
   ---------------------------------------------------------- */

.whb-column_mobile5 .wd-header-search-form-mobile {
  width: calc(100% + 10px) !important;
  max-width: calc(100% + 10px) !important;
  margin-left: -5px !important;
  margin-right: -5px !important;
  box-sizing: border-box !important;
}


/* ----------------------------------------------------------
   3. Mobile search form full width inside adjusted wrapper
   ----------------------------------------------------------
   Purpose:
   - Ensures the actual search form and input fill the adjusted
     mobile search wrapper.
   - Prevents the inner search form from staying smaller while
     the outer wrapper expands.
   ---------------------------------------------------------- */

.whb-column_mobile5 .wd-header-search-form-mobile .searchform,
.whb-column_mobile5 .wd-header-search-form-mobile .searchform input.s {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* ==========================================================
   MOBILE / TABLET QUOTE ICON
   Purpose:
   - Makes the Addify quote icon in the mobile header visually
     match Woodmart's mobile cart/header tool styling.
   ========================================================== */


/* ----------------------------------------------------------
   4. Mobile quote icon header wrapper
   ----------------------------------------------------------
   Purpose:
   - Makes the Woodmart header text wrapper behave like a normal
     mobile header tool.
   - Adds right-side spacing so the quote/cart icon does not sit
     too close to the edge.

   padding: 0 10px 0 0;
   - top: 0
   - right: 10px
   - bottom: 0
   - left: 0
   ---------------------------------------------------------- */

.whb-mobile-right .wd-header-text.reset-last-child {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 6px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: inherit;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   5. Reset Addify quote icon list item
   ----------------------------------------------------------
   Purpose:
   - Removes default list styling from the Addify quote icon item.
   - Keeps the quote icon centred inside the mobile header tool area.
   ---------------------------------------------------------- */

li#quote-li-icon {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   6. Mobile quote icon outer link
   ----------------------------------------------------------
   Purpose:
   - Makes the Addify quote link behave like a Woodmart header
     cart/tool link.
   - Sets the clickable icon area to 32px by 32px.
   - Hides any unwanted text by setting font-size to 0.
   ---------------------------------------------------------- */

li#quote-li-icon .afrq-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--wd-header-el-color, #333);
  text-decoration: none;
  box-sizing: border-box;
  font-size: 0;
  line-height: 1;
}


/* ----------------------------------------------------------
   7. Mobile quote icon hover state
   ----------------------------------------------------------
   Purpose:
   - Matches Woodmart's softer hover behaviour for header tools.
   ---------------------------------------------------------- */

li#quote-li-icon .afrq-menu-item:hover {
  color: var(--wd-header-el-color-hover, rgba(51, 51, 51, .6));
}


/* ----------------------------------------------------------
   8. Mobile quote icon wrapper
   ----------------------------------------------------------
   Purpose:
   - Controls the inner icon wrapper.
   - Keeps the icon centred and sized like a Woodmart mobile cart icon.
   ---------------------------------------------------------- */

li#quote-li-icon .dashiconsc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--wd-tools-icon-base-width, 20px);
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: 0;
  line-height: 1;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   9. Woodmart mobile cart glyph for quote icon
   ----------------------------------------------------------
   Purpose:
   - Replaces the Addify/Dashicons icon with Woodmart's cart-style
     glyph so it visually matches the rest of the mobile header.

   content: "\f105";
   - Uses the Woodmart cart icon glyph.

   font-family: "woodmart-font";
   - Ensures the correct Woodmart icon font is used.
   ---------------------------------------------------------- */

li#quote-li-icon .dashiconsc::before {
  content: "\f105" !important;
  font-family: "woodmart-font" !important;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: inherit;
}


/* ----------------------------------------------------------
   10. Quote count badge
   ----------------------------------------------------------
   Purpose:
   - Styles the Addify quote count badge to visually match the
     Woodmart mobile cart count badge.

   position: absolute;
   - Places the badge over the quote/cart icon.

   inset-inline-end: 0;
   - Keeps the badge aligned to the end side of the icon.
   - Works better for left-to-right and right-to-left layouts.
   ---------------------------------------------------------- */

li#quote-li-icon .totalitems {
  z-index: 1;
  position: absolute;
  top: 1px;
  inset-inline-end: 0;
  display: block;
  width: var(--wd-count-size, 15px);
  min-width: var(--wd-count-size, 15px);
  height: var(--wd-count-size, 15px);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--wd-primary-color);
  box-shadow: none;
  color: #fff;
  text-align: center;
  letter-spacing: 0;
  font-family: inherit;
  font-size: 9px;
  font-weight: 400;
  line-height: var(--wd-count-size, 15px);
  vertical-align: middle;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   11. Hide empty quote count badge
   ----------------------------------------------------------
   Purpose:
   - Hides the badge if Addify outputs an empty count.
   - Keeps the header clean when there are no quote items.
   ---------------------------------------------------------- */

li#quote-li-icon .totalitems:empty {
  display: none;
}
}