/* =============================================
   Homepage — carousel sections wrapper + New Arrivals grid
   .deal-card, .cart-overlay-btn, and the shared button color/border
   styles live in product-card.css (shared with category/brand
   pages), loaded alongside this file.
   ============================================= */

.deals-carousel-section {
	padding: 40px 0;
}

.carousel-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.carousel-header__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.carousel-header__view-more {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-accent);
	white-space: nowrap;
	flex-shrink: 0;
}

.carousel-header__view-more:hover,
.carousel-header__view-more:focus-visible {
	color: var(--color-accent-dark);
}

.carousel-header__view-more svg {
	flex-shrink: 0;
}

.carousel-eyebrow {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-accent);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.carousel-title {
	font-size: 1.5rem;
	margin: 0;
}

/* Dev-only note (see solid_theme_maybe_render_slug_debug_note() in
   front-page.php) shown when WP_DEBUG is on and a carousel slug
   didn't resolve to a real term, so its View More link got hidden.
   Invisible in production since the PHP only prints it under
   WP_DEBUG in the first place. */
.solid-debug-note {
	font-family: monospace;
}

/* Wrap holds the track + the two arrow buttons */
.carousel-wrap {
	position: relative;
}

.carousel-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 8px;
	scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
	display: none;
}

/* Arrow buttons */
.carousel-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text);
	cursor: pointer;
	z-index: 5;
	transition: background 0.15s ease, color 0.15s ease;
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
	background: var(--color-accent);
	color: #fff;
}

.carousel-arrow--left {
	left: -20px;
}

.carousel-arrow--right {
	right: -20px;
}

/* Card sizing for the carousel context specifically (product-card.css
   defines the card's look; this controls how many are visible per row).
   Steps down gradually as the screen narrows instead of jumping
   straight from desktop to mobile sizing, so cards — and the buttons
   inside them — always have enough room to stay legible. */
.carousel-track .deal-card {
	flex: 0 0 calc((100% - 4 * 16px) / 4.5);
	min-width: 0;
}

@media (max-width: 1024px) {
	.carousel-track .deal-card {
		flex: 0 0 calc((100% - 3 * 16px) / 3.5);
	}
}

@media (max-width: 768px) {
	.carousel-track {
		gap: 14px;
	}

	.carousel-track .deal-card {
		flex: 0 0 calc((100% - 2 * 14px) / 2.6);
	}
}

@media (max-width: 640px) {
	.deals-carousel-section {
		padding: 28px 0;
	}

	.carousel-title {
		font-size: 1.2rem;
	}

	.carousel-header__view-more {
		font-size: 0.78rem;
	}

	.carousel-track {
		gap: 12px;
	}

	.carousel-track .deal-card {
		flex: 0 0 calc((100% - 1 * 12px) / 2.2);
	}

	.carousel-arrow {
		width: 32px;
		height: 32px;
	}

	.carousel-arrow--left {
		left: -12px;
	}

	.carousel-arrow--right {
		right: -12px;
	}
}

/* Smallest phones: two skinny cards with two buttons each stopped
   being usable, so show one full card at a time (with a peek of the
   next) instead of forcing everything smaller and smaller. */
@media (max-width: 420px) {
	.carousel-track .deal-card {
		flex: 0 0 calc(100% - 44px);
	}
}

/* =============================================
   New Arrivals — static grid, no scrolling
   Columns: 2 (small) / 3 (medium) / 4 (large).
   min-width: 0 on the grid items is what actually fixes cards
   silently overflowing/clipping instead of shrinking to fit their
   column — grid items default to a content-based minimum width,
   which is what was pushing cards past the screen edge before.
   Button color/border comes from product-card.css
   (.simple-card__btn.btn-secondary / .btn-primary); the overlay
   Add to Cart icon's styling lives in product-card.css too
   (.cart-overlay-btn), shared with category/brand cards.
   The section's "View More" link reuses .carousel-header__view-more
   above, so no separate rule is needed for it here.
   ============================================= */

.new-arrivals-section {
	padding: 40px 0;
}

.new-arrivals-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.simple-card {
	display: block;
	color: var(--color-text);
	min-width: 0;
}

.simple-card__image-link {
	position: relative;
	display: block;
}

.simple-card__image-anchor {
	display: block;
}

.simple-card__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: rgba(28, 28, 28, 0.72);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 3px 9px;
	border-radius: 999px;
	z-index: 2;
	max-width: calc(100% - 16px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* "New" badge gets its own accent color so it reads as a distinct
   signal from the (Sale %) badge, not just a generic label. */
.simple-card__badge--new {
	background: var(--color-accent);
}

.simple-card__image {
	aspect-ratio: 1 / 1;
	background: var(--color-bg-alt);
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: 10px;
}

.simple-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.simple-card__image--placeholder {
	background: linear-gradient(135deg, #f0f0f0, #e2e2e2);
}

.simple-card__title-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.simple-card__title {
	font-size: 0.9rem;
	font-weight: 500;
	margin: 0 0 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.simple-card__title-link:hover .simple-card__title,
.simple-card__title-link:focus-visible .simple-card__title {
	color: var(--color-accent);
}

.simple-card__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 0.85rem;
	margin-bottom: 8px;
}

.simple-card__price-regular {
	color: var(--color-text-muted);
	text-decoration: line-through;
	font-size: 0.8rem;
}

.simple-card__price-sale {
	color: var(--color-accent);
	font-weight: 700;
}

/* Now holds just the single WhatsApp button — Add to Cart moved onto
   the image as an overlay icon (.cart-overlay-btn, product-card.css) */
.simple-card__actions {
	display: flex;
	gap: 6px;
}

.simple-card__btn {
	flex: 1;
	min-width: 0;
	padding: 9px 8px;
	font-size: 0.8rem;
	font-weight: 700;
	text-align: center;
	white-space: normal;
	line-height: 1.25;
	overflow-wrap: break-word;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: background 0.15s ease, color 0.15s ease;
}

@media (max-width: 1024px) {
	.new-arrivals-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
}

@media (max-width: 640px) {
	.new-arrivals-section {
		padding: 28px 0;
	}

	.new-arrivals-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.simple-card__btn {
		padding: 8px 6px;
		font-size: 0.74rem;
	}
}

@media (max-width: 420px) {
	.new-arrivals-grid {
		gap: 10px;
	}

	.simple-card__title {
		font-size: 0.85rem;
	}
}

/* =============================================
   Flash Sale banner with countdown
   ============================================= */

.flash-sale-section {
	padding: 40px 0;
}

.flash-sale-banner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: 40px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-bg);
}

.flash-sale-banner__content {
	padding: 40px;
}

.flash-sale-banner__eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-accent);
	margin-bottom: 8px;
}

.flash-sale-banner__title {
	font-size: 1.7rem;
	margin: 0 0 8px;
	color: var(--color-text);
}

.flash-sale-banner__subtitle {
	font-size: 0.9rem;
	color: var(--color-text-muted);
	margin: 0 0 24px;
}

.flash-sale-countdown {
	display: flex;
	gap: 10px;
	margin-bottom: 28px;
}

.countdown-unit {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	width: 62px;
	padding: 10px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.countdown-unit__value {
	font-size: 1.3rem;
	font-weight: 700;
	font-family: var(--font-heading);
	color: var(--color-accent);
}

.countdown-unit__label {
	font-size: 0.66rem;
	text-transform: uppercase;
	color: var(--color-text-muted);
	letter-spacing: 0.04em;
}

.flash-sale-banner__image {
	height: 100%;
	min-height: 260px;
	background: var(--color-bg-alt);
	display: flex;
	align-items: center;
	justify-content: center;
}

.flash-sale-banner__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.flash-sale-banner__image-placeholder {
	width: 100%;
	height: 100%;
	min-height: 260px;
	background: linear-gradient(135deg, #f0f0f0, #e2e2e2);
}

@media (max-width: 880px) {
	.flash-sale-banner {
		grid-template-columns: 1fr;
	}

	.flash-sale-banner__image {
		order: -1;
		min-height: 200px;
	}
}

@media (max-width: 640px) {
	.flash-sale-banner__content {
		padding: 28px 20px;
	}

	.flash-sale-banner__title {
		font-size: 1.3rem;
	}

	.countdown-unit {
		width: 52px;
		padding: 8px 0;
	}

	.countdown-unit__value {
		font-size: 1.1rem;
	}
}

/* =============================================
   Trust badges
   ============================================= */

.trust-badges-section {
	padding: 32px 0 48px;
}

.trust-badges-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.trust-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 20px 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.trust-badge__icon {
	color: var(--color-accent);
}

.trust-badge__title {
	font-size: 0.95rem;
	margin: 0;
}

.trust-badge__subtitle {
	font-size: 0.8rem;
	color: var(--color-text-muted);
	margin: 0;
}

@media (max-width: 880px) {
	.trust-badges-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

@media (max-width: 480px) {
	.trust-badges-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.trust-badge {
		padding: 16px 8px;
	}

	.trust-badge__icon {
		width: 22px;
		height: 22px;
	}
}