/*
Theme Name:     Ioweb-child
Theme URI:      
Description:    Hello-elementor child theme.
Author:         Me
Author URI:     
Template:       hello-elementor
Version:        0.1.0
*/

/* ============================================================
   YITH WooCommerce Compare — mobile readability
   The plugin's hardcoded "wide" (DataTables + FixedColumns)
   layout computes a very wide field-label column on phones,
   pushing the product columns off-screen. On small screens we
   narrow the label column, shrink the product images, and add a
   right-edge fade so it reads as a horizontally-scrollable table.
   ============================================================ */
@media (max-width: 600px) {
	/* Smaller product images -> narrower product columns */
	table.compare-list img,
	table.compare-list .DTFC_Cloned img {
		max-width: 88px !important;
		height: auto !important;
	}

	/* Tighter, still-readable cells. The product columns get a hard
	   width to override DataTables' inline 300px sizing-row widths,
	   so a product is visible next to the labels instead of off-screen. */
	table.compare-list th,
	table.compare-list td {
		padding: 9px 12px !important;
		font-size: 13px !important;
		line-height: 1.4 !important;
		white-space: normal !important;
		width: 132px !important;
		min-width: 132px !important;
		max-width: 132px !important;
	}

	/* Narrow the field-label (first) column so products are visible */
	table.compare-list th:first-child,
	table.compare-list td:first-child {
		width: 92px !important;
		min-width: 92px !important;
		max-width: 92px !important;
	}
	/* Drop the FixedColumns clone on phones: it duplicates the label
	   column and leaves an off-screen gap. Let the table scroll as one
	   unit (label + products), so a product is visible immediately. */
	.DTFC_LeftWrapper,
	.DTFC_RightWrapper {
		display: none !important;
	}
	div.dataTables_scrollBody {
		margin-left: 0 !important;
	}

	/* Product columns: compact but tappable */
	table.compare-list .product_title,
	table.compare-list td a {
		font-size: 12px !important;
	}
	table.compare-list .button {
		font-size: 11px !important;
		padding: 6px 10px !important;
	}

	/* Swipe hint: subtle fade on the right edge of the scroll area */
	.dataTables_wrapper {
		position: relative;
	}
	.dataTables_wrapper::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 30px;
		height: 100%;
		pointer-events: none;
		background: linear-gradient(to right, rgba(244, 243, 241, 0), rgba(244, 243, 241, 0.95));
	}
}

/* ============================================================
   Off-canvas scroll-lock fix
   On close, Elementor adds body.e-off-canvas__no-scroll-animation
   (overflow:hidden) and only removes it on the slide-out
   animationend event. Our off-canvases have no exit animation (and
   reduced-motion suppresses animations anyway), so animationend
   never fires and the class stays stuck -> the page can no longer
   scroll after closing the filters/menu off-canvas. There is no
   animation to protect here, so neutralise the lock unconditionally.
   (The real "open" scroll-lock uses a different class,
   .e-off-canvas__no-scroll, which is removed synchronously on close
   and is intentionally left untouched.)
   ============================================================ */
body.e-off-canvas__no-scroll-animation {
	overflow: visible !important;
}

/* ============================================================
   YITH WooCommerce Compare — match site aesthetic
   Styles the comparison popup/page table and the
   "View comparison" button to the brand (Inter + terracotta).
   Uses the Elementor global terracotta var with a hex fallback
   (the var isn't defined inside the compare iframe).
   ============================================================ */
.yith-woocompare-open.button,
a.yith-woocompare-open {
	background-color: var(--e-global-color-terracotta, #B5664A) !important;
	border: 1px solid var(--e-global-color-terracotta, #B5664A) !important;
	color: #ffffff !important;
	border-radius: 8px;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: .05em;
}
.yith-woocompare-open.button:hover,
a.yith-woocompare-open:hover {
	background-color: #9d5239 !important;
	border-color: #9d5239 !important;
	color: #ffffff !important;
}

#yith-woocompare,
#yith-woocompare-table {
	font-family: 'Inter', sans-serif;
	color: #121212;
}
#yith-woocompare-table h2 {
	font-size: 22px;
	font-weight: 600;
	color: #121212;
	margin: 0 0 4px;
}
#yith-woocompare-table th,
#yith-woocompare-table td {
	border-color: #ececec !important;
}
#yith-woocompare-table th.fields {
	background: #f7f6f4 !important;
	color: #6d767d !important;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}
#yith-woocompare-table .product_title {
	font-size: 14px;
	font-weight: 600;
	color: #121212;
	line-height: 1.4;
}
#yith-woocompare-table a.product-anchor { text-decoration: none; }
#yith-woocompare-table a.product-anchor:hover .product_title { color: #b5664a; }
#yith-woocompare-table .woocommerce-Price-amount {
	font-weight: 600;
	color: #121212;
	font-size: 15px;
}
#yith-woocompare-table .availability-label { color: #6b7c5c; font-weight: 500; }
#yith-woocompare-table .add_to_cart_button,
#yith-woocompare-table a.button {
	background-color: var(--e-global-color-terracotta, #B5664A) !important;
	border: none !important;
	color: #ffffff !important;
	border-radius: 8px;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .04em;
	padding: 9px 18px;
}
#yith-woocompare-table .add_to_cart_button:hover,
#yith-woocompare-table a.button:hover {
	background-color: #9d5239 !important;
	color: #ffffff !important;
}
#yith-woocompare-table .remove a {
	color: #b0a99f;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
}
#yith-woocompare-table .remove a:hover { color: #da0a22; }