/* Product videos. Gallery video slides use the gallery's own slide box (same size as the photos);
   nothing here changes the gallery or photo dimensions. Colours follow the theme's tokens. */

/* Play button / fallback link over a poster. */
.sb-video-play, .sb-video-fallback { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; align-content: center; gap: 8px; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: linear-gradient(180deg, #0000 40%, #0000004d); color: var(--green, #092b1e); cursor: pointer; text-decoration: none; }
.sb-video-play__icon { width: clamp(52px, 16%, 76px); height: auto; filter: drop-shadow(0 8px 22px #0006); transition: transform .2s ease; }
.sb-video-play:hover .sb-video-play__icon, .sb-video-fallback:hover .sb-video-play__icon { transform: scale(1.08); }
.sb-video-play:focus-visible, .sb-video-fallback:focus-visible { outline: 3px solid var(--gold, #e3b94f); outline-offset: -6px; }
.sb-video-fallback span:not(.screen-reader-text) { padding: 4px 12px; border-radius: 999px; background: #000000a6; color: #fff; font-weight: 800; font-size: .9rem; }
[data-theme=dark] .sb-video-play, [data-theme=dark] .sb-video-fallback { color: var(--gold, #e3b94f); }

/* Player (filled in when play is pressed). */
.sb-video-player { position: absolute; inset: 0; z-index: 4; background: #000; display: grid; place-items: center; }
.sb-video-player iframe, .sb-video-player video { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.sb-video-player__error { margin: 0; padding: 16px; color: #fff; text-align: center; font-weight: 700; }
.sb-video-player__error a { color: #ffe39a; text-decoration: underline; }
.is-playing > .sb-video-play, .is-playing > .sb-video-fallback { display: none; }

/* Gallery: the video slide is a normal gallery slide (theme sets its square box and fills the poster). */
.woocommerce-product-gallery__image.sb-gallery-video { background: #000; }
.woocommerce-product-gallery__image.sb-gallery-video:hover img { transform: none; }
.woocommerce-product-gallery.sb-gallery--video-active .woocommerce-product-gallery__trigger { display: none !important; } /* No photo zoom on a video. */
.flex-control-thumbs li.sb-thumb-video { position: relative; }
.flex-control-thumbs li.sb-thumb-video--icon::after { content: ""; position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; border-radius: 50%; background: #000000a6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='white'/%3E%3C/svg%3E") center / 18px no-repeat; pointer-events: none; box-shadow: 0 2px 8px #0005; }

/* Share button on a video. */
.sb-vshare { position: absolute; z-index: 6; }
.sb-vshare--tl { top: 12px; inset-inline-start: 12px; }
.sb-vshare--tr { top: 12px; inset-inline-end: 12px; }
.sb-vshare--bl { bottom: 12px; inset-inline-start: 12px; }
.sb-vshare--br { bottom: 12px; inset-inline-end: 12px; }
.sb-vshare__btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--surface, #fffdf7) 92%, transparent); color: var(--green, #092b1e); box-shadow: 0 6px 18px #0003; cursor: pointer; transition: transform .15s ease; }
.sb-vshare__btn:hover { transform: scale(1.06); }
.sb-vshare__btn:focus-visible { outline: 3px solid var(--gold, #e3b94f); outline-offset: 2px; }
[data-theme=dark] .sb-vshare__btn { color: #ffe39a; }
.sb-vshare__panel { position: absolute; z-index: 7; width: max-content; max-width: min(280px, 80vw); padding: 10px; border: 1px solid var(--line, #ddcfad); border-radius: 16px; background: var(--surface, #fffdf7); color: var(--ink, #202a21); box-shadow: 0 20px 50px #0b2c1b40; }
.sb-vshare__panel[hidden] { display: none; }
.sb-vshare--tl .sb-vshare__panel, .sb-vshare--tr .sb-vshare__panel { top: calc(100% + 8px); }
.sb-vshare--bl .sb-vshare__panel, .sb-vshare--br .sb-vshare__panel { bottom: calc(100% + 8px); }
.sb-vshare--tl .sb-vshare__panel, .sb-vshare--bl .sb-vshare__panel { inset-inline-start: 0; }
.sb-vshare--tr .sb-vshare__panel, .sb-vshare--br .sb-vshare__panel { inset-inline-end: 0; }
.sb-vshare__title { margin: 0 6px 6px; font-weight: 800; font-size: .85rem; color: var(--muted, #5f665b); }
.sb-vshare__list { display: grid; gap: 2px; }
.sb-vshare--icon .sb-vshare__list { grid-template-columns: repeat(3, 42px); }
.sb-vshare .sb-share-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; font-weight: 700; font-size: .9rem; text-decoration: none; cursor: pointer; }
.sb-vshare--icon .sb-share-item { justify-content: center; padding: 0; }
.sb-vshare .sb-share-item:hover, .sb-vshare .sb-share-item:focus-visible { background: var(--surface2, #efe4cc); outline: none; }
.sb-vshare .sb-share-item:focus-visible { box-shadow: 0 0 0 2px var(--gold, #e3b94f); }
.sb-vshare .sb-share-status:not(:empty) { margin: 6px 6px 0; }
.is-playing > .sb-vshare { display: none; } /* While playing, the player's own controls need the room. */

/* "Product videos" section (sizes set in Sonali Bites → Product videos; independent of the gallery). */
.sb-videos { min-width: 0; }
.sb-videos__title { margin: 0 0 14px; font-size: 1.25rem; }
.sb-videos__grid { display: grid; grid-template-columns: repeat(var(--sb-v-cols-d, 2), minmax(0, 1fr)); gap: var(--sb-v-gap, 16px); align-items: start; }
.sb-video-card { min-width: 0; max-width: var(--sb-v-maxw, 100%); }
.sb-video-frame { position: relative; aspect-ratio: var(--sb-v-ratio, 16 / 9); border-radius: 16px; background: #000; border: 1px solid var(--line, #ddcfad); }
/* Rounded corners on the contents, not the frame, so the share list can open past the frame. */
.sb-video-frame > .sb-video-poster, .sb-video-frame > .sb-video-player, .sb-video-frame > .sb-video-play, .sb-video-frame > .sb-video-fallback { border-radius: 15px; overflow: hidden; }
.sb-video-card:has(.sb-vshare.is-open) { position: relative; z-index: 8; }
/* In the gallery the slider clips its slides: the list scrolls instead. */
.sb-gallery-video .sb-vshare__panel { max-height: min(270px, 70vh); overflow-y: auto; }
.sb-videos--fixed-h .sb-video-frame { aspect-ratio: auto; height: var(--sb-v-h); }
.sb-video-frame > .sb-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-video-card__title { margin: 10px 0 2px; font-size: 1rem; }
.sb-video-card__desc { margin: 2px 0 0; color: var(--muted, #5f665b); font-size: .9rem; }
.sb-video-card__source { display: inline-block; margin-top: 6px; font-size: .85rem; font-weight: 700; color: var(--green, #092b1e); text-underline-offset: 3px; }
[data-theme=dark] .sb-video-card__source { color: #ffe39a; }
.sb-videos--wide { margin-inline: 0; }
@media (min-width: 768px) and (max-width: 1024px) { .sb-videos__grid { grid-template-columns: repeat(var(--sb-v-cols-t, 2), minmax(0, 1fr)); } }
@media (max-width: 767px) {
	.sb-videos__grid { grid-template-columns: repeat(var(--sb-v-cols-m, 1), minmax(0, 1fr)); }
	.sb-videos--no-mobile, .sb-hide-mobile { display: none !important; }
}
@media (min-width: 768px) { .sb-videos--no-desktop, .sb-hide-desktop { display: none !important; } }

/* Homepage popup: video thumbnails in the photo strip, player in the photo area. */
.sb-qv__thumb--video { position: relative; }
.sb-qv__thumb--video .sb-video-play__icon { position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; color: #000; opacity: .85; pointer-events: none; }
.sb-qv__main.is-playing::after { display: none; }
.sb-qv__main.is-playing .sb-qv__img { visibility: hidden; }
.sb-qv__main { position: relative; }

@media (prefers-reduced-motion: reduce) { .sb-video-play__icon, .sb-vshare__btn { transition: none; } }
@media print { .sb-videos, .sb-vshare, .sb-video-play { display: none !important; } }
/* Vertical videos in the section: their own shape, not wider than a phone screen. */
.sb-video-card--tall .sb-video-frame { max-width: min(100%, 340px); }
/* Full-width product details with a single video: not wider than 900 px (unless a smaller frame width is set). */
.sb-product-details--full .sb-videos__grid > .sb-video-card:only-child { max-width: min(var(--sb-v-maxw, 100%), 900px); }