/* TikTok Style Video: the video row and the full-screen viewer.
 *
 * Brand colours: set these on :root (or any parent) in the theme. Without them the plugin uses
 * IGSHOP Shop Kit's brand colour, then the defaults listed here.
 *   --tsv-accent   prices, active dots, hover           (default: Shop Kit brand colour)
 *   --tsv-ink      product names                        (default #222)
 *   --tsv-muted    struck-out old prices                (default #777)
 *   --tsv-soft     backgrounds behind pictures          (default #f4f1f1)
 *   --tsv-line     inactive dots                        (default #ddd)
 *   --tsv-shadow   colour of the soft shadows (r,g,b)   (default 0,0,0)
 *   --tsv-radius   corners of the product sheet's Add to cart button and quantity box (default 4px)
 */

/* The theme's colours (set anywhere above, usually :root) are read into private copies here, with the
   plugin's own defaults as fallbacks. Setting the public names directly on .tsv would block a theme's
   :root values from reaching the row, so the rest of this file only uses the --tsvc-* copies. */
.tsv {
	--tsvc-accent: var(--tsv-accent, var(--qav-brand-primary, #b94452));
	--tsvc-ink: var(--tsv-ink, #222);
	--tsvc-muted: var(--tsv-muted, #777);
	--tsvc-soft: var(--tsv-soft, #f4f1f1);
	--tsvc-line: var(--tsv-line, #ddd);
	--tsvc-shadow: var(--tsv-shadow, 0, 0, 0);
	--tsvc-radius: var(--tsv-radius, 4px);
	position: relative;
	padding: 0 0 8px;
	text-align: center;
}
.tsv button { font-family: inherit; }
/* Every button selector below starts with ".tsv button": some themes paint all plain buttons
   (Hello Commerce: a solid colour, rounded corners), and this outranks those rules. */
.tsv-heading { margin: 0; }

/* ---------------------------------------------------------------- the row */
.tsv-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 236px;
	gap: 18px;
	align-items: center;
	justify-content: safe center;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 38px clamp(16px, 6vw, 100px) 22px;
	user-select: none;
	-webkit-user-select: none;
}
.tsv-track::-webkit-scrollbar { display: none; }
.tsv-track:focus-visible { outline: 2px solid var(--tsvc-accent); outline-offset: -2px; }
.tsv-track img { -webkit-user-drag: none; }
.tsv-track.is-drag, .tsv-track.is-drag .tsv-reel { cursor: grabbing; }
@media (min-width: 901px) {
	.tsv-track { overflow: hidden; overscroll-behavior-x: contain; touch-action: pan-y; cursor: grab; }
}

.tsv-reel { margin: 0; scroll-snap-align: center; transition: transform .35s ease; cursor: pointer; }
.tsv-reel.is-on { transform: scale(1.09); }
.tsv-v {
	position: relative;
	aspect-ratio: 9 / 16;
	border-radius: 12px;
	overflow: hidden;
	background: var(--tsvc-soft);
	box-shadow: 0 10px 26px rgba(var(--tsvc-shadow), .10);
}
.tsv-reel.is-on .tsv-v { box-shadow: 0 16px 36px rgba(var(--tsvc-shadow), .20); }
.tsv-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The video player (YouTube, Vimeo or Bunny) sits over the cover and fills the box as it is: no zoom
   or crop, so nothing of the video is cut off. Clicks pass through it to the row (and to the viewer's
   own buttons), so the service's own controls are never clicked. It fades in once the video is
   really playing; until then the cover shows. The selector is one class more specific than page
   builders' "iframe { width: 100%; max-width: 100% }" (Elementor's ".elementor iframe"). */
.tsv-player { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .35s; }
.tsv-player.is-playing { opacity: 1; }
.tsv .tsv-player iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	border: 0;
}

.tsv button.tsv-play,
.tsv button.tsv-play:hover,
.tsv button.tsv-play:focus {
	position: absolute;
	left: 50%;
	top: 44%;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--tsvc-accent);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.tsv .tsv-reel.is-on button.tsv-play { display: none; }
.tsv button.tsv-mute,
.tsv button.tsv-mute:hover,
.tsv button.tsv-mute:focus {
	position: absolute;
	right: 9px;
	top: 9px;
	display: none;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .5);
	color: #fff;
}
.tsv .tsv-reel.is-on button.tsv-mute { display: grid; }
.tsv-m-on, .is-loud .tsv-m-off { display: none; }
.is-loud .tsv-m-on { display: block; }

.tsv-nav { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.tsv button.tsv-arrow,
.tsv button.tsv-arrow:hover,
.tsv button.tsv-arrow:focus {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--tsvc-line);
	border-radius: 50%;
	background: #fff;
	color: var(--tsvc-ink);
	cursor: pointer;
}
.tsv button.tsv-arrow:hover { border-color: var(--tsvc-accent); color: var(--tsvc-accent); }

/* ---------------------------------------------------------------- product box (row) */
.tsv-box {
	position: absolute;
	left: 8px; right: 8px; bottom: 8px;
	padding: 0 0 7px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 4px 14px rgba(var(--tsvc-shadow), .16);
	text-align: left;
	cursor: default;
}
.tsv-cards {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.tsv-cards::-webkit-scrollbar { display: none; }
.tsv-box .tsv-cards { border-radius: 9px 9px 0 0; }
.tsv-card {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 9px;
	align-items: center;
	min-height: 64px;
	padding: 7px 9px 7px 8px;
	color: var(--tsvc-ink);
	text-decoration: none;
	scroll-snap-align: start;
}
.tsv-card:hover { color: var(--tsvc-ink); }
.tsv-card:hover b { color: var(--tsvc-accent); }
.tsv-th { display: block; width: 44px; height: 44px; overflow: hidden; border-radius: 6px; background: var(--tsvc-soft); }
.tsv-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tsv-ci { min-width: 0; }
.tsv-ci b {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
}
.tsv-pr { display: flex; gap: 6px; align-items: baseline; margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--tsvc-accent); font-variant-numeric: tabular-nums; }
.tsv-pr s { font-size: 10px; font-weight: 400; color: var(--tsvc-muted); }
.tsv-dots { display: flex; justify-content: center; gap: 4px; }
.tsv-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--tsvc-line); }
.tsv-dots i.on { background: var(--tsvc-accent); }

/* ---------------------------------------------------------------- full-screen viewer */
html.tsv-open, html.tsv-open body { overflow: hidden; }
.tsv-tv {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 26px;
	background: rgba(14, 10, 11, .94);
	text-align: left;
}
.tsv-tv[hidden] { display: none; }
.tsv-tv-frame {
	position: relative;
	height: min(92vh, 900px);
	aspect-ratio: 9 / 16;
	max-width: calc(100vw - 200px);
	overflow: hidden;
	border-radius: 10px;
	background: #000;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
/* height: the video shrinks into the space above the product sheet while it is open (.has-sheet below). */
.tsv-tv-track { height: 100%; transition: transform .5s cubic-bezier(.22, .8, .24, 1), height .45s cubic-bezier(.22, .8, .24, 1); }
.tsv-slide { position: relative; height: 100%; overflow: hidden; }
.tsv-tv-top {
	position: absolute;
	left: 0; right: 0; top: 0;
	z-index: 4;
	padding: 18px 18px 34px;
	background: linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0));
}
.tsv-bar { height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .38); }
.tsv-bar i { display: block; width: 0; height: 100%; border-radius: 2px; background: #fff; }
.tsv-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.tsv button.tsv-ib,
.tsv button.tsv-ib:hover,
.tsv button.tsv-ib:focus {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #fff;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
	cursor: pointer;
}
.tsv button.tsv-ib:hover { background: rgba(255, 255, 255, .16); }
.tsv button.tsv-ib:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tsv-side { position: absolute; right: 10px; bottom: 150px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tsv-tv-box {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 3;
	padding: 40px 0 14px;
	background: linear-gradient(0deg, rgba(0, 0, 0, .36), rgba(0, 0, 0, 0));
}
.tsv-tv-box .tsv-cards { grid-auto-columns: 100%; gap: 0; }
.tsv-tv-box .tsv-card { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; min-height: 76px; margin-inline: 16px; padding: 0; background: #fff; scroll-snap-align: start; scroll-margin-left: 16px; }
/* scroll-margin-left: snapping counts the card's left margin, so a card rests 16px in from both edges (as tsv.js scrolls to it) instead of flush left. */
.tsv-tv-box .tsv-th { width: 76px; height: 76px; border-radius: 0; }
.tsv-tv-box .tsv-ci { padding-right: 14px; }
.tsv-tv-box .tsv-ci b { font-size: 13px; line-height: 1.3; }
.tsv-tv-box .tsv-pr { font-size: 12px; gap: 7px; }
.tsv-tv-box .tsv-pr s { font-size: 11px; }
.tsv-tv-box .tsv-dots { gap: 6px; margin-top: 10px; }
.tsv-tv-box .tsv-dots i { width: 6px; height: 6px; background: rgba(255, 255, 255, .5); }
.tsv-tv-box .tsv-dots i.on { background: #fff; }
.tsv-toast { position: absolute; left: 50%; top: 50%; z-index: 6; margin: 0; padding: 9px 16px; transform: translate(-50%, -50%); border-radius: 999px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 13px; }

/* ---------------------------------------------------------------- the product sheet (buy from the video)
   Slides up from the bottom of the viewer frame when a product is tapped (tsv.js fills it from
   includes/cart.php). The video shrinks to the strip above it, the viewer's own controls step aside,
   and a tap on the strip, the X, Escape, or pulling the sheet's top down closes it. */
.tsv-tv-frame.has-sheet .tsv-tv-track { height: 22%; pointer-events: none; }
.tsv-tv-box, .tsv-side, .tsv button.tsv-tv-mute, .tsv button[data-tsv-close] { transition: opacity .25s, visibility .25s; }
.has-sheet .tsv-tv-box, .has-sheet .tsv-side, .has-sheet .tsv button.tsv-tv-mute, .has-sheet .tsv button[data-tsv-close],
.tsv .has-sheet button.tsv-tv-mute, .tsv .has-sheet button[data-tsv-close] { opacity: 0; visibility: hidden; }
.tsv-sheet {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	height: 78%;
	border-radius: 16px 16px 0 0;
	background: #fff;
	color: var(--tsvc-ink);
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
	box-shadow: 0 -10px 30px rgba(0, 0, 0, .25);
	transform: translateY(100%);
	transition: transform .45s cubic-bezier(.22, .8, .24, 1);
}
.tsv-sheet[hidden] { display: none; }
.has-sheet .tsv-sheet { transform: none; }
.tsv-s-grip { flex: 0 0 auto; width: 40px; height: 4px; margin: 8px auto 6px; border-radius: 2px; background: var(--tsvc-line); }
/* Top-right of the sheet: the cart button (count from WooCommerce's cart fragments) beside the X. */
.tsv-s-acts { position: absolute; top: 14px; right: 12px; z-index: 2; display: flex; align-items: center; gap: 8px; }
.tsv button.tsv-s-ib,
.tsv button.tsv-s-ib:hover,
.tsv button.tsv-s-ib:focus,
.tsv a.tsv-s-ib,
.tsv a.tsv-s-ib:hover,
.tsv a.tsv-s-ib:focus {
	position: relative;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--tsvc-ink);
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(var(--tsvc-shadow), .22);
	cursor: pointer;
}
.tsv button.tsv-s-ib:hover, .tsv a.tsv-s-ib:hover { background: var(--tsvc-soft); }
.tsv button.tsv-s-ib:focus-visible, .tsv a.tsv-s-ib:focus-visible { outline: 2px solid var(--tsvc-accent); outline-offset: 2px; }
.tsv-cart-count {
	position: absolute;
	top: -5px; right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--tsvc-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
}
.tsv-cart-count.is-zero { display: none; }
.tsv a.tsv-cart.is-bump { animation: tsv-bump .45s ease; }
@keyframes tsv-bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.tsv-s-body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* The picture takes whatever height the price, name and variations leave, like on the product page. */
.tsv-s-pic { position: relative; flex: 1 1 0; min-height: 150px; background: var(--tsvc-soft); }
.tsv-s-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tsv-s-price { display: flex; flex: 0 0 auto; align-items: baseline; gap: 8px; padding: 8px 14px; background: var(--tsvc-accent); color: #fff; }
.tsv-s-price b { font-size: 22px; font-weight: 700; line-height: 1.2; }
.tsv-s-price s { font-size: 13px; opacity: .8; }
.tsv-s-price .tsv-s-off { align-self: center; padding: 2px 7px; border-radius: 4px; background: #fff; color: var(--tsvc-accent); font-size: 12px; font-style: normal; font-weight: 700; }
.tsv-s-price [hidden] { display: none; }
.tsv-s-name { flex: 0 0 auto; margin: 0; padding: 10px 14px 4px; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Variations on ONE line that scrolls sideways: text pills, or pictures (.is-photos) when every variation has its own. */
.tsv-s-vars { flex: 0 0 auto; padding: 4px 14px 10px; }
.tsv-s-vh { margin-bottom: 8px; color: var(--tsvc-muted); font-size: 12px; }
.tsv-s-vh b { color: var(--tsvc-ink); font-weight: 600; }
.tsv-s-vr { display: flex; gap: 8px; margin: -3px; padding: 3px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tsv-s-vr::-webkit-scrollbar { display: none; }
.tsv button.tsv-s-v,
.tsv button.tsv-s-v:hover,
.tsv button.tsv-s-v:focus {
	flex: 0 0 auto;
	height: 34px;
	padding: 0 14px;
	border: 1px solid var(--tsvc-line);
	border-radius: 999px;
	background: #fff;
	color: var(--tsvc-ink);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}
.tsv button.tsv-s-v:hover { border-color: var(--tsvc-accent); }
.tsv button.tsv-s-v.is-on { border-color: var(--tsvc-accent); box-shadow: inset 0 0 0 1px var(--tsvc-accent); color: var(--tsvc-accent); font-weight: 600; }
.tsv button.tsv-s-v.is-out { background: var(--tsvc-soft); color: var(--tsvc-muted); text-decoration: line-through; }
.tsv button.tsv-s-v:focus-visible { outline: 2px solid var(--tsvc-accent); outline-offset: 2px; }
.tsv .is-photos button.tsv-s-v,
.tsv .is-photos button.tsv-s-v:hover,
.tsv .is-photos button.tsv-s-v:focus { display: grid; gap: 4px; width: 64px; height: auto; padding: 0; border: 0; border-radius: 8px; background: none; box-shadow: none; text-decoration: none; }
.tsv .is-photos .tsv-s-v img { display: block; width: 60px; height: 60px; margin: 0 auto; border: 2px solid transparent; border-radius: 8px; object-fit: cover; background: var(--tsvc-soft); }
.tsv .is-photos .tsv-s-v:hover img { border-color: var(--tsvc-line); }
.tsv .is-photos .tsv-s-v.is-on img { border-color: var(--tsvc-accent); }
.tsv .is-photos .tsv-s-v.is-out img { opacity: .45; }
.tsv .is-photos .tsv-s-v span { overflow: hidden; color: var(--tsvc-ink); font-size: 11px; font-weight: 500; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.tsv .is-photos .tsv-s-v.is-on span { color: var(--tsvc-accent); font-weight: 600; }
.tsv-s-foot { display: flex; flex: 0 0 auto; gap: 10px; padding: 10px 14px 12px; border-top: 1px solid var(--tsvc-line); background: #fff; }
.tsv-qty { display: flex; flex: 0 0 auto; align-items: center; height: 48px; border: 1px solid var(--tsvc-line); border-radius: var(--tsvc-radius); }
.tsv-qty[hidden] { display: none; }
.tsv button.tsv-qty-b,
.tsv button.tsv-qty-b:hover,
.tsv button.tsv-qty-b:focus { display: grid; place-items: center; width: 40px; height: 46px; padding: 0; border: 0; background: none; color: var(--tsvc-ink); cursor: pointer; }
.tsv button.tsv-qty-b:hover { color: var(--tsvc-accent); }
.tsv button.tsv-qty-b:focus-visible { outline: 2px solid var(--tsvc-accent); outline-offset: -3px; }
.tsv-qty output { min-width: 28px; color: var(--tsvc-ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
.tsv button.tsv-s-add,
.tsv button.tsv-s-add:hover,
.tsv button.tsv-s-add:focus {
	flex: 1 1 auto;
	height: 48px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--tsvc-radius);
	background: var(--tsvc-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}
.tsv button.tsv-s-add:hover { filter: brightness(1.08); }
.tsv button.tsv-s-add:focus-visible { outline: 2px solid var(--tsvc-ink); outline-offset: 2px; }
.tsv button.tsv-s-add:disabled { opacity: .55; cursor: default; filter: none; }
.tsv-s-wait { display: none; position: absolute; left: 0; right: 0; top: 50%; margin: 0; transform: translateY(-50%); color: var(--tsvc-muted); text-align: center; }
.tsv-sheet.is-busy .tsv-s-wait { display: block; }
.tsv-sheet.is-busy .tsv-s-body, .tsv-sheet.is-busy .tsv-s-foot { visibility: hidden; }
.tsv-tv-nav { display: flex; flex-direction: column; gap: 22px; }
.tsv .tsv-tv-nav button,
.tsv .tsv-tv-nav button:hover,
.tsv .tsv-tv-nav button:focus {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #d9d6d6;
	color: #2b1719;
	cursor: pointer;
}
.tsv .tsv-tv-nav button:hover { background: #fff; }

/* The picture on its way to the cart button after an add (tsv.js, on <body>, so outside .tsv). */
.tsv-fly { position: fixed; z-index: 100001; margin: 0; border-radius: 10px; object-fit: cover; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); pointer-events: none; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
	.tsv-reel, .tsv-tv-track, .tsv-player, .tsv-sheet, .tsv-tv-box, .tsv-side { transition: none; }
	.tsv a.tsv-cart.is-bump { animation: none; }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 900px) {
	.tsv-track { grid-auto-columns: 62vw; gap: 12px; justify-content: start; padding: 30px 19vw 18px; }
	.tsv-reel.is-on { transform: scale(1.05); }
	.tsv-ci b { font-size: 12.5px; }
	.tsv-nav { display: none; }
	.tsv-tv-frame { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; }
	.tsv-tv-nav { display: none; }
	/* The product strip and side buttons sit a little higher, and rise above anything the browser
	   still covers at the bottom (--tsv-hidden, measured in tsv.js) and the iPhone home bar. */
	.tsv-tv-box { padding-bottom: calc(26px + var(--tsv-hidden, 0px) + env(safe-area-inset-bottom, 0px)); }
	.tsv-side { bottom: calc(150px + var(--tsv-hidden, 0px) + env(safe-area-inset-bottom, 0px)); }
	.tsv-s-foot { padding-bottom: calc(12px + var(--tsv-hidden, 0px) + env(safe-area-inset-bottom, 0px)); }
}
/* Phones: the viewer fills the part of the screen the browser leaves visible. A fixed layer can
   otherwise reach down behind Safari's bottom toolbar, which hid the product strip on an iPhone. */
@supports (height: 100dvh) {
	@media (max-width: 900px) {
		.tsv-tv { bottom: auto; height: 100dvh; }
	}
}

/* ---------------------------------------------------------------- the Video page (includes/page.php)
   The viewer is open from the start and is the page. A theme that keeps its own bar at the bottom
   of the screen (phones) sets --tsv-bottom to the bar's height on body.tsv-page; the viewer then
   stops above the bar instead of covering it. */
.tsv-tv-page { bottom: var(--tsv-bottom, 0px); }
.tsv-page-empty { margin: 0; padding: 60px 16px; text-align: center; }
@supports (height: 100dvh) {
	@media (max-width: 900px) {
		.tsv-tv-page { bottom: auto; height: calc(100dvh - var(--tsv-bottom, 0px)); }
	}
}