/**
 * Deals — fixed promo panel on the left, a horizontal scroll-snap product
 * carousel on the right (4 columns wide, filling row-major — left to
 * right, then wrapping down — scrolling sideways once it overflows),
 * arrows in the header driving the carousel.
 *
 * Shared by both "Deals Just for You" (zozia-beauty/deals) and "Zozia's
 * Spotlight Deals" (zozia-beauty/spotlight-deals) blocks — both render an
 * outer .zozia-deals wrapper.
 */

.zozia-deals {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin: 0 auto;
}

.zozia-deals__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--lg);
	margin-bottom: var(--wp--preset--spacing--lg);
}

.zozia-deals__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.zozia-deals__arrows {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

.zozia-deals__arrows.is-hidden {
	display: none;
}

.zozia-deals__arrow-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	border: 1px solid var(--wp--preset--color--border-light);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	padding: 0;
}

.zozia-deals__arrow-btn svg {
	width: 16px;
	height: 16px;
	display: block;
}

.zozia-deals__arrow-btn--next {
	border-color: var(--wp--preset--color--ink);
	border-width: 1.5px;
	color: var(--wp--preset--color--ink);
}

.zozia-deals__arrow-btn:hover {
	background-color: var(--wp--preset--color--surface);
}

.zozia-deals__arrow-btn:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.zozia-deals__body {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.zozia-deals__promo {
	flex: 0 0 260px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.zozia-deals__promo-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	color: var(--wp--preset--color--ink);
}

.zozia-deals__promo-line {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--muted);
}

/* Promo tabs (Deals Just for You): same visual hierarchy as the static
   heading/line styles above, just interactive — active tab takes the bold
   "heading" look, inactive tabs the muted "line" look. */
.zozia-deals__promo-tabs {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.zozia-deals__promo-tab {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	text-align: left;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	line-height: 1.3;
}

.zozia-deals__promo-tab:hover {
	color: var(--wp--preset--color--ink);
}

.zozia-deals__promo-tab.is-active {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	color: var(--wp--preset--color--ink);
}

.zozia-deals__promo-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 16px 0;
	border: 1.5px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	box-sizing: border-box;
}

.zozia-deals__promo-button:hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

/* Carousel column: min-width:0 lets it shrink inside the flex row so its
   own overflow-x:auto (not the page) is what scrolls. */
.zozia-deals__carousel {
	flex: 1 1 auto;
	min-width: 0;
}

/* Tab panels (Deals Just for You): only the panel matching the active
   promo tab is shown. Sections without tabs (e.g. Spotlight Deals) have
   no .zozia-deals__panel elements, so this never applies to them. */
.zozia-deals__panel {
	display: none;
}

.zozia-deals__panel.is-active {
	display: block;
}

/* Grid (not flex), 4 fixed-width columns, default row-major auto-flow —
   row 1 fills left-to-right across all 4 columns before row 2 starts,
   wrapping to as many rows as needed (3 at the intended 12-per-tab
   limit). The row still scrolls horizontally like a carousel once its
   content is wider than the visible area. The scroll container's
   width/scroll math (assets/js/deals.js) is unchanged by this: it only
   reads row.scrollWidth/clientWidth and card width, both still valid
   under grid. */
.zozia-deals__row {
	display: grid;
	grid-template-columns: repeat(4, 220px);
	gap: 16px;
	margin: 0;
	padding: 4px 4px 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.zozia-deals__row::-webkit-scrollbar {
	display: none;
}

.zozia-deals__view-more {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
	text-decoration: none;
}

.zozia-deals__view-more:hover {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.zozia-deals__view-more svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* Sizing/scroll-snap only — the card's look (image, badge, wishlist
   heart, title, price) is the canonical `.zozia-product-card` design in
   assets/css/product-card.css, dual-classed onto this element via
   zozia_render_product_card()'s `extra_class` arg. Shared with Spotlight
   Deals, which reuses this same `zozia-deals__*` layout (see
   blocks/spotlight-deals/render.php). */
.zozia-deals__card {
	width: 220px;
	scroll-snap-align: start;
}

.zozia-deals__empty {
	margin: 0;
	padding: 40px 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--muted);
}

/* Promo panel stacks above the carousel on narrower viewports. */
@media (max-width: 782px) {
	.zozia-deals__body {
		flex-direction: column;
	}

	.zozia-deals__promo {
		flex-basis: auto;
		width: 100%;
	}

	.zozia-deals__carousel {
		width: 100%;
	}
}