/* RG PDP customer videos ("See it in action") on V4 template #14536. Source: repo pdp-v4/ugc/. Loaded only on
 * products with clips. Tile look = the category-page reel tile (cat-v2 .rgcat-reel): ink card, 9:16 footage,
 * white Sound circle top-right, credit in a dark strip under the footage. */

/* Placement. Phones/tablets: DOM order (gallery, buy box, videos, reviews, accordions).
 * Desktop: left column under the photos, reviews and the story move down one row. */
.elementor-14536 .rgv4-top.e-con > .elementor-element.rgv4-ugc { margin: 0 0 48px; }
@media (max-width: 767px) {
  .elementor-14536 .rgv4-top.e-con > .elementor-element.rgv4-ugc { margin-bottom: 40px; }
}
@media (min-width: 1025px) {
  .elementor-14536 .rgv4-top.e-con:has(> .rgv4-ugc) { grid-template-rows: auto auto auto minmax(0, 1fr); }
  .elementor-14536 .rgv4-top.e-con:has(> .rgv4-ugc) > .elementor-element.rgv4-ugc { grid-column: 1; grid-row: 2; margin: 0; }
  .elementor-14536 .rgv4-top.e-con:has(> .rgv4-ugc) > .rgv4-reviews { grid-row: 3; }
  .elementor-14536 .rgv4-top.e-con:has(> .rgv4-ugc) > .rgv4-accordions { grid-row: 4; }
}
.elementor-14536 .rgv4-ugc .elementor-shortcode { margin: 0; }

.elementor-14536 .rgpu {
  --rgpu-w: min(200px, calc((100% - 24px) / 3));
  margin: 0; padding: 0; color: var(--rg-ink, #292929); font-family: var(--rg-font-body, "Poppins", sans-serif);
}
.elementor-14536 .rgpu .rgpu__title {
  margin: 0 0 14px; padding: 0;
  font: 600 19px/1.3 var(--rg-font-display, "Jost", sans-serif);
  letter-spacing: 0; text-transform: none; color: var(--rg-ink, #292929);
}

/* the row: tiles side by side; swipes when they don't fit (phones with 3 clips) */
.elementor-14536 .rgpu .rgpu__row {
  display: flex; gap: 12px; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.elementor-14536 .rgpu .rgpu__row::-webkit-scrollbar { display: none; }
.elementor-14536 .rgpu .rgpu__tile {
  flex: 0 0 var(--rgpu-w); width: var(--rgpu-w); min-width: 0; margin: 0; padding: 0;
  scroll-snap-align: start; list-style: none;
  border-radius: 14px; overflow: hidden; background: var(--rg-ink, #292929); isolation: isolate;
}
.elementor-14536 .rgpu .rgpu__tile::before, .elementor-14536 .rgpu .rgpu__tile::marker { content: none; }
.elementor-14536 .rgpu .rgpu__media { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--rg-ink, #292929); }
.elementor-14536 .rgpu .rgpu__video {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 50%; background: var(--rg-ink, #292929); border: 0; border-radius: 0;
}

/* Sound: 44px hit area, 32px white circle (same as the category tile) */
.elementor-14536 .rgpu .rgpu__sound {
  position: absolute; top: 4px; right: 4px; z-index: 3; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; margin: 0;
  border: 0; border-radius: 50%; cursor: pointer; background: none; color: var(--rg-ink, #292929); box-shadow: none;
  font-size: 0; line-height: 1; text-transform: none; letter-spacing: 0;
}
.elementor-14536 .rgpu .rgpu__sound::before {
  content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--rg-white, #fff); z-index: -1;
}
.elementor-14536 .rgpu .rgpu__sound:hover, .elementor-14536 .rgpu .rgpu__sound:focus { background: none; }
.elementor-14536 .rgpu .rgpu__sound:hover::before { background: #F0F0F0; }
.elementor-14536 .rgpu .rgpu__sound:focus-visible { outline: 2px solid var(--rg-white, #fff); outline-offset: 1px; }
.elementor-14536 .rgpu .rgpu__sound-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.elementor-14536 .rgpu .rgpu__sound-ico {
  width: 16px; height: 14px; flex: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16'><path d='M2.5 5.5h3l4-3.2v11.4l-4-3.2h-3z' fill='%23292929'/><path d='M13 5.5l4.5 5M17.5 5.5l-4.5 5' stroke='%23292929' stroke-width='1.6' stroke-linecap='round'/></svg>") center / 16px 14px no-repeat;
}
.elementor-14536 .rgpu .rgpu__sound[aria-pressed="true"] .rgpu__sound-ico {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 20 16'><path d='M2.5 5.5h3l4-3.2v11.4l-4-3.2h-3z' fill='%23292929'/><path d='M12.5 5.3a3.6 3.6 0 0 1 0 5.4M15 3a7 7 0 0 1 0 10' fill='none' stroke='%23292929' stroke-width='1.6' stroke-linecap='round'/></svg>");
}

/* credit strip under the footage */
.elementor-14536 .rgpu .rgpu__cap {
  margin: 0; padding: 10px 12px 11px;
  font: 400 12px/1.35 var(--rg-font-body, "Poppins", sans-serif); color: rgba(255, 255, 255, .78);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.elementor-14536 .rgpu .rgpu__handle { font-weight: 600; color: var(--rg-white, #fff); }

/* phones: two tiles fill the width, a third peeks so the row reads as swipeable */
@media (max-width: 767px) {
  .elementor-14536 .rgpu { --rgpu-w: calc((100% - 12px) / 2); }
  .elementor-14536 .rgpu[data-n="3"] { --rgpu-w: calc((100% - 24px) / 2.25); }
  .elementor-14536 .rgpu .rgpu__row { margin-right: -16px; padding-right: 16px; scroll-padding-left: 0; }
  .elementor-14536 .rgpu .rgpu__cap { padding: 9px 10px 10px; font-size: 11.5px; }
  .elementor-14536 .rgpu .rgpu__by { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .elementor-14536 .rgpu .rgpu__row { scroll-behavior: auto; }
}