/**
 * AS Loyverse Sync — promotion campaign pages.
 *
 * WHY THERE ARE NO CASCADE LAYERS HERE (learned the hard way, 1.16.1)
 *
 * This file used to wrap everything in `@layer asls.base, asls.direction,
 * asls.locked`, on the theory that declaring `locked` last would stop a
 * campaign design from restyling the price or the ended panel.
 *
 * That is true between our own rules, and worthless inside a WordPress theme,
 * because UNLAYERED author CSS beats every layered author rule regardless of
 * specificity. OceanWP's reset is unlayered, so its `section { display: block }`
 * silently beat our `.asls-promo__hero { display: grid }`, and its
 * `div { padding: 0 }` beat the container gutter. On the live page that meant
 * the hero never became a grid, the image ran the full width flush to the left
 * edge, and the copy sat in a narrow column beside a large empty area.
 *
 * So the layers are gone. The guarantee now rests on two things that do work
 * here: the locked block is written LAST in this file, and
 * tests/test-promo-directions.php fails the build if a direction's CSS names a
 * locked element or uses `!important`. A campaign still cannot reach the price,
 * the urgency line, the call to action or the ended panel — by contract rather
 * than by cascade.
 *
 * Every selector is scoped under `.asls-promo` or `.asls-promo-card`, which
 * also keeps these rules off the shop, product and home templates.
 *
 * Logical properties throughout: Arabic is the site's default language, so RTL
 * is the primary case and a physical `left` is a bug.
 *
 * @package as-loyverse-sync
 */

/* ==================================================================== *
 * TOKENS
 * ==================================================================== */

.asls-promo,
.asls-promo-card {
	--p-surface:     var(--as-white, #ffffff);
	--p-surface-2:   var(--as-cream, #faf8f3);
	--p-page:        var(--as-cream, #faf8f3);
	--p-ink:         var(--as-ink, #14162b);
	--p-muted:       var(--as-muted, #5f6478);
	--p-accent:      var(--as-red, #b8252d);
	--p-accent-ink:  #ffffff;
	--p-rule:        var(--as-border, #e4e3dc);
	--p-focus:       rgba(31, 42, 92, 0.45);
	--p-display:     var(--as-font-latin, "Manrope", system-ui, sans-serif);
	--p-radius:      12px;

	--p-h1-size:      clamp(1.7rem, 3.4vw, 2.55rem);
	--p-h1-weight:    700;
	--p-h1-tracking:  -0.015em;
	--p-h1-leading:   1.14;
	--p-price-size:   clamp(2.6rem, 5.4vw, 3.6rem);
	--p-price-weight: 800;
	--p-price-font:   var(--p-display);
	--p-label:        0.72rem;
	--p-label-track:  0.1em;

	/* The media column's ceiling. The hero grid gives the image a share of
	   the container; this stops that share becoming a billboard on a wide
	   screen, which is what a contained media area means in practice. */
	--p-media-max:   clamp(17rem, 32vw, 27rem);

	--p-gap:         clamp(1.5rem, 3vw, 2.5rem);
	--p-pad:         clamp(1rem, 2vw, 1.75rem);

	--p-ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
	--p-speed:       0.22s;
}

.asls-promo {
	color: var(--p-ink);
	background: var(--p-page);
	padding-block: clamp(0.75rem, 2vw, 1.75rem) clamp(2.5rem, 6vw, 4.5rem);
	font-family: var(--as-font-latin, "Manrope", system-ui, sans-serif);
	/* Belt and braces against a stray wide child; the rules below make sure
	   nothing ever needs it. */
	overflow-x: clip;
}

body.rtl .asls-promo,
.asls-promo:lang(ar) {
	font-family: var(--as-font-ar, "Cairo", system-ui, sans-serif);
	--p-h1-tracking: 0;
	--p-h1-leading: 1.42;
	--p-label-track: 0;
}

/* ==================================================================== *
 * THE CONTAINER
 *
 * One centred container used by every section, so nothing ever touches the
 * viewport edge. `width: min(100% - gutter, cap)` is the whole mechanism:
 * no 100vw, no negative margins, no horizontal scroll.
 *
 *   desktop   1280px cap, 32px each side
 *   tablet    24px each side
 *   mobile    16px each side
 * ==================================================================== */

/*
 * The promotion template renders straight inside OceanWP's <main>, without
 * the theme's own #content-wrap container, so <main> keeps a fixed width and
 * sits hard against the left of the viewport. That is what put the container
 * off-centre with a few hundred pixels of dead space on the right at 1440 and
 * above. Releasing <main> here lets the container below centre against the
 * viewport instead.
 *
 * Scoped by the promotion post type's own body class, so the shop, product
 * and home templates are untouched.
 */
body.single-asls_promo #main.site-main {
	inline-size: 100%;
	max-inline-size: none;
	margin-inline: 0;
	padding-inline: 0;
}

.asls-promo .asls-promo__wrap {
	width: min(100% - 4rem, 1280px);
	margin-inline: auto;
	padding-inline: 0;
}

@media (max-width: 1024px) {
	.asls-promo .asls-promo__wrap {
		width: min(100% - 3rem, 1280px);
	}
}

@media (max-width: 767px) {
	.asls-promo .asls-promo__wrap {
		width: min(100% - 2rem, 100%);
	}
}

/* ==================================================================== *
 * BREADCRUMB
 * ==================================================================== */

.asls-promo .asls-promo__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
	padding: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--p-muted);
}

.asls-promo .asls-promo__crumbs a {
	color: inherit;
	text-decoration: none;
	border-block-end: 1px solid transparent;
}

.asls-promo .asls-promo__crumbs a:hover {
	color: var(--p-ink);
	border-block-end-color: currentColor;
}

.asls-promo .asls-promo__crumbs [aria-current] {
	max-inline-size: 28ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==================================================================== *
 * HERO — media one side, the offer the other, no dead space
 * ==================================================================== */

.asls-promo .asls-promo__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--p-gap);
	align-items: start;
	margin: 0;
	padding: 0;
}

.asls-promo .asls-promo__gallery {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	min-inline-size: 0;
}

.asls-promo .asls-promo__figure {
	display: grid;
	place-items: center;
	inline-size: 100%;
	max-inline-size: var(--p-media-max);
	margin: 0 auto;
	padding: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--p-surface);
	border: 1px solid var(--p-rule);
	border-radius: var(--p-radius);
}

.asls-promo .asls-promo__img {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: 100%;
	/* contain, never cover: a pack shot that crops its own net-weight line
	   is worse than one with a white margin around it. */
	object-fit: contain;
	display: block;
	padding: clamp(0.5rem, 1.5vw, 1rem);
}

.asls-promo .asls-promo__thumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	max-inline-size: var(--p-media-max);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.asls-promo .asls-promo__thumbs li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.asls-promo .asls-promo__thumb {
	display: block;
	inline-size: 58px;
	block-size: 58px;
	overflow: hidden;
	background: var(--p-surface);
	border-radius: calc(var(--p-radius) / 2);
	box-shadow: inset 0 0 0 1px var(--p-rule);
}

.asls-promo .asls-promo__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	display: block;
}

.asls-promo .asls-promo__thumb.is-current {
	box-shadow: inset 0 0 0 2px var(--p-accent);
}

.asls-promo .asls-promo__offer {
	display: flex;
	flex-direction: column;
	gap: clamp(0.75rem, 1.6vw, 1.15rem);
	min-inline-size: 0;
}

@media (min-width: 900px) {
	.asls-promo .asls-promo__hero {
		/* The media column is the smaller of the two and capped by
		   --p-media-max; the offer takes the rest, so the row is always
		   filled and the image never sprawls. */
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: clamp(2rem, 4vw, 3.5rem);
		align-items: center;
	}

	.asls-promo .asls-promo__figure,
	.asls-promo .asls-promo__thumbs {
		margin-inline: 0;
	}
}

/* ==================================================================== *
 * CAMPAIGN COPY
 * ==================================================================== */

.asls-promo .asls-promo__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
}

.asls-promo .asls-promo__chip {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0.3em 0.7em;
	border-radius: 999px;
	background: var(--p-surface-2);
	color: var(--p-ink);
	font-size: var(--p-label);
	font-weight: 700;
	letter-spacing: var(--p-label-track);
	text-transform: uppercase;
	line-height: 1.4;
}

.asls-promo .asls-promo__chip--save {
	background: var(--p-accent);
	color: var(--p-accent-ink);
}

.asls-promo .asls-promo__chip--muted {
	background: transparent;
	color: var(--p-muted);
	box-shadow: inset 0 0 0 1px var(--p-rule);
}

.asls-promo .asls-promo__eyebrow {
	margin: 0;
	font-size: var(--p-label);
	font-weight: 700;
	letter-spacing: var(--p-label-track);
	text-transform: uppercase;
	color: var(--p-accent);
}

.asls-promo .asls-promo__h1 {
	margin: 0;
	padding: 0;
	font-family: var(--p-display);
	font-size: var(--p-h1-size);
	font-weight: var(--p-h1-weight);
	letter-spacing: var(--p-h1-tracking);
	line-height: var(--p-h1-leading);
	color: var(--p-ink);
	text-wrap: balance;
}

.asls-promo .asls-promo__subhead {
	margin: 0;
	font-size: clamp(1rem, 1.3vw, 1.125rem);
	line-height: 1.55;
	color: var(--p-muted);
	max-inline-size: 46ch;
}

.asls-promo .asls-promo__product-name {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--p-muted);
}

.asls-promo .asls-promo__h2 {
	margin: 0 0 0.5rem;
	font-family: var(--p-display);
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	font-weight: var(--p-h1-weight);
	line-height: 1.25;
	color: var(--p-ink);
}

.asls-promo .asls-promo__lede {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--p-muted);
	max-inline-size: 58ch;
}

.asls-promo .asls-promo__benefits {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding-inline-start: 1.15em;
	line-height: 1.55;
}

.asls-promo .asls-promo__benefits li {
	margin: 0;
}

.asls-promo .asls-promo__benefits li::marker {
	color: var(--p-accent);
}

/* --- Specification strip --------------------------------------------- */

.asls-promo .asls-promo__specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	background: var(--p-rule);
	border: 1px solid var(--p-rule);
	border-radius: calc(var(--p-radius) / 2);
	overflow: hidden;
	list-style: none;
}

.asls-promo .asls-promo__spec {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	padding: 0.6rem 0.75rem;
	background: var(--p-surface);
}

.asls-promo .asls-promo__spec dt {
	margin: 0;
	font-size: var(--p-label);
	letter-spacing: var(--p-label-track);
	text-transform: uppercase;
	color: var(--p-muted);
}

.asls-promo .asls-promo__spec dd {
	margin: 0;
	font-weight: 700;
}

/* --- Trust, share, details -------------------------------------------- */

.asls-promo .asls-promo__facts {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--p-muted);
}

.asls-promo .asls-promo__share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding-block-start: 0.75rem;
	border-block-start: 1px solid var(--p-rule);
}

.asls-promo .asls-promo__share-label {
	font-size: 0.8125rem;
	color: var(--p-muted);
}

.asls-promo .asls-promo__share-btn {
	margin: 0;
	padding: 0.35em 0.9em;
	border: 1px solid var(--p-rule);
	border-radius: 999px;
	background: transparent;
	color: var(--p-ink);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--p-speed) var(--p-ease), color var(--p-speed) var(--p-ease);
}

.asls-promo .asls-promo__share-btn:hover,
.asls-promo .asls-promo__share-btn.is-done {
	border-color: var(--p-accent);
	color: var(--p-accent);
}

.asls-promo .asls-promo__details {
	margin-block-start: clamp(2rem, 4vw, 3rem);
	padding-block-start: clamp(1.5rem, 3vw, 2rem);
	border-block-start: 1px solid var(--p-rule);
}

.asls-promo .asls-promo__description {
	max-inline-size: 68ch;
	line-height: 1.7;
}

.asls-promo .asls-promo__description p {
	margin: 0 0 1em;
}

.asls-promo .asls-promo__more {
	font-weight: 700;
	color: var(--p-accent);
	text-decoration: none;
	border-block-end: 1px solid currentColor;
}

.asls-promo .as-trust {
	margin-block-start: clamp(2rem, 4vw, 3rem);
}

/* --- Ended state chrome ----------------------------------------------- */

.asls-promo .asls-promo__ended-card {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	margin-block: 1.25rem;
	padding: 1rem;
	background: var(--p-surface-2);
	border: 1px solid var(--p-rule);
	border-radius: var(--p-radius);
}

.asls-promo .asls-promo__ended-img {
	inline-size: 88px;
	block-size: 88px;
	object-fit: contain;
	border-radius: calc(var(--p-radius) / 2);
	background: var(--p-surface);
}

.asls-promo .asls-promo__ended-price {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--p-muted);
}

.asls-promo .asls-promo__ended-price strong {
	margin-inline-start: 0.35em;
	color: var(--p-ink);
}

@media (min-width: 900px) {
	.asls-promo .asls-promo__ended-card {
		grid-template-columns: 132px minmax(0, 1fr);
	}

	.asls-promo .asls-promo__ended-img {
		inline-size: 132px;
		block-size: 132px;
	}
}