/* Product dots and the "Shop now" button on Slider and Feature banner
   slides (RAPM_Hero_Carousel, 1.35.0), placed by rapm-pins.js, and the
   same look in the Add/Edit form's Live Preview. Colors come from
   --rapm-pins-accent (Settings > Brand Color, usually an Elementor global
   color), like Shop the Look's dots and buttons in rapm-looks.css. Above
   the slide's own link (.rapm-slide-link, z-index 5) so they're clickable. */

.rapm-pin-dot {
	position: absolute; left: 0; top: 0; z-index: 6;
	width: 34px; height: 34px; min-width: 0; min-height: 0; margin: -17px 0 0 -17px; padding: 0; box-sizing: border-box;
	border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	background: var(--rapm-pins-accent, #2271b1); color: #fff; cursor: pointer;
	font: inherit; font-size: 14px; font-weight: 700; line-height: 30px; letter-spacing: normal; text-transform: none; text-align: center;
	transition: filter 0.2s, transform 0.2s;
}
.rapm-pin-dot[hidden] { display: none; }
.rapm-pin-dot::after {
	content: ""; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
	border: 2px solid rgba(255, 255, 255, 0.85); animation: rapm-pins-ring 2.4s ease-out infinite;
}
@keyframes rapm-pins-ring { 0% { transform: scale(0.7); opacity: 1; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
.rapm-pin-dot:hover, .rapm-pin-dot[aria-expanded="true"] { filter: brightness(1.18); transform: scale(1.1); }

.rapm-pin-btn {
	position: absolute; left: 0; top: 0; z-index: 6;
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 24px;
	background: var(--rapm-pins-accent, #2271b1); color: #fff; text-decoration: none; white-space: nowrap;
	font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
a.rapm-pin-btn:hover, a.rapm-pin-btn:focus { color: #fff; filter: brightness(0.92); }
.rapm-pin-dot:focus-visible, .rapm-pin-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The small card a dot opens. */
.rapm-pin-pop {
	position: absolute; z-index: 7; width: 270px; max-width: calc(100% - 16px);
	display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px;
	padding: 10px 32px 10px 10px; background: #fff; color: #333; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	font-size: 14px; line-height: 1.35; text-align: left;
}
.rapm-pin-pop[hidden] { display: none; }
.rapm-pin-pop img { display: block; width: 64px; height: 64px; object-fit: cover; }
.rapm-pin-pop-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rapm-pin-pop-name { margin: 0; font-weight: 600; color: #242424; }
.rapm-pin-pop-price { font-weight: 700; }
.rapm-pin-pop-price del { margin-right: 6px; font-weight: 400; opacity: 0.7; }
.rapm-pin-pop-price ins { text-decoration: none; }
.rapm-pin-pop-stock { font-size: 12px; }
.rapm-pin-pop-stock.in-stock { color: #3c8a4a; }
.rapm-pin-pop-stock.out-of-stock { color: #b5502b; }
.rapm-pin-pop-view { margin-top: 4px; color: var(--rapm-pins-accent, #2271b1); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; }
.rapm-pin-pop-view:hover { text-decoration: underline; }
.rapm-pin-pop-x {
	position: absolute; top: 3px; right: 3px; width: 28px; height: 28px; min-width: 0; min-height: 0; margin: 0; padding: 0;
	border: 0; border-radius: 0; box-shadow: none; background: transparent; color: #777; cursor: pointer; font-size: 20px; line-height: 1; text-transform: none;
}

/* 1.40.1: on the website, the theme's button rules lose. Seen on Kemper
   (WoodMart 8.4.1): WoodMart's base.min.css gives every <button> position:
   relative, inline-flex, its own corners and line height, and Elementor's
   kit gives every button the kit's colors. Both load after this file at the
   same or higher weight, so the dots fell out of the picture and were cut
   off, and the card's close button turned into a colored square. The dots
   and buttons always sit in .rapm-hero there, and the parts that break the
   layout are !important, as for the scroll dots (1.37.1). left and top stay
   normal: rapm-pins.js sets them inline. The form's Live Preview isn't in
   .rapm-hero and keeps the rules above. */
.rapm-hero .rapm-pin-dot {
	position: absolute !important; display: flex !important; align-items: center !important; justify-content: center !important;
	width: 34px !important; height: 34px !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important;
	margin: -17px 0 0 -17px !important; padding: 0 !important; box-sizing: border-box !important;
	border: 2px solid #fff !important; border-radius: 50% !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
	background: var(--rapm-pins-accent, #2271b1) !important; color: #fff !important; text-shadow: none !important;
	font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: normal !important; text-transform: none !important;
}
.rapm-hero .rapm-pin-dot[hidden] { display: none !important; }
.rapm-hero .rapm-pin-btn { position: absolute !important; color: #fff !important; background: var(--rapm-pins-accent, #2271b1) !important; text-decoration: none !important; }
.rapm-hero .rapm-pin-pop-x {
	position: absolute !important; display: block !important; width: 28px !important; height: 28px !important;
	min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
	border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; color: #777 !important;
	font-size: 20px !important; line-height: 1 !important; text-transform: none !important; letter-spacing: normal !important;
}
/* 1.41.0: a card in the shop bar and its dot light up together. */
.rapm-hero .rapm-pin-dot.is-hot { filter: brightness(1.18); transform: scale(1.1); }

/* 1.41.0: the shop bar under a Slider or Feature banner with dots
   (RAPM_Hero_Carousel::render_shelf()), matching the one under Shop the
   Look's photo in rapm-looks.css: the slide's button on the left, a
   numbered card per product on the right. Every slide's panel sits in the
   same grid cell, so the bar keeps one height and the page below doesn't
   move as slides change; rapm-pins.js shows the one on screen. Names and
   the button are colored at higher weight than Elementor's kit link
   colors. */
.rapm-pins-shelf { max-width: 1400px; margin: 0 auto; padding: 24px 16px 8px; box-sizing: border-box; }
.rapm-pins-shelf[hidden], .rapm-pins-panel[hidden] { display: none !important; }
.rapm-pins-shelf-in { display: grid; }
.rapm-pins-panel {
	grid-area: 1 / 1; visibility: hidden;
	display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px 36px; align-items: start;
}
.rapm-pins-panel.is-on { visibility: visible; }
.rapm-pins-panel.no-cards { grid-template-columns: minmax(0, 1fr); }
.rapm-pins-shelf .rapm-pins-shelf-btn {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px;
	background: var(--rapm-pins-accent, #2271b1); color: #fff; text-decoration: none;
	font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.rapm-pins-shelf .rapm-pins-shelf-btn:hover, .rapm-pins-shelf .rapm-pins-shelf-btn:focus { color: #fff; filter: brightness(0.92); }
.rapm-pins-shelf .rapm-pins-shelf-btn:focus-visible { outline: 2px solid var(--rapm-pins-accent, #2271b1); outline-offset: 2px; }
.rapm-pins-cards-wrap { min-width: 0; }
.rapm-pins-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.rapm-pins-card {
	display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0;
	padding: 12px; border: 1px solid #e2e2e2; background: #fff; color: #333; transition: border-color 0.15s, box-shadow 0.15s;
}
.rapm-pins-card.is-hot { border-color: var(--rapm-pins-accent, #2271b1); box-shadow: 0 0 0 1px var(--rapm-pins-accent, #2271b1); }
.rapm-pins-card-img { position: relative; display: block; }
.rapm-pins-card-img img { display: block; width: 84px; height: 84px; max-width: none; object-fit: cover; }
.rapm-pins-num {
	position: absolute; left: -6px; top: -6px; width: 24px; height: 24px; border-radius: 50%;
	background: var(--rapm-pins-accent, #2271b1); color: #fff; font-size: 12px; font-weight: 700; line-height: 24px; text-align: center;
}
.rapm-pins-card.is-hot .rapm-pins-num { filter: brightness(1.18); }
.rapm-pins-card-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rapm-pins-shelf .rapm-pins-card-name {
	color: inherit; font-size: 15px; font-weight: 600; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rapm-pins-shelf .rapm-pins-card-name:hover { color: var(--rapm-pins-accent, #2271b1); }
.rapm-pins-card-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.rapm-pins-card-price:empty, .rapm-pins-card-stock:empty { display: none; }
.rapm-pins-card-price del { margin-right: 6px; font-weight: 400; opacity: 0.7; }
.rapm-pins-card-price ins { text-decoration: none; }
.rapm-pins-card-stock { font-size: 12px; line-height: 1.3; }
.rapm-pins-card-stock.in-stock { color: #3c8a4a; }
.rapm-pins-card-stock.out-of-stock { color: #b5502b; }
/* Phones: the cards scroll sideways with dots under them (1.37.1 rule:
   anything that scrolls sideways shows where you are). */
.rapm-pins-shelf .rapm-scroll-dots[hidden] { display: none !important; }
.rapm-pins-shelf .rapm-scroll-dots { display: flex; justify-content: center; gap: 2px; margin-top: 2px; }
.rapm-pins-shelf .rapm-scroll-dot {
	-webkit-appearance: none; appearance: none; display: inline-flex !important; align-items: center; justify-content: center;
	width: 24px !important; height: 24px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
	border: 0 !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; color: #333 !important; line-height: 0 !important; cursor: pointer;
}
.rapm-pins-shelf .rapm-scroll-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.25; transition: opacity 0.2s ease, transform 0.2s ease; }
.rapm-pins-shelf .rapm-scroll-dot.is-active::before { opacity: 0.85; transform: scale(1.2); }
@media (max-width: 1023px) {
	.rapm-pins-panel { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 767px) {
	.rapm-pins-shelf { padding: 16px 12px 4px; }
	.rapm-pins-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 6px 0 6px 6px; }
	.rapm-pins-card { flex: 0 0 82%; scroll-snap-align: start; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 10px; }
	.rapm-pins-card-img img { width: 64px; height: 64px; }
	.rapm-pins-shelf .rapm-pins-card-name { font-size: 14px; }
}

/* Until the slide's real picture is measured (a lazy-loader's placeholder
   doesn't count), the dots and button wait out of sight rather than sit in
   the wrong place. rapm-pins.js sets and clears this. */
.rapm-slide.rapm-pins-wait .rapm-pin-dot, .rapm-slide.rapm-pins-wait .rapm-pin-btn { visibility: hidden; }

@media (max-width: 768px) {
	.rapm-pin-dot { width: 30px; height: 30px; margin: -15px 0 0 -15px; line-height: 26px; font-size: 13px; }
	.rapm-pin-btn { min-height: 34px; padding: 0 14px; font-size: 12px; }
	.rapm-hero .rapm-pin-dot { width: 30px !important; height: 30px !important; margin: -15px 0 0 -15px !important; font-size: 13px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.rapm-pin-dot::after { animation: none; opacity: 0; }
	.rapm-pins-card, .rapm-pins-shelf .rapm-scroll-dot::before { transition: none; }
}