/* Rapid Spec Row, design 12.
   Sizes are multiples of --u (1px = design size). The row always fills
   the width it is given (up to 720px); the four columns and the wire
   spread across it, while discs and type scale between 0.6x and 1.25x.
   v1.1.1: wire drops moved to the outer edges (no overlap with text).
   v1.1.2: calmer motion (slow spark with a fading tail and rests; slower, lighter rings).
   v1.1.3: fits every tile width (no overflow); tiles capped at design size.
   v1.1.4: side padding; row trimmed so the button sits closer.
   v1.1.5: product page keeps its gap below the row.
   v1.1.6: slightly larger SPEED / BATTERY / RANGE / MOTOR labels. */

/* ---- Wrapper: fill the space, and be the size reference ---- */
.jet-woo-product-excerpt:has(.rs-specs),
.woocommerce-product-details__short-description:has(.rs-specs) {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;    /* theme pulls the old row out by -27px */
	margin-right: 0 !important;
	align-self: stretch;
	min-width: 0;
}

.rs-specs.rs-specs {
	container-type: inline-size;
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	max-width: 720px !important;
	height: auto !important;
	margin: 0 auto !important;
	padding: 0 !important;
	float: none !important;
	font-family: "Rajdhani", system-ui, sans-serif;
	line-height: 1;
}

/* ---- Board ---- */
.rs-specs .rs-specs__board {
	--u: clamp(.6px, calc(100cqw / 380), 1.25px);
	position: relative;
	display: block !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	height: calc(122 * var(--u)) !important;   /* tight to the labels */
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
/* In product tiles never grow past the design size, so every tile's row
   is the same height and the buttons line up across the grid. */
.jet-woo-product-excerpt .rs-specs .rs-specs__board {
	--u: clamp(.6px, calc(100cqw / 380), 1px);
}
/* Breathing room at the sides (the row scales to the space inside it) */
.rs-specs.rs-specs { padding: 0 14px !important; }
/* Product page: keep a balanced gap above the next section
   (tiles stay tight so the button sits close) */
.woocommerce-product-details__short-description .rs-specs.rs-specs { padding-bottom: 10px !important; }

/* ---- Wire: a bracket that frames the row ----
   Rises from the left dot at the far edge, runs behind all four discs,
   and drops to the right dot, so it never crosses the numbers or labels. */
.rs-specs .rs-specs__wire {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none;
	--x: calc(6 * var(--u));      /* distance of the drops from the edges */
	--y0: calc(40 * var(--u));    /* top run, behind the discs */
	--y1: calc(112 * var(--u));   /* bottom of the drops, level with the labels */
}
.rs-specs .rs-specs__wire > span {
	position: absolute;
	display: block;
	box-sizing: border-box;
}
.rs-specs .rs-specs__board { --line: max(1.5px, calc(2 * var(--u))); }
.rs-specs .rs-specs__loop {
	left: calc(var(--x) - var(--line) / 2);
	right: calc(var(--x) - var(--line) / 2);
	top: calc(var(--y0) - var(--line) / 2);
	height: calc(var(--y1) - var(--y0) + var(--line) / 2);
	border: var(--line) solid #DADAE0;
	border-bottom: 0;
	border-radius: calc(6 * var(--u)) calc(6 * var(--u)) 0 0;   /* soft corners */
}
.rs-specs .rs-specs__tail { display: none !important; }
.rs-specs .rs-specs__dot {
	top: calc(var(--y1) - 4.5 * var(--u));
	width: calc(9 * var(--u));
	height: calc(9 * var(--u));
	border-radius: 50%;
	background: #FFC400;
}
.rs-specs .rs-specs__dot--l { left: calc(var(--x) - 4.5 * var(--u)); }
.rs-specs .rs-specs__dot--r { right: calc(var(--x) - 4.5 * var(--u)); }

/* ---- The current: a small spark with a fading tail ----
   A round spark looks the same in every direction, and the two trailing
   dots follow it round each bend, so the corners read as a smooth turn. */
.rs-specs .rs-specs__pulse {
	--s: calc(6 * var(--u));      /* spark size */
	--o: 1;                       /* brightness (tail dots are dimmer) */
	width: var(--s);
	height: var(--s);
	border-radius: 50%;
	background: #FFC400;
	box-shadow: 0 0 calc(4 * var(--u)) rgba(255, 196, 0, .6);
	transform: translate(-50%, -50%);
	opacity: 0;
	/* one slow pass, then a rest before the next one */
	animation: rs-current 7s linear infinite;
}
.rs-specs .rs-specs__pulse--t1 { --s: calc(4.5 * var(--u)); --o: .5; box-shadow: none; animation-delay: .09s; }
.rs-specs .rs-specs__pulse--t2 { --s: calc(3 * var(--u));   --o: .25; box-shadow: none; animation-delay: .18s; }
@keyframes rs-current {
	0%     { left: var(--x); top: var(--y1); opacity: 0; }
	2%     { opacity: calc(.8 * var(--o)); }
	8%     { left: var(--x); top: var(--y0); }
	47%    { left: calc(100% - var(--x)); top: var(--y0); }
	53%    { opacity: calc(.8 * var(--o)); }
	55%    { left: calc(100% - var(--x)); top: var(--y1); opacity: 0; }
	100%   { left: calc(100% - var(--x)); top: var(--y1); opacity: 0; }
}

/* ---- Columns ---- */
.rs-specs .rs-specs__grid {
	position: absolute;
	inset: 0;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
.rs-specs .rs-specs__col {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: calc(9 * var(--u));
	min-width: 0;
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	box-sizing: border-box !important;
	animation: rs-rise .5s ease-out both;
}
.rs-specs .rs-specs__col:nth-child(2) { animation-delay: .08s; }
.rs-specs .rs-specs__col:nth-child(3) { animation-delay: .16s; }
.rs-specs .rs-specs__col:nth-child(4) { animation-delay: .24s; }
@keyframes rs-rise { from { opacity: 0; transform: translateY(calc(10 * var(--u))); } }
.rs-specs img { display: none !important; }

/* ---- Disc ---- */
.rs-specs .rs-specs__node {
	position: relative;
	flex: none;
	width: calc(58 * var(--u));
	height: calc(58 * var(--u));
	margin: 0 !important;
	border-radius: 50%;
	background: #141418;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(20, 20, 24, .28);
	transition: transform .2s ease, box-shadow .2s ease;
}
.rs-specs .rs-specs__node::before {
	content: "";
	position: absolute;
	inset: calc(-5 * var(--u));
	border-radius: 50%;
	border: var(--line) solid #FFC400;
	border-right-color: transparent;
	border-bottom-color: transparent;
	border-left-color: transparent;   /* a short arc, not half a ring */
	opacity: .5;
	animation: rs-ring 9s linear infinite;
}
@keyframes rs-ring { to { transform: rotate(360deg); } }
.rs-specs .rs-specs__node:hover {
	transform: translateY(calc(-4 * var(--u))) scale(1.05);
	box-shadow: 0 calc(14 * var(--u)) calc(26 * var(--u)) rgba(20, 20, 24, .32), 0 0 0 calc(4 * var(--u)) rgba(255, 196, 0, .35);
}
/* icons (design 12), 30px on a 58px disc */
.rs-specs .rs-specs__node {
	background-repeat: no-repeat;
	background-position: center;
	background-size: calc(30 * var(--u)) calc(30 * var(--u));
}
.rs-specs .rs-specs__node--speed {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFC400%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6.34 18.66A8 8 0 1 1 17.66 18.66%22/%3E%3Cpath d=%22M12 13l5.2-3.3%22 stroke-width=%223%22/%3E%3Ccircle cx=%2212%22 cy=%2213%22 r=%222.3%22 fill=%22%23FFC400%22 stroke=%22none%22/%3E%3C/svg%3E");
}
.rs-specs .rs-specs__node--battery {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Crect x=%222.5%22 y=%227%22 width=%2216%22 height=%2210%22 rx=%222%22 fill=%22%23FFC400%22/%3E%3Crect x=%2218.5%22 y=%229.5%22 width=%223%22 height=%225%22 rx=%221%22 fill=%22%23FFC400%22/%3E%3Crect x=%224.8%22 y=%229.2%22 width=%222.8%22 height=%225.6%22 rx=%22.6%22 fill=%22%23141418%22/%3E%3Crect x=%229.1%22 y=%229.2%22 width=%222.8%22 height=%225.6%22 rx=%22.6%22 fill=%22%23141418%22/%3E%3Crect x=%2213.4%22 y=%229.2%22 width=%222.8%22 height=%225.6%22 rx=%22.6%22 fill=%22%23141418%22/%3E%3C/svg%3E");
}
.rs-specs .rs-specs__node--range {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFC400%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 20.5h3.5l3-4 3 4H15%22/%3E%3Cpath d=%22M16.5 16.5s-5-4.4-5-8.3a5 5 0 0 1 10 0c0 3.9-5 8.3-5 8.3z%22 fill=%22%23FFC400%22 stroke=%22none%22/%3E%3Ccircle cx=%2216.5%22 cy=%228.4%22 r=%222%22 fill=%22%23141418%22 stroke=%22none%22/%3E%3C/svg%3E");
}
.rs-specs .rs-specs__node--motor {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23FFC400%22 stroke-width=%222.8%22 stroke-linecap=%22butt%22%3E%3Cpath d=%22M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M18.7 5.3l-2.1 2.1M7.4 16.6l-2.1 2.1%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%226.6%22 fill=%22%23FFC400%22 stroke=%22none%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223.2%22 fill=%22%23141418%22 stroke=%22none%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221.3%22 fill=%22%23FFC400%22 stroke=%22none%22/%3E%3C/svg%3E");
}

/* ---- Number + yellow unit tag ---- */
.rs-specs .rs-specs__value {
	display: flex;
	align-items: baseline;
	gap: calc(3 * var(--u));
	transform: skewX(-8deg);
	white-space: nowrap;
}
.rs-specs .rs-specs__num {
	color: #141418;
	font-size: calc(26 * var(--u));
	font-weight: 700;
	line-height: 1;
}
.rs-specs .rs-specs__unit {
	color: #141418;
	background: #FFC400;
	font-size: max(8px, calc(11 * var(--u)));
	font-weight: 700;
	line-height: 1.2;
	padding: calc(1 * var(--u)) calc(4 * var(--u));
	border-radius: calc(3 * var(--u));
	text-transform: uppercase;
}

/* ---- Label ---- */
.rs-specs .rs-specs__label {
	margin-top: calc(-3 * var(--u));
	color: #6b6b74;
	font-size: max(9px, calc(12.5 * var(--u)));
	font-weight: 700;
	letter-spacing: calc(1.6 * var(--u));
	line-height: 1.2;
	text-transform: uppercase;
}

/* ---- Reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
	.rs-specs .rs-specs__pulse { display: none; }
	.rs-specs .rs-specs__node::before,
	.rs-specs .rs-specs__col { animation: none; }
}