/**
 * Storefront landing-block styles (model v2).
 *
 * Verbatim copy of the design template storefront sections
 * (assets/index 3.html), scoped under .xef-landing for WordPress cascade
 * isolation. Editor-only chrome (preview chips, item editors, toast) is NOT
 * shipped here. Keyframes and reduced-motion overrides travel with the rules.
 *
 * @package ExpressForm
 */

.xef-landing {
	display: block;
	width: 100%;
	/* The column width is operator data (landing settings → layout, S9): the
	   storefront wrapper carries `--xef-page-max-width` (100% for "full",
	   a preset px otherwise). 480px is only the fallback for callers that never
	   resolve settings, and it keeps the column sharing one edge line with the
	   480px buy form. The admin device preview (448px frame) is narrower than
	   any preset, so the editor look is unchanged. */
	max-width: var(--xef-page-max-width, 480px);
	/* Horizontal page padding (landing settings → layout.padding, 0..80px): the
	   gutter is INSIDE the column because the border-box reset below applies to
	   .xef-landing itself, so the content narrows instead of the page widening
	   past max-width. 0 (the fallback) means the content touches the page edges,
	   the behaviour every landing had before the setting existed. Vertical
	   spacing stays each block's own layout. */
	padding-left: var(--xef-page-padding, 0px);
	padding-right: var(--xef-page-padding, 0px);
	margin: 0 auto;
}

/* Mockup parity (assets/index 3.html line 27 universal reset), scoped for
   WordPress cascade isolation: without it, themes without a global border-box
   reset compute content-box and equal padding bleeds blocks right/down. */
.xef-landing,
.xef-landing *,
.xef-landing *::before,
.xef-landing *::after {
	box-sizing: border-box;
}

.xef-landing__block {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* =========================================================================
   Image block
   ========================================================================= */

.xef-landing .image-block {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
}
.xef-landing .image-block img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	min-width: 0;
	min-height: 0;
	object-fit: cover;
	object-position: center;
}
.xef-landing .image-block.is-natural img {
	position: relative;
	inset: auto;
	height: auto;
	object-fit: initial;
	object-position: initial;
}
.xef-landing .image-placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: #ededed;
}
.xef-landing .image-placeholder svg { width: 37px; height: 37px; color: #bcbcbc; }

/* =========================================================================
   Gallery block (T3: main photo + thumbnail row — the main frame reuses the
   image-block skin above; GA2 owns the row: one aligned flex line, tiles sized
   from inline custom properties and an active-tile border. GA7+GA8 own the
   arrows: always visible in arrows mode, navigating the gallery with an
   active-position enabled state, a configurable corner radius and a hover
   state)
   ========================================================================= */

.xef-landing .gallery-block { display: block; width: 100%; }
/* GA2 row: a single flex line. Tile geometry travels as inline CSS custom
   properties on .gallery-thumbs; alignment and the arrows toggle ride on data
   attributes. The nav wrapper hosts the absolutely-positioned arrow controls. */
.xef-landing .gallery-thumbs-nav { position: relative; margin-top: 8px; }
/* GA7: in arrows mode the nav reserves lateral space (the 26px control plus an
   8px gap) so the absolutely-positioned controls never sit over the first or
   last tile and swallow clicks there. Arrows-off rows keep no lateral padding. */
.xef-landing .gallery-thumbs-nav.has-arrows { padding: 0 34px; }
.xef-landing .gallery-thumbs {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--xef-gallery-thumb-gap, 12px);
	overflow-x: auto;
	scrollbar-width: none;
}
.xef-landing .gallery-thumbs::-webkit-scrollbar { display: none; }
.xef-landing .gallery-thumbs[data-xef-gallery-align="left"] { justify-content: flex-start; }
.xef-landing .gallery-thumbs[data-xef-gallery-align="center"] { justify-content: center; }
.xef-landing .gallery-thumbs[data-xef-gallery-align="right"] { justify-content: flex-end; }
/* Arrows off: wrap and center the group instead of scrolling. */
.xef-landing .gallery-thumbs[data-xef-gallery-arrows="0"] { flex-wrap: wrap; justify-content: center; overflow-x: visible; }
/* Arrows on + measured overflow: left-anchor the scroll range so every tile is
   reachable (a centered overflow would clip the first tile out of reach). */
.xef-landing .gallery-thumbs-nav.has-overflow .gallery-thumbs { justify-content: flex-start; }
.xef-landing .gallery-thumb { flex: 0 0 var(--xef-gallery-thumb-size, 72px); box-sizing: border-box; padding: var(--xef-gallery-thumb-padding, 6px); border: 1px solid rgba(17,17,17,.12); border-radius: var(--xef-gallery-thumb-radius, 14px); background: #fff; cursor: pointer; }
.xef-landing .gallery-thumb img { display: block; width: 100%; height: 56px; object-fit: var(--xef-gallery-thumb-fit, cover); border-radius: calc(max(0px, var(--xef-gallery-thumb-radius, 14px) - var(--xef-gallery-thumb-padding, 6px) - 1px)); }
/* Active thumb: a gradient-capable ring. `border-color` only accepts a
   <color>: a gradient paint makes that declaration invalid at computed-value
   time and the border falls back to currentColor (the dark ink). The house
   double-background ring instead — a transparent border plus two IMAGE layers,
   the white tile fill clipped to padding-box on top and the configured paint
   clipped to border-box below. With border-width:0 the padding box equals the
   border box, so the fill covers the paint and the tile is never flooded. The
   tile keeps its border-box geometry and --xef-gallery-thumb-radius. */
.xef-landing .gallery-thumb.is-active {
	border-style: solid;
	border-width: var(--xef-gallery-active-border-width, 2px);
	border-color: transparent;
	background: linear-gradient(#fff, #fff) padding-box, var(--xef-gallery-active-border-color, #6d4aff) border-box;
	background-clip: padding-box, border-box;
}
.xef-landing .gallery-thumb:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
/* Arrow controls: rendered server-side only when the arrows toggle is on, so
   they are always laid out in arrows mode (GA fix supersedes the GA2
   "reveal on measured overflow" behaviour — a wide viewport no longer hides
   them). The disabled edge (the JS keeps `disabled` + aria-disabled in sync
   with the ACTIVE POSITION: prev disabled on the first photo, next on the
   last) stays visible but dimmed and pointer-inert. */
.xef-landing .gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	color: #111;
	line-height: 1;
	/* Same double-background ring as the active tile: transparent 1px border,
	   the white arrow fill clipped to padding-box over the inherited
	   --xef-gallery-active-border-color paint clipped to border-box. The
	   arrow's own ring thickness stays 1px — only the tile width is
	   configurable. */
	background: linear-gradient(#fff, #fff) padding-box, var(--xef-gallery-active-border-color, #6d4aff) border-box;
	background-clip: padding-box, border-box;
	border: 1px solid transparent;
	border-radius: var(--xef-gallery-arrow-radius, 13px);
	cursor: pointer;
}
.xef-landing .gallery-arrow:disabled,
.xef-landing .gallery-arrow[aria-disabled="true"] {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}
/* GA8/GA9 hover feedback, consistent with the house interactive style. GA9 the
   ring is painted, so the hover can no longer rely on border-color: it lifts
   the white fill one step and adds the soft shadow while keeping the paint
   ring. Deliberately no transform: the control already rides
   transform: translateY(-50%) and the box metrics stay intact, so the hover
   never shifts layout. The disabled arrow (either the disabled property or
   aria-disabled) is exempt. */
.xef-landing .gallery-arrow:hover:not(:disabled):not([aria-disabled="true"]) {
	background: linear-gradient(#f7f7f7, #f7f7f7) padding-box, var(--xef-gallery-active-border-color, #6d4aff) border-box;
	box-shadow: 0 7px 14px rgba(0,0,0,.18);
}
.xef-landing .gallery-arrow-prev { left: 0; }
.xef-landing .gallery-arrow-next { right: 0; }

/* =========================================================================
   Pricing block
   ========================================================================= */

.xef-landing .pricing-block { padding: 16px 13px 17px; text-align: center; }
.xef-landing .pricing-badge {
	display: inline-flex;
	align-items: center;
	min-height: 20px;
	padding: 2px 8px;
	color: inherit;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .035em;
	border: 1px solid currentColor;
	border-radius: 5px;
}
.xef-landing .pricing-line { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 10px; }
.xef-landing .pricing-current { font-size: 19px; font-weight: 800; letter-spacing: -.035em; }
.xef-landing .pricing-old { color: rgba(255,255,255,.55); font-size: 9px; text-decoration: line-through; }
.xef-landing .pricing-button {
	width: 100%;
	min-height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 13px;
	padding: 0 10px;
	font-size: 10px;
	font-weight: 650;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}
.xef-landing .pricing-button svg { width: 11px; height: 11px; }
.xef-landing .pricing-cta {
	display: inline-block;
	margin-top: 13px;
	padding: 12px 28px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	border: 0;
	cursor: pointer;
	background: var(--xeff-landing-cta, #ef4444);
}
.xef-landing .pricing-extra-text { width: 100%; }
.xef-landing .pricing-extra-button { width: 100%; }
.xef-landing .pricing-extra-divider { width: 100%; }
.xef-landing .pricing-extra-spacer { width: 100%; }
.xef-landing .pricing-extra-text > *, .xef-landing .pricing-extra-button > * { margin: 0; white-space: pre-wrap; }

/* =========================================================================
   Text block
   ========================================================================= */

.xef-landing .text-block { min-height: 0; }
.xef-landing .text-block > * { margin: 0; white-space: pre-wrap; }
.xef-landing .text-content { display: block; }
/* Rich-text carrier (div) hosts inner p/h1-h6/ul/ol since the p-in-p fix:
   reset their UA margins so block typography stays visually identical. */
.xef-landing .text-content > * { margin: 0; }

/* =========================================================================
   Animated text (marquee)
   ========================================================================= */

.xef-landing .animated-text-block { width: 100%; overflow: hidden; }
.xef-landing .animated-text-viewport { width: 100%; overflow: hidden; }
.xef-landing .animated-track { width: max-content; display: flex; align-items: center; will-change: transform; animation-duration: var(--marquee-duration); animation-timing-function: linear; animation-iteration-count: infinite; }
.xef-landing .animated-track.moves-left { animation-name: marquee-left; }
.xef-landing .animated-track.moves-right { animation-name: marquee-right; }
.xef-landing .animated-copy { flex: 0 0 auto; padding-right: var(--marquee-gap); }
.xef-landing .animated-copy > * { margin: 0; white-space: nowrap; }
.xef-landing .animated-copy-text { display: block; }
.xef-landing .pause-on-hover:hover .animated-track { animation-play-state: paused; }
@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* =========================================================================
   Button block
   ========================================================================= */

.xef-landing .button-block { width: 100%; }
.xef-landing .custom-button { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; max-width: 100%; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.xef-landing .custom-button svg { width: 16px; height: 16px; flex: 0 0 16px; }
.xef-landing .custom-button-icon, .xef-landing .pricing-button-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: inherit; }
.xef-landing .custom-button-icon svg, .xef-landing .pricing-button-icon svg { width: 100%; height: 100%; flex: 0 0 100%; color: inherit; }
.xef-landing .custom-button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.xef-landing .custom-button.animation-lift:hover { transform: translateY(-2px); box-shadow: 0 7px 14px rgba(0,0,0,.18); }
.xef-landing .custom-button.animation-pulse { animation: button-pulse 1.4s ease-in-out infinite alternate; }
.xef-landing .custom-button.animation-shake { animation: button-shake 2.2s ease-in-out infinite; }
.xef-landing .custom-button.animation-shine { position: relative; overflow: hidden; }
.xef-landing .custom-button.animation-shine::after { position: absolute; inset: 0; width: 35%; content: ""; background: linear-gradient(105deg, transparent, rgba(255,255,255,.48), transparent); transform: translateX(-180%) skewX(-18deg); animation: button-shine 2.8s ease-in-out infinite; pointer-events: none; }
@keyframes button-pulse { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes button-shake { 0%,75%,100% { transform: translateX(0); } 10% { transform: translateX(-3px); } 20% { transform: translateX(3px); } 30% { transform: translateX(-2px); } 40% { transform: translateX(2px); } }
@keyframes button-shine { 0%,35% { transform: translateX(-180%) skewX(-18deg); } 75%,100% { transform: translateX(390%) skewX(-18deg); } }

/* =========================================================================
   Shortcode block (static representation)
   ========================================================================= */

.xef-landing .shortcode-block { width: 100%; display: grid; justify-items: center; gap: 8px; text-align: center; color: #333; }
.xef-landing .shortcode-kicker { display: inline-flex; align-items: center; min-height: 20px; padding: 3px 7px; color: #666; font-size: 8px; font-weight: 800; letter-spacing: .08em; border: 1px solid currentColor; border-radius: 999px; }
.xef-landing .shortcode-title { max-width: 100%; color: #222; font-size: 15px; line-height: 1.3; }
.xef-landing .shortcode-value { max-width: 100%; overflow-wrap: anywhere; padding: 6px 8px; color: #555; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 10px; line-height: 1.4; border: 1px solid #e0e0e0; border-radius: 5px; background: rgba(255,255,255,.65); }
.xef-landing .shortcode-fallback { max-width: 100%; margin: 0; color: #777; font-size: 10px; line-height: 1.5; }

/* =========================================================================
   Reviews carousel
   ========================================================================= */

.xef-landing .reviews-carousel-block { position: relative; width: 100%; overflow: hidden; }
.xef-landing .reviews-viewport { width: 100%; overflow: hidden; }
.xef-landing .reviews-track { width: max-content; display: flex; align-items: stretch; will-change: transform; animation-duration: var(--reviews-duration); animation-timing-function: linear; animation-iteration-count: infinite; }
.xef-landing .reviews-track.moves-left { animation-name: reviews-marquee-left; }
.xef-landing .reviews-track.moves-right { animation-name: reviews-marquee-right; }
.xef-landing .reviews-carousel-block.is-paused .reviews-track { animation-play-state: paused; }
.xef-landing .reviews-carousel-block.pause-on-hover:hover .reviews-track, .xef-landing .reviews-carousel-block:focus-within .reviews-track { animation-play-state: paused; }
.xef-landing .reviews-copy { display: flex; align-items: stretch; gap: var(--reviews-gap); flex: 0 0 auto; padding-right: var(--reviews-gap); }
.xef-landing .review-card { flex: 0 0 auto; display: flex; flex-direction: row; align-items: stretch; gap: 11px; min-height: 150px; border: 1px solid rgba(17,17,17,.1); box-shadow: 0 7px 20px rgba(17,17,17,.07); }
.xef-landing .review-card-media { position: relative; flex: 0 0 auto; align-self: stretch; display: block; min-width: 110px; }
.xef-landing .review-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.xef-landing .review-product-media { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }
.xef-landing .review-product-media img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.xef-landing .review-product-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: #aaa; }
.xef-landing .review-product-placeholder svg { width: 28px; height: 28px; display: block; }
.xef-landing .review-seal { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; padding: 3px 8px; border-radius: 999px; background: #ffffff; color: #111; font-size: 10px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; box-shadow: 0 2px 6px rgba(17,17,17,.18); }
.xef-landing .review-seal span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xef-landing .review-card-media .review-seal { position: absolute; top: 10px; left: 10px; right: auto; max-width: calc(100% - 20px); z-index: 1; }
.xef-landing .review-seal svg { width: 14px; height: 14px; flex: 0 0 14px; display: block; }
.xef-landing .review-person { display: flex; align-items: center; gap: 9px; }
.xef-landing .review-avatar { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; overflow: hidden; color: #fff; font-size: 14px; font-weight: 750; border-radius: 50%; background: linear-gradient(135deg, #111, #777); }
.xef-landing .review-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.xef-landing .review-person-copy { min-width: 0; display: grid; gap: 2px; }
.xef-landing .review-person-copy strong { font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.xef-landing .review-person-copy span, .xef-landing .review-person-city, .xef-landing .review-person-job { color: #8a8a8a; font-size: 10px; line-height: 1.3; }
.xef-landing .review-rating-row { display: flex; align-items: center; gap: 6px; }
.xef-landing .review-rating { display: flex; gap: 2px; color: #c7c7c7; font-size: 14px; line-height: 1; }
.xef-landing .review-star.is-filled { color: #e4a52c; }
.xef-landing .review-rating-value { color: #111; font-weight: 700; font-size: 13px; line-height: 1; }
.xef-landing .review-copy { margin: 0; width: 100%; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.xef-landing .review-copy::before { content: "\201C"; }
.xef-landing .review-copy::after { content: "\201D"; }
.xef-landing .review-date { margin: 0; color: #8a8a8a; font-size: 11px; line-height: 1.4; }
.xef-landing .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; }
.xef-landing .reviews-empty { min-height: 120px; display: grid; place-items: center; color: #888; font-size: 11px; background: #f6f7f9; }
@keyframes reviews-marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes reviews-marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* =========================================================================
   FAQ accordion
   ========================================================================= */

.xef-landing .faq-block { width: 100%; padding: 18px; }
.xef-landing .faq-heading { margin: 0 0 15px; color: #222; font-size: 20px; line-height: 1.2; }
.xef-landing .faq-list { display: grid; gap: 8px; }
.xef-landing .faq-item { overflow: hidden; border: 1px solid rgba(17,17,17,.12); background: #fff; }
.xef-landing .faq-question-heading { margin: 0; }
.xef-landing .faq-question { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; color: #222; text-align: left; border: 0; background: transparent; cursor: pointer; }
.xef-landing .faq-question:hover { background: #fafafa; }
.xef-landing .faq-question:focus-visible { outline: 2px solid #111; outline-offset: -3px; }
.xef-landing .faq-question-text { min-width: 0; flex: 1; display: block; }
.xef-landing .faq-chevron { width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; color: #777; transition: transform .18s ease; }
.xef-landing .faq-chevron::after { content: ""; width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
.xef-landing .faq-item.is-open .faq-chevron { transform: rotate(180deg); }
.xef-landing .faq-answer { padding: 0 15px 14px; color: #666; }
.xef-landing .faq-answer-text { display: block; margin: 0; }
.xef-landing .faq-answer[hidden] { display: none; }

/* =========================================================================
   Divider / spacer blocks (S1: pricing-child semantics promoted to
   top-level blocks — the rule/height-box paint travels inline from the
   renderers, the sheet only carries the child width contract)
   ========================================================================= */

.xef-landing .divider-block { width: 100%; }
.xef-landing .spacer-block { width: 100%; }

/* =========================================================================
   Description block (WooCommerce long description)
   ========================================================================= */

.xef-landing .description-block { width: 100%; }
.xef-landing .description-content { color: #374151; font-size: 14px; line-height: 1.65; }
.xef-landing .description-content img { max-width: 100%; height: auto; }

/* =========================================================================
   Original reviews block (Reviex/Revux widget host)
   ========================================================================= */

.xef-landing .original-reviews-block { width: 100%; }
.xef-landing .original-reviews-placeholder {
	display: grid;
	place-items: center;
	min-height: 120px;
	color: #6b7280;
	font-size: 12px;
	border: 2px dashed #d1d5db;
	border-radius: 8px;
}

/* =========================================================================
   Reduced motion (template overrides, allowed !important scope)
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.xef-landing .animated-track { animation: none !important; transform: none !important; }
	.xef-landing .animated-copy + .animated-copy { display: none; }
	.xef-landing .custom-button { animation: none !important; transition: none !important; }
	.xef-landing .reviews-track { animation: none !important; transform: none !important; }
	.xef-landing .reviews-copy + .reviews-copy { display: none; }
}

/* Mockup index 3.html skin layer L796-797 (D7: skin wins): bordered section
   skins for the storefront. Editor-only selectors from the same skin lines
   (.faq-item-editor, .review-item-editor, .inner-element) do not belong to
   the storefront sheet. */
.xef-landing .faq-block, .xef-landing .review-card, .xef-landing .shortcode-block { border-color: #dedfe1; }
.xef-landing .faq-item, .xef-landing .review-card { box-shadow: 0 1px 3px rgba(18,20,24,.035); }