/* =============================================================================
   Super Rack 2026 - single product

   This page keeps WooCommerce's own stylesheet, because the gallery plugin, the
   variation forms, the tabs, WPC Bought Together and Advanced Dynamic Pricing all
   depend on its classes. So rules that restyle WooCommerce's markup are scoped
   `.srk-product ...` and occasionally have to match its weight to win. Rules for
   the theme's own `.srk-*` markup need nothing special - WooCommerce has never
   heard of those classes.
   ========================================================================== */

/* ------------------------------------------------------------- breadcrumb ---- */

.srk-product__crumbs { padding-block: 24px 0; color: var(--srk-soft); font-size: 9.5px; }
.srk-product__crumbs a:hover { color: var(--srk-red-text); }
.srk-product__crumbsep { margin: 0 7px; color: var(--srk-quiet); }
.srk-product__crumbhere { color: var(--srk-ink); letter-spacing: 0.04em; }

/* ------------------------------------------------------------------ layout ---- */

.srk-product__main {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	padding-block: 22px 60px;
}
.srk-product__media { width: 50%; min-width: 0; }
.srk-product__summary { flex: 1; min-width: 0; }

/* The gallery is a plugin's markup; the theme gives it a frame and gets out of the way. */
.woocommerce div.product.srk-product .images,
.woocommerce div.product.srk-product .woocommerce-product-gallery {
	background: #fff;
	border: 1px solid var(--srk-line);
	padding: 12px;
	margin: 0;
	/* WooCommerce floats this to 48% of its container; here the theme's column already IS
	   the layout, so the gallery takes all of it. */
	width: 100%;
	max-width: none;
	float: none;
}
.woocommerce div.product.srk-product .images img,
.woocommerce div.product.srk-product .woocommerce-product-gallery img { margin: 0 auto; }

.woocommerce div.product.srk-product .onsale {
	background: var(--srk-red);
	color: #fff;
	border-radius: 0;
	padding: 7px 13px;
	font-size: 9.5px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 700;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	margin: 0;
	top: 0;
	left: 0;
	right: auto;
}

/* ----------------------------------------------------------------- summary ---- */

.srk-product__eyebrow { color: var(--srk-eyebrow); margin: 0 0 14px; }

.srk-product__title {
	font-size: clamp(28px, 3.1vw, 42px);
	line-height: 1.05;
	margin: 0 0 16px;
	text-transform: uppercase;
}

.srk-product__avail {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	margin: 0 0 22px;
	color: var(--srk-soft);
}
.srk-product__dot { width: 8px; height: 8px; border-radius: 50%; background: #2E8B57; flex-shrink: 0; }
/* Seagreen is 3.7:1 on paper; this is the same green taken down until it clears AA. */
.srk-product__avail--in { color: #1E6F42; }
.srk-product__avail--order .srk-product__dot { background: var(--srk-yellow); }
.srk-product__avail--out .srk-product__dot { background: var(--srk-muted); }

/*
 * The warehouse badge. Yellow ink on a yellow wash - the same pairing the backorder line
 * uses, because it carries the same kind of message: not a problem, but a condition worth
 * reading before you press the button. 5C4304 on the blended wash is well past AA.
 */
.srk-product__wh {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--srk-yellow-ink);
	background: rgba(241, 180, 40, 0.22);
	border-radius: 2px;
	padding: 3px 8px;
	white-space: nowrap;
}

.srk-product__pricebar {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 8px;
	background: var(--srk-ink);
	color: #fff;
	padding: 22px 24px;
}
.srk-product__price { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.02em; line-height: 1; }
.srk-product__price del { font-size: 20px; color: var(--srk-quiet); }
.srk-product__price ins { text-decoration: none; }
.srk-product__gst { font-size: 16px; }
.srk-product__ex { margin-left: auto; font-size: 13px; color: var(--srk-quiet); }
.srk-product__price--none { font-size: 22px; color: var(--srk-muted-dark); letter-spacing: 0; }

/* ------------------------------------------------------------------- specs ---- */

.srk-specs { background: #fff; border: 1px solid var(--srk-line); margin-top: 16px; }
.srk-specs__title {
	color: var(--srk-soft);
	font-size: 9.5px;
	padding: 13px 16px;
	border-bottom: 1px solid var(--srk-line);
	background: #FAF8F4;
	margin: 0;
}
.srk-specs__table { width: 100%; border-collapse: collapse; }
.srk-specs__table th,
.srk-specs__table td {
	padding: 11px 16px;
	font-size: 13.5px;
	border-bottom: 1px solid var(--srk-line);
	text-align: left;
	font-weight: 400;
}
.srk-specs__table th { color: var(--srk-soft); width: 44%; }
.srk-specs__table tr:last-child th,
.srk-specs__table tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------- trust ---- */

.srk-trust {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 11px;
	margin: 22px 0 0;
	list-style: none;
}
.srk-trust__item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--srk-soft); }
.srk-trust__tick { color: var(--srk-red-text); }

/* =========================================================================== */
/* WooCommerce's own markup inside the buy column                              */
/* =========================================================================== */

.srk-product__buy { margin-top: 18px; }

/*
 * The design puts the upgrade panel above the buy button. The theme's own panel is printed
 * inside the form and lands there naturally; WPC Bought Together prints after the form and
 * would otherwise sit below it. A flex column and one `order` puts the two in the same place
 * without moving any plugin's markup.
 */
.woocommerce div.product.srk-product .srk-product__buy { display: flex; flex-direction: column; }
.woocommerce div.product.srk-product .srk-product__buy > .woobt-wrap { order: -1; }
.srk-product__buy .woocommerce-product-rating { margin: 0 0 14px; }

/* The add-to-cart row, matching the design's 52px control height. Weight matched to
   WooCommerce's `.woocommerce div.product form.cart ...` rules rather than beaten with
   !important, so a plugin that needs to override this still can. */
/*
 * The buy row is a flex row only on forms whose DIRECT children are that row. Composite,
 * bundle and variation forms nest theirs several levels down and put their whole
 * configurator in the same form - flexing those turns the configurator into a column half
 * the width of the page. Those three get the flex row on their own add-to-cart wrapper.
 */
.woocommerce div.product.srk-product .srk-product__buy form.cart { margin: 0 0 10px; }
.woocommerce div.product.srk-product .srk-product__buy form.cart:not(.composite_form):not(.bundle_form):not(.variations_form):not(.grouped_form) {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.woocommerce div.product.srk-product .srk-product__buy .composite_button,
.woocommerce div.product.srk-product .srk-product__buy .bundle_button,
.woocommerce div.product.srk-product .srk-product__buy .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
/* Anything else sharing that wrapper - the price-beat badge, plugin notices - takes its own
   row rather than squeezing in beside the button. */
.woocommerce div.product.srk-product .srk-product__buy form.cart > p,
.woocommerce div.product.srk-product .srk-product__buy .composite_button > p,
.woocommerce div.product.srk-product .srk-product__buy .bundle_button > p,
.woocommerce div.product.srk-product .srk-product__buy .woocommerce-variation-add-to-cart > p {
	flex: 0 0 100%;
	margin: 10px 0 0;
}
.woocommerce div.product.srk-product .srk-product__buy form.cart .quantity { margin: 0; float: none; }

.woocommerce div.product.srk-product .srk-product__buy form.cart .quantity .qty,
.woocommerce div.product.srk-product .srk-product__buy form.cart input.qty {
	width: 104px;
	height: 52px;
	border: 1px solid var(--srk-line);
	background: #fff;
	border-radius: 0;
	font: inherit;
	font-size: 16px;
	color: var(--srk-ink);
	text-align: center;
	padding: 0;
	box-shadow: none;
}

.woocommerce div.product.srk-product .srk-product__buy form.cart button.single_add_to_cart_button,
.woocommerce div.product.srk-product .srk-product__buy form.cart .single_add_to_cart_button.button {
	flex: 1;
	min-width: 220px;
	height: 52px;
	padding: 0 26px;
	background: var(--srk-ink);
	color: #fff;
	border: 0;
	border-radius: 0;
	font: inherit;
	font-size: 11.5px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.woocommerce div.product.srk-product .srk-product__buy form.cart button.single_add_to_cart_button:hover { background: var(--srk-red); }

/* Variation selects, so a variable product does not arrive in browser defaults. */
.woocommerce div.product.srk-product .srk-product__buy table.variations { width: 100%; border: 0; margin: 0 0 12px; }
.woocommerce div.product.srk-product .srk-product__buy table.variations th,
.woocommerce div.product.srk-product .srk-product__buy table.variations td { border: 0; padding: 0 0 10px; text-align: left; }
.woocommerce div.product.srk-product .srk-product__buy table.variations label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; }
.woocommerce div.product.srk-product .srk-product__buy table.variations select {
	width: 100%;
	height: 46px;
	border: 1px solid var(--srk-line);
	border-radius: 0;
	background: #fff;
	padding: 0 14px;
	font: inherit;
	font-size: 14.5px;
}

/*
 * WPC Bought Together is the design's yellow "upgrade option - build it out" panel. It was
 * drawn as a bespoke component; it is in fact a plugin that already does exactly this, so
 * the design is applied to the real thing rather than reimplemented beside it.
 */
/*
 * Styled only when it actually has something in it. WPC Bought Together prints its wrapper
 * on every product, bundled or not, which showed up as an empty yellow strip. Written this
 * way round so a browser without :has() gets nothing rather than an empty bar.
 */
.woocommerce div.product.srk-product .woobt-wrap {
	background: none;
	padding: 0;
	margin: 0;
	border: 0;
}
.woocommerce div.product.srk-product .woobt-wrap:has(.woobt-products) {
	background: var(--srk-yellow);
	padding: 16px 20px;
	margin: 0 0 16px;
}
.woocommerce div.product.srk-product .woobt-wrap .woobt-title,
.woocommerce div.product.srk-product .woobt-wrap .woobt-products-title {
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--srk-yellow-ink);
	margin-bottom: 12px;
}
.woocommerce div.product.srk-product .woobt-wrap .woobt-price,
.woocommerce div.product.srk-product .woobt-wrap .woobt-total { color: var(--srk-ink); font-weight: 700; }

/* Advanced Dynamic Pricing's bulk table. */
.woocommerce div.product.srk-product .wdp_bulk_table_content table { width: 100%; border-collapse: collapse; margin: 0 0 16px; background: #fff; }
.woocommerce div.product.srk-product .wdp_bulk_table_content th,
.woocommerce div.product.srk-product .wdp_bulk_table_content td {
	border: 1px solid var(--srk-line);
	padding: 9px 12px;
	font-size: 13px;
	text-align: left;
}
.woocommerce div.product.srk-product .wdp_bulk_table_content th { background: #FAF8F4; font-weight: 700; }

.woocommerce div.product.srk-product .product_meta { font-size: 12.5px; color: var(--srk-soft); margin-top: 18px; }
.woocommerce div.product.srk-product .product_meta a:hover { color: var(--srk-red-text); }

/* ----------------------------------------------------------- gallery ---- */

.woocommerce div.product.srk-product .woocommerce-product-gallery { position: relative; }

/* The arrows on the main image. FlexSlider ships them as icon-font anchors; drawn instead. */
.woocommerce div.product.srk-product .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce div.product.srk-product .flex-direction-nav a {
	position: absolute;
	top: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--srk-line);
	text-indent: -9999px;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.15s ease, background-color 0.15s ease;
	z-index: var(--srk-z-content);
}
.woocommerce div.product.srk-product .flex-direction-nav a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 11px;
	margin: -6px 0 0 -4px;
	border-right: 2px solid var(--srk-ink);
	border-bottom: 2px solid var(--srk-ink);
	transform: rotate(-45deg);
}
.woocommerce div.product.srk-product .flex-direction-nav a.flex-prev { left: 12px; }
.woocommerce div.product.srk-product .flex-direction-nav a.flex-next { right: 12px; }
.woocommerce div.product.srk-product .flex-direction-nav a.flex-prev::before {
	margin-left: -7px;
	transform: rotate(135deg);
}
.woocommerce div.product.srk-product .woocommerce-product-gallery:hover .flex-direction-nav a,
.woocommerce div.product.srk-product .flex-direction-nav a:focus-visible { opacity: 1; }
.woocommerce div.product.srk-product .flex-direction-nav a:hover { background: #fff; }
.woocommerce div.product.srk-product .flex-direction-nav a.flex-disabled { display: none; }

/* Touch has no hover, so the arrows stay put there. */
@media (hover: none) {
	.woocommerce div.product.srk-product .flex-direction-nav a { opacity: 1; }
}

/*
 * The thumbnail strip: one scrolling row instead of three wrapped ones.
 *
 * `div.images` is in every selector on purpose. WooCommerce styles this strip as
 * `.woocommerce div.product div.images .flex-control-thumbs` - four classes and three
 * elements - so the theme's four-class, two-element version lost, and the gap above the row
 * silently reset to zero. Matching its shape and adding one class settles it.
 */
.woocommerce div.product.srk-product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	/* Enough air that the strip reads as a separate control rather than part of the photo. */
	margin: 24px 0 0;
	padding: 0 0 2px;
	list-style: none;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.woocommerce div.product.srk-product div.images .flex-control-thumbs::-webkit-scrollbar { display: none; }
.woocommerce div.product.srk-product div.images .flex-control-thumbs li {
	flex: 0 0 92px;
	width: 92px;
	float: none;
	margin: 0;
	list-style: none;
}
.woocommerce div.product.srk-product div.images .flex-control-thumbs li img {
	width: 92px;
	height: 92px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--srk-line);
	padding: 4px;
	opacity: 1;
	cursor: pointer;
	transition: border-color 0.15s ease;
}
.woocommerce div.product.srk-product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product.srk-product div.images .flex-control-thumbs li img:hover { border-color: var(--srk-ink); }

/* The chevrons either side of the strip, shown only when it actually scrolls. */
.woocommerce div.product.srk-product .srk-thumbnav {
	position: absolute;
	bottom: 31px;
	width: 30px;
	height: 54px;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--srk-line);
	background: rgba(255, 255, 255, 0.95);
	cursor: pointer;
	z-index: var(--srk-z-content);
}
.woocommerce div.product.srk-product.srk-product .woocommerce-product-gallery.srk-has-thumbnav .srk-thumbnav { display: flex; }
.woocommerce div.product.srk-product .srk-thumbnav::before {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--srk-ink);
	border-bottom: 2px solid var(--srk-ink);
	transform: rotate(-45deg);
	margin-left: -3px;
}
.woocommerce div.product.srk-product .srk-thumbnav--prev { left: 12px; }
.woocommerce div.product.srk-product .srk-thumbnav--prev::before { transform: rotate(135deg); margin-left: 3px; }
.woocommerce div.product.srk-product .srk-thumbnav--next { right: 12px; }
.woocommerce div.product.srk-product .srk-thumbnav:disabled { opacity: 0.3; cursor: default; }
.woocommerce div.product.srk-product .srk-thumbnav:hover:not(:disabled) { background: #fff; }

/* The line that tells people the images open. */
.srk-gallery-hint {
	margin: 12px 0 0;
	font-size: 12.5px;
	color: var(--srk-soft);
	text-align: center;
}

@media (max-width: 620px) {
	.woocommerce div.product.srk-product div.images .flex-control-thumbs li,
	.woocommerce div.product.srk-product div.images .flex-control-thumbs li img { flex-basis: 72px; width: 72px; }
	.woocommerce div.product.srk-product div.images .flex-control-thumbs li img { height: 72px; }
}

/* ------------------------------------------------------------- video ---- */

/*
 * A video slide inside WooCommerce's own gallery. It is an ordinary gallery child, so
 * FlexSlider gives it a thumbnail alongside the photographs; the poster and the play badge
 * are all that load until the customer presses it.
 */
.woocommerce div.product.srk-product .srk-gvideo { position: relative; }
.woocommerce div.product.srk-product .srk-gvideo__btn {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
	line-height: 0;
}
.woocommerce div.product.srk-product .srk-gvideo__btn img {
	width: 100%;
	height: auto;
	display: block;
	opacity: 0.92;
	transition: opacity 0.15s ease;
}
.woocommerce div.product.srk-product .srk-gvideo__btn:hover img { opacity: 1; }

/* The play badge: a red disc with a white triangle, drawn rather than loaded. */
.woocommerce div.product.srk-product .srk-gvideo__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 74px;
	height: 74px;
	margin: -37px 0 0 -37px;
	border-radius: 50%;
	background: var(--srk-red);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
	transition: transform 0.15s ease;
}
.woocommerce div.product.srk-product .srk-gvideo__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -13px 0 0 -8px;
	border-style: solid;
	border-width: 13px 0 13px 21px;
	border-color: transparent transparent transparent #fff;
}
.woocommerce div.product.srk-product .srk-gvideo__btn:hover .srk-gvideo__play { transform: scale(1.07); }

.woocommerce div.product.srk-product .srk-gvideo__frame {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
	background: #000;
}

/* The gallery's own thumbnail for a video slide, marked so it reads as one. */
.woocommerce div.product.srk-product .flex-control-thumbs li img[src*="ytimg"],
.woocommerce div.product.srk-product .srk-gvideo__btn { border-radius: 0; }

@media (max-width: 620px) {
	.woocommerce div.product.srk-product .srk-gvideo__play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
	.woocommerce div.product.srk-product .srk-gvideo__play::after { margin: -10px 0 0 -6px; border-width: 10px 0 10px 16px; }
}

/* ------------------------------------------------------- short description ---- */

/*
 * The product excerpt. Thirty-four products use it as an intro paragraph; six use it to
 * render the Cantilever Builder's whole configurator. It has to be able to carry both.
 */
.woocommerce div.product.srk-product .srk-product__short {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--srk-ink);
}
.woocommerce div.product.srk-product .srk-product__short p { margin: 0 0 10px; }
.woocommerce div.product.srk-product .srk-product__short p:last-child { margin-bottom: 0; }
.woocommerce div.product.srk-product .srk-product__short h2,
.woocommerce div.product.srk-product .srk-product__short h3,
.woocommerce div.product.srk-product .srk-product__short h4 { font-weight: 700; font-size: 16px; line-height: 1.3; margin: 16px 0 6px; }
.woocommerce div.product.srk-product .srk-product__short > *:first-child { margin-top: 0; }
.woocommerce div.product.srk-product .srk-product__short ul,
.woocommerce div.product.srk-product .srk-product__short ol { margin: 0 0 10px; padding-left: 1.35em; }
.woocommerce div.product.srk-product .srk-product__short ul { list-style: disc; }
.woocommerce div.product.srk-product .srk-product__short ol { list-style: decimal; }
.woocommerce div.product.srk-product .srk-product__short li { margin-bottom: 0.3em; }
.woocommerce div.product.srk-product .srk-product__short strong { font-weight: 700; }

/*
 * The Cantilever Builder, which arrives as a bare form inside the excerpt. The plugin
 * styles it entirely by ID (`#cantilever-builder-form ...`), so class-only overrides lose
 * on specificity no matter how many classes they stack. These match the ID and add a class.
 */
.srk-product #cantilever-builder-form {
	width: 100%;
	margin: 0;
	padding: 18px 20px;
	border: 1px solid var(--srk-line);
	background: #fff;
	border-radius: 0;
}
.srk-product #cantilever-builder-form label {
	display: block;
	margin-top: 14px;
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--srk-ink);
}
.srk-product #cantilever-builder-form label:first-of-type { margin-top: 0; }
.srk-product #cantilever-builder-form select,
.srk-product #cantilever-builder-form input[type="text"],
.srk-product #cantilever-builder-form input[type="number"] {
	width: 100%;
	height: 46px;
	margin-top: 6px;
	padding: 0 12px;
	border: 1px solid var(--srk-line);
	background: #fff;
	color: var(--srk-ink);
	font: inherit;
	font-size: 14.5px;
	border-radius: 0;
}
.srk-product #cantilever-builder-form button,
.srk-product #cantilever-builder-form button[type="submit"],
.srk-product #cantilever-builder-form input[type="submit"] {
	width: 100%;
	margin-top: 18px;
	height: 52px;
	padding: 0 26px;
	border: 0;
	border-radius: 0;
	background: var(--srk-red);
	color: #fff;
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	cursor: pointer;
}
.srk-product #cantilever-builder-form button[type="submit"]:hover,
.srk-product #cantilever-builder-form input[type="submit"]:hover { background: var(--srk-ink); }
.srk-product #builder-loader { color: var(--srk-red-text); font-style: normal; font-size: 13px; }

/* ------------------------------------------------------------------ prices ---- */

/*
 * WooCommerce paints every in-form price olive (#958E09) at (0,3,2). Every price on this
 * page is either the design's dark bar or a plugin's running total, and neither is olive.
 */
.woocommerce div.product.srk-product p.price,
.woocommerce div.product.srk-product span.price,
.woocommerce div.product.srk-product .composite_price p.price {
	color: var(--srk-ink);
	font-weight: 700;
}
.woocommerce div.product.srk-product p.price del,
.woocommerce div.product.srk-product span.price del {
	color: var(--srk-quiet);
	font-weight: 400;
	opacity: 1;
}
.woocommerce div.product.srk-product p.price ins,
.woocommerce div.product.srk-product span.price ins {
	color: var(--srk-red-text);
	text-decoration: none;
	font-weight: 700;
}
/* The price bar renders the same markup and owns its own colours. */
.woocommerce div.product.srk-product .srk-product__pricebar .price,
.woocommerce div.product.srk-product .srk-product__pricebar ins { color: #fff; }
.woocommerce div.product.srk-product .srk-product__pricebar del { color: rgba(255, 255, 255, 0.55); }

/* ------------------------------------------------- composite products (12) ---- */

/*
 * The step pills.
 *
 * Composite's markup is li > span.element_inner > (span.element_index + span.element_title >
 * a.element_link), and it draws the "breadcrumb chevron" between steps as 44px border
 * triangles on li::before / li::after. The pill is the inner span; the words are the anchor,
 * which carries its own colour and so has to be told to inherit or it stays dark on dark.
 */
.woocommerce div.product.srk-product .composite_pagination { margin: 0 0 22px; }
.woocommerce div.product.srk-product .composite_pagination ul.pagination_elements {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce div.product.srk-product .composite_pagination li.pagination_element {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	float: none;
	width: auto;
	max-width: none;
	flex: 0 1 auto;
}
.woocommerce div.product.srk-product .composite_pagination li.pagination_element::before,
.woocommerce div.product.srk-product .composite_pagination li.pagination_element::after {
	content: none;
	display: none;
}
.woocommerce div.product.srk-product .composite_pagination li.pagination_element .element_inner {
	display: flex;
	align-items: baseline;
	gap: 6px;
	width: auto;
	max-width: none;
	overflow: visible;
	padding: 8px 12px;
	border: 1px solid var(--srk-line);
	background: #fff;
	line-height: 1.2;
}
.woocommerce div.product.srk-product .composite_pagination li.pagination_element .element_index,
.woocommerce div.product.srk-product .composite_pagination li.pagination_element .element_link {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--srk-soft);
	text-decoration: none;
	padding: 0;
	background: none;
}
.woocommerce div.product.srk-product .composite_pagination li.pagination_element .element_title {
	background: none;
	color: inherit;
	padding: 0;
	border: 0;
	display: inline;
	width: auto;
}
.woocommerce div.product.srk-product .composite_pagination li.pagination_element_current .element_inner {
	background: var(--srk-ink);
	border-color: var(--srk-ink);
}
.woocommerce div.product.srk-product .composite_pagination li.pagination_element_current .element_index,
.woocommerce div.product.srk-product .composite_pagination li.pagination_element_current .element_link { color: #fff; }
.woocommerce div.product.srk-product .composite_pagination li.pagination_element .element_inner:hover { border-color: var(--srk-ink); }
.woocommerce div.product.srk-product .composite_pagination li.pagination_element .element_inner:hover .element_link { color: var(--srk-ink); }
.woocommerce div.product.srk-product .composite_pagination li.pagination_element_current .element_inner:hover .element_link { color: #fff; }

.woocommerce div.product.srk-product .composite_component { border: 0; padding: 0; margin: 0 0 8px; }
.woocommerce div.product.srk-product .component_title_wrapper .component_title,
.woocommerce div.product.srk-product h2.component_title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	color: var(--srk-ink);
}
.woocommerce div.product.srk-product .component_section_title {
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--srk-soft);
	margin: 0 0 6px;
}
.woocommerce div.product.srk-product .component_options select {
	width: 100%;
	height: 46px;
	padding: 0 12px;
	border: 1px solid var(--srk-line);
	background: #fff;
	font: inherit;
	font-size: 14.5px;
	border-radius: 0;
}

/* The next/previous step controls, which Composite renders as bare anchors. */
.woocommerce div.product.srk-product .composite_navigation { margin: 18px 0 0; }
.woocommerce div.product.srk-product .composite_navigation .composite_navigation_inner {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: center;
	width: 100%;
}
.woocommerce div.product.srk-product .composite_navigation a.page_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--srk-ink);
	background: #fff;
	color: var(--srk-ink);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	text-align: center;
	width: auto;
	white-space: nowrap;
	float: none;
}
.woocommerce div.product.srk-product .composite_navigation a.page_button.next {
	margin-left: auto;
	background: var(--srk-ink);
	color: #fff;
}
.woocommerce div.product.srk-product .composite_navigation a.page_button.next:hover { background: var(--srk-red); border-color: var(--srk-red-text); }
.woocommerce div.product.srk-product .composite_navigation a.page_button.invisible,
.woocommerce div.product.srk-product .composite_navigation a.page_button.inactive { display: none; }
/* Composite draws a small chevron as an absolutely positioned pseudo-element. The buttons
   are now real buttons, so the chevron lands on top of the label. */
.woocommerce div.product.srk-product .composite_navigation a.page_button::before,
.woocommerce div.product.srk-product .composite_navigation a.page_button::after { content: none; display: none; }

/* The review step's selection cards. */
.woocommerce div.product.srk-product .composite_summary .component_summary_element,
.woocommerce div.product.srk-product .composite_summary_element {
	border: 1px solid var(--srk-line);
	background: #fff;
	padding: 12px;
}
.woocommerce div.product.srk-product .composite_summary .edit_component,
.woocommerce div.product.srk-product a.edit_component {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--srk-red-text);
}
.woocommerce div.product.srk-product .composite_price {
	margin: 18px 0 12px;
	font-size: 22px;
}

/* ------------------------------------------------- grouped products ---- */

/*
 * A grouped product is WooCommerce's own answer to "here are the accessories, take what you
 * want" - a table of children, each with a quantity, and one Add to cart. It replaced the
 * Product Bundles plugin on `Pallet Racking Accessories`, so it needs to look like the rest
 * of the buy column rather than like a default Woo table.
 */
.woocommerce div.product.srk-product .srk-product__buy form.cart.grouped_form { display: block; }
.woocommerce div.product.srk-product table.woocommerce-grouped-product-list {
	width: 100%;
	border: 1px solid var(--srk-line);
	border-collapse: collapse;
	background: #fff;
	margin: 0 0 14px;
}
.woocommerce div.product.srk-product table.woocommerce-grouped-product-list tr { border-bottom: 1px solid var(--srk-line); }
.woocommerce div.product.srk-product table.woocommerce-grouped-product-list tr:last-child { border-bottom: 0; }
.woocommerce div.product.srk-product table.woocommerce-grouped-product-list td {
	border: 0;
	padding: 10px 12px;
	vertical-align: middle;
	font-size: 14px;
	line-height: 1.35;
}
.woocommerce div.product.srk-product table.woocommerce-grouped-product-list td.woocommerce-grouped-product-list-item__quantity { width: 96px; padding-right: 0; }
.woocommerce div.product.srk-product table.woocommerce-grouped-product-list td.woocommerce-grouped-product-list-item__label { width: auto; }
.woocommerce div.product.srk-product table.woocommerce-grouped-product-list td.woocommerce-grouped-product-list-item__label a {
	color: var(--srk-ink);
	font-weight: 700;
}
.woocommerce div.product.srk-product table.woocommerce-grouped-product-list td.woocommerce-grouped-product-list-item__label a:hover { color: var(--srk-red-text); }
.woocommerce div.product.srk-product table.woocommerce-grouped-product-list td.woocommerce-grouped-product-list-item__price {
	text-align: right;
	white-space: nowrap;
	font-weight: 700;
	width: 1%;
}
.woocommerce div.product.srk-product table.woocommerce-grouped-product-list .quantity .qty,
.woocommerce div.product.srk-product table.woocommerce-grouped-product-list input.qty {
	width: 84px;
	height: 42px;
	font-size: 15px;
}
/* One button, full width, under the table - as every other product type has it. */
.woocommerce div.product.srk-product form.cart.grouped_form button.single_add_to_cart_button {
	width: 100%;
	min-width: 0;
}

/* ---------------------------------------------------- product bundles (1) ---- */

/*
 * Bundles print each item as a full product summary - a 650px image above its own title.
 * Inside a 700px buy column that reads as five stacked product pages. Compact rows instead.
 */
.woocommerce div.product.srk-product .bundled_product {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 16px;
	align-items: start;
	border: 1px solid var(--srk-line);
	background: #fff;
	padding: 14px;
	margin: 0 0 10px;
	float: none;
	width: auto;
}
.woocommerce div.product.srk-product .bundled_product .bundled_product_images,
.woocommerce div.product.srk-product .bundled_product div.images {
	grid-column: 1;
	grid-row: 1;
	order: 0;
	width: 84px;
	max-width: 84px;
	margin: 0;
	padding: 0;
	float: none;
}
.woocommerce div.product.srk-product .bundled_product .bundled_product_images img {
	width: 84px;
	height: auto;
	max-width: 84px;
	display: block;
}
/* Placed explicitly: the plugin's own layout puts the details column first, which in a
   grid reverses the two. */
.woocommerce div.product.srk-product .bundled_product .details {
	grid-column: 2;
	grid-row: 1;
	order: 1;
	width: auto;
	float: none;
	margin: 0;
	min-width: 0;
}
.woocommerce div.product.srk-product .bundled_product h4.bundled_product_title {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 6px;
	padding: 0;
	color: var(--srk-ink);
}
.woocommerce div.product.srk-product .bundled_product .bundled_product_optional_checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	margin: 0 0 8px;
}
.woocommerce div.product.srk-product .bundled_product .quantity input.qty { height: 40px; }

@media (max-width: 480px) {
	.woocommerce div.product.srk-product .bundled_product { grid-template-columns: 60px 1fr; gap: 12px; }
	.woocommerce div.product.srk-product .bundled_product .bundled_product_images,
	.woocommerce div.product.srk-product .bundled_product .bundled_product_images img { width: 60px; max-width: 60px; }
}

/* --------------------------------------------------- upgrade options ---- */

/*
 * WPC Bought Together prints the product itself as the first row of its own panel, which
 * reads as "buy this thing you are already buying". The design shows only the add-ons.
 */
.woocommerce div.product.srk-product .woobt-product-this { display: none; }

/*
 * And the rows WPC does print are brought onto the design's grid: an uppercase eyebrow, a
 * small thumbnail, one line per add-on, the price to the right with a plus. Written to the
 * plugin's own class names so the panel a merchant configures and the panel the theme
 * suggests read as the same component.
 */
.woocommerce div.product.srk-product .woobt-wrap .woobt-before-text {
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--srk-yellow-ink);
	margin: 0 0 14px;
	padding: 0;
	border: 0;
}
.woocommerce div.product.srk-product .woobt-products { border: 0; margin: 0; padding: 0; }
.woocommerce div.product.srk-product .woobt-product-together {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 0;
	border-top: 1px solid rgba(138, 106, 22, 0.28);
	padding: 11px 0;
	margin: 0;
	background: none;
}
.woocommerce div.product.srk-product .woobt-product-together:first-of-type { border-top: 0; padding-top: 0; }
.woocommerce div.product.srk-product .woobt-product-together .woobt-choose { flex: 0 0 auto; margin: 0; padding: 0; width: auto; }
.woocommerce div.product.srk-product .woobt-product-together .woobt-thumb { flex: 0 0 44px; width: 44px; margin: 0; padding: 0; }
.woocommerce div.product.srk-product .woobt-product-together .woobt-thumb img { width: 44px; height: auto; display: block; background: #fff; }
.woocommerce div.product.srk-product .woobt-product-together .woobt-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: 0;
}
.woocommerce div.product.srk-product .woobt-product-together .woobt-title a { color: var(--srk-ink); font-weight: 700; }
.woocommerce div.product.srk-product .woobt-product-together .woobt-qty-num { color: var(--srk-yellow-ink); font-weight: 400; }
.woocommerce div.product.srk-product .woobt-product-together .woobt-price {
	flex: 0 0 auto;
	margin-left: auto;
	text-align: right;
	font-weight: 700;
	white-space: nowrap;
}
.woocommerce div.product.srk-product .woobt-product-together .woobt-price .amount { color: var(--srk-ink); }
.woocommerce div.product.srk-product .woobt-product-together .woobt-price-ori::before { content: "+"; }
.woocommerce div.product.srk-product .woobt-product-together .woobt-availability { font-size: 11.5px; color: var(--srk-yellow-ink); }

/*
 * The theme's own version of the panel, for the three products in four where nobody has
 * configured any add-ons. Rendered inside the add-to-cart form, so one button buys the lot.
 */
.woocommerce div.product.srk-product .srk-upgrades {
	background: var(--srk-yellow);
	padding: 16px 20px;
	margin: 0 0 16px;
	flex: 0 0 100%;
}
.woocommerce div.product.srk-product .srk-upgrades__head {
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--srk-yellow-ink);
	margin: 0 0 14px;
}
.woocommerce div.product.srk-product .srk-upgrades__row {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	line-height: 1.35;
	margin: 0 0 11px;
	cursor: pointer;
	color: var(--srk-ink);
}
.woocommerce div.product.srk-product .srk-upgrades__row:last-of-type { margin-bottom: 0; }
.woocommerce div.product.srk-product .srk-upgrades__box {
	appearance: none;
	-webkit-appearance: none;
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	border: 1.5px solid #8A6A16;
	background: #fff;
	border-radius: 0;
	margin: 0;
	display: grid;
	place-content: center;
	cursor: pointer;
}
.woocommerce div.product.srk-product .srk-upgrades__box:checked { background: var(--srk-ink); border-color: var(--srk-ink); }
.woocommerce div.product.srk-product .srk-upgrades__box:checked::after {
	content: "";
	width: 9px;
	height: 5px;
	border-left: 2.5px solid #fff;
	border-bottom: 2.5px solid #fff;
	transform: rotate(-45deg) translate(1px, -1px);
}
.woocommerce div.product.srk-product .srk-upgrades__name { font-weight: 700; }
.woocommerce div.product.srk-product .srk-upgrades__price { margin-left: auto; font-weight: 700; white-space: nowrap; }
.woocommerce div.product.srk-product .srk-upgrades__price .amount { color: var(--srk-ink); }
.woocommerce div.product.srk-product .srk-upgrades__note {
	margin: 12px 0 0;
	font-size: 11.5px;
	color: var(--srk-yellow-ink);
}

/* ------------------------------------------------- parts + reorder bar ---- */

.srk-parts { padding-bottom: 8px; }

/* The dark quick-order strip that closes the components row. */
.srk-reorder {
	background: var(--srk-ink);
	color: #fff;
	padding: 24px 26px;
	margin-top: 14px;
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}
.srk-reorder__copy { flex: 0 1 auto; }
.srk-reorder__eyebrow { color: var(--srk-yellow); margin: 0 0 8px; }
.srk-reorder__title { font-size: 19px; margin: 0; line-height: 1.3; }
/*
 * The strip renders `srk_quick_order_form()` now rather than its own search box, so these
 * rules dress that form's own class names. The label, the nonce and the referer field are
 * part of it; only the label needs hiding, because the eyebrow to its left already says
 * what the box is for.
 */
.srk-reorder__form {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin-left: auto;
	flex: 1 1 430px;
	max-width: 580px;
	position: relative;
}
.srk-reorder__form .srk-quickorder__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.srk-reorder__form .srk-quickorder__sku,
.srk-reorder__form .srk-quickorder__qty {
	min-width: 0;
	height: 44px;
	padding: 0 15px;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: var(--srk-ink);
	font-size: 13.5px;
}
.srk-reorder__form .srk-quickorder__sku { flex: 1 1 180px; }
.srk-reorder__form .srk-quickorder__qty { flex: 0 0 70px; width: 70px; text-align: center; }
.srk-reorder__form .srk-quickorder__submit { height: 44px; line-height: 44px; padding: 0 26px; flex: 0 0 auto; }
.srk-reorder__form .srk-quickorder__note {
	color: var(--srk-quiet);
	flex: 0 0 150px;
	width: 150px;
	line-height: 1.7;
	margin: 0;
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
/* The confirmation the lookup writes in once a part has been chosen. Same slot, not quiet. */
.srk-reorder__form .srk-quickorder__note.is-chosen {
	color: var(--srk-yellow);
	text-transform: none;
	letter-spacing: 0;
	font-size: 12px;
}

@media (max-width: 900px) {
	.srk-reorder { padding: 20px; gap: 16px; }
	.srk-reorder__form { flex-basis: 100%; max-width: none; margin-left: 0; }
	.srk-reorder__form .srk-quickorder__note { width: auto; flex-basis: 100%; }
}

/* ------------------------------------------------------- range copy ---- */

/*
 * The series copy recovered from the retired Elementor templates. It lives on the category
 * now, so this block renders whatever a category has - and gets better as Stage D fills the
 * rest of them in.
 */
.woocommerce div.product.srk-product .srk-range__more {
	margin: 30px 0 0;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.woocommerce div.product.srk-product .srk-range__more a {
	color: var(--srk-yellow);
	font-weight: 700;
}

/* The extra specification rows the old templates carried, inside the description tab. */
.woocommerce div.product.srk-product .srk-specs__table--tab {
	width: 100%;
	max-width: 760px;
	margin: 22px 0 0;
	border-collapse: collapse;
}
.woocommerce div.product.srk-product .srk-specs__table--tab th,
.woocommerce div.product.srk-product .srk-specs__table--tab td {
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	padding: 11px 0;
	text-align: left;
	font-size: 14px;
	font-weight: 400;
}
.woocommerce div.product.srk-product .srk-specs__table--tab th { color: var(--srk-quiet); width: 34%; }

/* --------------------------------------------------------------------- tabs ---- */

.woocommerce div.product.srk-product .woocommerce-tabs {
	background: var(--srk-ink);
	color: #fff;
	padding-block: 26px 56px;
	margin: 0;
}
.woocommerce div.product.srk-product .woocommerce-tabs ul.tabs {
	max-width: var(--srk-wrap);
	margin-inline: auto;
	padding: 0 var(--srk-gutter);
	border-bottom: 1px solid #3A3F45;
	display: flex;
	flex-wrap: wrap;
	gap: 0 34px;
	list-style: none;
}
.woocommerce div.product.srk-product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product.srk-product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product.srk-product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product.srk-product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product.srk-product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 0;
}
.woocommerce div.product.srk-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0 0 14px;
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--srk-quiet);
	border-bottom: 3px solid transparent;
}
.woocommerce div.product.srk-product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product.srk-product .woocommerce-tabs ul.tabs li a:hover { color: #fff; border-bottom-color: var(--srk-yellow); }

.woocommerce div.product.srk-product .woocommerce-tabs .panel {
	max-width: var(--srk-wrap);
	margin-inline: auto;
	padding: 44px var(--srk-gutter) 0;
	color: var(--srk-dark-body);
	font-size: 15px;
	line-height: 1.7;
}
.woocommerce div.product.srk-product .woocommerce-tabs .panel h2 {
	color: #fff;
	font-size: clamp(24px, 2.4vw, 34px);
	margin-bottom: 22px;
	text-transform: uppercase;
}
.woocommerce div.product.srk-product .woocommerce-tabs .panel h3 { color: #fff; margin-block: 24px 10px; font-size: 19px; }

/*
 * Editor content inside the dark tab band. The theme's global list reset would otherwise
 * strip the bullets and the indent off every `<ul>` a product description contains, and flatten
 * its headings to body weight - which reads as broken HTML rather than as a design choice.
 * See the PROSE block in theme.css.
 */
.woocommerce div.product.srk-product .woocommerce-tabs .panel h1,
.woocommerce div.product.srk-product .woocommerce-tabs .panel h2,
.woocommerce div.product.srk-product .woocommerce-tabs .panel h3,
.woocommerce div.product.srk-product .woocommerce-tabs .panel h4,
.woocommerce div.product.srk-product .woocommerce-tabs .panel h5,
.woocommerce div.product.srk-product .woocommerce-tabs .panel h6 { font-weight: 700; line-height: 1.25; color: #fff; }
.woocommerce div.product.srk-product .woocommerce-tabs .panel h4,
.woocommerce div.product.srk-product .woocommerce-tabs .panel h5,
.woocommerce div.product.srk-product .woocommerce-tabs .panel h6 { font-size: 16px; margin-block: 22px 8px; }
.woocommerce div.product.srk-product .woocommerce-tabs .panel p { margin: 0 0 1em; }
.woocommerce div.product.srk-product .woocommerce-tabs .panel ul,
.woocommerce div.product.srk-product .woocommerce-tabs .panel ol { margin: 0 0 1.1em; padding-left: 1.35em; }
.woocommerce div.product.srk-product .woocommerce-tabs .panel ul { list-style: disc; }
.woocommerce div.product.srk-product .woocommerce-tabs .panel ol { list-style: decimal; }
.woocommerce div.product.srk-product .woocommerce-tabs .panel li { margin-bottom: 0.4em; }
.woocommerce div.product.srk-product .woocommerce-tabs .panel li::marker { color: var(--srk-yellow); }
.woocommerce div.product.srk-product .woocommerce-tabs .panel strong,
.woocommerce div.product.srk-product .woocommerce-tabs .panel b { font-weight: 700; color: #fff; }
.woocommerce div.product.srk-product .woocommerce-tabs .panel em { font-style: italic; }
.woocommerce div.product.srk-product .woocommerce-tabs .panel img { max-width: 100%; height: auto; margin: 0.6em 0; }
.woocommerce div.product.srk-product .woocommerce-tabs .panel a { color: var(--srk-yellow); text-decoration: underline; text-underline-offset: 3px; }
.woocommerce div.product.srk-product .woocommerce-tabs .panel table { width: 100%; border-collapse: collapse; }
.woocommerce div.product.srk-product .woocommerce-tabs .panel th,
.woocommerce div.product.srk-product .woocommerce-tabs .panel td {
	border: 1px solid #3A3F45;
	padding: 10px 14px;
	text-align: left;
	font-size: 13.5px;
}
.woocommerce div.product.srk-product .woocommerce-tabs .panel th { color: #fff; font-weight: 700; }

/* --------------------------------------------------------------- responsive ---- */

@media (max-width: 900px) {
	.srk-product__main { flex-direction: column; gap: 26px; padding-block: 18px 40px; }
	.srk-product__media,
	.srk-product__summary { width: 100%; }
	.woocommerce div.product.srk-product .woocommerce-tabs ul.tabs { gap: 0 22px; }
}

@media (max-width: 620px) {
	.srk-trust { grid-template-columns: minmax(0, 1fr); }
	.woocommerce div.product.srk-product .srk-product__buy form.cart .quantity .qty,
	.woocommerce div.product.srk-product .srk-product__buy form.cart input.qty { width: 84px; }
	.woocommerce div.product.srk-product .srk-product__buy form.cart button.single_add_to_cart_button { min-width: 0; }
}

/* Star rating, which WooCommerce's stylesheet would otherwise own alone. */
.woocommerce div.product.srk-product .star-rating { color: var(--srk-yellow); }

/* The duty badge over the gallery, as the design has it. */
.srk-product__media { position: relative; }
.srk-product__flag {
	position: absolute;
	top: 0;
	left: 0;
	z-index: var(--srk-z-content);
	background: var(--srk-red);
	color: #fff;
	padding: 7px 13px;
	font-size: 9.5px;
}

/* The company rating, in the buy column. */
.srk-product__summary .srk-rating { margin: 4px 0 -6px; }

/* =========================================================================== */
/* Shortening the buy column                                                   */
/* --------------------------------------------------------------------------- */
/* Measured 17 Sep: the summary column ran 1447px against an 892px gallery, so  */
/* the last 555px sat beside nothing. Three blocks were stacked that had no     */
/* reason to be - the specification table, the reassurance row, and the free    */
/* delivery panel. Each is now two columns from 900px up, which is where the    */
/* column is wide enough (~700px) for two to read comfortably.                  */
/*                                                                             */
/* Below 900px every one of them falls back to a single column, because the     */
/* phone layout was already right and was not part of the brief.                */
/* =========================================================================== */

@media (min-width: 900px) {

	/* ---- the specification table, 2 x n instead of n x 1 ---- */

	/*
	 * A table cannot simply be told `grid` - its rows would be reparented into anonymous
	 * table boxes and the grid would be ignored. Every level has to be given a display of
	 * its own: block on the table, grid on the tbody, flex on the row. That is the same
	 * anonymous-table-box trap that ate the cart's Update button in August.
	 */
	/*
	 * Two columns, so four specifications read as two rows rather than four.
	 *
	 * `>` keeps this off the table inside the Additional information tab, which shares the
	 * class, is 760px wide, and was never the problem.
	 *
	 * A `<table>` cannot simply be told `grid` - its rows get reparented into anonymous table
	 * boxes and the grid is ignored. Every level needs its own display: block on the table,
	 * grid on the tbody, flex on the row. Same anonymous-table-box trap that ate the cart's
	 * Update button in August.
	 */
	.srk-product__summary > .srk-specs .srk-specs__table { display: block; }
	.srk-product__summary > .srk-specs tbody { display: grid; grid-template-columns: 1fr 1fr; }
	.srk-product__summary > .srk-specs tr {
		display: flex;
		align-items: baseline;
		gap: 8px;
		border-top: 1px solid var(--srk-line);
		border-bottom: 0;
		min-width: 0;
	}
	/* No rule above the first row of the grid, and a divider down the middle. */
	.srk-product__summary > .srk-specs tr:nth-child(-n+2) { border-top: 0; }
	.srk-product__summary > .srk-specs tr:nth-child(2n) { border-left: 1px solid var(--srk-line); }

	/*
	 * An odd number of specifications leaves the last row alone in column one and column two
	 * empty beside it - which is what read as a missing cell on 18 Sep, not as a layout. When
	 * the last row is the odd one out it takes the whole width instead, and there is no hole.
	 */
	.srk-product__summary > .srk-specs tr:nth-child(odd):last-child { grid-column: 1 / -1; }

	.srk-product__summary > .srk-specs th,
	.srk-product__summary > .srk-specs td { border-bottom: 0; padding: 10px 14px; min-width: 0; }
	.srk-product__summary > .srk-specs th { width: auto; flex: 0 0 auto; padding-right: 0; }
	.srk-product__summary > .srk-specs td { flex: 1 1 auto; }

	/* ---- badge beside the ticks ---- */

	.srk-product__reassure {
		display: grid;
		grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
		gap: 22px;
		align-items: center;
	}
	/* With no badge - Booster still printing its own - the ticks take the whole row back. */
	.srk-product__reassure > .srk-product__marks:only-child { grid-column: 1 / -1; }
	.srk-product__reassure .srk-trust { grid-template-columns: minmax(0, 1fr); gap: 9px; }
	.srk-product__reassure > .srk-product__marks:only-child .srk-trust { grid-template-columns: 1fr 1fr; }
}

.srk-product__reassure { margin-top: 22px; }
.srk-product__reassure .srk-trust { margin-top: 12px; }

/* ------------------------------------------------------- the price-beat badge ---- */

/*
 * Markup, not the 200px JPEG Booster injected. Same promise, a third of the height, a real
 * link to the policy, and nothing to go stale when the media library is next tidied.
 */
.srk-pbeat {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 2px solid var(--srk-red);
	background: var(--srk-white);
	text-decoration: none;
	color: var(--srk-ink);
}
.srk-pbeat:hover { background: #FFF6F5; }
.srk-pbeat__num {
	flex: 0 0 auto;
	font-size: 28px;
	line-height: 1;
	font-weight: 800;
	color: var(--srk-red-text);
	letter-spacing: -0.02em;
}
.srk-pbeat__lbl { display: block; min-width: 0; }
.srk-pbeat__lbl strong {
	display: block;
	font-size: 12.5px;
	line-height: 1.25;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.srk-pbeat__tc {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	line-height: 1.3;
	color: var(--srk-soft);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The figure is the thing being looked up, so it goes to the right edge and carries the
   weight - true whether the table is standing alone or paired with the upgrade panel. */
.srk-product__summary .srk-specs__table td { text-align: right; font-weight: 600; color: var(--srk-ink); }


/* ------------------------------------------------------- stock, on the page --- */

/*
 * WooCommerce paints the backorder line olive - `rgb(149, 142, 9)` on the paper ground,
 * which measures 2.97:1. It had never shown up in a contrast pass because until the tiny
 * homes went on backorder on 21 Sep, no product on this site was ever in that state. The
 * colour is WooCommerce's, set on `.woocommerce div.product .stock`, so it takes a heavier
 * selector than a single class to move - count the elements, not just the classes.
 *
 * Yellow ink rather than red: a backordered product is available, just not today, and red
 * is the colour this site uses for things that are wrong.
 */
.woocommerce div.product.srk-product .srk-product__buy p.stock,
.woocommerce div.product.srk-product p.stock.available-on-backorder {
	color: var(--srk-yellow-ink);
	font-weight: 600;
}
.woocommerce div.product.srk-product p.stock.out-of-stock {
	color: var(--srk-red-text);
	font-weight: 600;
}
.woocommerce div.product.srk-product p.stock.in-stock {
	color: var(--srk-soft);
	font-weight: 600;
}

/* -------------------------------------------------------------------------- */
/* The Pallet Racking System builder                                          */
/* -------------------------------------------------------------------------- */

/*
 * Five numbered steps in the buy column, replacing Composite Products on the eight Pallet
 * Racking System listings. See inc/pallet-builder.php.
 *
 * Deliberately not styled as a card on a card: the buy column is already a panel, so the
 * steps are separated by hairlines rather than boxed, which is what keeps five questions
 * from reading as five competing widgets in a ~340px column.
 */
.srk-pb { margin: 0 0 14px; }

.srk-pb__step {
	padding: 14px 0;
	border-top: 1px solid var(--srk-line);
}
.srk-pb__step:first-of-type { border-top: 0; padding-top: 0; }

.srk-pb__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	color: var(--srk-ink);
}

/* The step number, so the sequence is readable without counting labels. */
.srk-pb__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	background: var(--srk-ink);
	color: #fff;
	border-radius: 50%;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0;
}

.srk-pb__select,
.srk-pb__num-input {
	width: 100%;
	height: 46px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid var(--srk-line);
	border-radius: 0;
	font: inherit;
	font-size: 15px;
	color: var(--srk-ink);
}
.srk-pb__select:focus,
.srk-pb__num-input:focus {
	outline: 2px solid var(--srk-ink);
	outline-offset: -2px;
}

/* Levels and bays sit side by side: they are one question about size, asked twice. */
.srk-pb__step--pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.srk-pb__note {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--srk-muted);
}

.srk-pb__accs { list-style: none; margin: 10px 0 0; padding: 0; }

.srk-pb__acc {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px dotted var(--srk-line);
}
.srk-pb__acc:last-child { border-bottom: 0; }

.srk-pb__acc-name {
	flex: 1 1 auto;
	font-size: 14px;
	line-height: 1.35;
	cursor: pointer;
}
.srk-pb__acc-price {
	display: block;
	font-size: 13px;
	color: var(--srk-muted);
}
.srk-pb__acc-price .woocommerce-Price-amount { color: inherit; }

/* Narrow, because a quantity is never four digits and a full-width box invites one. */
.srk-pb__num-input--acc { width: 74px; flex: 0 0 74px; text-align: center; }

.srk-pb__summary {
	margin: 4px 0 14px;
	padding: 14px;
	background: var(--srk-paper);
	border: 1px solid var(--srk-line);
}
.srk-pb__summary-title { margin: 0 0 8px; color: var(--srk-ink); }

.srk-pb__lines { list-style: none; margin: 0; padding: 0; }
.srk-pb__lines li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	font-size: 14px;
}
.srk-pb__lines li span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

.srk-pb__total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--srk-line);
	font-size: 15px;
}
.srk-pb__total strong { font-size: 19px; font-variant-numeric: tabular-nums; }

/* Matched to the single add-to-cart button, because it does that job here. */
.srk-pb__add {
	display: block;
	width: 100%;
	height: 52px;
	padding: 0 26px;
	background: var(--srk-ink);
	color: #fff;
	border: 0;
	border-radius: 0;
	font: inherit;
	font-size: 11.5px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.srk-pb__add:hover { background: var(--srk-red); }

@media (max-width: 480px) {
	.srk-pb__step--pair { grid-template-columns: 1fr; gap: 12px; }
}

/* -------------------------------------------------------------------------- */
/* Bulk deal table                                                            */
/* -------------------------------------------------------------------------- */

/*
 * Replaces Advanced Dynamic Pricing's `.wdp_bulk_table_content`, which the theme used to
 * dress. Same three columns and the same place in the buy column - but rendered with the page
 * rather than fetched over AJAX afterwards, so it no longer shifts the column when it lands.
 */
.srk-bulk { margin: 0 0 16px; }
.srk-bulk__title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--srk-ink);
}
.srk-bulk__table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--srk-line);
}
.srk-bulk__table th,
.srk-bulk__table td {
	padding: 9px 12px;
	border-bottom: 1px solid var(--srk-line);
	font-size: 13.5px;
	text-align: left;
}
.srk-bulk__table tr:last-child th,
.srk-bulk__table tr:last-child td { border-bottom: 0; }
.srk-bulk__table th { background: #FAF8F4; font-weight: 700; color: var(--srk-ink); }
.srk-bulk__table td { color: var(--srk-soft); font-variant-numeric: tabular-nums; }
/* The bands that actually save money carry the price in the brand red, as they did before. */
.srk-bulk__row--on td:last-child { color: var(--srk-red-text); font-weight: 700; }
.srk-bulk__note {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--srk-muted);
}