/*!
 * Storzen v1.2.1 — New Cart Widget Styles
 *
 * Covers:
 *  • .sz-empty-cart              (Empty Cart Message widget)
 *  • .szp-cross-sell-widget      (Cross-Sell Products widget)
 *
 * Loaded only on cart pages (is_cart()) via enqueue_cart_new_styles().
 *
 * @package storzen
 * @since   1.2.1
 */

/* ─────────────────────────────────────────────────────────────────────────────
   SHARED
   ───────────────────────────────────────────────────────────────────────── */

.sz-empty-cart *,
.szp-cross-sell-widget * {
	box-sizing: border-box;
}


/* ─────────────────────────────────────────────────────────────────────────────
   1. EMPTY CART MESSAGE WIDGET
   ───────────────────────────────────────────────────────────────────────── */

.sz-empty-cart {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 60px 20px;
	gap: 18px;
	box-sizing: border-box;
}

/* ── Illustration ── */
.sz-empty-cart__illustration {
	display: block;
	width: 140px;
	flex-shrink: 0;
	line-height: 0;
}

.sz-empty-cart__illustration img {
	width: 100%;
	height: auto;
	display: block;
}

/* Built-in SVG inherits CSS color for fill control via Elementor */
.sz-empty-cart__svg {
	display: block;
	width: 100%;
	height: auto;
	color: #d1d5db; /* overridden by Elementor color control */
}

/* ── Heading ── */
.sz-empty-cart__heading {
	margin: 0;
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.3;
	color: #111827;
}

/* ── Sub-text ── */
.sz-empty-cart__subtext {
	margin: 0;
	font-size: 0.95em;
	line-height: 1.6;
	color: #6b7280;
	max-width: 400px;
}

/* ── CTA Button ── */
.sz-empty-cart__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	background-color: #FF3636; /* overridden by Elementor */
	color: #ffffff;
	border: none;
	border-radius: 6px;
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.sz-empty-cart__cta:hover,
.sz-empty-cart__cta:focus-visible {
	background-color: #cc2929;
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-1px);
}

.sz-empty-cart__cta:active {
	transform: translateY(0);
}

/* Icon sizing inside button */
.sz-empty-cart__cta i,
.sz-empty-cart__cta svg {
	font-size: 0.9em;
	line-height: 1;
	flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. CROSS-SELL PRODUCTS WIDGET
   ───────────────────────────────────────────────────────────────────────── */

.szp-cross-sell-widget {
	width: 100%;
}

/* Section title */
.sz-cross-sell-title {
	margin: 0 0 20px;
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.3;
}

/* ── Product grid ──
   WooCommerce renders .cross-sells > ul.products.columns-N
   We override the default float layout with CSS Grid for modern alignment. */
.szp-cross-sell-widget .cross-sells ul.products {
	display: grid !important;
	float: none !important;
	grid-template-columns: repeat(var(--sz-xs-cols, 4), 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Column-count classes set by WooCommerce (columns-1 … columns-5) */
.szp-cross-sell-widget .cross-sells ul.products.columns-1 { --sz-xs-cols: 1; }
.szp-cross-sell-widget .cross-sells ul.products.columns-2 { --sz-xs-cols: 2; }
.szp-cross-sell-widget .cross-sells ul.products.columns-3 { --sz-xs-cols: 3; }
.szp-cross-sell-widget .cross-sells ul.products.columns-4 { --sz-xs-cols: 4; }
.szp-cross-sell-widget .cross-sells ul.products.columns-5 { --sz-xs-cols: 5; }

/* ── Individual product card ── */
.szp-cross-sell-widget .cross-sells ul.products li.product {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.szp-cross-sell-widget .cross-sells ul.products li.product:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

/* Product image */
.szp-cross-sell-widget .cross-sells ul.products li.product a img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.szp-cross-sell-widget .cross-sells ul.products li.product:hover a img {
	transform: scale(1.04);
}

/* Product title */
.szp-cross-sell-widget .cross-sells ul.products li.product
.woocommerce-loop-product__title {
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.4;
	padding: 10px 12px 4px;
	margin: 0;
}

/* Price */
.szp-cross-sell-widget .cross-sells ul.products li.product .price {
	display: block;
	padding: 0 12px 8px;
	font-size: 0.9em;
	font-weight: 700;
}

.szp-cross-sell-widget .cross-sells ul.products li.product .price del {
	opacity: 0.5;
	font-weight: 400;
	font-size: 0.9em;
}

.szp-cross-sell-widget .cross-sells ul.products li.product .price ins {
	text-decoration: none;
}

/* ATC / View button */
.szp-cross-sell-widget .cross-sells ul.products li.product .button,
.szp-cross-sell-widget .cross-sells ul.products li.product .add_to_cart_button {
	display: block;
	width: calc(100% - 24px);
	margin: auto 12px 12px;
	padding: 8px 12px;
	text-align: center;
	background-color: #FF3636; /* overridden by Elementor */
	color: #ffffff;
	border: none;
	border-radius: 4px;
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.szp-cross-sell-widget .cross-sells ul.products li.product .button:hover,
.szp-cross-sell-widget .cross-sells ul.products li.product .add_to_cart_button:hover {
	background-color: #cc2929;
	color: #ffffff;
}

/* Sale badge */
.szp-cross-sell-widget .cross-sells ul.products li.product .onsale {
	top: 8px;
	left: 8px;
	right: auto;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
}

/* ── Responsive ── */
@media (max-width: 1023px) {
	.szp-cross-sell-widget .cross-sells ul.products.columns-4,
	.szp-cross-sell-widget .cross-sells ul.products.columns-5 {
		--sz-xs-cols: 3;
	}
}

@media (max-width: 767px) {
	.szp-cross-sell-widget .cross-sells ul.products {
		--sz-xs-cols: 2;
	}

	.sz-empty-cart {
		padding: 40px 16px;
		gap: 14px;
	}
}

@media (max-width: 479px) {
	.szp-cross-sell-widget .cross-sells ul.products {
		--sz-xs-cols: 1;
	}
}

/* ── RTL ── */
[dir="rtl"] .szp-cross-sell-widget .cross-sells ul.products {
	direction: rtl;
}