/*
 * Mestiza Glow Shoppable Videos — frontend styles.
 * Identical rules to the previous inline <style>; only the
 * delivery mechanism changed (enqueued file instead of inline
 * PHP output).
 */
		/* ---------- Carousel ---------- */

		.mg-sv {
			margin: 56px 0;
		}

		.mg-sv__title {
			text-align: center !important;
			font-size: clamp(20px, 3.4vw, 30px);
			letter-spacing: .06em !important;
			margin: 0 0 26px;
			font-weight: 700 !important;
		}

		.mg-sv__wrap {
			position: relative !important;
		}

		/* wrap + track fill the normal page width (same side space as other sections). Beats the old "width: fit-content" rule in
		   Appearance → Customize → Additional CSS, which squeezed the row to one card. */
		.mg-sv .mg-sv__wrap {
			width: 100% !important;
			max-width: 100% !important;
			margin-left: 0 !important;
			margin-right: 0 !important;
		}

		.mg-sv .mg-sv__track {
			width: 100% !important;
		}

		/* center the cards when they don't fill the row (auto margins keep scrolling correct) */
		.mg-sv .mg-sv__track > .mg-sv__card:first-child {
			margin-left: auto !important;
		}

		.mg-sv .mg-sv__track > .mg-sv__card:last-child {
			margin-right: auto !important;
		}

		/* arrows are hidden by JS when there is nothing to scroll */
		.mg-sv .mg-sv__nav[hidden] {
			display: none !important;
		}

		.mg-sv__track {
			display: flex !important;
			gap: 14px;
			overflow-x: auto;
			scroll-behavior: smooth;
			scroll-snap-type: x mandatory;
			padding: 2px 0 12px !important;
			scrollbar-width: none;
			-ms-overflow-style: none;
		}

		.mg-sv__track::-webkit-scrollbar {
			display: none !important;
		}

		.mg-sv__card {
			position: relative !important;
			flex: 0 0 auto;
			/* fill the row for 5-6 videos; with fewer videos keep a sensible size and center them */
			width: clamp(200px, calc((100% - (var(--mg-sv-cols, 6) - 1) * 14px) / var(--mg-sv-cols, 6)), 300px) !important;
			aspect-ratio: 9 / 16 !important;
			padding: 0 !important;
			border: 0 !important;
			border-radius: 14px !important;
			overflow: hidden;
			cursor: pointer !important;
			background: #f2eae6 !important;
			scroll-snap-align: start;
		}

		.mg-sv__card-poster,
		.mg-sv__card-autoframe {
			position: absolute !important;
			inset: 0 !important;
			width: 100% !important;
			height: 100% !important;
			object-fit: cover !important;
			display: block !important;
		}

		.mg-sv__card-autoframe {
			background: #f2eae6 !important;
		}

		.mg-sv__card-media {
			position: absolute !important;
			inset: 0 !important;
			display: block !important;
		}

		.mg-sv__card-media video,
		.mg-sv__card-media iframe {
			width: 100% !important;
			height: 100% !important;
			object-fit: cover !important;
			display: block !important;
			border: 0 !important;
			pointer-events: none;
			opacity: 0 !important;
			transition: opacity .25s ease;
		}

		.mg-sv__card-media video.mg-loaded,
		.mg-sv__card-media iframe.mg-loaded {
			opacity: 1 !important;
		}

		.mg-sv__card:focus-visible {
			outline: 3px solid #c2185b;
			outline-offset: 3px;
		}

		.mg-sv__play {
			position: absolute !important;
			left: 14px !important;
			bottom: 14px !important;
			width: 34px !important;
			height: 34px !important;
			border-radius: 50% !important;
			background: rgba(0, 0, 0, .55) !important;
		}

		.mg-sv__play::after {
			content: "";
			position: absolute !important;
			top: 11px !important;
			left: 13px !important;
			border-left: 10px solid #fff;
			border-top: 6px solid transparent;
			border-bottom: 6px solid transparent;
		}

		.mg-sv__nav {
			position: absolute !important;
			top: 50% !important;
			transform: translateY(-50%);
			z-index: 3 !important;
			width: 40px !important;
			height: 40px !important;
			min-width: 0 !important;
			min-height: 0 !important;
			padding: 0 !important;
			border-radius: 50% !important;
			border: 0 !important;
			cursor: pointer !important;
			background: rgba(0, 0, 0, .45) !important;
			box-shadow: none !important;
			color: #fff !important;
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
		}

		.mg-sv__nav svg {
			width: 20px !important;
			height: 20px !important;
			display: block !important;
		}

		/* stop the theme's generic "svg { fill }" rules from filling the chevron */
		.mg-sv__nav svg polyline {
			fill: none !important;
			stroke: currentColor !important;
		}

		.mg-sv__nav--prev {
			left: 12px !important;
		}

		.mg-sv__nav--next {
			right: 12px !important;
		}

		/* ---------- Floating bubble ---------- */

		.mg-sv-bubble {
			position: fixed !important;
			left: 16px;
			bottom: 16px;
			z-index: 9998 !important;
			width: 64px !important;
			height: 104px !important;
			padding: 0 !important;
			border: 0 !important;
			border-radius: 12px !important;
			overflow: hidden;
			cursor: grab !important;
			box-shadow: 0 4px 16px rgba(0, 0, 0, .28) !important;
			background-size: cover !important;
			background-position: center !important;
			touch-action: none;
			opacity: 0 !important;
			pointer-events: none;
			transition: opacity .3s ease;
		}

		.mg-sv-bubble.mg-sv-bubble--ready {
			opacity: 1 !important;
			pointer-events: auto;
		}

		.mg-sv-bubble:active {
			cursor: grabbing !important;
		}

		.mg-sv-bubble__media {
			position: absolute !important;
			inset: 0 !important;
			display: block !important;
		}

		.mg-sv-bubble__media video,
		.mg-sv-bubble__media img,
		.mg-sv-bubble__media iframe {
			width: 100% !important;
			height: 100% !important;
			object-fit: cover !important;
			display: block !important;
			border: 0 !important;
			pointer-events: none;
			opacity: 0 !important;
			transition: opacity .25s ease;
		}

		.mg-sv-bubble__media video.mg-loaded,
		.mg-sv-bubble__media iframe.mg-loaded {
			opacity: 1 !important;
		}

		.mg-sv-bubble__close {
			position: absolute !important;
			top: 3px !important;
			right: 3px !important;
			width: 18px !important;
			height: 18px !important;
			border-radius: 50% !important;
			background: rgba(0, 0, 0, .6) !important;
			color: #fff !important;
			font-size: 13px !important;
			line-height: 18px !important;
			text-align: center !important;
			z-index: 2 !important;
		}

		.mg-sv-bubble.mg-sv-bubble--hidden {
			display: none !important;
		}

		/* ---------- Video popup ---------- */

		.mg-sv-modal[hidden] {
			display: none !important;
		}

		.mg-sv-modal {
			position: fixed !important;
			inset: 0 !important;
			z-index: 99990 !important;
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
			padding: 20px !important;
		}

		.mg-sv-modal__backdrop {
			position: fixed !important;
			inset: 0 !important;
			background: rgba(12, 8, 10, .86) !important;
		}

		.mg-sv-modal__box {
			position: relative !important;
			background: #000 !important;
			border-radius: 16px !important;
			overflow: hidden;
			/* taller popup (fills the screen height), width follows the 9:16 video shape */
			width: min(480px, 53vh, 100%) !important;
			height: min(94vh, 860px);
		}

		.mg-sv-modal__topbar {
			position: absolute !important;
			top: 16px !important;
			right: 10px !important;
			z-index: 6 !important;
			display: flex !important;
			align-items: center !important;
			gap: 8px;
		}

		.mg-sv-modal__play,
		.mg-sv-modal__mute,
		.mg-sv-modal__close {
			width: 45px !important;
			height: 45px !important;
			border-radius: 50% !important;
			cursor: pointer !important;
			border: 0 !important;
			background: rgba(0, 0, 0, .45) !important;
			color: #fff !important;
			display: flex;
			align-items: center !important;
			justify-content: center !important;
			padding: 0 !important;
		}

		.mg-sv-modal__play svg,
		.mg-sv-modal__mute svg,
		.mg-sv-modal__close svg {
			width: 22px !important;
			height: 22px !important;
			display: block !important;
		}

		/*
		 * These icons are drawn via inline SVG fill/stroke
		 * attributes (fill="currentColor", stroke="currentColor",
		 * etc.) rather than CSS. Presentation attributes lose to
		 * ANY matching CSS rule regardless of specificity, so a
		 * theme's own generic "svg { fill: ... }" reset can make
		 * these icons render invisible or the wrong shape. Forcing
		 * the same values explicitly here, scoped to our own
		 * classes, guarantees they render as designed.
		 */
		.mg-sv-modal__play svg rect,
		.mg-sv-modal__play svg path,
		.mg-sv-modal__mute svg polygon {
			fill: currentColor !important;
			stroke: none !important;
		}

		.mg-sv-modal__mute svg line,
		.mg-sv-modal__mute svg path {
			fill: none !important;
			stroke: currentColor !important;
		}

		.mg-sv-modal__close svg line {
			fill: none !important;
			stroke: currentColor !important;
		}

		.mg-sv-modal__video {
			width: 100% !important;
			height: 100% !important;
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
			background: #000 !important;
		}

		.mg-sv-modal__video video,
		.mg-sv-modal__video iframe {
			width: 100% !important;
			height: 100% !important;
			display: block !important;
			border: 0 !important;
		}

		.mg-sv-modal__video video {
			object-fit: cover !important;
		}

		.mg-sv-modal__arrow {
			position: absolute !important;
			top: 50% !important;
			transform: translateY(-50%);
			z-index: 6 !important;
			width: 40px !important;
			height: 40px !important;
			border-radius: 50% !important;
			border: 0 !important;
			cursor: pointer !important;
			background: rgba(0, 0, 0, .45) !important;
			color: #fff !important;
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
			padding: 0 !important;
		}

		.mg-sv-modal__arrow svg {
			width: 20px !important;
			height: 20px !important;
			display: block !important;
		}

		.mg-sv-modal__arrow svg polyline {
			fill: none !important;
			stroke: currentColor !important;
		}

		.mg-sv-modal__arrow--prev {
			left: 16px !important;
		}

		.mg-sv-modal__arrow--next {
			right: 16px !important;
		}

		/* ---------- Glass product card ---------- */

		.mg-sv-modal__pcard[hidden] {
			display: none !important;
		}

		.mg-sv-modal__pcard {
			position: absolute !important;
			left: 10px !important;
			right: 10px !important;
			bottom: 14px !important;
			z-index: 6 !important;
			display: grid !important;
			grid-template-columns: 44px 1fr;
			grid-template-rows: auto auto;
			column-gap: 12px;
			row-gap: 10px;
			padding: 14px !important;
			border-radius: 12px !important;
			background: rgba(20, 14, 16, .6) !important;
			backdrop-filter: blur(6px) !important;
			-webkit-backdrop-filter: blur(6px) !important;
			color: #fff !important;
		}

		.mg-sv-modal__pcard-img {
			width: 44px !important;
			height: 44px !important;
			border-radius: 8px !important;
			object-fit: cover !important;
			grid-row: 1;
			grid-column: 1;
		}

		.mg-sv-modal__pcard-info {
			grid-row: 1;
			grid-column: 2;
			display: flex !important;
			flex-direction: column;
			gap: 2px;
			min-width: 0 !important;
		}

		.mg-sv-modal__pcard-name {
			font-size: 13px;
			font-weight: 700 !important;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.mg-sv-modal__pcard-rating {
			font-size: 12px;
			color: #ffce45 !important;
			letter-spacing: 1px !important;
		}

		.mg-sv-modal__pcard-price {
			font-size: 13px;
			font-weight: 700 !important;
		}

		.mg-sv-modal__pcard-add {
			grid-row: 2;
			grid-column: 1 / -1;
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
			background: var(--mg-sv-accent, rgb(232, 106, 140)) !important;
			color: #fff !important;
			border: 0 !important;
			padding: 13px !important;
			border-radius: 999px !important;
			font-weight: 700 !important;
			font-size: 13px;
			letter-spacing: .03em !important;
			cursor: pointer !important;
		}

		.mg-sv-modal__pcard-add:disabled {
			opacity: .6 !important;
		}

		/* ---------- Mini cart ---------- */

		.mg-cart[hidden] {
			display: none !important;
		}

		.mg-cart {
			position: fixed !important;
			inset: 0 !important;
			z-index: 99999 !important;
			display: flex !important;
			justify-content: flex-end !important;
		}

		.mg-cart__backdrop {
			position: absolute !important;
			inset: 0 !important;
			background: rgba(12, 8, 10, .6) !important;
		}

		.mg-cart__panel {
			position: relative !important;
			background: #fff !important;
			width: min(380px, 100%) !important;
			height: 100% !important;
			display: flex !important;
			flex-direction: column;
		}

		.mg-cart__head {
			display: flex !important;
			align-items: center !important;
			justify-content: space-between !important;
			padding: 16px !important;
			font-weight: 700 !important;
			letter-spacing: .05em !important;
			border-bottom: 1px solid #eee;
		}

		.mg-cart__head button {
			background: none !important;
			border: 0 !important;
			font-size: 22px;
			cursor: pointer !important;
		}

		.mg-cart__items {
			flex: 1;
			overflow-y: auto;
			padding: 12px 16px !important;
		}

		.mg-cart-item {
			display: flex !important;
			gap: 12px;
			padding: 12px 0 !important;
			border-bottom: 1px solid #f0f0f0;
		}

		.mg-cart-item img {
			width: 56px !important;
			height: 56px !important;
			object-fit: cover !important;
			border-radius: 6px !important;
			background: #f2eae6 !important;
		}

		.mg-cart-item__info {
			flex: 1;
			min-width: 0 !important;
		}

		.mg-cart-item__name {
			font-size: 12px;
			font-weight: 700 !important;
			text-transform: uppercase !important;
			margin-bottom: 4px;
		}

		.mg-cart-item__price {
			font-size: 13px;
			margin-bottom: 8px;
		}

		.mg-cart-item__row {
			display: flex !important;
			align-items: center !important;
			gap: 10px;
		}

		.mg-cart-item__qty {
			display: inline-flex !important;
			align-items: center !important;
			gap: 10px;
			border: 1px solid #ddd !important;
			border-radius: 6px !important;
			padding: 3px 10px !important;
			font-size: 13px;
		}

		.mg-cart-item__qty button {
			border: 0 !important;
			background: none !important;
			font-size: 15px;
			cursor: pointer !important;
		}

		.mg-cart-item__del {
			background: none !important;
			border: 0 !important;
			cursor: pointer !important;
			font-size: 15px;
		}

		.mg-cart__foot {
			padding: 14px 16px !important;
			border-top: 1px solid #eee;
		}

		.mg-cart__checkout {
			width: 100% !important;
			background: #111 !important;
			color: #fff !important;
			border: 0 !important;
			padding: 14px !important;
			border-radius: 8px !important;
			font-weight: 700 !important;
			font-size: 13px;
			letter-spacing: .03em !important;
			cursor: pointer !important;
		}

		.mg-cart__view {
			display: block !important;
			text-align: center !important;
			margin-top: 10px;
			font-size: 12px;
			text-decoration: underline !important;
			color: #111 !important;
		}

		.mg-cart__empty {
			text-align: center !important;
			color: #888 !important;
			font-size: 13px;
			padding: 40px 0 !important;
		}

		/* ---------- Responsive ---------- */

		@media (max-width: 600px) {
			.mg-sv__card {
				width: 200px !important;
			}

			.mg-sv__nav {
				display: none !important;
			}

			.mg-sv__track {
				gap: 10px;
			}

			.mg-sv-bubble {
				width: 54px !important;
				height: 90px !important;
				left: 12px;
				bottom: 12px;
			}

			.mg-sv-modal {
				padding: 0 !important;
			}

			.mg-sv-modal__box {
				width: 100% !important;
				height: 100vh;
				height: 100dvh;
				border-radius: 0 !important;
			}

			.mg-sv-modal__arrow--prev {
				left: 6px !important;
			}

			.mg-sv-modal__arrow--next {
				right: 6px !important;
			}
		}

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