/* ==========================================================================
   OTWC New Arrivals Showcase — front-end styles
   Namespaced with .otwc- prefix throughout to avoid clashing with Divi.
   ========================================================================== */

/* Brand color matches the site's existing header buttons (Wholesale
   Login / Create An Account) rather than a generic placeholder navy.
   Retint the whole banner in one place by changing --otwc-accent. */
:root {
	--otwc-accent: #1e73be;
	--otwc-accent-dark: #175a96;
	--otwc-ink: #222222;
	--otwc-muted: #5a6570;
	--otwc-radius-lg: 14px;
	--otwc-radius-sm: 10px;
}

/* ---- The What's New banner: one sliding track, arrows either side ---- */

.otwc-banner {
	display: flex;
	align-items: center;
	gap: 16px;
}

.otwc-banner__viewport {
	flex: 1 1 auto;
	overflow: hidden;
	border-radius: var(--otwc-radius-lg);
	box-shadow: 0 8px 30px rgba(20, 40, 60, 0.12);
}

.otwc-banner__track {
	display: flex;
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	/* Width is set inline per-instance (see PHP) to slide-count * 100%,
	   so each .otwc-banner__slide's equal flex-basis works out to exactly
	   one viewport-width, and the JS's translateX(%) math lines up. */
}

/* Each slide (hero OR a group of 4 products) takes an equal share of the track */
.otwc-banner__slide {
	flex: 1 1 0;
	max-width: 100%;
}

.otwc-banner__nav {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: none;
	background: var(--otwc-accent);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 3px 10px rgba(30, 115, 190, 0.35);
	transition: background 0.2s ease, transform 0.15s ease;
}

.otwc-banner__nav:hover:not(:disabled) {
	background: var(--otwc-accent-dark);
	transform: scale(1.06);
}

.otwc-banner__nav:disabled {
	opacity: 0.3;
	box-shadow: none;
	cursor: default;
}

@media (max-width: 599px) {
	.otwc-banner {
		gap: 8px;
	}
	.otwc-banner__nav {
		width: 36px;
		height: 36px;
		font-size: 18px;
	}
}

/* -- Slide 1: featured hero (image left / title+desc right) -- */

.otwc-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	text-decoration: none;
	color: inherit;
	background: linear-gradient(135deg, var(--otwc-accent-dark), var(--otwc-accent));
	min-height: 440px;
}

.otwc-hero__image {
	flex: 1 1 50%;
	min-width: 280px;
	overflow: hidden;
	position: relative;
	background: #eef3f7;
}

.otwc-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.5s ease;
}

.otwc-hero:hover .otwc-hero__image img {
	transform: scale(1.04);
}

/* Soft gradient where the image meets the copy panel, so the seam
   reads as an intentional blend rather than a hard edge. */
.otwc-hero__image::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 60px;
	background: linear-gradient(to right, rgba(23, 90, 150, 0), var(--otwc-accent-dark));
	opacity: 0.25;
	pointer-events: none;
}

.otwc-hero__content {
	flex: 1 1 50%;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px;
	color: #ffffff;
}

.otwc-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 12.5px;
	font-weight: 700;
	opacity: 0.85;
	margin-bottom: 10px;
}

.otwc-hero__title {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 14px;
	color: #ffffff;
}

.otwc-hero__desc {
	font-size: 16px;
	line-height: 1.6;
	opacity: 0.92;
	margin-bottom: 24px;
	max-width: 46ch;
}

.otwc-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 15px;
	padding: 12px 24px;
	background: #ffffff;
	color: var(--otwc-accent-dark);
	border: 2px solid #ffffff;
	border-radius: 999px;
	width: fit-content;
	transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.otwc-hero:hover .otwc-hero__cta {
	background: transparent;
	color: #ffffff;
	transform: translateX(2px);
}

@media (max-width: 767px) {
	.otwc-hero {
		flex-direction: column;
		min-height: 0;
	}
	.otwc-hero__image {
		max-height: 280px;
	}
	.otwc-hero__image::after {
		display: none; /* seam gradient reads oddly once stacked vertically */
	}
	.otwc-hero__content {
		padding: 30px 26px;
	}
	.otwc-hero__title {
		font-size: 25px;
	}
}

@media (max-width: 480px) {
	.otwc-hero__image {
		max-height: 220px;
	}
	.otwc-hero__content {
		padding: 24px 20px;
	}
	.otwc-hero__title {
		font-size: 21px;
	}
	.otwc-hero__desc {
		font-size: 14px;
		margin-bottom: 16px;
	}
	.otwc-hero__cta {
		padding: 9px 18px;
		font-size: 14px;
	}
}

/* -- Slides 2+: a group of 4 clickable product tiles -- */

.otwc-banner__slide--products {
	display: flex;
	gap: 20px;
	min-height: 340px;
	align-items: stretch;
	background: #f6f8fa;
	padding: 32px;
}

.otwc-banner__product {
	flex: 1 1 calc(25% - 15px);
	background: #ffffff;
	border-radius: var(--otwc-radius-sm);
	box-shadow: 0 2px 8px rgba(20, 40, 60, 0.08);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* content sits at top — no gap pushed in from a stretched row */
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.otwc-banner__product:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 22px rgba(20, 40, 60, 0.14);
}

.otwc-banner__product-image {
	display: block;
	aspect-ratio: 4 / 3; /* shorter than a full square — less empty box around the product */
	overflow: hidden;
	background: #eef1f4;
}

.otwc-banner__product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Product photography here has generous white padding baked into
	   the source image itself, which reads as empty space in the tile.
	   Scaling the image up crops that padding out and fills the frame
	   with more of the actual product. */
	transform: scale(1.35);
	transition: transform 0.35s ease;
}

.otwc-banner__product:hover .otwc-banner__product-image img {
	transform: scale(1.45);
}

.otwc-banner__product-title {
	display: block;
	padding: 10px 14px 14px;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--otwc-ink);
	text-align: center;
}

@media (max-width: 767px) {
	.otwc-banner__slide--products {
		flex-wrap: wrap;
		min-height: 0;
		padding: 22px;
		align-items: flex-start;
	}
	.otwc-banner__product {
		flex: 1 1 calc(50% - 10px);
	}
}

@media (max-width: 480px) {
	.otwc-banner__slide--products {
		padding: 16px;
		gap: 14px;
	}
	.otwc-banner__product {
		flex: 1 1 100%;
	}
}

/* ---- Grid (What's New page, alphabetical) ---- */

.otwc-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	margin-top: 28px;
}

.otwc-grid__item {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
}

.otwc-grid__item-image {
	display: block;
	aspect-ratio: 4 / 3; /* shorter than a full square — less empty box around the product */
	overflow: hidden;
	border-radius: var(--otwc-radius-sm);
	background: #eef1f4;
	margin-bottom: 8px;
	box-shadow: 0 2px 8px rgba(20, 40, 60, 0.06);
}

.otwc-grid__item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Same padding-crop treatment as the banner tiles — see note there. */
	transform: scale(1.35);
	transition: transform 0.35s ease;
}

.otwc-grid__item:hover .otwc-grid__item-image img {
	transform: scale(1.45);
}

.otwc-grid__item-title {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
	color: var(--otwc-ink);
	margin-bottom: 4px;
}

.otwc-grid__item-price {
	font-size: 14px;
	color: var(--otwc-accent-dark);
	font-weight: 600;
}

@media (max-width: 991px) {
	.otwc-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 22px;
	}
}

@media (max-width: 767px) {
	.otwc-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}
}