/*
Theme Name: Staxx
Description: Simple. Affordable. Beatiful.
Author:  integritive inc.
Version: 1.0
Template: enfold
*/

:root {
	--main-theme: #005776;
	--dark: #005776;
	--alt-theme: #f8f8f8;
}
#top #wrap_all .av-social-link-instagram:hover a, #top #wrap_all .av-social-link-instagram a:focus {
	background-color: transparent;
}
.sb_instagram_header {
	display: none;
}
#sb_instagram #sbi_images {
	gap: 0 !important;
}
#sbi_load {
	display: none;
}
.avia-menu.av_menu_icon_beside {
	margin-right:0px;
	padding-right: 0px;
	border:none;
}

#menu-item-shop .cart_dropdown_link {
	padding-left: 0px;
	padding-right: 10px;
	margin-right: 10px;
}


#menu-item-wc-account-icon a {
	padding-right: 0px;
}
.av-cart-container svg {
	fill: black !important;
}

#top nav .social_bookmarks {
	margin-top: -15px;
	right: 25px;
}

.cart_dropdown_first .cart_dropdown_link.avia-svg-icon > .av-cart-container {
	margin-top: 1px;
}

#top #wrap_all .all_colors h2.woocommerce-loop-product__title {
	font-weight: 600;
	font-size: 15px;
}
/* Standardized classes for hiding things on desktop/mobile */
@media (min-width: 990px) {
	.staxx-desktop-hidden {
		display: none!important;
	}
}
@media (max-width: 990px) {
	.staxx-mobile-hidden {
		display: none!important;
	}
}

/* Fix for transparent logos with WebP Express in CDN Friendly mode */
#top .av_header_transparency.av_alternate_logo_active .logo a > picture > img {
	opacity: 0;
	filter: alpha(opacity=0);
}

@media only screen and (max-width: 767px) {
	.responsive #top .av_header_transparency.av_alternate_logo_active .logo a > picture > img {
		opacity: 1;
	}
}

.main_color tr:nth-child(even) {
	color: black;
}

div table.shop_attributes td {
	font-style: inherit;
}

.tinvwl-table-manage-list .product-action {
	min-width: 160px;
}

div table.shop_attributes th {
	width: 175px;
}

.inner_product {
	border:0px;
}
/*= BUTTON STYLES ==============================================================*/
.header_color #searchform .av_searchform_search.avia-svg-icon svg:first-child {
	fill: black;
}

/* The icon span itself is pointer-events:none (Enfold lets clicks pass
   through to the <input class="button"> sibling underneath). So :hover
   on the span never fires. Trigger off the input's hover via :has(). */
.header_color #searchform div:has(> input.button:hover) .av_searchform_search.avia-svg-icon svg:first-child,
.header_color #searchform div:has(> input.button:hover) .av_searchform_search.avia-svg-icon svg:first-child path {
	fill: white !important;
}

#top .button,
#top .avia-button,
#top .added_to_cart,
#top input[type="submit"],
#top .woocommerce a.button,
#top .woocommerce button.button {
	background-color: transparent;
	color: #000;
	border: 1px solid #000;
}
#top .button:hover,
#top .avia-button:hover,
#top .added_to_cart:hover,
#top input[type="submit"]:hover,
#top .woocommerce a.button:hover,
#top .woocommerce button.button:hover {
	background-color: #000;
	color: #fff;
	border-color: #000;
}

/*= SAMPLE REQUEST & CHECK STOCK LINKS =========================================*/

.integ-order-sample {
	clear: right;
	float: right;
	text-align: right;
	line-height: 1;
}

.integ-order-sample button {
	line-height: inherit !important;
}
#top .staxx-check-stock a,
#top .integ-order-sample .integ-order-sample-btn {
	background: transparent;
	border: none;
	color: #000;
	text-decoration: underline;
	padding: 0;
	cursor: pointer;
	font-size: inherit;
	line-height: 40px;
}
#top .staxx-check-stock a:hover,
#top .integ-order-sample .integ-order-sample-btn:hover {
	background: transparent;
	border: none;
	color: var(--main-theme);
}

/* Fix for Gravity Forms styling */
#top .gform_wrapper legend {
	font-weight: bold;
	font-size: 0.92em;
}
.gform_required_legend {
	display: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.hide-tablet {
		display: none!important;
	}
}

/*= CATALOG THUMBNAILS =========================================================*/
#top.woocommerce-shop .thumbnail_container {
	aspect-ratio: 0.74;
	display: flex;
	align-items: center;
	overflow: hidden;
}
/* Fill the 0.74 box completely, cropping the top/bottom of naturally
   square (or wider) images instead of stretching them. Setting the
   image's own aspect-ratio forces distortion because object-fit:fill
   is WC's default for catalog images — override to cover, and drop
   the aspect-ratio rule that was fighting the natural image dimensions. */
#top.woocommerce-shop .thumbnail_container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#top.woocommerce-shop .product .inner_product {
	width: 80%;
	margin: 0 auto;
}

.integ-loop-brief-description{
	margin:0px;
}

.inner_product_header_cell h2.woocommerce-loop-product__title {
	font-weight: 600;
}

#top.woocommerce-shop .inner_product_header{
	top: -15px;
	background: transparent;
	border: none;
}

.content .entry-content-wrapper {
	padding-right: 50px;
}

#top .inner_product_header{
	border: none;
	top: 0px;
	padding: 0px;
}

.shop_columns_3 .products .product {
	margin-bottom: 5%;
}

/* The empty-wishlist "Return to shop" button is a button (39px tall)
   inside a p.return-to-shop (23px line-height). When the wishlist sits
   in our My Account wrapper its overflow-y:hidden clips the button's
   bottom 16px. Padding the container — rather than killing the overflow
   rule — keeps the rest of the layout untouched and works for any other
   button-in-p combinations TinvWL might add later. */
.woocommerce-MyAccount-content .tinv-wishlist .return-to-shop {
	line-height: 39px;
	padding-bottom: 10px;
}

/* Checkout memo-samples vs. fabric-order cards. The two sections were
   visually indistinguishable before — same heading style, same wrapping
   — which risked customers editing the wrong shipping address on mixed
   carts. Wrap each in a card with a distinct accent color and a bold
   uppercase heading so the eye can group samples-pair vs. fabric-pair
   at a glance. Conditional includes in review-order.php already skip
   whichever card doesn't apply, so single-type carts see just one. */
.staxx-checkout-card {
	border: 1px solid #e2e2e2;
	border-radius: 4px;
	padding: 20px 25px 10px;
	margin-bottom: 24px;
}
.staxx-checkout-card--samples {
	background: #f5f5f7/*#fbf7ec*/;
	border-top: 4px solid #c9a34c;
}
.staxx-checkout-card--order {
	background: #f7f7f5/*#f2f6f9*/;
	border-top: 4px solid var(--main-theme);
}
.staxx-checkout-card > .staxx-checkout-field:first-child > h3:first-child {
	margin: 0 0 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
/* Shipping subhead inside each card — smaller, understated, adds a
   little top-space so the address block is clearly a sub-section. */
.staxx-checkout-card .staxx-checkout-field-shipping h5 {
	margin-top: 20px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.85em;
	color: rgba(0, 0, 0, 0.6);
}

/* When the cart has more samples than the configured per-order limit,
   class-woocommerce-cart.php adds .integ-over-sample-limit to the body
   and the WC error notice tells the user to remove some. The classic
   cart shortcode's button is removed server-side via remove_action;
   the React Cart Block doesn't fire that action, so hide its
   proceed-to-checkout button here. Selectors cover the current and
   older Cart Block markup (block wrapper, submit container, button). */
.integ-over-sample-limit .wp-block-woocommerce-proceed-to-checkout-block,
.integ-over-sample-limit .wc-block-cart__submit-container,
.integ-over-sample-limit .wc-block-cart__submit-button,
.integ-over-sample-limit .wc-block-components-checkout-button {
	display: none !important;
}

/*= INTEG VARIANT SHORTCODE CARDS ==============================================
   [integ_variant] renders cards using catalog markup so most catalog CSS
   applies. Two deviations: the catalog pulls the header up over the image
   (top: -23px) and constrains card width to 80% — both break the
   variant-card layout, so override here. */
#top .integ-variant-products .product .inner_product {
	width: 100%;
	/* Catalog cards set overflow:hidden and have a fixed visual height
	   so they line up in a grid. Variant cards live in arbitrary
	   layouts (narrow portfolio columns, side panels, etc.) where the
	   SKU+color line can wrap to two lines and push the brief
	   description out of the clipped area. Let it grow vertically. */
	overflow: visible;
	height: auto;
}
#top .integ-variant-products .inner_product_header {
	top: 5px;
}
/* SKU line: stays on one line when there's room (short colors like
   "Teal"), wraps cleanly at a space when there isn't (e.g.
   "SKU: 15004-04 - Natural" in a narrow column). overflow-wrap covers
   the edge case of an unusually long single token (no spaces) so it
   doesn't shoot past the card and get clipped by .inner_product's
   overflow:hidden. */
.integ-variant-products .price {
	overflow-wrap: anywhere;
}

/*= PRODUCT ICONS (fire / outdoor) =============================================*/
.single-product-summary {
	position: relative;
}
.staxx-product-icons {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	gap: 8px;
	z-index: 1;
}
.staxx-product-icon {
	width: 70px;
	object-fit: contain;
}

/*= WISHLIST BUTTON POSITION ===================================================*/
.staxx-wishlist-top {
	float: right;
	margin-top: -2em;
}

/*= COLLAPSIBLE FILTER WIDGETS =================================================*/
.staxx-filter-toggle {
	cursor: pointer;
	position: relative;
	padding-right: 20px;
}
.staxx-filter-toggle::after {
	content: '\25BC';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 10px;
	line-height: 1;
}
.staxx-filter-expanded::after {
	content: '\25B2';
}

/* Hide decorative arrows on product cards */
.products .avia-arrow {
	display: none;
}

/*= STICKY PRODUCT GALLERY ===================================================*/
#top.single-product #wrap_all {
	overflow: clip;
}
html.responsive.single-product,
.responsive body.single-product {
	overflow-x: clip;
}
#top.single-product .product {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
}
#top.single-product .single-product-main-image {
	float: none;
	overflow: visible;
	flex: 0 0 66.666%;
	max-width: 66.666%;
	position: sticky;
	top: 130px;
}
#top.admin-bar.single-product .single-product-main-image {
	top: 165px;
}
#top.single-product .single-product-summary {
	float: none;
	flex: 0 0 33.333%;
	max-width: 33.333%;
	min-width: 0;
}

#top .variations_form {
	margin-top: 15px;
}

.integ-product-sku {
	margin-bottom: 5px;
}

.integ-brief-description{
	margin-top: 0px;
	margin-bottom: 5px;
}

/*= Favorites ========================================*/
ul.products li.product .tinvwl_add_to_wishlist_button {
	font-size: 0px;
	line-height: 10px;
}

/* The .inner_product_header (position: relative) sits above the favorites
   wrapper in the catalog card layout and overlaps its click area.
   .tinv-wraper is position:static by default so z-index has no effect on
   it — promote to position:relative so z-index actually takes hold, then
   lift it above the header. */
ul.products li.product .tinv-wraper {
	position: relative;
	z-index: 2;
}


/*= PRODUCT GALLERY THUMBNAIL SLIDER ========================================*/
.single-product div.product .woocommerce-product-gallery {
	display: flex;
	flex-direction: row;
	gap: 10px;
}
.single-product div.product .woocommerce-product-gallery .flex-viewport {
	flex: none;
	width: calc(100% - 90px);
	min-width: 0;
	order: 2;
	position: relative;
	overflow: hidden;
}
#top.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image a {
	display: block;
	position: relative;
	padding-bottom: 69.83%; /* 419/600 = 0.6983 */
	background: #f0f0f0;
	overflow: hidden;
}
#top.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
#top.single-product .single-product-main-image .avia-wc-30-product-gallery-lightbox {
	left: 100px;
}
#top.single-product .single-product-main-image:not(:has(.integ-thumb-slider)) .avia-wc-30-product-gallery-lightbox {
	left: 100px;
}
#top.single-product .single-product-main-image:not(:has(.integ-thumb-slider)) .woocommerce-product-gallery .flex-viewport,
#top.single-product .single-product-main-image:not(:has(.integ-thumb-slider)) .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	margin-left: 90px;
}
.single-product div.product .woocommerce-product-gallery .integ-thumb-slider {
	order: 1;
	flex: 0 0 80px;
	position: relative;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	overflow-y: auto;
	overflow-x: hidden;
	gap: 4px;
	margin-top: 0;
	scroll-snap-type: y mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	max-height: 100%;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
	float: none !important;
	width: 100% !important;
	flex: 0 0 auto;
	list-style: none;
	scroll-snap-align: start;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
	display: block;
	width: 100%;
	cursor: pointer;
}
.integ-thumb-slider {
	position: relative;
}
.integ-thumb-arrow {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,0.9);
	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: opacity 0.2s;
}
.integ-thumb-arrow:hover {
	background: #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.integ-thumb-prev {
	top: 4px;
}
.integ-thumb-next {
	bottom: 4px;
}
.integ-thumb-arrow--hidden {
	opacity: 0;
	pointer-events: none;
}

#top .sub_menu>ul, #top .sub_menu>ul>li {
	line-height: 20px;
}
/*#top .menu-item-gtranslate > a > span::after {
	clear:both;
	content: 'Translate';
	display: block;
	text-align: center;
	font-size: 10px;
	top: -5px;
	position: relative;
}*/

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	#top.single-product .single-product-main-image {
		flex: 0 1 50%;
		max-width: 49%;
		overflow: hidden !important;
		position: static;
		margin-right: 10px !important;
		padding-bottom: 0 !important;
	}
	#top.single-product .single-product-summary {
		flex: 0 1 50%;
		max-width: 50%;
		overflow: hidden;
	}
	.single-product div.product .woocommerce-product-gallery .flex-viewport {
		width: calc(100% - 70px);
	}
	.single-product div.product .woocommerce-product-gallery .integ-thumb-slider {
		flex: 0 0 60px;
	}
	#top.single-product .single-product-main-image .avia-wc-30-product-gallery-lightbox {
		left: 80px;
	}

}

@media only screen and (max-width: 991px) {
	.responsive #top #menu-item-shop.cart_dropdown {
		margin: 0;
		top: 0;
		border: none;
		height: 100%;
		width: auto;
		line-height: 80px;
		position: static;
		margin-left: -39px;
	}

	.responsive #top #header_main #menu-item-shop .cart_dropdown_link {
		line-height: 80px;
	}
}

@media only screen and (max-width: 767px) {
	#top.single-product .product {
		flex-wrap: wrap;
	}
	#top.single-product .single-product-main-image {
		position: static;
		flex: 0 0 100%;
		max-width: 100%;
	}
	#top.single-product .single-product-summary {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.single-product div.product .woocommerce-product-gallery {
		flex-direction: column;
	}
	.single-product div.product .woocommerce-product-gallery .flex-viewport {
		order: 1;
		width: 100%;
	}
	.single-product div.product .woocommerce-product-gallery .integ-thumb-slider {
		order: 2;
		flex-basis: auto;
	}
	.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
	}
	.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
		width: 23% !important;
		flex: 0 0 23%;
	}
	#top.single-product .single-product-main-image .avia-wc-30-product-gallery-lightbox {
		left: 10px;
	}
	/* Request Quote / Check stock: one per line at 80% on mobile (client
	   request — they were too narrow). */
	#top form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
		float: none;
		display: block;
		width: 80% !important;
		min-width: 0 !important;
		box-sizing: border-box;
		background: transparent;
		color: black;
		border: 1px solid black;
	}

	#top form.cart .button {
		background-color: transparent;
		color: black;
		border: 1px solid black;
		width: 95%;
	}

	/* Summary header on mobile: Request Sample sits right-aligned directly
	   under the favorites heart, and the price drops to its own full-width
	   line below both (it used to share a line with Request Sample and wrap). */
	#top .integ-order-sample {
		float: right;
		clear: right;
		width: auto;
		margin: 0 0 5px;
	}
	#top .summary > p.price {
		clear: both;
		white-space: nowrap;
	}
	#top .staxx-check-stock {
		flex: 0 0 100%;
		margin-left: 0;
	}
	#top .staxx-check-stock #staxx-check-stock {
		display: block;
		width: 80%;
		box-sizing: border-box;
		text-align: center;
	}
	#top .integ-order-sample .integ-order-sample-btn {
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}
	.single-product div.product .woocommerce-product-gallery>.woocommerce-product-gallery__wrapper {
		max-width: 100%;
	}
}

/* WC password-toggle eye icon — Staxx disables woocommerce-layout.css, so
   the show-password button rendered by WC's JS has no styling otherwise. */
.woocommerce form .form-row .woocommerce-Input-wrapper,
.woocommerce form .form-row .woocommerce-input-wrapper,
.woocommerce form .form-row .password-input {
	position: relative;
}
.woocommerce form .form-row .show-password-input {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	cursor: pointer;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0.7em;
	top: 50%;
	text-decoration: none;
	transform: translateY(-50%);
	-webkit-appearance: none;
}
.woocommerce form .form-row .show-password-input::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23111111"/></svg>');
}
.woocommerce form .form-row .show-password-input.display-password::before {
	background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23111111"/></svg>');
}

/* Hide Enfold's "Display N Products per page" selector on shop/catalog pages.
   The per-page count is locked to 45 via loop_shop_per_page filter. */
.avia-product-sorting .sort-param-count {
	display: none !important;
}

/* Fix for displaying the scroll-top link on mobile */
@media only screen and (max-width: 767px) {
	.responsive #top  #scroll-top-link {
		display: block;
	}
}

.html_header_top #menu-item-shop.cart_dropdown {
	border: none;
}

/* Hide the cart's checkout button for users without a wd_customer_id.
   The body class is set by class-woocommerce-checkout.php; covers both the
   block-based cart submit and the classic cart shortcode button. */
body.integ-no-wd-customer .wc-block-cart__submit-container,
body.integ-no-wd-customer .wc-block-cart__submit-button,
body.integ-no-wd-customer .wc-proceed-to-checkout {
	display: none !important;
}

.product_care_tabs a {
	width:23%
}

.product_care_tabs a span {
	width: 100%;
	font-size:18px;
}

/* Wider catalog filter sidebar on shop / category pages only */
.template-shop .container .av-content-small.units { width: 81%; }

/* Hide the coupon entry and the flat-rate shipping row from the block-based
   cart totals. WD handles shipping pricing on its side, so the placeholder
   "Flat rate — FREE" row is noise, and coupons aren't part of the trade
   flow on this site. */
.wc-block-components-totals-coupon,
.wp-block-woocommerce-cart-order-summary-coupon-form-block,
.wc-block-components-totals-shipping,
.wp-block-woocommerce-cart-order-summary-shipping-block {
	display: none !important;
}

/* With coupon + shipping rows removed, the heading-block's bottom border
   and the totals-block's top border end up adjacent — showing as two lines
   stacked. Drop the heading's bottom border so only the totals row's top
   border separates the heading from the "Estimated total" line. */
.wp-block-woocommerce-cart-order-summary-heading-block, .wc-block-components-totals-wrapper {
	border-top: 0 !important;
}

/* Hide product prices in the Related Products and Recently Viewed sections
   on the single product page. user_pricing_html injects the AJAX price
   placeholder when is_product() is true, which also runs inside these
   product-loop sections — covers both the placeholder span and any price
   value that's already rendered. */
section.related.products .price,
section.related.products .integ-ajax-price {
	display: none !important;
}

/* Enfold's "Layout Tab" element renders each tab as a display:table-cell.
   Sibling cells equalize on the tallest one's height, and the default
   vertical-align of `middle` centers the shorter tabs' content — producing
   matching white-space gaps above and below. Pin to the top so the gap
   collapses (only the tallest tab will look unchanged). */
.av-layout-tab {
	vertical-align: top !important;
}

/* hide payment methods at checkout */
#top #payment ul.payment_methods {
	display: none;
}

.wc-block-cart-item__total {
	margin-top: -1px !important;
}

/* Mobile header right-side icons (account, search, cart, hamburger).
   Enfold's mobile rule on .cart_dropdown is `margin-left: -39px; float: left`,
   which on phone/tablet pulls the cart icon directly on top of the hamburger.
   Flatten nav.main_menu into a flex row using display: contents on the
   intermediate wrappers so all four icons become siblings, then order them
   left-to-right with no overlap. Also hide the social_bookmarks UL that
   otherwise spills below the row once the parent becomes flex. */
@media only screen and (max-width: 989px) {
	.responsive #top #header_main nav.main_menu {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		column-gap: 4px;
		height: 80px;
	}
	.responsive #top #header_main nav.main_menu > .avia-menu,
	.responsive #top #header_main nav.main_menu ul#avia-menu {
		display: contents !important;
	}
	.responsive #top #header_main ul#avia-menu > li#menu-item-wc-account-icon { order: 1 !important; }
	.responsive #top #header_main ul#avia-menu > li#menu-item-search { order: 2 !important; }
	.responsive #top #header_main ul#menu-item-shop.cart_dropdown {
		order: 3 !important;
		position: static !important;
		margin: 0 !important;
		float: none !important;
		width: auto !important;
		height: 80px !important;
		line-height: 80px !important;
	}
	.responsive #top #header_main ul#avia-menu > li.av-burger-menu-main {
		order: 4 !important;
		margin: 0 !important;
		padding: 0 !important;
		right: auto !important;
	}
	.responsive #top #header_main nav.main_menu ul.social_bookmarks {
		display: none !important;
	}
}

/* Between 990px (Enfold's hamburger cutoff) and 1199px the full desktop nav
   is visible but tight — "SPECIAL ORDERS" plus the other five items + icons
   spill into the logo around 1120px. Shrink font, padding, and letter-spacing
   so all six items fit without forcing the user into a hamburger this wide. */
@media only screen and (min-width: 990px) and (max-width: 1199px) {
	.responsive #top #header_main .av-main-nav > li.menu-item-top-level > a {
		font-size: 14px;
		padding-left: 7px;
		padding-right: 7px;
		letter-spacing: 0.5px;
	}
}

/* Enfold tab-section titles are inline-block aligned to baseline. When the
   titles wrap to different line counts (common on narrow phone widths), the
   taller titles poke above the shorter ones. Top-align so they share a top
   edge and grow downward instead, then shrink the inner text and add a
   little horizontal padding so adjacent tabs' words don't visually merge. */
@media only screen and (max-width: 767px) {
	.responsive #top .av-tab-section-tab-title-container .av-section-tab-title {
		vertical-align: top !important;
		padding: 0 !important;
	}
	.responsive #top .av-tab-section-tab-title-container .av-section-tab-title .av-inner-tab-title {
		font-size: 13px !important;
		padding: 0 6px !important;
		line-height: 1.3 !important;
	}
}

/* Two-row centered header (desktop + tablet, >= 990px).
   Row 1: [GTranslate][Search] ... centered logo ... [Account][Cart][IG]
   Row 2: ABOUT FABRICS GALLERY SPECIAL ORDERS CONTACT INFO (centered)

   Enfold ships the header as a single horizontal row (table layout on
   .container.av-logo-container, table-cell on .inner-container). We
   override that to flex-column so logo and menu stack, and pull the icon
   menu items out of the menu UL via absolute positioning so they sit in
   the top row. #header_main is the positioning context so the icons stay
   anchored to the full header width rather than the nav row. */
@media only screen and (min-width: 990px) {
	.avia-search-tooltip {
		left: 130px !important;
	}
	.responsive #top #header_main {
		position: relative !important;
		height: auto !important;
	}

	/* Break Enfold's table layout — collapse all wrappers to block-level
	   so the logo and menu stack vertically inside .inner-container. */
	.responsive #top .container_wrap_logo,
	.responsive #top .container_wrap_logo .container.av-logo-container,
	.responsive #top .container_wrap_logo .inner-container {
		display: block !important;
		height: auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.responsive #top .container_wrap_logo .inner-container {
		padding: 8px 30px 6px !important;
		text-align: center !important;
		position: static !important;
	}

	/* Pull the fixed header tight against the top of the viewport. Enfold's
	   default top:52px = WP admin bar (32) + framed-box top padding (20).
	   Override so the logo sits ~8px below the admin bar (or the viewport
	   top when not logged in) instead of ~38px. */
	.responsive #top #header.all_colors,
	.responsive.admin-bar #top #header.all_colors {
		/*top: 32px !important;*/
	}
	/* Logged-out only — WP puts the .admin-bar class on <body> (NOT <html>),
	   so body:not(.admin-bar) is what reliably differentiates logged-out
	   from logged-in. Pull the header to top:0 and strip the framed-box's
	   top padding so the header hugs the very top of the viewport. */
	.responsive body:not(.admin-bar) #header.all_colors {
		top: 0 !important;
	}
	body:not(.admin-bar) {
		margin-top: 0 !important;
	}
	html:has(body:not(.admin-bar)) {
		padding-top: 0 !important;
	}


	/* Logo: centered above the menu, height-capped so the SVG/PNG doesn't
	   stretch to fill its container (Enfold's default behavior). Enfold's
	   .logo defaults to overflow: hidden — force it visible so a tall
	   logo doesn't get clipped at the top. padding-top adds breathing
	   room above the SEDALLO mark since the source image is cropped
	   tight to the letters — without the gap the tops read as clipped
	   against the admin bar edge. */
	.responsive #top #header_main .logo,
	.responsive #top #header_main strong.logo {
		float: none !important;
		width: auto !important;
		height: auto !important;
		margin: 0 0 8px !important;
		padding-top: 10px !important;
		text-align: center !important;
		display: block !important;
		position: static !important;
		overflow: visible !important;
	}
	.responsive #top #header_main .logo a {
		display: inline-block !important;
		height: auto !important;
		overflow: visible !important;
	}
	.responsive #top #header_main .logo img,
	.responsive #top #header_main .logo svg {
		max-height: 35px !important;
		width: auto !important;
		height: auto !important;
		display: block !important;
		margin-bottom: 10px;
	}

	/* Main menu row */
	.responsive #top #header_main nav.main_menu,
	.responsive #top #header_main nav.main_menu > .avia-menu {
		position: static !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		text-align: center !important;
		height: auto !important;
		margin: 0 !important;
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		bottom: auto !important;
		display: block !important;
	}
	.responsive #top #header_main ul#avia-menu {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center !important;
		align-items: center;
		gap: 0 24px;
		height: auto !important;
		position: static !important;
		padding: 4px 0 8px !important;
		margin: 0 !important;
	}
	.responsive #top #header_main ul#avia-menu > li {
		height: auto !important;
		line-height: normal !important;
		margin: 0 !important;
		float: none !important;
	}

	/* Enfold's JS (avia_apply_size_to_blocks) sets inline `height` and
	   `line-height` on the logo and every menu <a> to fill the legacy single
	   row header height — values around 130-243px depending on header
	   settings. Without these overrides, the LIs sit 240px tall and push
	   the menu row hundreds of pixels below the logo. !important needed
	   because the inline style otherwise wins. */
	.responsive #top #header_main .logo,
	.responsive #top #header_main strong.logo,
	.responsive #top #header_main .logo a {
		line-height: 1 !important;
	}
	.responsive #top #header_main ul#avia-menu,
	.responsive #top #header_main ul#avia-menu > li,
	.responsive #top #header_main ul#avia-menu > li > a,
	.responsive #top #header_main ul#menu-item-shop.cart_dropdown,
	.responsive #top #header_main ul#menu-item-shop.cart_dropdown > li,
	.responsive #top #header_main ul#menu-item-shop.cart_dropdown a {
		height: auto !important;
		line-height: normal !important;
	}

	/* Pull the icon menu items out of the flex menu row and anchor them
	   absolutely against #header_main so they sit in the top row beside
	   the logo. */
	.responsive #top #header_main li.menu-item-gtranslate {
		position: absolute !important;
		top: 28px;
		left: 30px;
		z-index: 10;
	}
	.responsive #top #header_main li#menu-item-search {
		position: absolute !important;
		top: 28px;
		left: 100px;
		/* High z so the search popup (which lives inside this LI) renders
		   above the rest of the menu items. The popup itself has a higher
		   internal z, but those are confined to this LI's stacking context
		   — at the page level it stacks as "this LI's z". */
		z-index: 9999;
	}
	.responsive #top #header_main li#menu-item-wc-account-icon {
		position: absolute !important;
		top: 27px;
		right: 123px;
		z-index: 10;
	}
	.responsive #top #header_main ul#menu-item-shop.cart_dropdown {
		position: absolute !important;
		top: 28px;
		right: 80px;
		left: auto !important;
		margin: 0 !important;
		height: auto !important;
		/* High enough so the mini-cart popup sits above sibling nav items
		   (CONTACT, INFO) that otherwise overlap when their absolute-ish
		   positioning bleeds into the dropdown area. */
		z-index: 9999;
	}
	.responsive #top #header_main nav.main_menu ul.social_bookmarks {
		position: absolute !important;
		top: 28px;
		right: 52px;
		margin: 0 !important;
		display: block !important;
		z-index: 10;
	}
	/* Resize the Instagram glyph so it matches the account / cart icons
	   sitting beside it. Enfold ships `min-height: 30px; height: 100%`
	   on .social_bookmarks li a, so we have to nuke min-height too —
	   `height: 26px !important` alone gets overruled by the min-height. */
	.responsive #top #header_main nav.main_menu ul.social_bookmarks li.av-social-link-instagram a {
		min-height: 0 !important;
		width: 26px !important;
		height: 26px !important;
		line-height: 26px !important;
		font-size: 14px !important;
	}
	.responsive #top #header_main nav.main_menu ul.social_bookmarks li.av-social-link-instagram {
		min-height: 0 !important;
		height: 26px !important;
	}

	/* "Search" label next to the search icon. The default anchor is just
	   an SVG glyph with screen-reader-only text; flex it inline-row so
	   icon + label sit side by side. */
	.responsive #top #header_main li#menu-item-search a {
		display: inline-flex !important;
		align-items: center !important;
		gap: 8px !important;
	}
	.responsive #top #header_main li#menu-item-search a::after {
		content: "Search";
		font-size: 14px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: inherit;
		line-height: 1;
	}

	/* Replace Enfold's filled entypo-fontello glyphs (account, cart, IG)
	   with thin-stroke outline icons (Heroicons + Feather) to match the
	   LV-style header mockup. Each anchor gets the new icon as a CSS
	   background-image (inline SVG data URI) while the original SVG
	   child is hidden — except for the cart counter badge, which is a
	   sibling of .av-cart-container so it stays visible. */
	.responsive #top #header_main ul#avia-menu > li#menu-item-wc-account-icon > a {
		width: 26px !important;
		height: 26px !important;
		display: inline-block !important;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'><path stroke-linecap='round' stroke-linejoin='round' d='M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/></svg>");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
	.responsive #top #header_main li#menu-item-wc-account-icon > a > svg {
		display: none !important;
	}

	.responsive #top #header_main ul#menu-item-shop.cart_dropdown a.cart_dropdown_link {
		width: 26px !important;
		height: 26px !important;
		display: inline-block !important;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'><path stroke-linecap='round' stroke-linejoin='round' d='M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z'/></svg>");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
	.responsive #top #header_main ul#menu-item-shop.cart_dropdown a.cart_dropdown_link > .av-cart-container {
		display: none !important;
	}

	.responsive #top #header_main nav.main_menu ul.social_bookmarks li.av-social-link-instagram > a {
		width: 26px !important;
		height: 26px !important;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='20' rx='5' ry='5'/><path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/><line x1='17.5' y1='6.5' x2='17.51' y2='6.5'/></svg>") !important;
		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		color: transparent !important;
		border-radius: 0 !important;
		line-height: 26px !important;
		font-size: 0 !important;
	}
	.responsive #top #header_main nav.main_menu ul.social_bookmarks li.av-social-link-instagram > a > svg {
		display: none !important;
	}
	.responsive #top #header_main nav.main_menu ul.social_bookmarks li.av-social-link-instagram > a::before {
		content: none !important;
	}

	/* Hamburger only shows below 990px; force it off here in case Enfold
	   re-enables it for tablet (html_mobile_menu_tablet class). */
	.responsive #top #header_main li.av-burger-menu-main {
		display: none !important;
	}
}

/* Mobile (below Enfold's burger breakpoint): the search icon LI keeps
   rendering in the header bar even though it has the .noMobile class
   (Enfold's noMobile only filters from the hamburger overlay, not the
   visible bar). With the new logo it now overlaps the logo art. Hide
   it on mobile entirely — the hamburger menu opens to a sidebar that
   includes the search form below the menu items, so the icon is
   redundant at this width anyway. */
@media only screen and (max-width: 767px) {
	.responsive .logo img, .responsive .logo svg {
		width: 35%;
	}

	.responsive #top #header_main > .container .main_menu .av-main-nav > li > a {
		padding-left:5px;
		padding-right: 5px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
	.responsive .logo img, .responsive .logo svg {
		width: 35%;
		margin-top: 20px;
		margin-left: 15px;
	}
}

.integ-product-sku {
	font-size: 15px;
	line-height: 24px;
	font-weight: 600;
	color: black;
}