/* Video Carousel — a rail of vertical clips that open in a player.
 *
 * Every per-instance value rides on the root as a custom property, so the
 * block is right on first paint: the rail scrolls and snaps in CSS, and the
 * script only adds what CSS cannot do — the player, the autoplay, and the
 * pagination that follows the scroll.
 *
 * The stars reuse the shared icon set (scripts/icons.mjs): a mask on the
 * outer span clips its child, so a half star is the child at 50% width
 * rather than a second piece of art.
 */

.pb-vid {
  --pbi-s: 1em;
  font-family: inherit;
  margin-block: var(--pb-vid-st, 4px) var(--pb-vid-sb, 4px);
}

.pb-vid--boxed {
  background: var(--pb-vid-box, #f7f7f7);
  border-radius: var(--pb-vid-cr, 10px);
  padding: 14px;
}

/* ── heading ─────────────────────────────────────────────────────────── */

.pb-vid__head { text-align: var(--pb-vid-ha, center); margin: 0 0 12px; }

.pb-vid__title {
  margin: 0;
  color: var(--pb-vid-hc, #4a2b2f);
  font-size: var(--pb-vid-hs, 18px);
  font-weight: 600;
  line-height: 1.3;
}

/* The words a merchant put in brackets. Solid paints the text; gradient runs
   the colour into a lighter version of itself, clipped to the glyphs. */
.pb-vid__hl { background: none; color: var(--pb-vid-hl, #b06f78); }
.pb-vid--grad .pb-vid__hl {
  background-image: linear-gradient(90deg, var(--pb-vid-hl, #b06f78), color-mix(in srgb, var(--pb-vid-hl, #b06f78) 45%, white));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pb-vid__stars {
  display: flex;
  gap: 0.12em;
  justify-content: var(--pb-vid-hj, center);
  margin-top: 0.35em;
  font-size: var(--pb-vid-ss, 18px);
}

.pb-vid__star {
  position: relative;
  width: 1em;
  height: 1em;
  background: color-mix(in srgb, var(--pb-vid-sc, #f5a623) 24%, transparent);
  -webkit-mask: var(--pbi-src) center / contain no-repeat;
  mask: var(--pbi-src) center / contain no-repeat;
}
.pb-vid__star i { position: absolute; inset: 0 auto 0 0; width: var(--f, 0%); background: var(--pb-vid-sc, #f5a623); }

/* Box stars sit on a tinted square; classic ones stand on their own. */
.pb-vid--boxstars .pb-vid__stars { gap: 0.2em; }
.pb-vid--boxstars .pb-vid__star {
  padding: 0.16em;
  box-sizing: content-box;
  border-radius: 0.2em;
  -webkit-mask: none;
  mask: none;
  background: color-mix(in srgb, var(--pb-vid-sc, #f5a623) 16%, transparent);
}
.pb-vid--boxstars .pb-vid__star::before {
  content: "";
  position: absolute;
  inset: 0.16em;
  background: color-mix(in srgb, var(--pb-vid-sc, #f5a623) 24%, transparent);
  -webkit-mask: var(--pbi-src) center / contain no-repeat;
  mask: var(--pbi-src) center / contain no-repeat;
}
.pb-vid--boxstars .pb-vid__star i {
  inset: 0.16em auto 0.16em 0.16em;
  width: calc(var(--f, 0%) - 0.16em);
  -webkit-mask: var(--pbi-src) left center / 1em 1em no-repeat;
  mask: var(--pbi-src) left center / 1em 1em no-repeat;
}

/* ── the rail ────────────────────────────────────────────────────────── */

.pb-vid__rail { position: relative; }

.pb-vid__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--pb-vid-n, 3) - 1) * 10px) / var(--pb-vid-n, 3));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.pb-vid__track::-webkit-scrollbar { display: none; }

.pb-vid__slide { scroll-snap-align: start; min-width: 0; }

.pb-vid__card {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 0;
  margin: 0;
  background: #00000010;
  border-radius: var(--pb-vid-cr, 10px);
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pb-vid--round .pb-vid__card { aspect-ratio: 1; border-radius: 50%; }

.pb-vid__v { width: 100%; height: 100%; object-fit: cover; display: block; }

.pb-vid__cap {
  margin: 0.5em 0 0;
  font-size: 0.85em;
  line-height: 1.35;
  text-align: var(--pb-vid-ha, center);
  color: inherit;
}

/* ── play badge ──────────────────────────────────────────────────────── */

.pb-vid__play {
  position: absolute;
  display: grid;
  place-items: center;
  font-size: var(--pb-vid-ps, 28px);
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  color: var(--pb-vid-pc, #fff);
  pointer-events: none;
}
.pb-vid__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 0.18em;
  border-style: solid;
  border-width: 0.5em 0 0.5em 0.85em;
  border-color: transparent transparent transparent currentColor;
}
.pb-vid--pb .pb-vid__play {
  background: color-mix(in srgb, var(--pb-vid-pbg, #fff) var(--pb-vid-pop, 20%), transparent);
  -webkit-backdrop-filter: blur(var(--pb-vid-pbl, 4px));
  backdrop-filter: blur(var(--pb-vid-pbl, 4px));
}
.pb-vid--pbr .pb-vid__play { border: 1px solid color-mix(in srgb, var(--pb-vid-pc, #fff) 55%, transparent); }

.pb-vid--play-center .pb-vid__play { inset: 50% auto auto 50%; transform: translate(-50%, -50%); }
.pb-vid--play-bl .pb-vid__play { inset: auto auto 10px 10px; }
.pb-vid--play-br .pb-vid__play { inset: auto 10px 10px auto; }
.pb-vid--play-tr .pb-vid__play { inset: 10px 10px auto auto; }

/* A card that is playing its silent preview does not need to shout. */
.pb-vid__card[data-playing] .pb-vid__play { opacity: 0.45; transition: opacity 0.2s; }

/* ── arrows ──────────────────────────────────────────────────────────── */

.pb-vid__arrow {
  position: absolute;
  top: calc(50% - 18px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: var(--pb-vid-ab, #fff);
  color: var(--pb-vid-ac, #111);
  box-shadow: 0 1px 6px #0000001f;
}
.pb-vid--ab .pb-vid__arrow { border: 1px solid color-mix(in srgb, var(--pb-vid-ac, #111) 22%, transparent); }
.pb-vid__arrow::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 3px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(-135deg);
}
.pb-vid__arrow--next::before { margin: 0 3px 0 0; transform: rotate(45deg); }
.pb-vid__arrow--prev { left: -6px; }
.pb-vid__arrow--next { right: -6px; }
.pb-vid__arrow[disabled] { opacity: 0.35; cursor: default; }

/* ── pagination ──────────────────────────────────────────────────────── */

.pb-vid__dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.pb-vid__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--pb-vid-doff, #ddd);
}
.pb-vid__dot[aria-current="true"] { background: var(--pb-vid-don, #4a2b2f); }

.pb-vid__line {
  position: relative;
  height: 4px;
  margin-top: 10px;
  border-radius: 4px;
  background: var(--pb-vid-doff, #ddd);
  overflow: hidden;
}
.pb-vid__line i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  border-radius: inherit;
  background: var(--pb-vid-don, #4a2b2f);
  transform: translateX(var(--x, 0));
}

/* ── the player ──────────────────────────────────────────────────────── */

.pb-vid-player {
  border: 0;
  padding: 0;
  background: #000;
  border-radius: var(--r, 14px);
  overflow: hidden;
  color: #fff;
}
.pb-vid-player::backdrop { background: #000000d6; }
dialog.pb-vid-player {
  width: min(92vw, 56vh);
  max-width: 520px;
  max-height: 92vh;
}
.pb-vid-player--corner {
  position: fixed;
  z-index: 2147483000;
  right: 16px;
  bottom: 16px;
  width: min(240px, 45vw);
  box-shadow: 0 8px 30px #00000045;
}
.pb-vid-player video { width: 100%; height: 100%; display: block; aspect-ratio: 9 / 16; object-fit: cover; background: #000; }

.pb-vid-player__x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: #00000066;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.pb-vid-player__x svg { width: 16px; height: 16px; }

.pb-vid-player__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #ffffff35; }
.pb-vid-player__bar i { display: block; height: 100%; width: 0; background: #fff; }

/* The shape of the thing, before there is anything in it. Editor only. */
.pb-vid__card--ghost {
  cursor: default;
  background: linear-gradient(160deg, #0000000d, #00000016);
  border: 1px dashed color-mix(in srgb, currentColor 22%, transparent);
}
/* The play colour is the merchants, and it is white by default — invisible on
   a pale placeholder. On the ghost it borrows the text colour instead. */
.pb-vid__card--ghost .pb-vid__play { color: currentColor; opacity: 0.3; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

.pb-vid__hint {
  margin: 10px 0 0;
  padding: 0.75rem;
  border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 6px;
  font-size: 0.85rem;
  opacity: 0.7;
  text-align: center;
}

@media (max-width: 749px) {
  .pb-vid__track { grid-auto-columns: calc((100% - (var(--pb-vid-pn, 2) - 1) * 10px) / var(--pb-vid-pn, 2)); }
  .pb-vid__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pb-vid__track { scroll-behavior: auto; }
}

/* pb-icons:start — written by scripts/sync-icons.mjs, do not edit by hand */
.pbi{width:var(--pbi-s,20px);height:var(--pbi-s,20px);flex:0 0 auto;background:var(--pbi-c,currentColor);-webkit-mask:var(--pbi-src) center / contain no-repeat;mask:var(--pbi-src) center / contain no-repeat}
.pbi--cf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0M10.5 16.3 6.2 12l1.5-1.5 2.8 2.8 5.8-5.8L17.8 9z'/%3E%3C/svg%3E")}
.pbi--ck{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9 17.5 20 6.5'/%3E%3C/svg%3E")}
.pbi--tk{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h12v10H2zM14 9h4l4 3.5V16h-8z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17.5' cy='18' r='2'/%3E%3C/svg%3E")}
.pbi--sh{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 20 5.5v5.8c0 5-3.4 8.7-8 10.2-4.6-1.5-8-5.2-8-10.2V5.5z'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E")}
.pbi--rf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.6-6.1'/%3E%3Cpath d='M20.5 3v5h-5'/%3E%3C/svg%3E")}
.pbi--lf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.5C3 12 8 4.5 20.5 3.5c1 11-5 16-12.5 16z'/%3E%3Cpath d='M7.5 17.5c2.5-4.5 5.5-7 9-8.5'/%3E%3C/svg%3E")}
.pbi--st{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.5 1-4.7 4.6 1.1 6.5-5.8-3.1-5.8 3.1 1.1-6.5L2.6 9.6l6.5-1z'/%3E%3C/svg%3E")}
.pbi--cl{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 6.5V12l3.8 2.2'/%3E%3C/svg%3E")}
.pbi--lk{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.8 10V7.5a5.2 5.2 0 0 1 10.4 0V10'/%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3C/svg%3E")}
.pbi--hs{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='2.5' y='13' width='4.5' height='6' rx='2'/%3E%3Crect x='17' y='13' width='4.5' height='6' rx='2'/%3E%3Cpath d='M21 19v.5a2.5 2.5 0 0 1-2.5 2.5H13'/%3E%3C/svg%3E")}
.pbi--bx{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 21 7v10l-9 4.2L3 17V7z'/%3E%3Cpath d='M3 7l9 4.2L21 7M12 11.2V21.2'/%3E%3C/svg%3E")}
.pbi--md{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9.5' r='6.5'/%3E%3Cpath d='m8.5 15.2-1.3 6.3 4.8-2.6 4.8 2.6-1.3-6.3'/%3E%3C/svg%3E")}
.pbi--cd{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 9.8h19M6 15h3.5'/%3E%3C/svg%3E")}
.pbi--pp{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 2.5 2 9.8l8.3 3.4 3.4 8.3z'/%3E%3Cpath d='m10.3 13.2 11.2-10.7'/%3E%3C/svg%3E")}
.pbi--gf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8.5' width='18' height='4.5' rx='1'/%3E%3Cpath d='M4.5 13v7.5a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V13M12 8.5v13'/%3E%3Cpath d='M12 8.5S10.8 3 8 3a2.5 2.5 0 0 0 0 5.5zM12 8.5S13.2 3 16 3a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E")}
/* pb-icons:end */