/**
 * Shopwright widget styles.
 *
 * The first version of this file was deliberately colourless: no background, no
 * fill, an outlined call to action drawn in `currentColor`, on the reasoning
 * that campaign artwork would carry the seasonal look and the theme should keep
 * its own palette.
 *
 * On a real storefront that produced a paragraph of centred text and a thin
 * outlined link — technically safe and commercially useless. A hero has to look
 * like a hero.
 *
 * So the palette is now explicit rather than inherited, and every colour is a
 * custom property a theme or child theme can override:
 *
 *     .shw-hero { --shw-hero-bg: #123; --shw-hero-accent: #f0a; }
 *
 * Explicit beats inherited here because the pairing is what matters: this file
 * sets the background AND the text that sits on it, so contrast is guaranteed
 * by construction instead of hoped for. That was the real flaw in the old
 * approach — `currentColor` on an unknown background is a coin toss, and a
 * filled button drawn in it is invisible.
 */

.shw-widget { display: block; }

.shw-widget--placeholder {
	padding: 24px;
	border: 1px dashed #b4b9be;
	border-radius: 8px;
	color: #50575e;
	font-size: 14px;
	line-height: 1.6;
	background: #f6f7f7;
}

/* ── Hero banner ─────────────────────────────────────────────────────────── */

.shw-hero {
	--shw-hero-bg: #14181d;
	--shw-hero-bg-2: #2b3540;
	--shw-hero-ink: #ffffff;
	--shw-hero-muted: rgba(255, 255, 255, .78);
	--shw-hero-accent: #ffffff;
	--shw-hero-accent-ink: #14181d;

	/* Everything below used to be a hardcoded white, which was safe only
	 * because the plate above was guaranteed near-black. Once the plate becomes
	 * the merchant's own colour that guarantee is gone: a light brand primary
	 * rendered an invisible eyebrow pill, a subheadline fading into the
	 * background, and a white-on-white button hover — on the screen meant to
	 * prove the plugin understands their shop. Named so SHW_Tokens can flip
	 * them with the ink. */
	--shw-hero-line: rgba(255, 255, 255, .32);
	--shw-hero-wash: rgba(255, 255, 255, .1);
	--shw-hero-radius: 14px;
	--shw-hero-pad: clamp(36px, 6vw, 84px);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--shw-hero-radius);
	background: linear-gradient(135deg, var(--shw-hero-bg) 0%, var(--shw-hero-bg-2) 100%);
	color: var(--shw-hero-ink);
}

/* The artwork, when there is any. Behind everything, never in the flow — a
   hero whose text is pushed below its own image is a stacked card, not a hero. */
.shw-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.shw-hero__media img,
.shw-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A scrim, so the copy stays readable over any photograph. Darker at the edge
   the text starts from. */
.shw-hero--has-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		rgba(0, 0, 0, .78) 0%,
		rgba(0, 0, 0, .55) 45%,
		rgba(0, 0, 0, .25) 100%
	);
}

.shw-hero__body {
	max-width: 44rem;
	padding: var(--shw-hero-pad);
}

.shw-hero__eyebrow {
	display: inline-block;
	margin: 0 0 18px;
	padding: 6px 14px;
	border: 1px solid var(--shw-hero-line, rgba(255, 255, 255, .32));
	border-radius: 999px;
	background: var(--shw-hero-wash, rgba(255, 255, 255, .1));
	color: var(--shw-hero-ink);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
}

.shw-hero__headline {
	margin: 0 0 16px;
	color: var(--shw-hero-ink);
	font-size: clamp(2rem, 4.6vw, 3.5rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.shw-hero__sub {
	max-width: 38rem;
	margin: 0 0 30px;
	color: var(--shw-hero-muted);
	font-size: clamp(1rem, 1.35vw, 1.1875rem);
	line-height: 1.65;
}

/* Full-bleed inside a boxed Elementor container, so the hero spans the window
   the way a hero is expected to. Opt out with .shw-hero--boxed. */
.shw-hero:not(.shw-hero--boxed) {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	border-radius: 0;
}
.shw-hero:not(.shw-hero--boxed) .shw-hero__body {
	max-width: min(44rem, calc(100vw - 2 * var(--shw-hero-pad)));
	margin-inline: auto;
	width: 100%;
}
@media (min-width: 1200px) {
	.shw-hero:not(.shw-hero--boxed) .shw-hero__body {
		max-width: 1180px;
	}
	.shw-hero:not(.shw-hero--boxed) .shw-hero__headline,
	.shw-hero:not(.shw-hero--boxed) .shw-hero__sub { max-width: 44rem; }
}

/* ── Offer strip ─────────────────────────────────────────────────────────── */

.shw-strip {
	--shw-strip-bg: #14181d;
	--shw-strip-ink: #ffffff;

	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	background: var(--shw-strip-bg);
	color: var(--shw-strip-ink);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
}

.shw-strip__message { margin: 0; }

/* ── Collection grid ─────────────────────────────────────────────────────── */

.shw-grid { padding-block: clamp(28px, 4vw, 56px); }

.shw-grid__heading {
	margin: 0 0 10px;
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-align: center;
	text-wrap: balance;
}

.shw-grid__intro {
	max-width: 46rem;
	margin: 0 auto 28px;
	opacity: .8;
	text-align: center;
	line-height: 1.65;
}

.shw-grid .shw-cta { margin-top: 28px; }
.shw-grid__footer { text-align: center; }

/* ── Collection grid: carousel ─────────────────────────────────────
 *
 * The class comes from Elementor's `prefix_class` on the widget wrapper, so the
 * same WooCommerce `[products]` output — real prices, real sale badges, real
 * add-to-cart — lays out either way with no second template.
 *
 * A scroll-snap row rather than a slider library. It is keyboard scrollable,
 * touch native, respects reduced motion by doing nothing special, and degrades
 * on an old browser to a plain horizontal scroller, which is still usable. A
 * library would add cloned slides, a focus trap and 40KB to achieve the same
 * thing worse.
 */
.shw-layout-carousel .shw-grid ul.products {
	display: flex;
	gap: var(--shw-rail-gap, 16px);
	margin: 0;
	padding: 0 0 12px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.shw-layout-carousel .shw-grid ul.products::before,
.shw-layout-carousel .shw-grid ul.products::after { content: none; }

.shw-layout-carousel .shw-grid ul.products > li {
	/* Overridden per breakpoint by the "Products in view" control. */
	flex: 0 0 calc((100% - (3 * var(--shw-rail-gap, 16px))) / 4);
	margin: 0;
	scroll-snap-align: start;
}

/* WooCommerce themes float or grid their product list; neither survives being
 * turned into a flex rail without this. */
.shw-layout-carousel .shw-grid ul.products > li.product {
	width: auto;
	float: none;
	clear: none;
}

@media (max-width: 782px) {
	.shw-layout-carousel .shw-grid ul.products > li {
		flex-basis: calc((100% - var(--shw-rail-gap, 16px)) / 1.6);
	}
}

/* ── Category spotlight ──────────────────────────────────────────────────── */

.shw-spotlight {
	display: grid;
	gap: clamp(20px, 3vw, 44px);
	align-items: center;
	padding-block: clamp(28px, 4vw, 56px);
}
/* The wrapper the heading, blurb and button share, so they can sit in one
   grid column together. `min-width: 0` because a grid child defaults to
   `min-width: auto` and a long unbroken product name would otherwise push the
   column wider than its track instead of wrapping. */
.shw-spotlight__body { min-width: 0; }

@media (min-width: 782px) {
	/* One column by default, two only when there is actually an image.
	   The two-column rule used to be unconditional, so a spotlight on a
	   category with no photograph rendered its heading and blurb in half the
	   available width with an empty half beside it — which reads as a broken
	   layout rather than as a text-only block. */
	.shw-spotlight { grid-template-columns: 1fr; }
	.shw-spotlight:has(.shw-spotlight__media) { grid-template-columns: 1fr 1fr; }
}
.shw-spotlight__media img,
.shw-spotlight__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}
.shw-spotlight__heading {
	margin: 0 0 12px;
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: -0.015em;
}
.shw-spotlight__blurb { margin: 0 0 22px; opacity: .82; line-height: 1.7; }

/* ── Call to action ──────────────────────────────────────────────────────── */

.shw-cta {
	display: inline-block;
	padding: 14px 30px;
	border: 2px solid transparent;
	border-radius: 8px;
	background: var(--shw-cta-bg, #14181d);
	color: var(--shw-cta-ink, #ffffff);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.shw-cta:hover,
.shw-cta:focus {
	background: var(--shw-cta-bg-hover, #2b3540);
	color: var(--shw-cta-ink, #ffffff);
}

.shw-cta:focus-visible {
	outline: 3px solid var(--shw-cta-bg, #14181d);
	outline-offset: 3px;
}

/* On the hero the fill inverts: the band is dark, so the button is light. Both
   colours are set here, so the pairing cannot come apart. */
.shw-hero .shw-cta {
	--shw-cta-bg: var(--shw-hero-accent);
	--shw-cta-ink: var(--shw-hero-accent-ink);
	/* The hover state is the accent stepped back, not white — on a light plate
	 * white-on-white is the whole failure. */
	--shw-cta-bg-hover: color-mix(in srgb, var(--shw-hero-accent) 86%, transparent);
	padding: 15px 34px;
	font-size: 1.0625rem;
}

.shw-hero .shw-cta:focus-visible {
	outline-color: var(--shw-hero-accent);
}

/* In the strip it is a quiet inline link-button, not a second primary action. */
.shw-strip .shw-cta {
	padding: 6px 16px;
	border-color: var(--shw-cta-line, rgba(255, 255, 255, .5));
	background: transparent;
	color: var(--shw-strip-ink);
	font-size: .875rem;
}
.shw-strip .shw-cta:hover,
.shw-strip .shw-cta:focus {
	background: var(--shw-cta-wash, rgba(255, 255, 255, .14));
	color: var(--shw-strip-ink);
}

@media (prefers-reduced-motion: no-preference) {
	.shw-cta { transition: background-color .15s ease, color .15s ease; }
}

/* The campaign landing note, shown above a shop loop narrowed to one campaign.
 * Deliberately quiet: the products are the point, this is the signpost. */
.shw-landing-note {
	margin: 0 0 18px;
	padding: 10px 14px;
	border-left: 3px solid currentColor;
	opacity: .85;
	font-size: .9375rem;
}