/* Gabion category tabs - pill row, toolbar, compare / bulk discount popups.
   Loaded only on the gabion product category (see ../../gabion-category-tabs.php).
   Moved out of Code Snippets #61 "Gabion Slider - NEW" unchanged (2026-09). */

.dog-category-slider-container {
    margin: 0;
    padding: 0 0 12px; /* under the toolbar; 12px as on the tabs version (2026-09-17) */
	position: relative;
}

.category-slider {
    margin: 0 0;
}

/* --- CLS ------------------------------------------------------------
   splide-core keeps `.splide` at `visibility: hidden` and Splide only
   applies its `gap` (as margin-right on the slides) at MOUNT time -
   and the mount runs from the footer. So the row used to be invisible
   until then, and every pill after the first jumped 10px to the right
   the moment the gap landed: a pop-in plus a layout shift.

   Instead we render the final layout server-side, pixel-identical to
   the mounted one, and let Splide take it over silently. Nothing moves,
   nothing pops, and the pills fill the row from the very first paint.
   These rules also stand in for splide-core's own CSS if that arrives
   late (e.g. deferred by WP Rocket). */
#dog-slider .splide:not(.is-initialized) {
	visibility: visible;
}
#dog-slider .splide:not(.is-initialized) .splide__track {
	overflow: hidden;
}
/* Must match the Splide `padding` option in the JS below (desktop only). */
@media (min-width: 1025px) {
	#dog-slider .splide:not(.is-initialized) .splide__track {
		padding-left: 40px;
		padding-right: 40px;
	}
}
#dog-slider .splide:not(.is-initialized) .splide__list {
	display: flex;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	list-style: none;
}
#dog-slider .splide:not(.is-initialized) .splide__slide {
	flex: 0 0 auto;
	list-style: none;
	margin-right: 10px; /* must match the `gap` option in the JS below */
}
#dog-slider .splide:not(.is-initialized) .splide__slide:last-child {
	margin-right: 0;
}

#dog-slider .category-item {
	padding: 0;
	width: auto;
}

.category-item .category-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    text-decoration: none;
    color: #222;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.category-link:hover {
    border-color: #03ba48;
    background: #f1f1f1;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(3, 186, 72, 0.2);
    color: #222;
}

/* Category header spacing (Szilard, 2026-09-17): 16px between the
   "Gabion Baskets" title row and the description, 24px from the
   description to the pills. */
.term-gabion .page-description-top .description-holder > p:first-child {
	margin-top: 16px;
}

.term-gabion .page-description-top .description-holder > p:last-child {
	margin-bottom: 24px;
}

table.which-mesh-category tr.table_string .product-cart a {
	display: block;
}

.category-title {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

/* "All Gabions in Stock" jump-to-grid tile - SMB green outline */
#dog-slider .jump-link {
	background: #f1f1f1;
	border-color: #03ba48;
}

#dog-slider .jump-link:hover {
	background: #02a441;
	border-color: #02a441;
	box-shadow: 0 5px 15px rgba(3, 186, 72, 0.3);
}

#dog-slider .jump-link .category-title {
	color: #222;
}

#dog-slider .jump-link:hover .category-title {
	color: #fff;
}

/* YouTube playlist trigger pill.
   The BEHAVIOUR is the theme's - main.js delegates click and
   Enter/Space on '.gabion-playlist-trigger' - but the LOOK is this
   slider's, so we deliberately do NOT reuse '.gabion-yt-button':
   that class is sized for the 5-across thumbnail strip further down
   the page (20% flex-basis, dark backdrop, 20px bottom margin) and
   would blow the pill row apart. '.category-link' gives it the same
   box as every other pill instead.
   The 22px badge is not arbitrary: the svg is 1em wide on a 28x20
   viewBox, so it renders 15.7px tall - the same height as a 13px/1.2
   text label, which keeps every pill (and the row) exactly one
   height. Change one and change the other. */
#dog-slider .playlist-link {
	cursor: pointer;
	gap: 8px;
}

#dog-slider .playlist-link:focus-visible {
	outline: 2px solid #03ba48;
	outline-offset: 2px;
}

#dog-slider .playlist-link .yt-badge {
	display: inline-flex;
	align-items: center;
	font-size: 22px;
}

#dog-slider .playlist-link .yt-badge svg {
	display: block;
	width: 1em;
	height: auto;
}

#dog-slider .jump-hand {
	display: inline-block;
	font-size: 16px;
	line-height: 1;
	margin-right: 6px;
	animation: dog-slider-hand-bounce 1.6s ease-in-out infinite;
}

@keyframes dog-slider-hand-bounce {
	0%, 100% { transform: translateY(-3px); }
	50% { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
	#dog-slider .jump-hand {
		animation: none;
	}
}

/* Splide Navigation */
#dog-slider .category-slider {
    position: relative;
}

#dog-slider .splide__arrows {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

#dog-slider .splide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 50px;
    background: rgba(255,255,255,0.8);
    border-radius: 0;
    opacity: 1;
    pointer-events: auto;
	z-index: 5;
}

#dog-slider .splide__arrow:hover {
    background: #ffffff;
    opacity: 1;
}

#dog-slider .splide__arrow svg {
	display: none;
}

#dog-slider .splide__arrow--prev {
    left: -5px;
}

#dog-slider .splide__arrow--next {
    right: -5px;
}

#dog-slider .splide__arrow--next:after,
#dog-slider .splide__arrow--prev:after {
    font-size: 20px;
    font-weight: bold;
    color: #222;
}

#dog-slider .splide__arrow--next:after {
	content: '❯';
}

#dog-slider .splide__arrow--prev:after {
	content: '❮';
}

/* At the start/end of the row the arrow stays where it is, dimmed and
   inert, instead of disappearing (Szilard, 2026-09-16): a visitor
   clicking "next" repeatedly would otherwise land on the last pill that
   slides in under the cursor. The track's 40px end padding (Splide
   `padding` option) keeps the pills out from under the arrows, so the
   dead spot covers no pill. A disabled <button> swallows the click. */
#dog-slider .splide__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

#dog-slider .splide__arrow:disabled:hover {
	background: rgba(255,255,255,0.8);
}


/* The toolbar's compare button while its popup is open */
#dog-slider .compare-toggle.is-open {
	background: #fff;
	border-color: #03ba48;
	box-shadow: 0 4px 12px rgba(3, 186, 72, 0.15);
}

/* --- Popups (compare, bulk discount) --------------------------------
   One shell for both, in the look of the site's own popups (.aira-modal:
   the video, gallery and jump-link popups): 40% black backdrop, white box
   with the 15px #ddd frame and 25px corners, the round cream close button
   with the orange x sitting on the top right corner. The values are copied
   from aira_frontend.css / style.css; the classes are not reused because
   those popups are built and wired by the plugin's and the theme's JS.
   The JS moves the popups to <body> when first opened, so every rule hangs
   off their own ids / classes, not #dog-slider. */
html.dog-slider-modal-open {
	overflow: hidden;
}

.dog-slider-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.4);
}

/* Logged in: start under the WordPress admin bar (it stacks above) */
.admin-bar .dog-slider-modal {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .dog-slider-modal {
		top: 46px;
	}
}

.dog-slider-modal[hidden] {
	display: none !important;
}

/* overflow stays visible: the close button hangs over the corner */
.dog-slider-modal .dog-slider-modal-box {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	max-width: 900px;
	max-height: calc(100vh - 40px);
	padding: 16px 18px;
	border: 15px solid #ddd;
	border-radius: 25px;
	background: #fff;
}

#dog-slider-bulk .dog-slider-modal-box {
	max-width: 600px;
}

.dog-slider-modal .dog-slider-modal-head {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	padding: 0 0 10px;
	border-bottom: 1px solid #e5e7eb;
}

.dog-slider-modal .dog-slider-modal-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: #03ba48;
	font-size: 13px;
	color: #fff;
}

.dog-slider-modal .dog-slider-modal-icon .fa {
	float: none;
	margin: 0;
	color: #fff;
}

/* The popup titles are <p>, not <h2> (2026-09-24): they are tools, not sections
   of the page, so they stay out of its heading outline. The look is unchanged:
   every property the theme gave the h2 is set here. */
.dog-slider-modal p.dog-slider-modal-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	color: #222;
}

/* As a <p> the title met the archive header's paragraph rule (.archive
   .site-content .content-area header div p: margin-top 0.5em) - the ids win. */
#dog-slider-compare p.dog-slider-modal-title,
#dog-slider-bulk p.dog-slider-modal-title {
	margin: 0;
}

.dog-slider-modal .dog-slider-modal-close {
	position: absolute;
	top: -25px;
	right: -25px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 43px;
	height: 43px;
	margin: 0;
	padding: 0;
	border: 2px solid #ddd;
	border-radius: 50%;
	background: #fcf7f4;
	box-shadow: none;
	font-size: 35px;
	font-weight: 900;
	line-height: 1;
	color: #dd5e11;
	cursor: pointer;
}

.dog-slider-modal .dog-slider-modal-close:hover,
.dog-slider-modal .dog-slider-modal-close:focus-visible {
	background: #b5b5b5;
	color: #dd5e11;
}

.dog-slider-modal .dog-slider-modal-close:focus-visible,
.dog-slider-modal .dog-slider-modal-cta:focus-visible {
	outline: 2px solid #222;
	outline-offset: 2px;
}

.dog-slider-modal .dog-slider-modal-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.dog-slider-modal .dog-slider-modal-foot {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 10px 0 0;
	padding: 10px 0 0;
	border-top: 1px solid #e5e7eb;
}

.dog-slider-modal .dog-slider-modal-cta {
	margin: 0 0 0 auto;
	padding: 10px 16px;
	border: 0;
	border-radius: 6px;
	background: #0ba2e8;
	box-shadow: none;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	color: #fff;
	cursor: pointer;
}

.dog-slider-modal .dog-slider-modal-cta:hover,
.dog-slider-modal .dog-slider-modal-cta:focus-visible {
	background: #0990cf;
	color: #fff;
}

/* --- Compare popup: one column of cards ------------------------------
   A card is one #?filter= link; the whole card is the hit area, the
   "3mm | VIEW PRODUCTS" tile is what reads as the button. Galfan wires
   carry the SMB green, the PVC ones slate. */
#dog-slider-compare .compare-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

#dog-slider-compare .compare-card {
	display: block;
	padding: 8px 12px;
	border: 1px solid #e2e8f0;
	border-left: 4px solid #03ba48;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
	color: #334155;
	text-decoration: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

#dog-slider-compare .compare-card.is-pvc {
	border-left-color: #64748b;
}

#dog-slider-compare .compare-card:hover,
#dog-slider-compare .compare-card:focus-visible,
#dog-slider-compare .compare-card.is-active {
	border-color: #03ba48;
	box-shadow: 0 6px 16px rgba(3, 186, 72, 0.15);
	color: #334155;
	text-decoration: none;
}

#dog-slider-compare .compare-card.is-pvc:hover,
#dog-slider-compare .compare-card.is-pvc:focus-visible,
#dog-slider-compare .compare-card.is-pvc.is-active {
	border-color: #64748b;
	box-shadow: 0 6px 16px rgba(100, 116, 139, 0.2);
}

#dog-slider-compare .compare-card:focus-visible {
	outline: 2px solid #03ba48;
	outline-offset: 2px;
}

#dog-slider-compare .compare-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid #f1f5f9;
}

#dog-slider-compare .compare-card-button {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: 6px;
	background: #03ba48;
	line-height: 1.2;
	color: #fff;
	transition: background 0.2s;
}

#dog-slider-compare .compare-card.is-pvc .compare-card-button {
	background: #64748b;
}

#dog-slider-compare .compare-card:hover .compare-card-button,
#dog-slider-compare .compare-card.is-active .compare-card-button {
	background: #02a441;
}

#dog-slider-compare .compare-card.is-pvc:hover .compare-card-button,
#dog-slider-compare .compare-card.is-pvc.is-active .compare-card-button {
	background: #475569;
}

#dog-slider-compare .compare-card-label {
	font-size: 14px;
	font-weight: 800;
	color: #fff;
}

#dog-slider-compare .compare-card-action {
	margin-left: 8px;
	padding-left: 8px;
	border-left: 1px solid rgba(255, 255, 255, 0.45);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
}

#dog-slider-compare .compare-card-action .fa {
	float: none;
	margin: 0;
	font-size: 10px;
	color: #fff;
}

#dog-slider-compare .compare-card-action-active,
#dog-slider-compare .compare-card.is-active .compare-card-action-filter {
	display: none;
}

#dog-slider-compare .compare-card.is-active .compare-card-action-active {
	display: inline;
}

#dog-slider-compare .compare-card-badges {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

#dog-slider-compare .compare-card-badge {
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

#dog-slider-compare .compare-card-badge.plain {
	padding-left: 2px;
	padding-right: 2px;
	color: #1e293b;
}

#dog-slider-compare .compare-card-badge.value {
	background: #fef3c7;
	color: #92400e;
}

#dog-slider-compare .compare-card-badge.popular {
	background: #dcfce7;
	color: #166534;
}

#dog-slider-compare .compare-card-badge.strength {
	background: #e0e7ff;
	color: #3730a3;
}

#dog-slider-compare .compare-card-badge.marine {
	background: #dbeafe;
	color: #1e40af;
}

#dog-slider-compare .compare-card-list {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: #475569;
}

#dog-slider-compare .compare-card-line {
	position: relative;
	display: block;
	margin: 0 0 2px;
	padding-left: 14px;
}

#dog-slider-compare .compare-card-line:last-child {
	margin-bottom: 0;
}

#dog-slider-compare .compare-card-line::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: 3px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #94a3b8;
}

#dog-slider-compare .compare-card-line strong {
	color: #1e293b;
}

/* Standards footnote: icon + text as a flex row so the icon stays
   inside the box (the theme's .fa rules pushed it over the edge); one
   flex item for the whole text, or every <strong> becomes a column. */
#dog-slider-compare .compare-notes {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 8px 0 0;
	padding: 6px 10px;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #f8fafc;
	font-size: 11px;
	line-height: 1.4;
	color: #64748b;
}

#dog-slider-compare .compare-notes strong {
	color: #1e293b;
}

#dog-slider-compare .compare-notes-text {
	flex: 1 1 auto;
	min-width: 0;
}

#dog-slider-compare .compare-notes .fa {
	flex: 0 0 auto;
	float: none;
	margin: 2px 0 0;
	position: static;
	color: #03ba48;
}

/* --- Bulk discount popup ------------------------------------------------ */
#dog-slider-bulk .bulk-info {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 10px;
	padding: 8px 12px;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
	background: #f0fdf4;
	font-size: 12px;
	line-height: 1.5;
	color: #334155;
}

#dog-slider-bulk .bulk-info .fa {
	flex: 0 0 auto;
	float: none;
	margin: 1px 0 0;
	font-size: 18px;
	color: #03ba48;
}

#dog-slider-bulk .bulk-info strong {
	display: block;
	font-weight: 700;
	color: #14532d;
}

#dog-slider-bulk table.bulk-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	border-spacing: 0;
	overflow: hidden;
}

/* The table of the site's own popups (aira_frontend.css,
   .jump-link-modal-body table): SMB green head row with white text,
   then white / #f1f1f1 rows, 10px cells. */
#dog-slider-bulk .bulk-table th,
#dog-slider-bulk .bulk-table td {
	padding: 9px 12px;
	border: 0;
	background: transparent;
	font-size: 13px;
	line-height: 1.3;
	text-align: left;
	color: #222;
}

#dog-slider-bulk .bulk-table thead tr {
	background: #03bb49;
}

#dog-slider-bulk .bulk-table th {
	font-weight: 700;
	color: #fff;
}

#dog-slider-bulk .bulk-table th:last-child,
#dog-slider-bulk .bulk-table td:last-child {
	text-align: right;
}

#dog-slider-bulk .bulk-table td:first-child {
	font-weight: 700;
}

#dog-slider-bulk .bulk-table tbody tr:nth-child(odd) {
	background: #fff;
}

#dog-slider-bulk .bulk-table tbody tr:nth-child(even) {
	background: #f1f1f1;
}

#dog-slider-bulk .bulk-base {
	font-size: 12px;
	color: #64748b;
}

#dog-slider-bulk .bulk-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: #dcfce7;
	font-size: 11px;
	font-weight: 800;
	white-space: nowrap;
	color: #166534;
}

#dog-slider-bulk .bulk-badge.is-strong {
	background: #03ba48;
	color: #fff;
}

#dog-slider-bulk .bulk-contact {
	font-size: 12px;
	color: #475569;
}

#dog-slider-bulk .bulk-contact a {
	font-weight: 700;
	color: #222;
	text-decoration: none;
	white-space: nowrap;
}

/* Small screens, as the site's popups do it (aira_frontend.css, <=768px):
   no frame, and the close button comes inside the box. */
@media (max-width: 768px) {
	/* Top-aligned, and sized by the dynamic viewport: 100vh is the screen
	   WITHOUT the browser bars, so a centred 100vh box lost its head and
	   foot under them and the body never got to scroll. The overlay scrolls
	   too, as a last resort. */
	.dog-slider-modal {
		align-items: flex-start;
		padding: 12px;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.dog-slider-modal .dog-slider-modal-box {
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
		padding: 14px;
		border: 0;
		border-radius: 12px;
	}

	.dog-slider-modal .dog-slider-modal-head {
		padding-right: 46px;
	}

	.dog-slider-modal p.dog-slider-modal-title {
		font-size: 15px;
	}

	.dog-slider-modal .dog-slider-modal-close {
		top: 8px;
		right: 8px;
		width: 38px;
		height: 38px;
		font-size: 30px;
	}

	#dog-slider-compare .compare-card {
		padding: 10px 12px;
	}

	.dog-slider-modal .dog-slider-modal-cta {
		flex: 1 1 100%;
		margin-left: 0;
	}
}

/* --- Help Videos popup (theme: #gabion-playlist-modal) at 1200-1440px ---
   The theme stacks it, player over playlist, inside 90vh. Laptop screens
   of this width are short (1280x720, 1366x768, 1440x900): the 16:9 player took the
   height and the list was left with one row. Here the list goes beside
   the player instead, in a 300px column as tall as the player
   (contain: size keeps its 60-odd rows from setting the height).
   Lives in the snippet because only this page has the popup; it belongs
   in style.css next to the modal's own rules once the slider goes to git. */
@media (min-width: 1200px) and (max-width: 1440px) {
	#gabion-playlist-modal.term-modal.gallery-modal .gallery-modal-content {
		width: 1160px;
		height: auto;
		max-height: 90vh;
	}

	#gabion-playlist-modal .modal-image-container {
		flex: 0 1 auto;
	}

	#gabion-playlist-modal .yt-embed {
		flex-direction: row;
		align-items: stretch;
	}

	#gabion-playlist-modal .yt-embed .yt-player-col {
		flex: 1 1 auto;
		min-width: 0;
	}

	#gabion-playlist-modal .yt-embed .yt-sidebar {
		display: flex;
		flex: 0 0 300px;
		flex-direction: column;
		width: 300px;
		border-top: 0;
		border-left: 1px solid #e0e0e0;
		contain: size;
	}
}

/* --- Toolbar under the pill row (1 | 3) ---------------------------
   Always shown: the pills are plain links, so the product grid it
   works on is always on the page. */
#dog-slider .dog-slider-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 33px 0 0;
	padding: 6px 8px;
	border: 1px solid #bfe8cc;
	border-radius: 6px;
	background: #f0faf3; /* light green tint: the bar stands out from the white page */
}

#dog-slider .dog-slider-tools {
	display: flex;
	align-items: center;
	gap: 6px;
}

#dog-slider .dog-slider-tool {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 5px 9px;
	border: 1px solid #bfe8cc;
	border-radius: 4px;
	background: #fff;
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	color: #222;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

#dog-slider .dog-slider-tool:hover,
#dog-slider .dog-slider-tool:focus-visible {
	border-color: #03ba48;
	box-shadow: 0 2px 8px rgba(3, 186, 72, 0.15);
	color: #222;
	text-decoration: none;
}

#dog-slider .dog-slider-tool:focus-visible {
	outline: 2px solid #03ba48;
	outline-offset: 2px;
}

#dog-slider .dog-slider-tool .fa {
	font-size: 11px;
	color: #03ba48;
}

/* Help Videos: a plain white button like the other tools, the YouTube
   red only on the icon (Szilard, 2026-09-17; it was a solid red button). */
#dog-slider .dog-slider-tool-videos {
	border-color: #d9d9d9;
	background: #fff;
	color: #222;
}

/* 16px icon, but a 13px line box (the label's 11px/1.2 = 13.2px), so the
   bigger icon does not make this button taller than the other two. */
#dog-slider .dog-slider-tool-videos .fa {
	font-size: 16px;
	line-height: 13px;
	color: #ff0000;
}

#dog-slider .dog-slider-tool-videos:hover,
#dog-slider .dog-slider-tool-videos:focus-visible {
	border-color: #ff0000;
	background: #fff;
	box-shadow: 0 2px 8px rgba(255, 0, 0, 0.15);
	color: #222;
}

/* The wide compare button */
#dog-slider .dog-slider-tool-compare {
	gap: 8px;
	padding: 4px 10px 4px 4px;
	border-color: #03ba48;
	font-size: 12px;
}

#dog-slider .dog-slider-tool-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 3px;
	background: #03ba48;
}

#dog-slider .dog-slider-tool-badge .fa {
	font-size: 11px;
	color: #fff;
}

#dog-slider .dog-slider-tool-chevron {
	transition: transform 0.2s ease;
}

#dog-slider .dog-slider-tool-compare.is-open .dog-slider-tool-chevron {
	transform: rotate(90deg);
}

@media (max-width: 1024px) {
	.dog-category-slider-container {
		/* padding: 0; */
	}

	#dog-slider .splide__arrow {
		display: none;
	}

	.category-slider {
		margin: 0;
		padding: 0 5px;
	}

    .category-title {
        font-size: 12px;
    }

    .category-item .category-link {
        padding: 9px 14px;
    }

	#dog-slider .jump-hand {
		font-size: 14px;
	}

	/* 20px badge == 14.3px tall == the 12px/1.2 mobile label */
	#dog-slider .playlist-link .yt-badge {
		font-size: 20px;
	}

	/* Toolbar: compare button full width, the three tools share
	   the row under it. */
	#dog-slider .dog-slider-toolbar {
		flex-wrap: wrap;
		padding: 6px;
	}

	#dog-slider .dog-slider-tool-compare {
		flex: 1 1 100%;
	}

	#dog-slider .dog-slider-tool-compare .dog-slider-tool-label {
		flex: 1 1 auto;
		text-align: left;
	}

	#dog-slider .dog-slider-tools {
		flex: 1 1 100%;
	}

	#dog-slider .dog-slider-tools .dog-slider-tool {
		flex: 1 1 0;
		justify-content: center;
		padding: 6px 4px;
	}
}