.rapm-hero {
	position: relative;
	overflow: hidden;
	background: #111;
}

.rapm-slide {
	/* No height:100% here on purpose — with Swiper's autoHeight option
	   (see assets/js/rapm-schedule.js), each slide's real height comes
	   from its own aspect-ratio, set per-instance in
	   RAPM_Hero_Carousel::render() and gated per-slide by whether that
	   slide actually has a dedicated mobile picture (.has-mobile-img).
	   This is what lets a slide with no mobile picture use the desktop
	   image's own shape on phones instead of being shrunk inside a much
	   taller box sized for a mobile picture it doesn't have — the exact
	   cause of the large empty/black area that showed up otherwise. */
	position: relative;
	width: 100%;
}

/* Scoped under .rapm-hero so a theme's own `img { height: auto }`-style
   rule can't outrank these (found on Woodmart: with a bare .rapm-slide-img
   the picture kept its natural height instead of filling the slide). */
.rapm-hero .rapm-slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

.rapm-hero .rapm-slide .rapm-slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 1.54.0: the picture's focal point, when one is set (RAPM_Focal). */
	object-position: var(--rapm-fp, 50% 50%);
	display: block;
}

/* A slide with no dedicated mobile picture falls back to its desktop one
   on phones (there's no standards-compliant way for <picture> to show
   nothing instead) — but shrink it to fit the frame rather than crop it
   edge-to-edge, so a wide desktop shot never gets cropped down to just
   its center. A real mobile picture is already cropped exactly for this
   shape on purpose, so it's excluded from this rule and keeps filling
   the frame edge-to-edge as normal. */
@media (max-width: 768px) {
	.rapm-hero .rapm-slide .rapm-fallback-desktop-on-mobile {
		object-fit: contain;
		background: #111;
	}

	/* 1.41.1: a phone picture with no words laid over it shows whole,
	   never trimmed, since its words are usually part of the picture.
	   Where the slide is shorter than the picture (most real phones, once
	   the browser's bars are counted), the strips at the sides show a
	   blurred, dimmed copy of the same picture instead of black bars.
	   rapm-schedule.js sets --rapm-blur to the picture the browser
	   actually loaded, once it has, so the copy costs no extra download.
	   The slide's height is in RAPM_Hero_Carousel::render(). */
	.rapm-hero .rapm-slide.has-mobile-img.is-picture-only {
		overflow: hidden;
	}
	.rapm-hero .rapm-slide.has-mobile-img.is-picture-only::before {
		content: "";
		position: absolute;
		inset: -24px;
		background: var(--rapm-blur, none) center / cover no-repeat;
		filter: blur(16px) brightness(0.85);
		pointer-events: none;
	}
	.rapm-hero .rapm-slide.has-mobile-img.is-picture-only .rapm-slide-img {
		object-fit: contain;
	}
}

/* Promotional copy is always real HTML text layered over the image, never
   flattened into the image file itself — this is what keeps it crawlable,
   screen-reader accessible, and editable without a re-upload. Kept
   restrained (a soft gradient, modest type scale, no motion beyond the
   carousel's own transition) rather than flashy — banner-blindness/
   eye-tracking research consistently finds understated promotional
   elements outperform loud ones in an editorial-feeling context. */
.rapm-slide-copy {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 32px 40px;
	box-sizing: border-box;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
	color: #fff;
	z-index: 4;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

/* Alignment is a per-asset choice (Admin: "Text Alignment") — the default
   (no data-align, or "left") matches the plugin's original fixed layout,
   so existing assets render unchanged after upgrading. */
.rapm-slide-copy[data-align="center"] { align-items: center; text-align: center; }
.rapm-slide-copy[data-align="right"] { align-items: flex-end; text-align: right; }

.rapm-headline, .rapm-subhead {
	color: inherit; /* set inline per-asset via the Text Color field, default #fff from .rapm-slide-copy above */
}

.rapm-headline {
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 6px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.rapm-subhead {
	font-size: 15px;
	margin: 0 0 14px;
	opacity: 0.92;
	max-width: 480px;
}

/* Typography presets (Admin: "Text Style") — kept to system font stacks
   rather than a webfont pick-list, so choosing one never adds an extra
   network request on the client site. */
.rapm-slide-copy[data-style="elegant"] .rapm-headline,
.rapm-slide-copy[data-style="elegant"] .rapm-subhead {
	font-family: Georgia, "Times New Roman", serif;
}
.rapm-slide-copy[data-style="elegant"] .rapm-headline { font-weight: 600; letter-spacing: 0.01em; }

.rapm-slide-copy[data-style="minimal"] .rapm-headline { font-weight: 500; letter-spacing: 0.03em; text-shadow: none; }
.rapm-slide-copy[data-style="minimal"] .rapm-subhead { opacity: 0.85; }

.rapm-cta-btn {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 100px;
	background: #fff;
	color: #111;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.rapm-slide-link {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: block;
}

.rapm-nav-btn {
	color: #fff !important;
	background: rgba(0, 0, 0, 0.4);
	padding: 26px 18px;
	border-radius: 4px;
	z-index: 10;
}

.rapm-nav-btn::after {
	font-size: 18px !important;
}

.rapm-hero .swiper-pagination {
	bottom: 16px !important;
	z-index: 10;
}

.rapm-hero .swiper-pagination-bullet {
	background: #fff !important;
	opacity: 0.65;
}

.rapm-hero .swiper-pagination-bullet-active {
	opacity: 1;
}

@media (max-width: 768px) {
	.rapm-slide-copy { padding: 24px 20px; }
	.rapm-headline { font-size: 22px; }
}

/* A spot set as the page's main heading (1.29.0) uses an h1 for its first
   promotion's big words instead of an h2. Themes and Elementor's site
   settings often style h1 bigger than h2 (".elementor-kit-N h1" outranks
   ".rapm-headline"), so the h1 is held to the same look as the h2 it
   replaces. Font family stays with the site or the promotion's Typeface. */
.rapm-slide-copy h1.rapm-headline {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	margin: 0 0 6px;
	padding: 0;
}

@media (max-width: 768px) {
	.rapm-slide-copy h1.rapm-headline { font-size: 22px; }
}

/* 1.32.2: a feature banner (fold_banner) is short on phones. Its 1080x400
   phone picture is 139px tall on a 375px screen, and the default phone
   copy (24px padding, 22px headline, 15px line, button) needed about
   164px, so the headline was pushed against the top edge (seen on Gates'
   outlet banner). Tighter spacing and type bring it to about 120px. A
   banner with no phone picture shows its 1920x300 desktop one, only about
   59px tall on a phone: there, just the headline shows (the whole banner
   is still the link). .rapm-slide-copy is in each selector so these
   outrank the h1 rule above. */
@media (max-width: 768px) {
	.rapm-kind-fold-banner .rapm-slide-copy { padding: 14px 16px; }
	.rapm-kind-fold-banner .rapm-slide-copy .rapm-headline { font-size: 20px; line-height: 1.25; margin: 0 0 2px; }
	.rapm-kind-fold-banner .rapm-slide-copy .rapm-subhead { font-size: 13px; line-height: 1.35; margin: 0 0 8px; }
	.rapm-kind-fold-banner .rapm-slide-copy .rapm-cta-btn { padding: 7px 16px; font-size: 12px; }
	.rapm-kind-fold-banner .rapm-slide:not(.has-mobile-img) .rapm-slide-copy { padding: 8px 12px; }
	.rapm-kind-fold-banner .rapm-slide:not(.has-mobile-img) .rapm-slide-copy .rapm-headline { font-size: 16px; margin: 0; }
	.rapm-kind-fold-banner .rapm-slide:not(.has-mobile-img) .rapm-subhead,
	.rapm-kind-fold-banner .rapm-slide:not(.has-mobile-img) .rapm-cta-btn { display: none; }
}

/* Split view (1.43.0, RAPM_Split): the Slider and its shop bar on one
   side, a promotion box that stays put on the other. Widths come from the
   spot (--rapm-split-cols, room first unless the promotion is on the
   left). min-width: 0 keeps Swiper from stretching its column. The box
   stretches to the full height of the room photo plus the shop bar. */
.rapm-split {
	display: grid;
	grid-template-columns: var(--rapm-split-cols, 3fr 2fr);
	gap: 16px;
	align-items: stretch;
}
/* 1.43.1, full page width (the default): out of the theme's page width,
   edge to edge. --rapm-split-vw is the page's width without the scrollbar
   (RAPM_Split's script). Assumes the column is centered on the page, as a
   page's content area or a full-width Elementor container is; a spot in a
   narrow column should use the spot's "Site's page width" instead. */
/* 1.44.0: !important because block themes (Twenty Twenty-Five and other
   "constrained" layouts) give every block in the content
   margin-left/right: auto !important (wp-includes/block-supports/
   layout.php), which pinned the block to the content's left edge and
   pushed it past the right side of the page. This selector is more
   specific, so it wins. */
.rapm-split.is-full { width: var(--rapm-split-vw, 100vw); max-width: none; margin-left: calc(50% - var(--rapm-split-vw, 100vw) / 2) !important; margin-right: 0 !important; }
.rapm-split-main { min-width: 0; }
.rapm-split-side { min-width: 0; position: relative; }
.rapm-split-promo-left .rapm-split-side { order: -1; }
/* Nothing live in the box: the Slider goes back to full width. */
.rapm-split.rapm-split-empty { grid-template-columns: minmax(0, 1fr); }
.rapm-split.rapm-split-empty .rapm-split-side,
.rapm-pb-solo.rapm-split-empty { display: none; }
/* 1.43.2: on computers the room fits the screen below the header
   (--rapm-split-maxh, from RAPM_Split's script), its photos trimmed evenly
   top and bottom; the promotion box matches the room's height. */
@media (min-width: 769px) {
	.rapm-split .rapm-hero .rapm-slide { max-height: var(--rapm-split-maxh, none); }
}
/* At full width a 4:3 room photo would be about as tall as the screen, so
   until a promotion is live again the room photos show 2:1, trimmed evenly
   top and bottom. Computers only: phones already stack. */
@media (min-width: 769px) {
	.rapm-split.rapm-split-empty .rapm-hero .rapm-slide { aspect-ratio: 2 / 1; }
}

.rapm-pb { position: relative; height: 100%; overflow: hidden; background: #111; }
.rapm-pb-solo { position: relative; width: 100%; }
.rapm-pb-item { position: absolute; inset: 0; overflow: hidden; }
.rapm-pb-item[hidden] { display: none; }
/* 1.52.0: a promotion fades in when the box changes to it (linked or rotating box). */
.rapm-pb-item.is-in { animation: rapm-pb-in 0.5s ease both; }
@keyframes rapm-pb-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rapm-pb-item.is-in { animation: none; } }
/* Scoped like .rapm-slide-img, so a theme's img rules can't outrank it. */
.rapm-pb .rapm-pb-item .rapm-pb-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}
/* 1.54.0: the picture's focal point (RAPM_Focal). */
.rapm-pb .rapm-pb-item .rapm-pb-img { object-position: var(--rapm-fp, 50% 50%); }
/* A finished graphic shows whole, with a blurred copy behind any gap. */
.rapm-pb .rapm-pb-item.is-picture-only .rapm-pb-img { object-fit: contain; }
.rapm-pb-item.is-picture-only::before {
	content: "";
	position: absolute;
	inset: -24px;
	background: var(--rapm-blur, none) center / cover no-repeat;
	filter: blur(16px) brightness(0.85);
	pointer-events: none;
}
.rapm-pb .rapm-slide-copy { padding: 24px 24px; }

/* The shop bar under a split Slider is a little smaller (Phil's pick):
   the button beside one row of smaller cards that scrolls sideways (with
   the scroll dots under it), as in the mockup, so many products don't
   stack into a tall bar and stretch the promotion box. */
.rapm-split .rapm-pins-shelf { padding: 12px 0 4px; }
.rapm-split .rapm-pins-panel { grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; align-items: center; }
.rapm-split .rapm-pins-panel.no-cards { grid-template-columns: minmax(0, 1fr); }
.rapm-split .rapm-pins-shelf .rapm-pins-shelf-btn { min-height: 38px; padding: 0 16px; font-size: 12px; }
.rapm-split .rapm-pins-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding: 6px 0 6px 6px; }
.rapm-split .rapm-pins-card { flex: 0 0 230px; scroll-snap-align: start; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 8px; }
.rapm-split .rapm-pins-card-img img { width: 52px; height: 52px; }

/* Phones: one column, the promotion first unless the spot says room
   first. The box keeps its picture's shape (square) at full width. */
@media (max-width: 768px) {
	.rapm-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.rapm-split .rapm-split-side { order: -1; aspect-ratio: var(--rapm-pb-ratio, 1 / 1); }
	.rapm-split.rapm-split-room-first .rapm-split-side { order: 1; }
	.rapm-split .rapm-pins-shelf { padding: 12px 12px 4px; }
	.rapm-split .rapm-pins-panel { grid-template-columns: minmax(0, 1fr); }
	.rapm-split .rapm-pins-card { flex-basis: 82%; }
}

/* Promotion box canvas (1.44.0, RAPM_Split::render_design()): a square
   design area fitted inside the box, the background (a color, or the
   picture cover-cropped) filling the rest. Each piece is placed by its
   middle (left/top as a share of the square) and sized as a share of the
   square's width (--s, in cqw), with a floor in px so words stay readable
   on phones. Shared with the form's editor (rapm-box-canvas.js), so the
   editor shows exactly what ships. Long words wrap within the square. */
.rapm-pb-item.is-design { container-type: size; }
.rapm-pb-board {
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(100cqw, 100cqh);
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);
	container-type: inline-size;
	z-index: 2;
	pointer-events: none;
}
.rapm-pb-t {
	position: absolute;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0;
	width: max-content;
	max-width: 96cqw;
	text-align: center;
	line-height: 1.08;
	white-space: normal;
	overflow-wrap: break-word;
	box-sizing: border-box;
}
.rapm-pb-board .rapm-pb-t.is-headline { font-size: max(18px, calc(var(--s, 10) * 1cqw)); font-weight: 800; letter-spacing: 0.01em; color: inherit; font-family: inherit; text-transform: none; }
.rapm-pb-board .rapm-pb-t.is-sub { font-size: max(13px, calc(var(--s, 5) * 1cqw)); font-weight: 500; line-height: 1.2; font-family: inherit; }
.rapm-pb-board .rapm-pb-t.is-btn {
	font-size: max(11px, calc(var(--s, 3.6) * 1cqw));
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.8em 1.4em;
	border-radius: 999px;
	color: #fff;
	white-space: nowrap;
	font-family: inherit;
}
.rapm-pb-t.is-icon { font-size: max(16px, calc(var(--s, 10) * 1cqw)); line-height: 0; }
.rapm-pb-t.is-icon svg { display: block; width: 1em; height: 1em; fill: currentColor; }
.rapm-pb-board[data-style="elegant"] .rapm-pb-t.is-headline { font-weight: 600; }
.rapm-pb-board[data-style="minimal"] .rapm-pb-t.is-headline { font-weight: 500; letter-spacing: 0.03em; }
.rapm-pb .rapm-pb-item.is-design .rapm-pb-img { z-index: 1; }
/* 1.45.0: a Media Library picture on the canvas (a logo or badge), sized
   by its width; never smaller than 24px. */
.rapm-pb-board .rapm-pb-t.is-img { width: max(24px, calc(var(--s, 30) * 1cqw)); max-width: none; height: auto; display: block; }