/* Gabion category tabs, tabs mode - tab row, toolbar, popups and panels.
   Moved out of Code Snippets #61 (tab system v31) unchanged (2026-09). */

.dog-category-slider-container {
    margin: 0;
    padding: 0 0 12px;
	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;
	/* Centred before the mount when the pills fit (the fit state's look,
	   see .dog-slider-fit), start-aligned when they overflow ("safe"). */
	justify-content: safe center;
	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;
}

/* Equal-height pills: the slide is a flex column and the pill fills
   it, so a pill without subtext is as tall as one with. */
#dog-slider .category-item {
	padding: 0;
	width: auto;
	display: flex;
}

.category-item .category-link {
    display: inline-flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 10px; /* trimmed 2026-09-16; still passes Lighthouse target-size */
    min-height: 56px; /* the pill height before the trim (Szilard, 2026-09-16) */
    box-sizing: border-box;
    background: #f1f1f1; /* non-selected = grey, selected = white (2026-09-10) */
    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;
}

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

/* Title row: icon/badge + label side by side */
#dog-slider .category-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

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

/* Subtext under the title */
#dog-slider .category-sub {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.2;
	color: #6b6b6b;
	white-space: nowrap;
}

#dog-slider .category-link:hover .category-sub {
	color: #222;
}

/* The active tab's subtext: 500 ("Gabions in Stock" while no
   panel/filter is open, otherwise the open one). */
#dog-slider:not(.has-active-mode) .jump-link .category-sub,
#dog-slider .mode-link.is-active .category-sub {
	font-weight: 500;
}

/* The subtext as the figure for the basket (applyPillNeeds): green
   with a dot that pulses twice when it appears; a tick once
   everything needed is in the basket. */
#dog-slider .category-link.has-need .category-sub {
	font-weight: 600;
	color: #166534;
}

#dog-slider .category-link.has-need .category-sub::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 5px;
	border-radius: 50%;
	background: #03ba48;
	animation: dog-slider-need-pulse 1.6s ease-out 2;
}

/* The tick: SMB green box, white tick (client, 2026-10-06) */
#dog-slider .category-link.has-need.is-done .category-sub::before {
	width: 12px;
	height: 12px;
	border-radius: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Crect width='17' height='17' rx='3' fill='%2303ba48'/%3E%3Cpath d='M5.23 8.5l1.838 1.962 3.845-3.924' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	vertical-align: -2px;
	animation: none;
}

@keyframes dog-slider-need-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(3, 186, 72, 0.6);
	}
	100% {
		box-shadow: 0 0 0 7px rgba(3, 186, 72, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	#dog-slider .category-link.has-need .category-sub::before {
		animation: none;
	}
}

/* Category header spacing (Szilard, 2026-09-17): 16px between the
   "Gabion Baskets" title row and the description, 24px from the
   description to the tabs, 33px from the tabs to whatever sits
   under them (toolbar or panel card) - the same on every tab. */
.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;
}

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

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

/* While a panel or filter is open, the jump-link drops its green so
   exactly one pill reads as "you are here". Hover: the same as
   every other pill (no own green-fill hover since 2026-09-16). */
#dog-slider.has-active-mode .jump-link {
	background: #f1f1f1;
	border-color: #e9ecef;
}

#dog-slider.has-active-mode .jump-link:hover {
	border-color: #03ba48;
}

/* The active panel/filter pill: same SMB green outline. */
#dog-slider .mode-link.is-active {
	background: #fff;
	border-color: #03ba48;
}

/* The grid wrapper while a panel is open. Class, not [hidden]: the
   theme sets display on .product-items and would win over the
   UA stylesheet's [hidden]. */
.product-items.dog-slider-grid-hidden {
	display: none !important;
}

#dog-slider-panels .dog-slider-panel[hidden],
#dog-slider-panels .dog-slider-loader[hidden] {
	display: none !important;
}

/* Loader shown in the grid's place while a pill swaps content in */
#dog-slider-panels .dog-slider-loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 220px;
	margin: 0 0 20px;
	border: 2px dashed #e9ecef;
	border-radius: 8px;
	color: #222;
	font-size: 14px;
	font-weight: 600;
}

#dog-slider-panels .dog-slider-spinner {
	width: 36px;
	height: 36px;
	border: 4px solid #e9ecef;
	border-top-color: #03ba48;
	border-radius: 50%;
	animation: dog-slider-spin 0.8s linear infinite;
}

@keyframes dog-slider-spin {
	to { transform: rotate(360deg); }
}

/* --- Inside the panels ------------------------------------------
   Builders: their section starts flush under the intro box (the
   theme gives .calculate-rope-section 40px top padding, which
   read as a hole between the intro and Step 1). The 'i' icons in
   the builders are span.info; on /gabion/ the aira grid CSS also
   matches their .calculate-length/.calculate-height/... classes
   (a header-cell rule: width 100%, 25px bottom padding) and
   stretched the circles - undo that here only. */
#dog-slider-panels .calculate-rope-section {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

#dog-slider-panels .calculate-rope-section > .container {
	padding-bottom: 0 !important;
}

/* Room before whatever follows the panel (the aira copies and
   the builders both ended flush against the next block). */
#dog-slider-panels .dog-slider-panel:not([hidden]) {
	margin-bottom: 20px;
}

/* --- Panel card (Szilard's mockup, 2026-09-16) --------------------
   While a panel pill is open, #dog-slider-panels becomes one white
   card holding the intro box (moved in by the JS), the loader and
   the panel, so every panel tab gets the same padding. */
/* 21px + #dog-slider's 12px bottom padding = 33px under the tabs */
#dog-slider-panels.is-card {
	margin: 21px 0 24px;
	padding: 24px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
}

#dog-slider-panels.is-card .dog-slider-intro {
	margin: 0 0 20px;
}

/* Under a kept toolbar (Cut to Size) only #dog-slider's 12px padding
   separates the toolbar and the card (Szilard, 2026-09-23). */
#dog-slider-panels.is-card.after-toolbar {
	margin-top: 0;
}

/* --- One section (client, 2026-09-23) ----------------------------
   While the open panel's first block shows its live cart calculation
   (the JS sets is-joined), the intro box and the banner are one card:
   the intro keeps its top corners and its bottom edge as a divider,
   the banner hangs under it, tinted, with the same green left rule
   and the bottom corners. */
#dog-slider-panels.is-card.is-joined .dog-slider-intro {
	margin-bottom: 0;
	border-radius: 6px 6px 0 0;
	box-shadow: none;
}

#dog-slider-panels.is-joined .dog-slider-panel > .dog-slider-stones:first-child > .dog-slider-stones-live {
	margin: 0 0 20px;
	padding: 16px 24px;
	border: 1px solid #e3e6ea;
	border-top: 0;
	border-left: 4px solid #03ba48;
	border-radius: 0 0 6px 6px;
	background: #f0fdf4;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#dog-slider-panels.is-joined .dog-slider-panel > .dog-slider-stones:first-child > .dog-slider-stones-live .dog-slider-stones-live-stat {
	background: #fff;
}

#dog-slider-panels.is-card .dog-slider-panel:not([hidden]),
#dog-slider-panels.is-card .dog-slider-loader {
	margin-bottom: 0;
}

#dog-slider-panels.is-card .calculate-rope-section > .container {
	width: auto;
	margin: 0 !important;
	padding: 0 !important;
}

/* Gabion Wall Creator ([itc_build_gabion_wall]): its own section, no
   theme padding; inside the card its .container is the card's width. */
#dog-slider-panels .wf-gabion-wall {
	padding: 0;
}

/* The theme fixes .wrapper .container at 740 / 960 / 1170px with
   !important per breakpoint; inside the card it must be the card. */
#dog-slider-panels .wf-gabion-wall > .container {
	width: auto !important;
	max-width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

/* The builders print an empty .title-box with a 50px bottom margin */
#dog-slider-panels .calculate-rope-section .title-box:not(:has(*)) {
	display: none;
}

@media (max-width: 767px) {
	#dog-slider-panels.is-card {
		padding: 14px;
	}
}

#dog-slider-panels .calculate-rope-section span.info {
	width: auto !important;
	padding: 0 5px !important;
	margin: 0 !important;
}

/* Cut to Size tab: the Add to Cart button as on the Cut to Size page.
   On /gabion/ all three builders' CSS loads together and collides:
   the wall builder's `.calculate-rope-section .column { width: 50% }`
   halves the button's column (off-centre), the stone builder's
   `.calculate-wf-custom-gabion-form input[type=submit]` makes it
   block / bold / uppercase, and the page's own size rule only applies
   inside `.woocommerce-bottom-banner`, which the panel lacks. Values
   copied from that page's computed style (2026-09-16). */
#dog-slider-panels .gabion-cut-to-size .cost-holder .column {
	width: 100%;
}

#dog-slider-panels .gabion-cut-to-size .calculate-wf-custom-gabion-form input[type="submit"] {
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 15px 32px;
	border: 0;
	border-radius: 3px;
	background-color: #ff8400;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.43;
	text-transform: none;
	color: #fff;
}

/* Aira grid copies: our own paging (the plugin's is single-instance) */
#dog-slider-panels .dog-slider-paged-hidden {
	display: none !important;
}

#dog-slider-panels .dog-slider-pagination {
	margin: 10px 0 15px;
	text-align: center;
}

#dog-slider-panels .dog-slider-pagination-status {
	margin: 0 0 8px;
	font-size: 13px;
	color: #222;
}

#dog-slider-panels .dog-slider-show-more {
	display: inline-block;
	padding: 1em 3em;
	background: #ff8400;
	color: #fff;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	transition: background 0.3s ease-in-out;
}

#dog-slider-panels .dog-slider-show-more:hover,
#dog-slider-panels .dog-slider-show-more:focus-visible {
	background: #03ba48;
}

/* Rows the shipping-class filter hid (uses the plugin's own .hide
   rule; this marker just remembers which ones were ours). */
.dog-slider-filter-hidden {
	display: none !important;
}

/* 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;
}

#dog-slider .playlist-link:focus-visible,
#dog-slider .mode-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;
	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,
	#dog-slider-panels .dog-slider-spinner {
		animation: none;
	}
}

/* A pill that is a <button> gets the pill look from .category-link
   and only needs the UA styling undone. */
#dog-slider button.category-link {
	font: inherit;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

/* 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. */
/* The Applications & Uses copy inside the popup: no up-arrows after the wire size /
   coating links. On the page the arrow (style.css, .comparing-diameters a::after) says
   "jump up to the grid"; in the popup the link filters in place, so the arrow is noise
   (Szilard, 2026-10-19). */
#dog-slider-compare .comparing-diameters a::after,
#dog-slider-compare .comparing-diameters tr.first-row td a > span::after {
	content: none;
}

#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: 15px;
	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: 14px;
	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: 12px;
	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: 14px;
	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: 15px;
	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: 13px;
	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 tabs go 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) ---------------------------
   Shown wherever the product grid is on screen: the plain grid and
   the filter tabs (Next Day), whose info box then sits under it. A
   panel tab hides it - the grid it works on is gone - unless the tab
   keeps it ('toolbar' => true in the config: Cut to Size, where the
   wire comparison and the tools apply just the same). */
#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;
}

#dog-slider.has-panel-mode:not(.keeps-toolbar) .dog-slider-toolbar {
	display: none;
}

#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);
}

/* --- Info box under the pill row (panel / filter pills) ----------
   The theme's [wf_notice] look (style.css .wf-notice): white card,
   green left rule, thin grey border, soft shadow. Title as a bold
   heading, one paragraph, optional light green call-out strip. */
:is(#dog-slider, #dog-slider-panels) .dog-slider-intro {
	margin: 12px 0 0;
	padding: 20px 24px;
	border: 1px solid #e3e6ea;
	border-left: 4px solid #03ba48;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-intro[hidden] {
	display: none !important;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-intro-row {
	display: block;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-intro-title {
	display: block;
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #333;
}

/* Small grey label next to the intro's title (intro key 'tag') */
:is(#dog-slider, #dog-slider-panels) .dog-slider-intro-tag {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 8px;
	border-radius: 4px;
	background: #e5e7eb;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	vertical-align: middle;
	color: #374151;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-intro-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: #444;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-intro-text strong {
	color: #222;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-intro-callout {
	margin: 14px 0 0;
	padding: 8px 14px;
	border: 1px solid #c8eed5;
	border-radius: 4px;
	background: #f0faf3;
	font-size: 12px;
	line-height: 1.5;
	color: #444;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-intro-callout strong {
	color: #166534;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-intro-callout a {
	font-weight: 700;
	color: #02a441;
	text-decoration: underline;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-intro-callout a:hover {
	color: #222;
}

/* --- Custom info card (intro key 'render') ---------------------------
   The intro wrapper drops its own [wf_notice] look and leaves the whole
   box to the rendered card. */
:is(#dog-slider, #dog-slider-panels) .dog-slider-intro.is-custom {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

/* Gabion Wall Creator card (Szilard's markup, 2026-09-17): green frame,
   badge + spec chips, how-it-works line, the two stacking layouts side by
   side, amber "in-line instead of staggered" rules box. */
:is(#dog-slider, #dog-slider-panels) .dog-slider-wall {
	padding: 18px 20px;
	border: 2px solid #03ba48;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(3, 186, 72, 0.08);
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall .fa {
	float: none;
	margin: 0;
	position: static;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
	padding: 0 0 12px;
	border-bottom: 1px solid #f1f5f9;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-badge {
	padding: 6px 12px;
	border-radius: 4px;
	background: #03ba48;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #fff;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-chip {
	padding: 4px 10px;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	background: #f1f5f9;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	color: #334155;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-text {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
	color: #475569;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-text strong {
	color: #1e293b;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-layouts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 16px;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-layout {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #f8fafc;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-figure {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 6px;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	background: #fff;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-figure svg {
	display: block;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-layout-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-layout-name {
	font-size: 13px;
	font-weight: 800;
	color: #1e293b;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-layout-desc {
	font-size: 11px;
	line-height: 1.3;
	color: #64748b;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-rules {
	padding: 12px 14px;
	border: 1px solid #fcd34d;
	border-radius: 6px;
	background: #fffbeb;
	font-size: 13px;
	color: #78350f;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-rules-title {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 800;
	color: #92400e;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-rules-title .fa {
	color: #92400e;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-rules-text {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.4;
	color: #78350f;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-conditions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-conditions li {
	margin: 0;
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-conditions li::before {
	content: none;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-conditions .is-yes {
	background: #dcfce7;
	color: #15803d;
}

:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-conditions .is-no {
	background: #fee2e2;
	color: #b91c1c;
}

@media (max-width: 650px) {
	:is(#dog-slider, #dog-slider-panels) .dog-slider-wall {
		padding: 14px;
	}

	:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-layouts {
		grid-template-columns: minmax(0, 1fr);
	}

	:is(#dog-slider, #dog-slider-panels) .dog-slider-wall-head {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --- Gabion Stone tab: stones for the basket ---------------------- */
#dog-slider-panels .dog-slider-stones {
	margin: 0 0 20px;
}

#dog-slider-panels .dog-slider-stones-summary {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.5;
	color: #333;
}

#dog-slider-panels .dog-slider-stones-summary[hidden],
#dog-slider-panels .dog-slider-stones-live[hidden] {
	display: none !important;
}

/* "Live cart calculation" banner above the stone cards (Szilard's
   markup, 2026-09-17): green frame, the text on the left, the two
   figures as rounded cards on the right - the stone one tinted green.
   Stacks under 650px, the cards sharing the row. */
#dog-slider-panels .dog-slider-stones-live {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 0 0 20px;
	padding: 16px 20px;
	border: 2px solid #03ba48;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(3, 186, 72, 0.08);
}

#dog-slider-panels .dog-slider-stones-live-copy {
	min-width: 0;
}

/* The backfilling panels line under the stone banner's title: the cart's
   .wf-cart-needs__panels look (client, 2026-10-15). */
#dog-slider-panels .dog-slider-stones-tip {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: #166534;
}

#dog-slider-panels .dog-slider-stones-tip[hidden] {
	display: none;
}

/* The cart's tick: the SMB green box with a white tick */
#dog-slider-panels .dog-slider-stones-tip-tick {
	flex: none;
	width: 14px;
	height: 14px;
	margin-top: 1px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Crect width='17' height='17' rx='3' fill='%2303ba48'/%3E%3Cpath d='M5.23 8.5l1.838 1.962 3.845-3.924' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The backfilling panels row under the copy and the figures (client,
   2026-09-24): full width, a tick box and one sentence. */
#dog-slider-panels .dog-slider-stones-live {
	flex-wrap: wrap;
}

#dog-slider-panels .dog-slider-stones-panels {
	display: flex;
	flex: 1 1 100%;
	align-items: center; /* the box beside the sentence's middle, one line or two (Szilard, 2026-10-08) */
	gap: 8px;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid #e3e6ea;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	color: #166534;
}

#dog-slider-panels .dog-slider-stones-panels[hidden] {
	display: none !important;
}

/* The tick boxes (panels what-if, panel sizes): the SMB green box with a
   white tick, the shop's own checkbox look (client, 2026-10-06). */
#dog-slider-panels .dog-slider-stones-panels-check,
#dog-slider-panels .dog-slider-combo-check {
	flex: none;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid #94a3b8;
	border-radius: 3px;
	background: #fff center / 100% 100% no-repeat;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

#dog-slider-panels .dog-slider-stones-panels-check:checked,
#dog-slider-panels .dog-slider-combo-check:checked {
	border-color: #03ba48;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Crect width='17' height='17' rx='3' fill='%2303ba48'/%3E%3Cpath d='M5.23 8.5l1.838 1.962 3.845-3.924' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The theme rings a clicked input in dark grey; the ring is for the keyboard only. */
#dog-slider-panels .dog-slider-stones-panels-check:focus,
#dog-slider-panels .dog-slider-combo-check:focus {
	outline: none;
}

#dog-slider-panels .dog-slider-stones-panels-check:focus-visible,
#dog-slider-panels .dog-slider-combo-check:focus-visible {
	outline: 2px solid #03ba48;
	outline-offset: 2px;
}

/* Stone banner, wider than a phone: one row instead of two (Szilard,
   2026-09-24) - the copy on the left taking what is left, the two figures
   on the right; the figures drop under the copy only when it would get
   under 260px. The accessory banner keeps its copy on top. */
@media (min-width: 651px) {
	#dog-slider-panels .dog-slider-stones:not(.dog-slider-needs) > .dog-slider-stones-live .dog-slider-stones-live-copy {
		flex: 1 1 260px;
	}
}

#dog-slider-panels .dog-slider-stones-live-title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
	color: #1e293b;
}

#dog-slider-panels .dog-slider-stones-live-text {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: #64748b;
}

#dog-slider-panels .dog-slider-stones-live-stats {
	display: flex;
	flex: 0 0 auto;
	gap: 12px;
}

#dog-slider-panels .dog-slider-stones-live-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 110px;
	padding: 10px 18px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #f8fafc;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

#dog-slider-panels .dog-slider-stones-live-stat.is-stone {
	border-color: #bbf7d0;
	background: #f0fdf4;
}

#dog-slider-panels .dog-slider-stones-live-label {
	margin: 0 0 2px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
	color: #64748b;
}

#dog-slider-panels .dog-slider-stones-live-value {
	font-size: 20px;
	font-weight: 900;
	line-height: 1.1;
	white-space: nowrap;
	color: #1e293b;
}

#dog-slider-panels .dog-slider-stones-live-value small {
	font-size: 13px;
	font-weight: 700;
	color: #64748b;
}

#dog-slider-panels .dog-slider-stones-live-stat.is-stone .dog-slider-stones-live-value {
	color: #03ba48;
}

@media (max-width: 650px) {
	#dog-slider-panels .dog-slider-stones-live {
		flex-direction: column;
		align-items: flex-start;
		padding: 14px;
	}

	#dog-slider-panels .dog-slider-stones-live-stats {
		width: 100%;
	}

	#dog-slider-panels .dog-slider-stones-live-stat {
		flex: 1 1 0;
		min-width: 0;
		padding: 10px 8px;
	}

	/* The figures scale with the viewport so they stay inside the tiles
	   on narrow phones (Szilard, 2026-09-23): 20px from ~385px down to
	   15px at 320px. */
	#dog-slider-panels .dog-slider-stones-live-value {
		font-size: clamp(15px, 5.2vw, 20px);
	}

	#dog-slider-panels .dog-slider-stones-live-value small {
		font-size: clamp(11px, 3.4vw, 13px);
	}
}

#dog-slider-panels .dog-slider-stones-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

#dog-slider-panels .dog-slider-stone {
	display: flex;
	flex-direction: column;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
	overflow: hidden;
}

#dog-slider-panels .dog-slider-stone-image {
	display: block;
	background: #f1f5f9;
}

#dog-slider-panels .dog-slider-stone-image img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
	margin: 0;
}

#dog-slider-panels .dog-slider-stone-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px 12px;
}

#dog-slider-panels .dog-slider-stone-name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: #222;
	text-decoration: none;
}

#dog-slider-panels .dog-slider-stone-name:hover {
	color: #03ba48;
}

#dog-slider-panels .dog-slider-stone-price {
	font-size: 14px;
	font-weight: 700;
	color: #222;
}

#dog-slider-panels .dog-slider-stone-price small,
#dog-slider-panels .dog-slider-stone-per {
	font-size: 11px;
	font-weight: 400;
	color: #64748b;
}

/* "You need N" as a green pill, so the quantity stands out (client, 2026-09-24) */
#dog-slider-panels .dog-slider-stone-need {
	display: inline-block;
	flex: 0 1 auto;
	align-self: flex-start;
	justify-self: start; /* the body is a grid on the desktop list rows */
	margin: 2px 0 0;
	padding: 4px 10px;
	border-radius: 6px;
	background: #dcfce7;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: #166534;
}

#dog-slider-panels .dog-slider-stone-need:empty {
	display: none;
}

/* What the accessory is for (cards of a tab with several groups) */
#dog-slider-panels .dog-slider-stone-lead {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: #64748b;
}

#dog-slider-panels .dog-slider-stone-need strong {
	font-weight: 800;
	color: #14532d;
}

#dog-slider-panels .dog-slider-stone-buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

#dog-slider-panels .dog-slider-stone-qty {
	width: 64px;
	height: 36px;
	margin: 0;
	padding: 0 6px;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	font-size: 14px;
	text-align: center;
}

/* Same look as the product table's "Add to cart" button: orange,
   1px dark border, 4px corners, stays orange on hover. */
#dog-slider-panels .dog-slider-stone-add {
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	height: 36px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid #222;
	border-radius: 4px;
	background: #ff8800;
	box-shadow: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-transform: none;
	text-decoration: none;
}

#dog-slider-panels .dog-slider-stone-add:hover,
#dog-slider-panels .dog-slider-stone-add:focus-visible {
	border-color: #222;
	background: #ff8400;
	color: #fff;
}

#dog-slider-panels .dog-slider-stone-add.loading {
	opacity: 0.6;
}

#dog-slider-panels .dog-slider-stone-buy .added_to_cart {
	flex: 1 1 100%;
	font-size: 12px;
	font-weight: 600;
	color: #02a441;
}

@media (max-width: 767px) {
	#dog-slider-panels .dog-slider-stones-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	#dog-slider-panels .dog-slider-stone {
		flex-direction: row;
	}

	#dog-slider-panels .dog-slider-stone-image {
		flex: 0 0 96px;
	}

	#dog-slider-panels .dog-slider-stone-image img {
		width: 96px;
		height: 100%;
		min-height: 96px;
	}
}

/* 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 tab that
   slides in under the cursor. The track's 40px end padding (Splide
   `padding` option) keeps the tabs out from under the arrows, so the
   dead spot covers no tab. 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);
}

/* All pills fit the row (the JS sets .dog-slider-fit, client 2026-10-15):
   no arrows, no end padding for them, the pills centred and parked.
   !important beats Splide's inline track padding and list transform. */
#dog-slider.dog-slider-fit .splide__arrows {
	display: none;
}

#dog-slider.dog-slider-fit .splide__track {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

#dog-slider.dog-slider-fit .splide__list {
	justify-content: center;
	transform: none !important;
}

/* Splide's inline gap is on the last pill too: off, or the row sits 10px left. */
#dog-slider.dog-slider-fit .splide__slide:last-child {
	margin-right: 0 !important;
}

@media (max-width: 1024px) {
	#dog-slider .splide__arrow {
		display: none;
	}

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

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

	#dog-slider .category-sub {
		font-size: 10px;
	}

    .category-item .category-link {
        padding: 7px 8px;
    }

	/* Beats the theme's mobile pill padding (measured 12px 16px) */
	#dog-slider .category-item .category-link {
		padding-left: 8px;
		padding-right: 8px;
	}

	#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;
	}

	:is(#dog-slider, #dog-slider-panels) .dog-slider-intro {
		padding: 12px 14px;
	}

	:is(#dog-slider, #dog-slider-panels) .dog-slider-intro-title {
		font-size: 14px;
	}

	:is(#dog-slider, #dog-slider-panels) .dog-slider-intro-text,
	:is(#dog-slider, #dog-slider-panels) .dog-slider-intro-callout {
		font-size: 11px;
	}

	/* 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;
	}
}

/* --- Gabion Accessories: one tab for every accessory (2026-09-21) ---
   The pill: one line with two states, "Accessories Required" / "Accessories
   Added" (client, 2026-09-24; until then a chip per group with a figure and a
   tag next to the title). The panel ('needs_layout' => 'list'): the stone
   tab's live calculation banner with a tile per group, then one product per
   row. A pill's 'tag' key (config) still prints a small label next to the title. */
#dog-slider .category-tag {
	display: inline-block;
	padding: 2px 6px;
	border-radius: 4px;
	background: #dcfce7;
	font-size: 9px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	white-space: nowrap;
	color: #15803d;
}

/* An empty basket's subtext here is a sentence: let it wrap. */
#dog-slider .category-link.has-long-sub:not(.has-need) .category-sub {
	max-width: 230px;
	white-space: normal;
	text-align: center;
}

/* Banner tiles: a second line under the figure ("Save 50% Stone"), light
   grey like the label - no green on the accessory tiles (Szilard, 2026-09-24) */
#dog-slider-panels .dog-slider-stones-live-note {
	margin-top: 2px;
	font-size: 10px;
	font-weight: 600;
	white-space: nowrap;
	color: #64748b;
}

/* The banner of the list layout: the copy on top at full width, the four
   tiles in a row underneath sharing the width (Szilard, 2026-09-22 - beside
   the copy they squeezed it into three lines). */
#dog-slider-panels .dog-slider-needs.is-list .dog-slider-stones-live {
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
}

#dog-slider-panels .dog-slider-needs.is-list .dog-slider-stones-live-stats {
	width: 100%;
}

#dog-slider-panels .dog-slider-needs.is-list .dog-slider-stones-live-stat {
	flex: 1 1 0;
	min-width: 0;
}

/* One product per row: image, what it is and what the basket needs, buy box.
   .dog-slider-stones.is-list: the accessory block and, since 2026-09-23, the
   stone block too (the client wants the two tabs laid out the same). */
#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stones-grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone {
	position: relative;
	flex-direction: row;
	align-items: stretch;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-image {
	flex: 0 0 120px;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-image img {
	width: 120px;
	height: 100%;
	min-height: 110px;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: center;
	column-gap: 20px;
	row-gap: 4px;
	padding: 14px 16px;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-body > * {
	grid-column: 1;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-buy {
	grid-column: 2;
	grid-row: 1 / span 4;
	align-self: center;
	flex-wrap: nowrap;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-add {
	flex: 0 0 auto;
	min-width: 130px;
}

#dog-slider-panels .dog-slider-stone-badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	padding: 3px 9px;
	border-radius: 0 5px 0 8px;
	background: #1e293b;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.2px;
	color: #fff;
}

/* Groups whose products depend on the gabion's size: a link while the
   basket gives them no row */
#dog-slider-panels .dog-slider-needs-more {
	margin: 12px 0 0;
}

#dog-slider-panels .dog-slider-needs-more[hidden] {
	display: none;
}

#dog-slider-panels .dog-slider-needs-more-link {
	display: block;
	padding: 10px 14px;
	border: 1px dashed #cbd5e1;
	border-radius: 6px;
	background: #f8fafc;
	font-size: 13px;
	line-height: 1.45;
	color: #166534;
}

@media (max-width: 767px) {
	/* Phone: a small square thumbnail beside the name, price and "You
	   need N", the lead sentence (accessory cards) and the buy box at
	   full width underneath. The 96px image column stretched the photo
	   to the row's height and squeezed the copy into a tall stack
	   (Szilard, 2026-09-22); the "You need" line moved up beside the
	   thumbnail on 2026-09-23. The body's children become items of the
	   card's grid (display: contents) so the rows can span both columns. */
	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr);
		/* The thumbnail's spare height goes to the third row only, so the
		   name, price and "You need" stack tight at the top instead of
		   being spread down the thumbnail (Szilard, 2026-09-23). */
		grid-template-rows: auto auto 1fr;
		column-gap: 12px;
		row-gap: 2px;
		align-items: start;
		padding: 26px 12px 12px; /* room for the corner badge */
	}

	/* The thumbnail spans the three copy rows: name, price, need */
	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-image {
		flex: none;
		grid-column: 1;
		grid-row: 1 / span 3;
		border-radius: 6px;
		overflow: hidden;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-image img {
		width: 84px;
		height: 84px;
		min-height: 0;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-body {
		display: contents;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-body > * {
		grid-column: 2;
	}

	/* "You need N" takes row three beside the thumbnail even when the lead
	   sentence precedes it in the markup; the lead drops under both. */
	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-need {
		grid-row: 3;
		justify-self: start;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-lead {
		grid-column: 1 / -1;
		grid-row: 4;
		margin-top: 6px;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-buy {
		grid-column: 1 / -1;
		grid-row: auto;
		margin-top: 4px;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-add {
		flex: 1 1 auto;
		min-width: 0;
	}

	#dog-slider .category-link.has-long-sub:not(.has-need) .category-sub {
		max-width: 190px;
	}
}

/* A row's second line under "You need N" (e.g. the geotextile's square metres) */
#dog-slider-panels .dog-slider-stone-need-note {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	color: #64748b;
}

/* Four tiles: let them share the banner's width instead of pushing the copy out */
#dog-slider-panels .dog-slider-needs.is-list .dog-slider-stones-live-stat {
	min-width: 96px;
	padding: 10px 12px;
}

#dog-slider-panels .dog-slider-needs.is-list .dog-slider-stones-live-note {
	white-space: normal;
	text-align: center;
}

@media (max-width: 650px) {
	#dog-slider-panels .dog-slider-needs.is-list .dog-slider-stones-live-stats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}
}

/* A static row hidden by the basket's coating (display: flex would win over [hidden]) */
#dog-slider-panels .dog-slider-stone[hidden] {
	display: none !important;
}

/* The backfilling panels of a basket with several sizes: one row, a tick box
   per panel, one button for the ticked ones (client, 2026-09-24). */
#dog-slider-panels .dog-slider-combo-list {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

#dog-slider-panels .dog-slider-combo-item {
	margin: 0;
	padding: 6px 0;
	border-top: 1px solid #e2e8f0;
}

#dog-slider-panels .dog-slider-combo-item:first-child {
	border-top: 0;
}

#dog-slider-panels .dog-slider-combo-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

#dog-slider-panels .dog-slider-combo-check {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: #03ba48;
	cursor: pointer;
}

#dog-slider-panels .dog-slider-combo-text {
	min-width: 0;
}

#dog-slider-panels .dog-slider-combo-name {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: #1e293b;
}

#dog-slider-panels .dog-slider-combo-meta {
	display: block;
	font-size: 12px;
	line-height: 1.45;
	color: #444;
}

#dog-slider-panels .dog-slider-combo-meta strong {
	color: #166534;
}

#dog-slider-panels .dog-slider-combo-add.is-disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* The folded panel row (client, 2026-10-06, like the Gabion Wall's
   accessories step): "Choose sizes" opens the tick boxes. The size chips
   went (client, 2026-10-08). */

#dog-slider-panels .dog-slider-tick {
	flex: none;
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 5px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Crect width='17' height='17' rx='3' fill='%2303ba48'/%3E%3Cpath d='M5.23 8.5l1.838 1.962 3.845-3.924' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

#dog-slider-panels .dog-slider-combo-toggle {
	justify-self: start;
	margin: 4px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: #15803d;
	cursor: pointer;
}

#dog-slider-panels .dog-slider-combo-toggle::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
}

#dog-slider-panels .dog-slider-combo-toggle[aria-expanded="true"]::after {
	transform: translateY(1px) rotate(-135deg);
}

#dog-slider-panels .dog-slider-combo-toggle:hover {
	text-decoration: underline;
}

#dog-slider-panels .dog-slider-combo-list[hidden] {
	display: none;
}

#dog-slider-panels .dog-slider-stones.is-list .is-combo .dog-slider-stone-buy {
	grid-row: 1 / span 6;
}

/* Rows of both tabs alike (client, 2026-10-06): a square picture that never
   stretches with the row, and the accessory badge on the picture's corner,
   where the stone pictures carry their "Stone is Dry" label. */
#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-image {
	align-self: flex-start;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-image img {
	height: 120px;
	min-height: 0;
	aspect-ratio: 1 / 1;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-badge {
	left: 0;
	right: auto;
	max-width: 120px;
	padding: 2px 6px;
	border-radius: 5px 0 6px 0;
	font-size: 9px;
}

/* Everything the row needs is in the basket: "N in basket" with the tick in
   the buy box's place, as in the cart (Szilard, 2026-10-06). */
#dog-slider-panels .dog-slider-stone-done {
	display: none;
}

#dog-slider-panels .dog-slider-stones .dog-slider-stone.is-in-basket .dog-slider-stone-done {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 130px;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	color: #15803d;
}

#dog-slider-panels .dog-slider-stone-done .dog-slider-tick {
	width: 14px;
	height: 14px;
	margin-right: 6px;
}

#dog-slider-panels .dog-slider-stones .dog-slider-stone.is-in-basket .dog-slider-stone-qty,
#dog-slider-panels .dog-slider-stones .dog-slider-stone.is-in-basket .dog-slider-stone-add,
#dog-slider-panels .dog-slider-stones .dog-slider-stone.is-in-basket .added_to_cart {
	display: none;
}

@media (max-width: 767px) {
	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone {
		padding-top: 12px; /* the badge sits on the picture now */
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-image img {
		height: 84px;
	}

	/* Phone: the badge under the name, not on the small picture (Szilard,
	   2026-10-06) - name, badge, price, "You need" beside the thumbnail. */
	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone {
		grid-template-rows: auto auto auto 1fr;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-image {
		grid-row: 1 / span 4;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-name {
		grid-row: 1;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-badge {
		position: static;
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		max-width: none;
		margin: 2px 0;
		border-radius: 4px;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-price {
		grid-row: 3;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-need {
		grid-row: 4;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-lead {
		grid-row: 5;
	}

	/* The folded panel row: toggle, tick boxes and the button under the
	   thumbnail at full width */
	#dog-slider-panels .dog-slider-stones.is-list .is-combo .dog-slider-combo-toggle {
		grid-column: 1 / -1;
		grid-row: 7;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-combo-list {
		grid-column: 1 / -1;
		grid-row: 8;
	}

	#dog-slider-panels .dog-slider-stones.is-list .is-combo .dog-slider-stone-buy {
		grid-row: 9;
	}
}

/* --- The builder tabs' steps (Cut to Size, Gabion Wall): one look on both,
   desktop and phone (client, 2026-10-07, after the Cut to Size mockup) - a
   compact card with a small step badge on the left instead of the 150px /
   96px half circles. Scoped to the tabs: the builders' own pages keep theirs.
   2026-10-08 (client): the live builder page's darker grey panel (#e6e6e6) so
   each step stands out (the option boxes stay white), and a 56px badge - a
   small "STEP" over a bigger number - centred on the step title. */
#dog-slider-panels .step-block {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	margin: 0 0 14px;
	padding: 16px 20px;
	overflow: visible;
	border: 1px solid #d9d9d9;
	border-radius: 12px;
	background: #e6e6e6;
	box-shadow: none;
}

#dog-slider-panels .step-block .circle-box {
	position: static;
	flex: 0 0 auto;
	align-self: flex-start;
	width: auto;
	margin: 0;
	padding: 0;
	overflow: visible;
}

#dog-slider-panels .step-block .circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 56px;
	height: 56px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: #03ba48;
	box-shadow: 0 2px 6px rgba(3, 186, 72, 0.3);
	color: #fff;
}

#dog-slider-panels .step-block .circle p {
	margin: 0 0 2px;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

#dog-slider-panels .step-block .num {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}

#dog-slider-panels .step-block .info-box {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	padding: 0;
}

/* Cut to Size: the title and its select from the left, not centred in a column */
#dog-slider-panels .calculate-rope-section .step-block .form-group {
	max-width: none;
	margin: 0;
}

#dog-slider-panels .calculate-rope-section .step-block .form-group > label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	min-height: 56px; /* the badge's height: the title sits on its middle */
	margin: 0 0 8px;
	font-size: 15px;
}

#dog-slider-panels .calculate-rope-section .step-block .input-holder,
#dog-slider-panels .calculate-rope-section .step-block .input-holder select {
	width: 100%;
	max-width: none;
}

/* Cut to Size (client, 2026-10-08): the select stays beside the badge and
   gets the same grey margin on its right as the badge + gap leave on its
   left (72px = 56px badge + 16px gap; QA round 2: not full width), and a
   bolder chevron than the browser's thin one. */
#dog-slider-panels .calculate-rope-section .step-block .input-holder {
	width: auto;
	margin-right: 72px;
}

#dog-slider-panels .calculate-rope-section .step-block .input-holder select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%231e293b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 14px 9px no-repeat;
}

/* Cut to Size: the "Ordering 10+ gabions?" notice above step 1 */
#dog-slider-panels .gabion-cut-to-size .wf-notice {
	margin: 0 auto 20px;
}

/* A step the compare popup has just set (Cut to Size, Gabion Wall) */
#dog-slider-panels .step-block.builder-filter-highlight {
	border-color: #03ba48;
	box-shadow: 0 0 0 3px rgba(3, 186, 72, 0.2);
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Gabion Wall: the step titles at the same size */
#dog-slider-panels .wf-gabion-wall .step-head {
	min-height: 56px; /* the badge's height: the title sits on its middle */
	align-items: center;
	margin-bottom: 10px;
}

#dog-slider-panels .wf-gabion-wall .step-head label {
	font-size: 15px;
}

@media (max-width: 767px) {
	#dog-slider-panels .step-block {
		gap: 12px;
		padding: 14px;
	}

	#dog-slider-panels .step-block .circle {
		width: 48px;
		height: 48px;
	}

	#dog-slider-panels .step-block .circle p {
		font-size: 8px;
	}

	#dog-slider-panels .step-block .num {
		font-size: 19px;
	}

	#dog-slider-panels .wf-gabion-wall .step-head,
	#dog-slider-panels .calculate-rope-section .step-block .form-group > label {
		min-height: 48px;
	}

	/* Gabion Wall on a phone: the title stays beside the badge, everything
	   under it takes the step's full width (48px badge + 12px gap). */
	#dog-slider-panels .wf-gabion-wall .step-block .info-box > :not(.step-head) {
		margin-left: -60px;
	}

	#dog-slider-panels .calculate-rope-section .step-block .input-holder {
		margin-right: 60px;
	}

}

/* A pill whose figure just changed (Gabion Stone, Gabion Accessories): a
   soft green flash, twice (client, 2026-10-07). Inside the pill (inset ring,
   background), so the slider's track cannot clip it. */
#dog-slider .category-link.is-pulsing {
	animation: dog-slider-pill-pulse 0.9s ease-out 2;
}

@keyframes dog-slider-pill-pulse {
	0% {
		background-color: #dcfce7;
		box-shadow: inset 0 0 0 2px rgba(3, 186, 72, 0.85);
	}
	100% {
		box-shadow: inset 0 0 0 2px rgba(3, 186, 72, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	#dog-slider .category-link.is-pulsing {
		animation: none;
	}
}

/* The accessories banner has no tiles (client, 2026-10-07): no empty box */
#dog-slider-panels .dog-slider-needs.is-list .dog-slider-stones-live-stats:empty {
	display: none;
}

/* --- Stone + Accessories rows as the client's cards (mock-up, 2026-10-07).
   Head: title + sub line, a "Calculated for N baskets in cart" pill on the
   right while the basket has gabions, a rule under it - no figure tiles.
   Card: picture with "Assembly Video" under it | name, description, the
   green "You need" box | price, VAT line, - qty + and the add button.
   .is-head / .dog-slider-stone-side scope it; it overrides the list rows
   above (same selectors plus one class, or later in the file). */
#dog-slider-panels .dog-slider-stones > .dog-slider-stones-live.is-head {
	display: flex;
	flex-direction: row; /* the old banner stacked in a column: the copy's 260px basis became its height */
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 16px;
	padding: 0 0 14px;
	border: 0;
	border-bottom: 1px solid #e5e7eb;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

#dog-slider-panels .dog-slider-stones > .dog-slider-stones-live.is-head .dog-slider-stones-live-copy {
	flex: 1 1 260px;
}

#dog-slider-panels .dog-slider-stones-live.is-head .dog-slider-stones-live-title {
	margin: 0 0 2px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	color: #0f172a;
}

#dog-slider-panels .dog-slider-stones-live.is-head .dog-slider-stones-live-text {
	font-size: 13px;
	color: #475569;
}

#dog-slider-panels .dog-slider-stones-live-count {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border: 1px solid #a7f3d0;
	border-radius: 8px;
	background: #ecfdf5;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: #065f46;
}

#dog-slider-panels .dog-slider-stones-live-count::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #03ba48;
}

#dog-slider-panels .dog-slider-stones-live-count[hidden] {
	display: none;
}

#dog-slider-panels .dog-slider-stones-live.is-head .dog-slider-stones-panels {
	padding-top: 10px;
	border-top: 0;
}

/* The card */
#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stones-grid {
	gap: 12px;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone {
	display: grid;
	grid-template-columns: 124px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px 20px;
	padding: 14px 18px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone[hidden] {
	display: none;
}

/* The rows share one set of columns (subgrid), so every "You need" box ends
   at the same line: the panel row's buy column has no stepper and made its
   box wider than the others (client, 2026-10-08). */
@media (min-width: 768px) {
	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stones-grid {
		grid-template-columns: 124px minmax(0, 1fr) auto;
		column-gap: 20px;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stones-grid > * {
		grid-column: 1 / -1;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone {
		grid-template-columns: subgrid;
	}
}

#dog-slider-panels .dog-slider-stone-media {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

/* The picture box carries the size, not the <img>: the media column is a
   shrink-to-fit flex column, and an <img> with the theme's max-width: 100%
   contributes nothing to that width, so the box ended up as wide as the
   "Assembly Video" label (105px) and the picture was clamped to 103 x 110 -
   a cropped, non-square thumbnail (Szilard, 2026-10-16). */
#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-media .dog-slider-stone-image {
	flex: none;
	align-self: center;
	box-sizing: border-box;
	width: 112px; /* 110px picture + the border; 80px until Szilard's "bigger pictures", 2026-10-07 */
	height: 112px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-media .dog-slider-stone-img {
	display: block;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-media .dog-slider-stone-img,
#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-media .dog-slider-stone-image img {
	width: 110px;
	max-width: none;
	height: 110px;
	min-height: 0;
	aspect-ratio: auto;
	object-fit: cover;
}

/* "Assembly Video": the red YouTube mark and a bold dark label */
#dog-slider-panels .dog-slider-stone-video {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 2px 0;
	border: 0;
	background: none;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	color: #1e293b;
	cursor: pointer;
}

#dog-slider-panels .dog-slider-stone-video .fa {
	font-size: 14px;
	color: #e00;
}

#dog-slider-panels .dog-slider-stone-video:hover {
	text-decoration: underline;
}

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

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	padding: 0;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-name {
	font-size: 16px;
	font-weight: 800;
	color: #0f172a;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-lead {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: #475569;
}

/* "You need" box: light green, the figure bold, the working underneath */
#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-need {
	display: block;
	align-self: stretch;
	margin: 4px 0 0;
	padding: 7px 12px;
	border: 1px solid #a7f3d0;
	border-radius: 6px;
	background: #ecfdf5;
	font-size: 13px;
	font-weight: 400;
	color: #047857;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-need:empty {
	display: none;
}

#dog-slider-panels .dog-slider-stone-need-title {
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: #064e3b;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-need-note {
	margin-top: 1px;
	font-size: 12px;
	line-height: 1.4;
	color: #059669;
}

/* Price column */
#dog-slider-panels .dog-slider-stone-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	min-width: 0;
}

#dog-slider-panels .dog-slider-stone-side .dog-slider-stone-price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.15;
	text-align: right;
	color: #0f172a;
}

#dog-slider-panels .dog-slider-stone-side .dog-slider-stone-price del {
	font-size: 12px;
	font-weight: 400;
	color: #94a3b8;
}

#dog-slider-panels .dog-slider-stone-side .dog-slider-stone-per {
	margin-top: 2px;
	font-size: 11px;
	font-weight: 400;
	color: #64748b;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-side .dog-slider-stone-buy {
	grid-column: auto;
	grid-row: auto;
	flex-wrap: nowrap;
	justify-content: flex-end;
	gap: 8px;
	margin: 0;
}

/* - qty + */
#dog-slider-panels .dog-slider-stone-stepper {
	display: inline-flex;
	align-items: stretch;
	height: 36px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
}

#dog-slider-panels .dog-slider-stone-step {
	width: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background: #f1f5f9;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: #334155;
	cursor: pointer;
}

#dog-slider-panels .dog-slider-stone-step:hover {
	background: #e2e8f0;
}

#dog-slider-panels .dog-slider-stone-stepper .dog-slider-stone-qty {
	width: 44px;
	height: auto;
	padding: 0 2px;
	border: 0;
	border-radius: 0;
	font-weight: 700;
	-moz-appearance: textfield;
}

#dog-slider-panels .dog-slider-stone-stepper .dog-slider-stone-qty::-webkit-outer-spin-button,
#dog-slider-panels .dog-slider-stone-stepper .dog-slider-stone-qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-side .dog-slider-stone-add {
	flex: none;
	min-width: 120px;
	border-color: #ff8800;
	border-radius: 6px;
}

#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-side .dog-slider-stone-add::before {
	content: "\f07a"; /* FontAwesome cart */
	margin-right: 6px;
	font-family: FontAwesome;
	font-weight: 400;
}

#dog-slider-panels .dog-slider-stones .dog-slider-stone.is-in-basket .dog-slider-stone-stepper {
	display: none;
}

/* One width for every buy button ("Add to basket", "Add 2 more", the panel
   row's), and "N in basket" as a green-framed box as wide as stepper + gap +
   button, so the right column lines up row to row (client, 2026-10-08). */
@media (min-width: 768px) {
	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-side .dog-slider-stone-add {
		justify-content: center;
		width: 142px;
		min-width: 0;
	}

	#dog-slider-panels .dog-slider-stones .dog-slider-stone.is-in-basket .dog-slider-stone-done {
		box-sizing: border-box;
		width: 252px; /* stepper 102 + gap 8 + button 142 */
		min-height: 40px;
		padding: 8px 12px;
		border: 2px solid #03ba48;
		border-radius: 6px;
		background: #fff;
	}
}

/* The folded panel row: chips, toggle and sizes stay in the middle column */
#dog-slider-panels .dog-slider-stones.is-list .is-combo .dog-slider-stone-side .dog-slider-stone-buy {
	grid-row: auto;
	align-self: flex-end; /* right edge, like the other rows' buttons, now that the columns are shared (2026-10-08) */
}

#dog-slider-panels .dog-slider-stones.is-list .is-combo .dog-slider-combo-toggle {
	align-self: flex-start;
}

/* Phone: picture + video beside the name, description and "You need" box,
   then the price and the buy row across the card. */
@media (max-width: 767px) {
	#dog-slider-panels .dog-slider-stones > .dog-slider-stones-live.is-head .dog-slider-stones-live-title {
		font-size: 18px;
	}

	/* Picture + video beside the name and description; the "You need" box,
	   the panel sizes and the price / buy row across the card under them.
	   The body's children are the card's grid items (display: contents). */
	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone {
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		align-items: start;
		gap: 4px 12px;
		padding: 12px;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-media {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-media .dog-slider-stone-image {
		width: 94px;
		height: 94px;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-media .dog-slider-stone-img,
	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-media .dog-slider-stone-image img {
		width: 92px;
		height: 92px;
	}

	#dog-slider-panels .dog-slider-stone-video {
		flex-wrap: wrap;
		justify-content: center;
		font-size: 11px;
		line-height: 1.2;
		white-space: normal;
		text-align: center;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-body {
		display: contents;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-name {
		grid-column: 2;
		grid-row: 1;
		font-size: 15px;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-lead {
		grid-column: 2;
		grid-row: 2;
		margin: 0;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-need {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-top: 8px;
	}

	#dog-slider-panels .dog-slider-stones.is-list .is-combo .dog-slider-combo-toggle {
		grid-column: 1 / -1;
		grid-row: 5;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-combo-list {
		grid-column: 1 / -1;
		grid-row: 6;
	}

	/* Price, stepper and button on one row to save height (client
	   2026-10-13; it was price over a full-width buy row since 2026-10-09).
	   The price column takes what is left and wraps inside itself, so the
	   buy group keeps the same right edge on every card. Once in the
	   basket ("N in basket" + "Add N more") the buy group may wrap under. */
	#dog-slider-panels .dog-slider-stone-side {
		grid-column: 1 / -1;
		grid-row: 7;
		margin-top: 6px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 8px 10px;
		padding-top: 10px;
		border-top: 1px solid #f1f5f9;
	}

	#dog-slider-panels .dog-slider-stone.is-in-basket .dog-slider-stone-side {
		flex-wrap: wrap;
	}

	#dog-slider-panels .dog-slider-stone-side .dog-slider-stone-price {
		flex: 1 1 auto;
		align-items: flex-start;
		min-width: 0;
		font-size: 18px;
		text-align: left;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-side .dog-slider-stone-buy {
		flex: none;
		grid-row: auto;
		margin-top: 0;
	}

	#dog-slider-panels .dog-slider-stone-stepper {
		height: 40px;
	}

	#dog-slider-panels .dog-slider-stone-stepper .dog-slider-stone-qty {
		width: 34px;
	}

	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone-side .dog-slider-stone-add {
		justify-content: center;
		min-width: 0;
		min-height: 40px;
		padding: 8px 12px;
	}

	#dog-slider-panels .dog-slider-stones .dog-slider-stone.is-in-basket .dog-slider-stone-done {
		flex: 1 1 auto;
	}
}

/* The backfilling panels' link row on an empty basket (client, 2026-10-13):
   the buy button's size and frame, white with the orange border - a link to
   the panels page, not an add. */
#dog-slider-panels .dog-slider-stone-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	min-height: 40px;
	margin: 0;
	padding: 8px 14px;
	border: 2px solid #ff8800;
	border-radius: 6px;
	background: #fff;
	box-shadow: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	color: #c2410c;
	text-decoration: none;
	white-space: nowrap;
}

#dog-slider-panels .dog-slider-stone-link:hover {
	background: #fff7ed;
	color: #9a3412;
}

/* Desktop: the link group as wide as stepper + gap + button on the other rows
   (252px, as the "N in basket" box), the link the add button's size at its
   right end, so the right column lines up row to row (Szilard, 2026-10-13). */
@media (min-width: 768px) {
	#dog-slider-panels .dog-slider-stones.is-list .dog-slider-stone.is-link .dog-slider-stone-buy {
		justify-content: flex-end;
		width: 252px;
	}

	#dog-slider-panels .dog-slider-stone-link {
		min-width: 142px;
		min-height: 36px;
		height: 36px;
	}
}

/* Small phones (client, 2026-10-13): the button says "Add" (the cart icon
   says the rest) so price, stepper and button fit one row, and the card's
   video link drops "Video" to sit beside its icon on one line. */
@media (max-width: 575px) {
	/* Visually hidden, still part of the button's name for screen readers */
	#dog-slider-panels .dog-slider-add-rest {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (max-width: 767px) {
	#dog-slider-panels .dog-slider-stone-video {
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	#dog-slider-panels .wf-video-word {
		display: none;
	}
}

/* "UPDATED" on the Gabion Stone / Accessories tabs (client, 2026-10-07):
   a small green badge that pulses until the tab is opened. Since 2026-10-08
   it is the line under the title, in place of the subtext. */
#dog-slider .category-updated {
	display: flex;
	align-items: center;
	width: max-content;
	margin: 3px auto 0;
	padding: 1px 7px;
	border: 1px solid #86efac;
	border-radius: 999px;
	background: #dcfce7;
	font-size: 9px;
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #15803d;
	animation: dog-slider-updated-pulse 1.6s ease-in-out infinite;
}

@keyframes dog-slider-updated-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(3, 186, 72, 0.45);
	}
	50% {
		box-shadow: 0 0 0 4px rgba(3, 186, 72, 0);
	}
}

#dog-slider .category-link.is-updated {
	box-shadow: inset 0 3px 0 #03ba48;
}

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

/* The /gabion/ section headings went h3 -> h2.wf-collapse (client SEO list,
   2026-10-23). These rules repeat the "#full-product-details h3" look from the
   global stylesheet, measured on live so the h2 renders exactly like the h3:
   24px / 1.1, underlined, 24px top margin, the theme's h3 bottom margin, and
   the round collapse chevron. Only /gabion/ uses .wf-collapse, so they live
   with its module. */
#full-product-details > h2.wf-collapse {
	font-size: 24px;
	line-height: 1.1;
	text-decoration: underline;
	margin-top: 24px;
	margin-bottom: .7681em;
	cursor: pointer;
}

#full-product-details > h2.wf-collapse .fa.fa-chevron-up {
	font-size: 18px;
	float: right;
	cursor: pointer;
	margin-top: 0;
	background: #e0e0e0;
	padding: 7px 8px 9px;
	border-radius: 50%;
}

#full-product-details > h2.wf-collapse.closed {
	margin-bottom: 28px;
}

#full-product-details > h2.wf-collapse [id] {
	scroll-margin-top: 100px;
}

@media (max-width: 768px) {
	#full-product-details > h2.wf-collapse {
		position: relative;
		padding-right: 30px;
	}

	#full-product-details > h2.wf-collapse .fa.fa-chevron-up {
		position: absolute;
		right: 5px;
		top: 0;
		transition: transform 0.3s ease;
	}

	#full-product-details > h2.wf-collapse [id] {
		scroll-margin-top: 140px;
	}
}