/*
 * Urban Style Elementor Widgets — shared frontend stylesheet.
 *
 * Every rule in this file is scoped under a "usew-" prefixed class, so it
 * cannot collide with theme or other-plugin styles. Colors and most spacing
 * are left to Elementor's own per-widget style controls (Elementor injects
 * those as more specific, per-instance CSS that always wins over the
 * defaults below); this file carries the structural layout, the two
 * default typefaces, defensive resets against theme/browser defaults, and
 * the marquee/keyframe animation that Elementor controls can't express on
 * their own. This file is intentionally enqueued AFTER the active theme's
 * stylesheet (see USEW_Plugin::enqueue_frontend_styles) so that, on equal
 * CSS specificity, these defaults win the cascade instead of quietly
 * losing to a theme's generic `h1`, `a`, `button` rules.
 */

:root {
	--usew-font-heading: "Cormorant Garamond", Georgia, serif;
	--usew-font-body: "Manrope", system-ui, sans-serif;
}

/* Defensive base + font resets --------------------------------------------
   Applied narrowly to each widget's own root wrapper classes, so nothing
   here reaches outside these widgets or touches unrelated theme markup. */
.usew-announcement,
.usew-hero,
.usew-marquee,
.usew-products,
.usew-categories,
.usew-gallery,
.usew-features,
.usew-newsletter,
.usew-split {
	box-sizing: border-box;
	font-family: var(--usew-font-body);
	line-height: 1.5;
}
.usew-announcement *,
.usew-hero *,
.usew-marquee *,
.usew-products *,
.usew-categories *,
.usew-gallery *,
.usew-features *,
.usew-newsletter *,
.usew-split * {
	box-sizing: border-box;
}
.usew-hero__heading,
.usew-products__heading,
.usew-categories__label,
.usew-category__label,
.usew-gallery__heading,
.usew-features__title,
.usew-newsletter__heading,
.usew-split__heading,
.usew-hero__stat-value {
	font-family: var(--usew-font-heading);
	margin: 0;
	font-weight: 500;
}
.usew-hero__desc,
.usew-products__description,
.usew-gallery__description,
.usew-category__desc,
.usew-feature__desc,
.usew-newsletter__desc,
.usew-split__desc,
.usew-product__title,
.usew-hero__eyebrow,
.usew-products__eyebrow,
.usew-gallery__eyebrow,
.usew-split__eyebrow {
	font-family: var(--usew-font-body);
	margin: 0;
}
.usew-hero a,
.usew-products a,
.usew-categories a,
.usew-gallery a,
.usew-features a,
.usew-newsletter a,
.usew-split a,
.usew-announcement a {
	text-decoration: none;
}
.usew-hero ul,
.usew-hero ol,
.usew-products ul,
.usew-products ol,
.usew-features ul,
.usew-features ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
.usew-btn,
.usew-newsletter__field {
	font-family: var(--usew-font-body);
	box-sizing: border-box;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
}

/* Container width utility --------------------------------------------------
   Each section widget wraps its content in its own "__container" element
   carrying this class, giving it the same centered max-width column the
   original design used (mx-auto max-w-7xl px-5) — configurable per widget
   via the "Container Max Width" / "Side Padding" style controls. */
.usew-products__container,
.usew-categories__container,
.usew-gallery__container,
.usew-features__container,
.usew-split__container {
	box-sizing: border-box;
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.usew-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.usew-editor-notice {
	padding: 14px 18px;
	background: #fff8e5;
	border: 1px dashed #e0b400;
	color: #5c4a00;
	font-size: 13px;
	border-radius: 4px;
}

/* Shared buttons ---------------------------------------------------- */
.usew-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 220ms ease, filter 220ms ease, background-color 220ms ease, border-color 220ms ease, opacity 220ms ease;
}
.usew-btn--solid:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
}
.usew-btn--ghost:hover {
	filter: brightness(0.97);
}

/* Shared "eyebrow / heading / link" section header ------------------- */
[class$="__head"] {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 1.5rem;
}
[class$="__head-link"] {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	text-decoration: none;
	flex-shrink: 0;
}
.usew-arrow {
	display: inline-block;
	transition: transform 220ms ease;
}
[class$="__head-link"]:hover .usew-arrow {
	transform: translate(2px, -2px);
}

/* Announcement bar ---------------------------------------------------- */
.usew-announcement {
	width: 100%;
}
.usew-announcement__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.6em;
	text-align: center;
}
.usew-announcement__sep {
	opacity: 0.6;
}
.usew-announcement__link {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* Hero ------------------------------------------------------------------ */
.usew-hero {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.usew-hero__inner {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}
.usew-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.usew-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.usew-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.usew-hero--image-left .usew-hero__media {
	right: auto;
	left: 0;
}
.usew-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
}
.usew-hero__eyebrow {
	margin: 0 0 0.75em;
}
.usew-hero__heading {
	margin: 0;
}
.usew-heading-line {
	display: block;
}
.usew-hero__heading-highlight {
	font-style: italic;
}
.usew-hero__desc {
	margin-top: 1.5em;
}
.usew-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	margin-top: 2em;
}
.usew-hero__stats {
	display: grid;
	grid-template-columns: repeat(var(--usew-stats-count, 3), auto);
	gap: 1.5em;
	margin-top: 2.5em;
	padding-top: 1.5em;
}
.usew-hero__stat-value {
	margin: 0;
	line-height: 1;
}
.usew-hero__stat-label {
	margin: 0.4em 0 0;
	text-transform: uppercase;
}

/* Marquee ---------------------------------------------------------------- */
.usew-marquee {
	width: 100%;
	overflow: hidden;
}
.usew-marquee__track {
	display: flex;
	width: max-content;
	flex-wrap: nowrap;
	animation-name: usew-marquee;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: var(--usew-marquee-duration, 26s);
}
.usew-marquee--reverse .usew-marquee__track {
	animation-direction: reverse;
}
.usew-marquee--pausable:hover .usew-marquee__track {
	animation-play-state: paused;
}
.usew-marquee__group {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--usew-marquee-gap, 2.5rem);
	padding-right: var(--usew-marquee-gap, 2.5rem);
	flex-shrink: 0;
}
.usew-marquee__item {
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: var(--usew-marquee-gap, 2.5rem);
}
@keyframes usew-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.usew-marquee__track {
		animation: none;
	}
}

/* Product grid ------------------------------------------------------------ */
.usew-products__head {
	margin-bottom: 2em;
}
.usew-products__grid {
	display: grid;
	grid-template-columns: repeat(var(--usew-columns, 4), 1fr);
	gap: var(--usew-row-gap, 3rem) var(--usew-col-gap, 1.5rem);
}
.usew-product {
	display: block;
	text-decoration: none;
	color: inherit;
}
.usew-product__media {
	position: relative;
	overflow: hidden;
	display: block;
}
.usew-product__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: var(--usew-aspect, 4 / 5);
	transition: transform 700ms ease;
}
.usew-product:hover .usew-product__img {
	transform: scale(1.05);
}
.usew-product__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	text-transform: uppercase;
}
.usew-product__cta {
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 2;
	text-align: center;
	justify-content: center;
	transform: translateY(130%);
	opacity: 0;
	transition: transform 300ms ease, opacity 300ms ease;
}
.usew-product:hover .usew-product__cta,
.usew-product--cta-visible .usew-product__cta {
	transform: translateY(0);
	opacity: 1;
}
.usew-product__body {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1rem;
}
.usew-product__title {
	margin: 0;
	max-width: 18rem;
}
.usew-product__price {
	flex-shrink: 0;
	text-align: right;
	white-space: nowrap;
}
.usew-product__price .price ins {
	text-decoration: none;
}
.usew-product__price .price del {
	display: block;
	opacity: 0.6;
}
.usew-product__price .price del,
.usew-product__price .price ins {
	display: block;
}

/* Category cards ------------------------------------------------------------ */
.usew-categories__grid {
	display: grid;
	grid-template-columns: repeat(var(--usew-columns, 3), 1fr);
	gap: var(--usew-gap, 1.25rem);
}
.usew-category {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}
.usew-category__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: var(--usew-aspect, 3 / 4);
	transition: transform 700ms ease;
}
.usew-category:hover .usew-category__img {
	transform: scale(1.05);
}
.usew-category__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.usew-category__content {
	position: absolute;
	left: 1.5rem;
	right: 1.5rem;
	bottom: 1.5rem;
}
.usew-category__label {
	margin: 0;
}
.usew-category__desc {
	margin: 0.25em 0 0;
}
.usew-category__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: 0.75em;
	text-transform: uppercase;
}

/* Image gallery / lookbook --------------------------------------------------- */
.usew-gallery__head {
	margin-bottom: 2em;
}
.usew-gallery__grid {
	display: grid;
	grid-template-columns: repeat(var(--usew-columns, 4), 1fr);
	gap: var(--usew-gap, 1rem);
}
.usew-gallery__item {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}
.usew-gallery__item--large {
	grid-column: span 2;
	grid-row: span 2;
	aspect-ratio: 1 / 1;
}
.usew-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms ease;
}
.usew-gallery__item:hover .usew-gallery__img {
	transform: scale(1.05);
}

/* Feature list / perks --------------------------------------------------- */
.usew-features--divided {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}
.usew-features__grid {
	display: grid;
	grid-template-columns: repeat(var(--usew-columns, 3), 1fr);
	gap: var(--usew-row-gap, 2.5rem) var(--usew-col-gap, 2.5rem);
}
.usew-feature {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}
.usew-feature__icon {
	flex-shrink: 0;
	line-height: 1;
	margin-top: 0.15em;
}
.usew-feature__icon svg {
	width: 1em;
	height: 1em;
}
.usew-feature__title {
	margin: 0;
}
.usew-feature__desc {
	margin: 0.35em 0 0;
}

/* Newsletter CTA --------------------------------------------------------- */
.usew-newsletter__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}
.usew-newsletter__grid {
	display: grid;
	gap: 2rem;
	align-items: center;
}
.usew-newsletter__grid--split {
	grid-template-columns: 1fr 1fr;
}
.usew-newsletter__heading {
	margin: 0;
}
.usew-newsletter__desc {
	margin: 0.5em 0 0;
}
.usew-newsletter__form {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.usew-newsletter__grid--stacked .usew-newsletter__form {
	flex-direction: column;
	align-items: stretch;
}
.usew-newsletter__field {
	flex: 1 1 240px;
	min-width: 0;
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: #fff;
	outline: none;
}
.usew-newsletter__field:focus {
	border-color: currentColor;
}
.usew-newsletter__submit {
	flex-shrink: 0;
}

/* Feature Split ("Winter Picks" style content + product panel) ----------- */
.usew-split__grid {
	display: grid;
	grid-template-columns: var(--usew-split-ratio, 0.8fr 1.2fr);
	gap: var(--usew-split-gap, 3rem);
	align-items: center;
}
.usew-split--products-left .usew-split__grid {
	direction: rtl;
}
.usew-split--products-left .usew-split__content,
.usew-split--products-left .usew-split__products {
	direction: ltr;
}
.usew-split__eyebrow {
	margin: 0 0 0.75em;
}
.usew-split__desc {
	margin-top: 1.25em;
	max-width: 32rem;
}
.usew-split__button {
	margin-top: 2em;
}
.usew-split__products {
	display: grid;
	grid-template-columns: repeat(var(--usew-columns, 3), 1fr);
	gap: var(--usew-row-gap, 1.5rem) var(--usew-col-gap, 1.25rem);
}

/* Responsive fallbacks ---------------------------------------------------
   Each widget's own Elementor responsive "Columns" control sets
   --usew-columns per breakpoint via its own scoped selector, so normally
   these rules never need to fire. They only act as a safety net for a
   breakpoint value an editor left unset. */
@media (max-width: 767px) {
	.usew-newsletter__grid--split {
		grid-template-columns: 1fr;
	}
	.usew-gallery__item--large {
		grid-column: span 1;
		grid-row: span 1;
		aspect-ratio: 4 / 5;
	}
	.usew-split__grid {
		grid-template-columns: 1fr;
	}
	.usew-split--products-left .usew-split__grid {
		direction: ltr;
	}
}