/**
 * AS Loyverse Sync — campaign visual directions.
 *
 * One block per direction, selected by the [data-direction] attribute that
 * ASLS_Promo_Directions puts on both the landing page and its promotions-page
 * card. This file is enqueued BETWEEN assets/asls-promo.css (tokens + base)
 * and assets/asls-promo-locked.css, so a direction overrides the base freely
 * and still cannot touch the price floor, the urgency line, the call to
 * action, the focus rings or the ended panel — those load after it.
 *
 * There are no cascade layers here any more: unlayered author CSS beats
 * layered author CSS, so wrapping our rules in a layer handed the whole
 * stylesheet to OceanWP's reset. Load order does the job instead.
 *
 * TWO RULES, ENFORCED BY tests/test-promo-directions.php
 *
 *   1. No `!important`. It is the only way past the locked stylesheet.
 *   2. No selector naming a locked element (__pricing, __now, __was, __save,
 *      __terms, __term, __countdown, __cd, __actions, __cta, __back,
 *      __ended). A direction restyles those by redefining custom properties,
 *      which is why the locked layer reads so many of them.
 *
 * Logical properties only: Arabic is the default language and RTL is the
 * primary reading direction, so a physical `margin-left` is a bug, not a
 * shortcut. Each direction names a real Arabic display face rather than
 * letting Cairo stand in, and resets Latin letter-spacing for Arabic, where
 * tracking breaks the joins.
 *
 * @package as-loyverse-sync
 */

/* ==================================================================== *
 * CLASSIC — the storefront look.
 *
 * Shipped as a real direction rather than "no direction", so a promotion
 * that never chose one renders something designed instead of something
 * left over. Navy and red on cream, Manrope and Cairo: the same language
 * as the rest of the shop.
 * ==================================================================== */

.asls-promo[data-direction="classic"],
.asls-promo-card[data-direction="classic"] {
	--p-surface:      #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-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-price-ink:    var(--p-accent);
	--p-price-bg:     var(--as-cream, #faf8f3);
}

.asls-promo[data-direction="classic"] .asls-promo__hero {
	background: var(--p-surface);
	border: 1px solid var(--p-rule);
	border-radius: 18px;
	padding: clamp(1rem, 2.5vw, 1.5rem);
}

/* ==================================================================== *
 * ATELIER — refined luxury.
 *
 * A high-contrast serif on warm bone paper, muted gold, hairline rules and
 * a great deal of air. Deliberately boxless: no cards, no shadows, no
 * pills. The price is large and light rather than loud, and sits under a
 * single hairline. Composition is asymmetric — the image breathes past the
 * text column.
 * ==================================================================== */

.asls-promo[data-direction="atelier"],
.asls-promo-card[data-direction="atelier"] {
	--p-surface:      #fffdf9;
	--p-surface-2:    #f2ece1;
	--p-page:         #f7f3ec;
	--p-ink:          #1a1713;
	--p-muted:        #6d6458;
	--p-rule:         #ded5c6;
	--p-focus:        rgba(138, 106, 47, 0.55);
	--p-display:      "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--p-radius:       0px;

	--p-h1-size:      clamp(2.1rem, 6vw, 3.6rem);
	--p-h1-weight:    400;
	--p-h1-tracking:  -0.005em;
	--p-h1-leading:   1.06;
	--p-label:        0.68rem;
	--p-label-track:  0.22em;

	--p-price-font:   "Cormorant Garamond", Georgia, serif;
	--p-price-size:   clamp(3.25rem, 11vw, 5.25rem);
	--p-price-weight: 600;
	--p-price-leading: 0.9;
	--p-price-track:  -0.01em;
	--p-price-ink:    var(--p-ink);
	--p-price-bg:     transparent;
	--p-price-pad:    1.25rem 0 0;
	--p-price-rule:   1px solid var(--p-rule);
	--p-price-radius: 0;
	--p-price-gap:    0.3rem;
	--p-save-ink:     #8a6a2f;
	--p-cd-bg:        transparent;
	--p-cd-ink:       var(--p-ink);

	--p-speed:        0.4s;
	--p-ease:         cubic-bezier(0.22, 0.8, 0.3, 1);
}

body.rtl .asls-promo[data-direction="atelier"],
.asls-promo[data-direction="atelier"]:lang(ar) {
	--p-display:      "Amiri", "Cairo", serif;
	--p-price-font:   "Amiri", "Cairo", serif;
	--p-h1-tracking:  0;
	--p-label-track:  0;
	--p-h1-leading:   1.45;
}

/* Boxless: the hero is paper, not a card. */
.asls-promo[data-direction="atelier"] .asls-promo__figure {
	background: transparent;
	aspect-ratio: 4 / 5;
}

.asls-promo[data-direction="atelier"] .asls-promo__offer {
	gap: 1.4rem;
	padding-block-start: clamp(0.5rem, 3vw, 2.5rem);
}

.asls-promo[data-direction="atelier"] .asls-promo__eyebrow {
	color: #8a6a2f;
}

/* Labels as spaced small caps, not pills. */
.asls-promo[data-direction="atelier"] .asls-promo__chip {
	background: transparent;
	color: var(--p-muted);
	padding: 0;
	border-radius: 0;
	letter-spacing: var(--p-label-track);
}

.asls-promo[data-direction="atelier"] .asls-promo__chip--save {
	color: #8a6a2f;
	background: transparent;
}

.asls-promo[data-direction="atelier"] .asls-promo__chips {
	gap: 1.25rem;
}

.asls-promo[data-direction="atelier"] .asls-promo__subhead {
	font-family: var(--p-display);
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	font-style: italic;
	color: var(--p-ink);
	max-inline-size: 34ch;
}

.asls-promo[data-direction="atelier"] .asls-promo__benefits {
	list-style: none;
	padding-inline-start: 0;
	gap: 0.55rem;
}

.asls-promo[data-direction="atelier"] .asls-promo__benefits li {
	padding-block-end: 0.55rem;
	border-block-end: 1px solid var(--p-rule);
	font-size: 0.9375rem;
}

.asls-promo[data-direction="atelier"] .asls-promo__thumb {
	border-radius: 0;
	inline-size: 52px;
	block-size: 65px;
}

@media (prefers-reduced-motion: no-preference) {
	.asls-promo[data-direction="atelier"] .asls-promo__offer > * {
		animation: asls-rise var(--p-speed) var(--p-ease) both;
	}
}

@keyframes asls-rise {
	from { opacity: 0; transform: translateY(0.5rem); }
	to   { opacity: 1; transform: none; }
}

/* ==================================================================== *
 * PULSE — energetic value.
 *
 * The whole page is the colour field, and the number is the argument:
 * heavy Archivo set solid at a size nothing else competes with. Flat
 * colour, no shadows, fast motion. Built for the aisles where the price
 * is the reason.
 * ==================================================================== */

.asls-promo[data-direction="pulse"],
.asls-promo-card[data-direction="pulse"] {
	--p-surface:      #a81f27;
	--p-surface-2:    #97181f;
	--p-page:         var(--as-red, #b8252d);
	--p-ink:          #fff6f1;
	--p-muted:        rgba(255, 246, 241, 0.74);
	--p-rule:         rgba(255, 246, 241, 0.26);
	--p-accent:       #ffd84d;
	--p-accent-ink:   #5c1015;
	--p-focus:        #ffd84d;
	--p-display:      "Archivo", "Manrope", system-ui, sans-serif;
	--p-radius:       6px;

	--p-h1-size:      clamp(2.1rem, 7vw, 3.75rem);
	--p-h1-weight:    900;
	--p-h1-tracking:  -0.035em;
	--p-h1-leading:   0.98;
	--p-label-track:  0.08em;

	--p-price-font:   "Archivo", "Manrope", system-ui, sans-serif;
	--p-price-size:   clamp(4rem, 17vw, 7.5rem);
	--p-price-weight: 900;
	--p-price-leading: 0.82;
	--p-price-track:  -0.045em;
	--p-price-ink:    #ffffff;
	--p-price-bg:     transparent;
	--p-price-pad:    0;
	--p-price-gap:    0.1rem;
	--p-save-ink:     #ffd84d;
	--p-cd-bg:        rgba(0, 0, 0, 0.26);
	--p-cd-ink:       #ffffff;

	--p-speed:        0.12s;
	--p-ease:         cubic-bezier(0.3, 0, 0.2, 1);
}

body.rtl .asls-promo[data-direction="pulse"],
.asls-promo[data-direction="pulse"]:lang(ar) {
	--p-display:      "Tajawal", "Cairo", sans-serif;
	--p-price-font:   "Tajawal", "Cairo", sans-serif;
	--p-h1-tracking:  0;
	--p-price-track:  0;
	--p-label-track:  0;
	--p-h1-leading:   1.3;
}

.asls-promo[data-direction="pulse"] .asls-promo__figure {
	background: #ffffff;
	border-radius: var(--p-radius);
}

.asls-promo[data-direction="pulse"] .asls-promo__h1 {
	text-transform: uppercase;
}

body.rtl .asls-promo[data-direction="pulse"] .asls-promo__h1 {
	text-transform: none;
}

.asls-promo[data-direction="pulse"] .asls-promo__chip {
	border-radius: 3px;
	font-size: 0.78rem;
}

.asls-promo[data-direction="pulse"] .asls-promo__chip--save {
	font-size: clamp(0.95rem, 2.4vw, 1.2rem);
	padding: 0.2em 0.55em;
}

.asls-promo[data-direction="pulse"] .asls-promo__crumbs a:hover,
.asls-promo[data-direction="pulse"] .asls-promo__more {
	color: var(--p-accent);
}

.asls-promo[data-direction="pulse"] .asls-promo__benefits li::marker {
	color: var(--p-accent);
}

.asls-promo[data-direction="pulse"] .asls-promo__share-btn:hover {
	border-color: var(--p-accent);
	color: var(--p-accent);
}

@media (prefers-reduced-motion: no-preference) {
	.asls-promo[data-direction="pulse"] .asls-promo__figure {
		transition: transform var(--p-speed) var(--p-ease);
	}

	.asls-promo[data-direction="pulse"] .asls-promo__figure:hover {
		transform: scale(1.015);
	}
}

/* ==================================================================== *
 * EDITORIAL — clean editorial.
 *
 * Text-led and quiet, for the aisles where people read before they buy.
 * A Fraunces headline over a narrow measure, generous leading, hairline
 * rules instead of boxes, and the product description promoted from
 * afterthought to a real column. No motion beyond focus.
 * ==================================================================== */

.asls-promo[data-direction="editorial"],
.asls-promo-card[data-direction="editorial"] {
	--p-surface:      #ffffff;
	--p-surface-2:    #f4f3ef;
	--p-page:         #ffffff;
	--p-ink:          #191a1c;
	--p-muted:        #5d6166;
	--p-accent:       var(--as-navy, #1f2a5c);
	--p-accent-ink:   #ffffff;
	--p-rule:         #dcdcd6;
	--p-focus:        rgba(31, 42, 92, 0.5);
	--p-display:      "Fraunces", Georgia, serif;
	--p-radius:       3px;

	--p-h1-size:      clamp(1.95rem, 5vw, 3.1rem);
	--p-h1-weight:    600;
	--p-h1-tracking:  -0.012em;
	--p-h1-leading:   1.08;
	--p-label:        0.7rem;
	--p-label-track:  0.16em;

	--p-price-font:   "Fraunces", Georgia, serif;
	--p-price-size:   clamp(2.9rem, 8vw, 4rem);
	--p-price-weight: 600;
	--p-price-leading: 0.95;
	--p-price-ink:    var(--as-navy, #1f2a5c);
	--p-price-bg:     transparent;
	--p-price-pad:    1rem 0 0;
	--p-price-rule:   2px solid var(--p-ink);
	--p-price-radius: 0;
	--p-save-ink:     #1b6b45;
	--p-cd-bg:        var(--p-surface-2);
	--p-cd-ink:       var(--p-ink);

	--p-speed:        0.2s;
}

body.rtl .asls-promo[data-direction="editorial"],
.asls-promo[data-direction="editorial"]:lang(ar) {
	--p-display:      "Alexandria", "Cairo", sans-serif;
	--p-price-font:   "Alexandria", "Cairo", sans-serif;
	--p-h1-tracking:  0;
	--p-label-track:  0;
	--p-h1-leading:   1.4;
}

.asls-promo[data-direction="editorial"] .asls-promo__figure {
	background: var(--p-surface-2);
	border-radius: 0;
	aspect-ratio: 5 / 4;
}

.asls-promo[data-direction="editorial"] .asls-promo__offer {
	gap: 1.1rem;
	max-inline-size: 38rem;
}

.asls-promo[data-direction="editorial"] .asls-promo__chip {
	background: transparent;
	border-radius: 0;
	padding: 0;
	color: var(--p-muted);
}

.asls-promo[data-direction="editorial"] .asls-promo__chip--save {
	color: var(--p-accent);
	background: transparent;
}

.asls-promo[data-direction="editorial"] .asls-promo__chips {
	gap: 1rem;
	padding-block-end: 0.5rem;
	border-block-end: 1px solid var(--p-rule);
}

.asls-promo[data-direction="editorial"] .asls-promo__subhead {
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--p-ink);
	max-inline-size: 40ch;
}

.asls-promo[data-direction="editorial"] .asls-promo__benefits {
	border-block-start: 1px solid var(--p-rule);
	padding-block-start: 0.85rem;
	padding-inline-start: 1.1em;
	gap: 0.4rem;
}

/* The description is content here, set in columns on a wide screen. */
.asls-promo[data-direction="editorial"] .asls-promo__description {
	font-size: 1.0625rem;
	line-height: 1.75;
	max-inline-size: none;
	column-gap: 2.5rem;
}

@media (min-width: 900px) {
	.asls-promo[data-direction="editorial"] .asls-promo__description {
		columns: 2;
	}
}

.asls-promo[data-direction="editorial"] .asls-promo__description > p:first-child::first-letter {
	float: inline-start;
	font-family: var(--p-display);
	font-size: 3.1em;
	line-height: 0.82;
	padding-inline-end: 0.08em;
	padding-block-start: 0.06em;
	color: var(--p-accent);
}

/* A drop cap on three words of Arabic looks like a mistake, not a flourish. */
body.rtl .asls-promo[data-direction="editorial"] .asls-promo__description > p:first-child::first-letter {
	float: none;
	font-size: inherit;
	line-height: inherit;
	padding: 0;
	color: inherit;
}

.asls-promo[data-direction="editorial"] .asls-promo__thumb {
	border-radius: 0;
}

/* ==================================================================== *
 * CIRCUIT — modern tech.
 *
 * Dark surface, square corners, a hairline grid and tabular numerals, with
 * a specification strip built from the product's own attributes. Motion is
 * a snap, not a glide.
 * ==================================================================== */

.asls-promo[data-direction="circuit"],
.asls-promo-card[data-direction="circuit"] {
	--p-surface:      #141925;
	--p-surface-2:    #1b2230;
	--p-page:         #0d1017;
	--p-ink:          #e8eef7;
	--p-muted:        #93a3ba;
	--p-accent:       #35d0d8;
	--p-accent-ink:   #04222a;
	--p-rule:         #27323f;
	--p-focus:        #35d0d8;
	--p-display:      "Space Grotesk", "Manrope", system-ui, sans-serif;
	--p-radius:       2px;

	--p-h1-size:      clamp(1.85rem, 5vw, 3rem);
	--p-h1-weight:    700;
	--p-h1-tracking:  -0.03em;
	--p-h1-leading:   1.05;
	--p-label:        0.68rem;
	--p-label-track:  0.18em;

	--p-price-font:   "Space Grotesk", ui-monospace, monospace;
	--p-price-size:   clamp(3rem, 10vw, 4.75rem);
	--p-price-weight: 700;
	--p-price-leading: 0.9;
	--p-price-track:  -0.04em;
	--p-price-ink:    var(--p-accent);
	--p-price-bg:     #10151f;
	--p-price-border: 1px solid var(--p-rule);
	--p-price-radius: 2px;
	--p-save-ink:     #6ee7a8;
	--p-cd-bg:        #10151f;
	--p-cd-ink:       var(--p-accent);

	--p-speed:        0.08s;
	--p-ease:         linear;
}

body.rtl .asls-promo[data-direction="circuit"],
.asls-promo[data-direction="circuit"]:lang(ar) {
	--p-display:      "IBM Plex Sans Arabic", "Cairo", sans-serif;
	--p-price-font:   "IBM Plex Sans Arabic", "Cairo", sans-serif;
	--p-h1-tracking:  0;
	--p-price-track:  0;
	--p-label-track:  0;
	--p-h1-leading:   1.35;
}

.asls-promo[data-direction="circuit"] .asls-promo__figure {
	background: #ffffff;
	border: 1px solid var(--p-rule);
	border-radius: 2px;
}

.asls-promo[data-direction="circuit"] .asls-promo__hero {
	padding-block-start: 0.5rem;
}

.asls-promo[data-direction="circuit"] .asls-promo__chip {
	border-radius: 2px;
	background: var(--p-surface-2);
	color: var(--p-muted);
	box-shadow: inset 0 0 0 1px var(--p-rule);
}

.asls-promo[data-direction="circuit"] .asls-promo__chip--save {
	background: var(--p-accent);
	color: var(--p-accent-ink);
	box-shadow: none;
}

.asls-promo[data-direction="circuit"] .asls-promo__specs {
	background: var(--p-rule);
	border-color: var(--p-rule);
	border-radius: 2px;
	overflow: hidden;
}

.asls-promo[data-direction="circuit"] .asls-promo__spec {
	background: var(--p-surface);
}

.asls-promo[data-direction="circuit"] .asls-promo__spec dd {
	font-variant-numeric: tabular-nums;
}

.asls-promo[data-direction="circuit"] .asls-promo__thumb {
	border-radius: 2px;
	background: #ffffff;
}

.asls-promo[data-direction="circuit"] .asls-promo__share-btn {
	border-radius: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.asls-promo[data-direction="circuit"] .asls-promo__thumb,
	.asls-promo[data-direction="circuit"] .asls-promo__share-btn {
		transition: box-shadow var(--p-speed) var(--p-ease), border-color var(--p-speed) var(--p-ease);
	}

	.asls-promo[data-direction="circuit"] .asls-promo__thumb:hover {
		box-shadow: inset 0 0 0 2px var(--p-accent);
	}
}

/* ==================================================================== *
 * ACCENTS
 *
 * A closed set, applied on top of the direction. Each pair below has been
 * checked for contrast against the surfaces of the directions that offer
 * it (ASLS_Promo_Directions::all()[…]['accents']), so no combination an
 * operator can select is unreadable.
 * ==================================================================== */

.asls-promo[data-accent="red"],   .asls-promo-card[data-accent="red"]   { --p-accent: #b8252d; --p-accent-ink: #ffffff; }
.asls-promo[data-accent="navy"],  .asls-promo-card[data-accent="navy"]  { --p-accent: #1f2a5c; --p-accent-ink: #ffffff; }
.asls-promo[data-accent="green"], .asls-promo-card[data-accent="green"] { --p-accent: #1b7f4d; --p-accent-ink: #ffffff; }
.asls-promo[data-accent="gold"],  .asls-promo-card[data-accent="gold"]  { --p-accent: #8a6a2f; --p-accent-ink: #ffffff; }
.asls-promo[data-accent="ink"],   .asls-promo-card[data-accent="ink"]   { --p-accent: #14162b; --p-accent-ink: #ffffff; }
.asls-promo[data-accent="cyan"],  .asls-promo-card[data-accent="cyan"]  { --p-accent: #35d0d8; --p-accent-ink: #04222a; }
.asls-promo[data-accent="amber"], .asls-promo-card[data-accent="amber"] { --p-accent: #f2a413; --p-accent-ink: #2b1c00; }

/* ==================================================================== *
 * THE PROMOTIONS-PAGE CARD
 *
 * Shares the direction tokens above, so a card and its landing page read as
 * one campaign. Deliberately plain structure: one image, the campaign line,
 * the price, one real urgency fact. No nested cards, no stacked badges.
 * ==================================================================== */

.asls-promo-card {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	background: var(--p-surface, #ffffff);
	color: var(--p-ink, #14162b);
	border: 1px solid var(--p-rule, #e4e3dc);
	border-radius: var(--p-radius, 12px);
	overflow: hidden;
	font-family: var(--as-font-latin, "Manrope", system-ui, sans-serif);
}

body.rtl .asls-promo-card {
	font-family: var(--as-font-ar, "Cairo", system-ui, sans-serif);
}

.asls-promo-card__media {
	position: relative;
	display: block;
	background: #ffffff;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

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

.asls-promo-card__save {
	position: absolute;
	inset-block-start: 0.6rem;
	inset-inline-start: 0.6rem;
	background: var(--p-accent, #b8252d);
	color: var(--p-accent-ink, #ffffff);
	font-size: 0.8rem;
	font-weight: 800;
	line-height: 1;
	padding: 0.4em 0.6em;
	border-radius: calc(var(--p-radius, 12px) / 2);
}

.asls-promo-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.9rem 0.9rem 1rem;
	flex: 1 1 auto;
}

.asls-promo-card__eyebrow {
	margin: 0;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--p-accent, #b8252d);
}

body.rtl .asls-promo-card__eyebrow {
	letter-spacing: 0;
}

.asls-promo-card__title {
	margin: 0;
	font-family: var(--p-display, inherit);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--p-ink, #14162b);
}

.asls-promo-card__title a {
	color: inherit;
	text-decoration: none;
}

.asls-promo-card__value {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--p-muted, #5f6478);
}

.asls-promo-card__prices {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: auto;
	padding-block-start: 0.5rem;
}

.asls-promo-card__now {
	font-family: var(--p-price-font, inherit);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1;
	color: var(--p-price-ink, var(--p-accent, #b8252d));
}

.asls-promo-card__was {
	font-size: 0.875rem;
	color: var(--p-muted, #5f6478);
}

.asls-promo-card__urgency {
	margin: 0;
	font-size: 0.75rem;
	color: var(--p-muted, #5f6478);
}

.asls-promo-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	margin-block-start: 0.6rem;
	padding: 0.55em 1em;
	border-radius: var(--p-radius, 12px);
	background: var(--p-accent, #b8252d);
	color: var(--p-accent-ink, #ffffff);
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: filter 0.15s ease;
}

.asls-promo-card__cta:hover {
	filter: brightness(0.92);
	color: var(--p-accent-ink, #ffffff);
}