/*
 * V5 product detail page.
 * Loaded only on products with the V5 layout turned on, after style.css and
 * responsive-fixes.css.
 *
 * Full-width stacked bands rather than the content column and sidebar the
 * current product template uses. Type and button shapes follow the homepage
 * redesign: Erbaum for headings, brand gold on white.
 */

/*
 * Built on the theme's own tokens rather than a parallel palette.
 *
 * --color-primary and friends come from style.css. Gold on white is only
 * 3.6:1, which the theme documents and works around by pairing gold with dark
 * text; --color-primary-dark is 6.2:1 on white and is what carries any gold
 * text here.
 *
 * Corners are square. The 2026 redesign squares every box and reserves 50%
 * for circles, so this page does the same.
 */

/*
 * Oswald, the display face the V7 wireframe sets on headings, the tab labels
 * and the key-spec values. Self-hosted to match how the theme carries Erbaum
 * and Helvetica Neue rather than adding a third-party request to the highest
 * value pages in the site.
 *
 * One file per subset: Google serves Oswald as a variable font, so 200-700 all
 * come out of the same woff2 and the weight axis is declared on the face.
 */
@font-face {
	font-family: "Oswald";
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url("../fonts/Oswald/Oswald-Variable-latin.woff2") format("woff2");
	unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}

/* French and Spanish sit in latin-ext; the site runs all three languages. */
@font-face {
	font-family: "Oswald";
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url("../fonts/Oswald/Oswald-Variable-latin-ext.woff2") format("woff2");
	unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff;
}

:root {
	/*
	 * The wireframe's display face. Held as a token so the page has one place
	 * to swap if the redesign settles on something else, and so the rules below
	 * read as "display type" rather than repeating a font stack.
	 */
	--pdp-display: "Erbaum", sans-serif;
	--pdp-ink: #262524;         /* the theme's body and heading colour */
	/*
	 * Body copy was a softer tone than the headings. Collapsed onto the theme's
	 * one text colour per review, so the description, the highlights and the
	 * tab labels all read as the same text. Kept as its own token rather than
	 * search-and-replaced, so a second tone can come back in one line.
	 */
	--pdp-ink-2: #262524;
	--pdp-gray: #6b6661; /* #156: was #7c7770, 4.4:1 on white */
	--pdp-line: #d5d0c8;
	--pdp-muted: #f5f3ef;

	/*
	 * --pdp-radius and its sm / lg / pill steps are defined in :root in
	 * style.css, not here. The header uses them too, and this file only loads
	 * on products using the V5 layout. The rules below are consumers.
	 */

	--pdp-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);  /* the theme's one shadow */

	/* The tab strip and panel: one surface, sitting on the band. */
	--pdp-tab-surface: #fff;

	/*
	 * Content badge colours, one per documentation_tag.
	 *
	 * Navy, green and plum are not in the theme palette and are here on purpose:
	 * the badge is the only thing telling a video from a how-to from a reference
	 * at a glance, and four tints of gold would not. Each is a tinted background
	 * with its own foreground, contrast checked against the tint rather than
	 * against white.
	 *
	 * A tag with no colour of its own falls back to the neutral pair at the end,
	 * so a tag added in the admin renders correctly and only needs a rule here
	 * when it wants a colour.
	 */
	--pdp-badge-videos-bg: rgba(192, 146, 46, 0.14);
	--pdp-badge-videos-fg: #7e5a1b;
	--pdp-badge-how-to-guide-bg: rgba(31, 56, 100, 0.1);
	--pdp-badge-how-to-guide-fg: #1f3864;
	--pdp-badge-reference-bg: rgba(106, 61, 110, 0.12);
	--pdp-badge-reference-fg: #6a3d6e;
	--pdp-badge-customer-stories-bg: rgba(34, 120, 72, 0.12);
	--pdp-badge-customer-stories-fg: #1d6640;
	--pdp-badge-default-bg: rgba(0, 0, 0, 0.06);
	--pdp-badge-default-fg: #3a3a3a;
}

/*
 * The theme sets `text-align: center` on body, and the old product template
 * relies on .content-inner to reset it. The V5 layout does not use that
 * wrapper, so it resets here instead. Without this every block in the page
 * inherits centred text.
 */
.pdp-v5 {
	text-align: left;
}

/*
 * The same measure as .topbar-inner, .header-inner, .content-inner and
 * .footer-inner in style.css, so this page lines up with the header, the nav
 * and the footer rather than sitting on its own grid.
 *
 * Below 1025px style.css gives .topbar-inner `width: auto` so the logo and the
 * hamburger get the full width. That override is the header's alone; page
 * content stays at 85%, which is what .content-inner does and what this
 * follows. So the two measures match on desktop and diverge on mobile by
 * design, not by accident.
 */
.pdp-wrap {
	width: 85%;
	max-width: 1300px;
	margin: 0 auto;
	text-align: left;
	position: relative;
}

.pdp-hero-band,
.pdp-body-band,
.pdp-content-band,
.pdp-docs-band,
.pdp-wtb-band {
	padding: 36px 0;
}

/*
 * V7 runs white to the foot of the tabbed section and tints everything below
 * it, rather than alternating. What separates the three lower bands is not the
 * background but the white cards on them: document tiles, content tiles and
 * distributor tiles all read as objects sitting on one surface. Alternating
 * gave each band an edge and left the cards on the white bands with nothing to
 * sit against.
 */
.pdp-content-band {
	background: var(--pdp-muted);
	padding: 40px 0;
}

/*
 * Where to buy is a photo banner on the tint since #99. Figma keeps 80px of
 * tint above and below it on desktop and 40px at 360, where a taller gap would
 * push the banner off a small screen.
 */
.pdp-wtb-band {
	background: var(--pdp-muted);
	padding: 80px 0;
}

@media (max-width: 560px) {
	.pdp-wtb-band {
		padding: 40px 0;
	}
}

.pdp-docs-band {
	background: var(--pdp-muted);
	padding: 40px 0;
}

/*
 * css/product-documents.css gives the section a 48px margin because it also
 * renders on the old product template, where nothing else spaces it. Inside a
 * band that already pads 80px top and bottom that stacked up to 256px of empty
 * tint between the documents and the content library.
 */
.pdp-docs-band .treg-pdp-docs {
	margin: 0;
}

/* Air between the hero and the tabbed band below it. */
.pdp-hero-band {
	padding-bottom: 80px;
}

/*
 * The tabbed section is a dark band with the tabs and their content on cream
 * inside it, so the component reads as one object against the page. The utility
 * tiles and the part numbers sit below the tabs in the same band, each in its
 * own light box.
 */
/*
 * White, per V7, which keeps the hero and the tabbed section as one field and
 * starts the tint at the documents band. The watermark stays: it is drawn white
 * and inverted, so it reads on this background as well as on the tint.
 */
.pdp-body-band {
	position: relative;
	overflow: hidden;
	background: #fff;
	padding: 40px 0;
}

/*
 * The same hex-grid watermark the homepage uses on its dark band, from
 * css/homepage-v2.css. Copied rather than shared because that file only loads
 * on the front page; the geometry has to be kept in step with it.
 *
 * The artwork is white at 20% opacity, drawn for a dark background, so it is
 * inverted here to read on a light one. Alpha survives the filter, so only the
 * shapes flip; the opacity on top keeps it a watermark rather than a pattern.
 */
.pdp-body-band::before {
	content: "";
	position: absolute;
	left: -923px;
	bottom: -553px;
	width: 1678px;
	height: 1198px;
	background-image: url("../images/hp9-hex-grid.svg");
	background-repeat: repeat;
	background-size: 235.8px 524.2px;
	transform: rotate(38.45deg);
	filter: invert(1);
	opacity: 0.35;
	pointer-events: none;
}

/* Above the watermark, which is absolutely positioned behind it. */
.pdp-body-band .pdp-wrap {
	z-index: 1;
}

/* ------------------------------------------------------------- Breadcrumb */

.pdp-breadcrumb {
	margin-bottom: 18px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--pdp-gray);
}

/*
 * Yoast prints the whole trail inside a single wrapper span, so the flex row
 * goes on that wrapper rather than on the nav: the nav has exactly one child
 * and would have nothing to space.
 *
 * The separators are bare text nodes between the crumb spans. Flex turns each
 * run of text into an anonymous item, so `gap` spaces them like the crumbs do
 * and the separator needs no markup of its own.
 */
.pdp-breadcrumb > span {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/*
 * Links carry the same grey as the rest of the trail until hover. Underlining
 * every crumb turned the row into a line of blue-ish rules above the H1, which
 * is the thing the wireframe is quietest about.
 */
.pdp-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.pdp-breadcrumb a:hover,
.pdp-breadcrumb a:focus-visible {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

/* The page you are on is the one crumb that is not a link, so it carries the
   weight instead of a colour change. */
.pdp-breadcrumb .breadcrumb_last {
	color: var(--pdp-ink);
	font-weight: 500;
}

/* ------------------------------------------------------------------- Hero */

.pdp-hero {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px;
	align-items: start;
}

/*
 * A grid track is min-width: auto by default, so a child that reports a wider
 * intrinsic size pushes the track past the container. Fotorama writes an inline
 * width onto the gallery, which did exactly that at phone width: a 332px column
 * held a 394px stage and the whole page scrolled sideways. min-width: 0 lets
 * the track shrink, so Fotorama measures the column rather than the other way
 * round.
 */
.pdp-hero__media,
.pdp-hero__detail {
	min-width: 0;
}

/*
 * Oswald at the wireframe's clamp.
 *
 * style.css puts `text-transform: uppercase` on every h1 in the theme, which
 * is what was setting the product name in caps. Oswald is a condensed face and
 * these titles run long -- "BTB Semi-Automatic Air-Cooled MIG Guns" -- so caps
 * cost a line and read as shouting next to the rest of the band. Reset here
 * rather than in style.css so the other templates keep the treatment they were
 * designed with.
 */
.pdp-hero__title {
	margin: 0;
	font-family: var(--pdp-display);
	font-size: clamp(26px, 3.4vw, 30px);
	font-weight: 600;
	letter-spacing: 0.2px;
	line-height: 1.1;
	text-transform: uppercase;
}

.pdp-hero__subtext {
	margin: 10px 0 0;
	max-width: 52ch;
	font-size: 16px;
	color: var(--pdp-ink-2);
}

.pdp-gallery {
	padding: 0;
	background: none;
	border: 0;
}

/*
 * The stage takes the shape of whichever slide is showing, up to this height.
 * Past it a tall slide letterboxes instead of pushing the rest of the page off
 * screen: a 2:3 shot in a 693px column would otherwise make a 1039px stage.
 * js/product-gallery.js reads this value.
 */
.pdp-gallery .treg-fotorama {
	--pdp-gallery-max-height: 500px;
}

/* Fotorama centres its thumbnail strip; the design aligns it under the image. */
.pdp-gallery .fotorama__nav {
	text-align: left;
}

/*
 * Thumbnails in a column left of the photo (#133). Desktop only: below 900px
 * the hero stacks, the column is hidden and Fotorama's strip under the photo
 * returns. The column replaces that strip on desktop, which is what brings
 * the tabs up.
 */
.pdp-gallery__thumbs {
	display: none;
}

@media (min-width: 901px) {

	.pdp-gallery--has-thumbs {
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 16px;
		align-items: start;
	}

	.pdp-gallery--has-thumbs .fotorama__nav-wrap {
		display: none;
	}

	.pdp-gallery__thumbs {
		display: flex;
		flex-direction: column;
		gap: 10px;
		max-height: var(--pdp-gallery-max-height, 500px);
		margin: 0;
		padding: 0;
		overflow-y: auto;
		list-style: none;
		scrollbar-width: thin;
	}

	/* style.css indents every list item for its bullet. */
	.pdp-gallery__thumbs li {
		margin: 0;
		padding: 0;
	}

	.pdp-gallery__thumb {
		position: relative;
		display: block;
		width: 72px;
		height: 72px;
		margin: 0;
		padding: 4px;
		border: 1px solid var(--pdp-line);
		border-radius: var(--pdp-radius-sm);
		background: #fff;
		cursor: pointer;
	}

	.pdp-gallery__thumb img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* As the part chips: a 1px gold line and a soft shadow. The global
	   button:hover fill is put back to white, or it shows through the padding
	   as a thick gold frame (#168). */
	.pdp-gallery__thumb:hover,
	.pdp-gallery__thumb:focus-visible {
		border-color: var(--color-primary);
		background: #fff;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
	}

	/* 1px, the same weight as the other thumbnails' line: at 2px the client
	   found the bronze frame too heavy (#168). */
	.pdp-gallery__thumb.is-active {
		border-color: var(--color-primary);
	}

	/* A play mark on the video's thumbnail, as Fotorama's own strip has. */
	.pdp-gallery__thumb--video::after {
		content: "";
		position: absolute;
		inset: 50% auto auto 50%;
		width: 24px;
		height: 24px;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / 16px;
	}
}

/* ------------------------------------------------- Gallery controls (icons) */

/*
 * Fotorama draws its arrows, play and close controls from one PNG sprite on a
 * CDN. Those are replaced here with the project's own SVGs, applied as masks so
 * a single background-color drives the icon colour and its hover state.
 *
 * The buttons that sit over imagery (play, fullscreen, close) use the same
 * treatment as the homepage slider's autoplay toggle in css/homepage-v2.css:
 * a square, rgba(0, 0, 0, 0.45), white icon, gold on hover. The arrows sit in
 * the margins of a light product shot, so they need no plate behind them.
 */
.pdp-gallery .fotorama__arr,
.pdp-gallery .fotorama__video-play,
.pdp-gallery .fotorama__video-close {
	background-image: none;
}

.pdp-gallery .fotorama__arr::after,
.pdp-gallery .fotorama__video-play::after,
.pdp-gallery .fotorama__video-close::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Arrows */

/*
 * No plate behind the arrows: B&T product shots are on white, and a dark chevron
 * reads cleanly there. The halo is insurance for a darker lifestyle shot, where
 * a bare dark chevron would disappear. It is invisible on white.
 */
.pdp-gallery .fotorama__arr {
	width: 44px;
	height: 44px;
	margin-top: -22px;
	color: var(--pdp-ink);
	filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9));
	transition: color 0.15s;
}

.pdp-gallery .fotorama__arr:hover {
	color: var(--color-primary-dark);
}

.pdp-gallery .fotorama__arr--disabled {
	opacity: 0.25;
}

.pdp-gallery .fotorama__arr::after {
	width: 18px;
	height: 18px;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.pdp-gallery .fotorama__arr--prev::after {
	-webkit-mask-image: url("../images/pdp/chevron-left-custom.svg");
	mask-image: url("../images/pdp/chevron-left-custom.svg");
}

.pdp-gallery .fotorama__arr--next::after {
	-webkit-mask-image: url("../images/pdp/chevron-right-custom.svg");
	mask-image: url("../images/pdp/chevron-right-custom.svg");
}

/* Play, over the video thumbnail */

.pdp-gallery .fotorama__video-play {
	width: 64px;
	height: 64px;
	margin-left: -32px;
	margin-top: -32px;
	background-color: rgba(0, 0, 0, 0.45);
	color: #fff;
	transition: background-color 0.25s, color 0.25s;
}

.pdp-gallery .fotorama__stage__frame:hover .fotorama__video-play {
	background-color: rgba(0, 0, 0, 0.7);
	color: var(--color-primary);
}

.pdp-gallery .fotorama__video-play::after {
	width: 30px;
	height: 30px;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: url("../images/pdp/play_arrow.svg");
	mask-image: url("../images/pdp/play_arrow.svg");
}

/* The smaller play badge Fotorama puts on video thumbnails. */
.pdp-gallery .fotorama__nav__frame .fotorama__video-play {
	width: 34px;
	height: 34px;
	margin-left: -17px;
	margin-top: -17px;
}

.pdp-gallery .fotorama__nav__frame .fotorama__video-play::after {
	width: 17px;
	height: 17px;
}

/* Close, shown over the player once a video is open */

.pdp-gallery .fotorama__video-close {
	width: 40px;
	height: 40px;
	background-color: rgba(0, 0, 0, 0.45);
	color: #fff;
	transition: background-color 0.25s, color 0.25s;
}

.pdp-gallery .fotorama__video-close:hover {
	background-color: rgba(0, 0, 0, 0.7);
	color: var(--color-primary);
}

.pdp-gallery .fotorama__video-close::after {
	width: 15px;
	height: 15px;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: url("../images/pdp/close-btn.svg");
	mask-image: url("../images/pdp/close-btn.svg");
}

/* -------------------------------------------------------- Key spec strip */

/*
 * Dividers between the cells and no frame around the outside, so the strip
 * reads as part of the column rather than a boxed table.
 *
 * The lines are drawn with cell borders rather than by showing a background
 * through one-pixel grid gaps: with a part-filled last row, the gap technique
 * paints the empty tracks as a solid grey block.
 */
/*
 * V7 frames the strip and rounds it. The dividers stay drawn with cell borders
 * rather than as grid gaps showing a background through: with a part-filled
 * last row the gap technique paints the empty tracks as a solid grey block.
 * The nth-child rules below strip the outer edges, so no cell border doubles up
 * against the frame.
 */
.pdp-kspec {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/*
	 * Every cell the same height, not just every cell in a row.
	 *
	 * Grid already stretches items to their own row, so a row was only as tall
	 * as its tallest value: the row holding "60% duty cycle, mixed gases" wraps
	 * to two lines and came out 12px taller than the one above it, which reads
	 * as a misaligned strip rather than a grid. 1fr on the implicit rows makes
	 * them all match the tallest, and because the grid has no height of its own
	 * that resolves to the content rather than stretching to fill anything.
	 */
	grid-auto-rows: 1fr;
	margin: 18px 0 4px;
	border: 1px solid var(--pdp-line);
	border-radius: var(--pdp-radius-lg);
	overflow: hidden;
}

/*
 * Centred against the icon, per the wireframe. These values are one or two
 * words in a 64px cell, so top alignment left the text hanging above the glyph
 * on every tile that did not wrap.
 */
.pdp-kspec__item {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 64px;
	padding: 6px 10px;
	border-right: 1px solid var(--pdp-line);
	border-bottom: 1px solid var(--pdp-line);
}

/*
 * No line down the right edge, and none under the last row, where the frame
 * draws it instead.
 *
 * Both counts have to match the number of columns. Get that wrong and the
 * last-row rule reaches up into the row above and takes the bottom border off
 * tiles that still have a row under them, which is what a four-spec strip did
 * while it was laid out in threes.
 */
.pdp-kspec__item:nth-child(3n) {
	border-right: 0;
}

.pdp-kspec__item:nth-last-child(-n + 3) {
	border-bottom: 0;
}

/* Two across. The counts above are re-done against two columns. */
.pdp-kspec--2up {
	grid-template-columns: repeat(2, 1fr);
}

.pdp-kspec--2up .pdp-kspec__item:nth-child(3n),
.pdp-kspec--2up .pdp-kspec__item:nth-last-child(-n + 3) {
	border-right: 1px solid var(--pdp-line);
	border-bottom: 1px solid var(--pdp-line);
}

.pdp-kspec--2up .pdp-kspec__item:nth-child(2n) {
	border-right: 0;
}

.pdp-kspec--2up .pdp-kspec__item:nth-last-child(-n + 2) {
	border-bottom: 0;
}

/*
 * Inside a frame every cell carries the same padding. The old rule pulled the
 * first cell of each row flush left so it lined up with the heading above an
 * unframed strip; against a border that reads as a cell missing its padding.
 */

/* The nudge that paired with top alignment is gone with it. */
.pdp-kspec__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	color: rgb(168, 125, 34);
}

/*
 * Oswald 600, the one treatment every tile gets. The wireframe's own note on
 * this strip is that mixing faces and sizes across the tiles read as
 * inconsistent, so nothing here is privileged over anything else.
 */
.pdp-kspec__value {
	font-family: var(--pdp-display);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--pdp-ink);
	/* No text-box trim (#173): Erbaum reports a cap height of about 5px at
	   14px against a real 10px, so trimming to it pushed the caps ~2.6px high.
	   In a plain 1.25 line box the caps are centred to within 0.1px. */
}

/* ------------------------------------------------------------ Promo band */

/*
 * One item per row: badge, message, link. No border, so the band reads as a
 * tinted panel rather than another box on a page that already has the spec
 * strip and the action column.
 */
.pdp-promo {
	display: grid;
	justify-items: start;
	gap: 8px;
	margin-top: 16px;
	padding: 24px 16px 20px;
	border: 0;
	border-radius: var(--pdp-radius-sm);
	background: #f4f4f4;
	color: var(--pdp-ink);
}

/* Same label as the alert bar's Coming soon flag (#117, #137). */
.pdp-promo__flag {
	padding: 5px 10px;
	background: var(--color-button, #956a1b);
	color: var(--color-button-text, #fff);
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;

	/* #217: 14px from the flag to the text, not the band's 8px gap. */
	margin-bottom: 6px;
}

.pdp-promo__text {
	font-size: 14.5px;
}

/* An ordinary inline link: the site's link colour, underlined, body font. */
.pdp-promo__go {
	/* #156: the promo band is #f4f4f4, where the link gold is 4.38:1. */
	color: var(--color-link-hover, #7e5a1b);
	font-family: var(--font-body);
	font-size: 14.5px;
	font-weight: 400;
	text-decoration: underline;
}

.pdp-promo__go:hover,
.pdp-promo__go:focus-visible {
	color: var(--color-primary-hover);
	text-decoration: underline;
}

/* ------------------------------------------------------------ Highlights */

/*
 * Inside the action panel now, under the buttons. The top margin is the gap
 * between them and the last button, not a gap between two blocks.
 */
.pdp-highlights {
	margin: 15px 0 0;
	padding: 0;
	list-style: none;
}

.pdp-highlights li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 9px;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--pdp-ink-2);
}

.pdp-highlights li:last-child {
	margin-bottom: 0;
}

.pdp-highlights__icon {
	flex: 0 0 auto;
	display: flex;
	margin-top: 2px;
	color: var(--color-primary-dark);
}

/* ---------------------------------------------------------- Action column */

/* Same tinted panel as the promo band, and no frame. */
/* A white card with an edge and the theme's shadow, as V7 draws it. */
.pdp-actions {
	margin-top: 18px;
	padding: 14px 16px;
	border: 1px solid var(--pdp-line);
	border-radius: var(--pdp-radius);
	background: #fff;
	box-shadow: var(--pdp-shadow);
}

/*
 * Sentence case and rounded, per V7. The wireframe's own note records this as
 * a client instruction ("sentence case, matching the two buttons beside it"),
 * and these labels are sentences rather than labels: "Build your part number"
 * set in caps reads as shouting an instruction.
 *
 * Scoped to this page, so the theme's button is unchanged everywhere else.
 */
.pdp-v5 .button,
.pdp-v5 .btn-outline {
	border-radius: var(--btn-radius, 0);
	text-transform: var(--btn-case, none);
	letter-spacing: var(--btn-tracking, normal);
}

/*
 * The three action buttons are one set, so they are declared as one set.
 *
 * They arrive from three different theme classes (.button, .button-secondary,
 * .btn-outline--primary) which disagree on face, size, padding and weight, so
 * a stack of three read as three unrelated controls. V7 draws them as one
 * component in three colours: same body face, same size, same box, label left
 * against the edge rather than floating in the middle of a full-width button.
 *
 * justify-content is what does the aligning. These are flex containers, so
 * text-align has nothing to act on; it is set too for the text that wraps onto
 * a second line.
 */
.pdp-actions__ctas .button,
.pdp-actions__ctas .btn-outline {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5em;
	min-height: 0;
	padding: var(--btn-pad, 13px 24px);
	border: 1px solid transparent;
	font-family: var(--btn-font, var(--font-body));
	font-size: var(--btn-size, 15px);
	font-weight: var(--btn-weight, 600);
	line-height: var(--btn-line, 1.2);
	text-align: left;
}

/* V7 fills this one with gold and sets it in white: the site's button gold (#117). */
.pdp-actions__ctas .button {
	background: var(--color-button, #956a1b);
	border-color: var(--color-button, #956a1b);
	color: var(--color-button-text, #fff);
}

.pdp-actions__ctas .button:hover,
.pdp-actions__ctas .button:focus-visible {
	background: var(--color-button-hover, #7e5a1b);
	border-color: var(--color-button-hover, #7e5a1b);
	color: var(--color-button-text, #fff);
}

/* The dark button: the page's ink, not the theme's blue-grey secondary. */
.pdp-actions__ctas .button-secondary {
	background: var(--pdp-ink);
	border-color: var(--pdp-ink);
	color: #fff;
}

.pdp-actions__ctas .button-secondary:hover,
.pdp-actions__ctas .button-secondary:focus-visible {
	background: #000;
	border-color: #000;
	color: #fff;
}

/* The ghost button: an edge and the body colour, nothing else. */
.pdp-v5 .pdp-actions__ctas .btn-outline--primary {
	background: transparent;
	border-color: var(--pdp-line);
	color: var(--pdp-ink);
}

.pdp-v5 .pdp-actions__ctas .btn-outline--primary:hover,
.pdp-v5 .pdp-actions__ctas .btn-outline--primary:focus-visible {
	background: var(--pdp-muted);
	border-color: var(--pdp-ink);
	color: var(--pdp-ink);
}

.pdp-actions__ctas {
	display: grid;
	gap: 8px;
}

/*
 * The stacking the action column needs. The look of these three is set in one
 * place further down, because V7 draws them as one component rather than as
 * three of the theme's buttons that happen to sit together.
 */
.pdp-actions .button,
.pdp-actions .btn-outline {
	width: 100%;
	margin: 0;
}

/*
 * .btn-outline defaults to white text because the theme designed it for dark
 * backgrounds; .btn-outline--primary swaps in brand gold, which is 3.6:1 on
 * white and fails AA at this size. --color-primary-dark is the same hue at
 * 6.2:1, so the button reads the same and passes. Scoped to this page rather
 * than changed in style.css, which would touch every existing use of it.
 */
.pdp-v5 .btn-outline--primary {
	color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
}

.pdp-v5 .btn-outline--primary:hover,
.pdp-v5 .btn-outline--primary:focus-visible {
	background-color: var(--color-primary-dark);
	color: #fff;
}

/* --------------------------------------------------------- Key downloads */

/* Clear air between the buttons and the downloads list, now the rule is gone. */
.pdp-downloads {
	margin-top: 30px;
}

/*
 * It labels the list below it, so it is a heading element at a heading size
 * rather than an 11px caption. 16px is the theme's h5/h6 step, which sits a
 * clear level above the 14px rows without shouting like the 24px h2.
 */
.pdp-downloads__label {
	margin: 0 0 8px;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pdp-ink-2);
}

.pdp-downloads__item,
.pdp-downloads__item:visited {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	padding: 7px 0;
	color: var(--pdp-ink);
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
}

.pdp-downloads__item:hover,
.pdp-downloads__item:focus-visible {
	color: var(--color-primary-dark);
	text-decoration: none;
}

.pdp-downloads__icon {
	flex: 0 0 auto;
	display: flex;
	color: var(--color-primary-dark);
}

.pdp-downloads__meta {
	margin-left: auto;
	font-size: 12px;
	font-weight: 400;
	color: var(--pdp-ink-2);
}

.pdp-downloads__item:hover .pdp-downloads__meta {
	color: var(--color-primary-dark);
}

/* The same inline link as the promo band's call to action. */
.pdp-downloads__all {
	display: inline-block;
	min-height: 34px;
	margin-top: 9px;
	color: var(--color-primary);
	font-family: var(--font-body);
	font-size: 14.5px;
	font-weight: 400;
	text-decoration: underline;
}

.pdp-downloads__all:hover,
.pdp-downloads__all:focus-visible {
	color: var(--color-primary-hover);
	text-decoration: underline;
}


/* ------------------------------------------------------------ Responsive */

@media (max-width: 900px) {
	.pdp-hero {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media (max-width: 560px) {
	/*
	 * Two columns, so the divider rules have to be re-counted: the 3n rules
	 * above would strip the right border from what is now the left column.
	 */
	.pdp-kspec {
		grid-template-columns: repeat(2, 1fr);
	}

	.pdp-kspec__item:nth-child(3n),
	.pdp-kspec__item:nth-last-child(-n + 3) {
		border-right: 1px solid var(--pdp-line);
		border-bottom: 1px solid var(--pdp-line);
	}

	.pdp-kspec__item:nth-child(2n) {
		border-right: 0;
	}

	.pdp-kspec__item:nth-last-child(-n + 2) {
		border-bottom: 0;
	}

	/*
	 * An odd count cannot fill two columns, so it gets one. Full width per
	 * tile is no hardship on a phone, and it keeps every row complete.
	 *
	 * After the two-column rules above, which it overrides at the same
	 * specificity.
	 */
	.pdp-kspec--1up-sm {
		grid-template-columns: 1fr;
	}

	.pdp-kspec--1up-sm .pdp-kspec__item {
		border-right: 0;
		border-bottom: 1px solid var(--pdp-line);
	}

	.pdp-kspec--1up-sm .pdp-kspec__item:last-child {
		border-bottom: 0;
	}
}

/* ============================================================ Tabbed section */

/* No frame: the band's own background is the panel. */
.pdp-tabs {
	background: none;
	border: 0;
	padding: 0;
	margin-bottom: 40px;

	/*
	 * Clearance for the sticky header when something scrolls to this section
	 * — a part number chip opening the Configurator tab, or a link into a tab
	 * from off the page. The header is two stacked sticky bars: 88px of
	 * topbar with the 51px nav pinned at 80, so the stack ends at 131, and
	 * the phone breakpoint shortens the first and lengthens the second to end
	 * at 127. The larger of the two plus a little air covers both.
	 */
	scroll-margin-top: 142px;
}

/*
 * Same reasoning as the documents section: `[hidden]` lives in the user-agent
 * stylesheet, so any author-level display rule outranks it.
 */
.pdp-tabs [hidden] {
	display: none !important;
}

/*
 * Serj's tab bar (#76, Mel approved Oct 2): one flush white bar of segments
 * split by hairlines, the selected one filled with the dark ink, the rest in
 * gold text, sentence case. It replaces V7's tinted rail of separate buttons,
 * which the client worried did not read as tabs. Gold text is the button gold
 * (4.8:1 on white); the brand gold is too light for text.
 *
 * One row at every width. Where the tabs don't fit (phones, or a product with
 * extra tabs) the row scrolls sideways and the ▸ hint shows there is more; the
 * script scrolls the selected tab into view on a deep link.
 */
.pdp-tabs__bar {
	position: relative;
}

.pdp-tabs__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	padding: 0;
	overflow-x: auto;
	border: 1px solid var(--pdp-line);
	border-radius: var(--pdp-radius-lg);
	background: #fff;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.pdp-tabs__list::-webkit-scrollbar {
	display: none;
}

.pdp-tabs__tab {
	appearance: none;
	flex: 1 0 auto;
	white-space: nowrap;
	/* style.css puts margin-left on any button following another button. */
	margin: 0;
	min-height: 54px;
	padding: 14px 24px;
	border: 0;
	border-right: 1px solid var(--pdp-line);
	border-radius: 0;
	background: #fff;
	color: var(--color-button, #956a1b);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	transition: color 0.15s, background-color 0.15s;
}

.pdp-tabs__tab:last-child {
	border-right: 0;
}

.pdp-tabs__tab:hover {
	background: var(--pdp-muted);
	color: var(--pdp-ink);
}

.pdp-tabs__tab.is-active {
	background: var(--pdp-ink);
	color: #fff;
}

/* The ▸ at the end of the row, over a fade so it never sits on a label. */
.pdp-tabs__more {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 44px;
	padding-right: 10px;
	border-radius: 0 var(--pdp-radius-lg) var(--pdp-radius-lg) 0;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 45%);
	cursor: pointer;
}

.pdp-tabs__more::before {
	content: "";
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 7px solid var(--pdp-ink);
}

.pdp-tabs__tab:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -4px;
}

/*
 * No surface: V7 runs the panel straight onto the band, and the tab rail above
 * is the only framed thing in the component. Content lines up with the wrap
 * rather than being inset, so the copy sits under the tabs it belongs to.
 */
.pdp-tabs__panel {
	padding: 28px 0 0;
	background: none;
}

/*
 * With JavaScript running the tab button already names the panel, so the
 * heading would read twice. Without it the headings are the only thing
 * separating one panel from the next, so they are only hidden once the
 * enhancement has actually applied.
 */
.pdp-tabs.is-enhanced .pdp-tabs__heading {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pdp-tabs__body > *:first-child {
	margin-top: 0;
}

/*
 * Tab copy is migrated editor content, so its headings are whatever the writer
 * used. V7 sets all display type in Oswald and none of it in caps; style.css
 * puts `text-transform: uppercase` on every h1 and h2 in the theme, which is
 * the only reason these read as shouted. The source text is already sentence
 * case, so lifting the transform is all it takes.
 *
 * The panel's own heading is hidden once the tabs enhance, so an editor h2 is
 * the top level inside a panel and takes V7's 22px panel-heading size.
 *
 * Back in caps since Oct 7: Kaitlyn asked for headlines in all caps (#138).
 */
.pdp-tabs__body h2,
.pdp-tabs__body h3,
.pdp-tabs__body h4 {
	font-family: var(--pdp-display);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.2px;
	text-transform: uppercase;
}

.pdp-tabs__body h2 {
	font-size: 22px;
}

.pdp-tabs__body h3 {
	font-size: 17px;
}

.pdp-tabs__body h4 {
	font-size: 15px;
}

/* V7's .sec-sub: the display face at 17px, sentence case. */
.pdp-tabs__subhead,
.pdp-tab__subhead {
	margin: 26px 0 10px;
	font-family: var(--pdp-display);
	font-size: 17px;
	font-weight: 600;
	text-transform: none;
}

.pdp-tab__intro {
	max-width: 66ch;
}

.pdp-tab__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0px;
}

.pdp-tab__ctas .button,
.pdp-tab__ctas .btn-outline {
	flex: 0 0 auto;

	/* Sentence case like every other button now (#117); was forced caps. */
}

/* ------------------------------------------------------------ Spec tables */

/*
 * V7 rules these horizontally and drops the cell grid and the tinted label
 * column. A boxed grid draws twelve lines around four facts; a row rule under
 * each one does the same work and lets the values line up as a column of text.
 */
.pdp-spec-table,
.pdp-tab__table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.pdp-tab__table table {
	max-width: 100%;
}

.pdp-spec-table th,
.pdp-spec-table td,
.pdp-tab__table th,
.pdp-tab__table td {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--pdp-line);
	text-align: left;
	vertical-align: top;
}

/*
 * .pdp-spec-table is a two-column key/value table, so its th is a row label:
 * grey and lighter than its value, which is the thing being read.
 */
.pdp-spec-table th {
	width: 38%;
	background: none;
	color: var(--pdp-gray);
	font-weight: 600;
}

/*
 * A th inside tab copy is a column header instead, so it gets V7's column-head
 * treatment: small, spaced, upper case, over a heavier rule.
 */
.pdp-tab__table th {
	width: auto;
	background: none;
	border-bottom: 2px solid var(--pdp-line);
	padding: 10px 12px;
	font-family: var(--pdp-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--pdp-gray);
}

/*
 * Wide tables scroll inside their own box rather than pushing the page past the
 * edge of a phone (#130). Every table in a tab gets the box from
 * treg_pdp_wrap_tables(); the extra classes are set by product-detail.js only
 * when the table really is wider than its box, so a table that fits looks
 * exactly as it did.
 */
.pdp-table-scroll {
	position: relative;
	margin: 0 0 1.5em;
}

.pdp-table-scroll__inner {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.pdp-table-scroll__inner:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.pdp-table-scroll__inner > table {
	margin: 0;
}

/* "Scroll sideways…": only said when there is somewhere to scroll to. */
.pdp-table-scroll__hint {
	display: none;
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--pdp-gray);
}

.pdp-table-scroll.is-overflowing .pdp-table-scroll__hint {
	display: block;
}

/* A fade on the right edge while columns are still hidden there. */
.pdp-table-scroll::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 36px;
	background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
}

.pdp-table-scroll.is-overflowing:not(.is-at-end)::after {
	opacity: 1;
}

/*
 * The first column stays put while the rest scroll under it: in a part-number
 * table it names the row ("B Small Curved"), and without it the codes in the
 * far columns have nothing to read against. Opaque, or the scrolled cells show
 * through; odd rows keep the theme's stripe.
 */
.pdp-table-scroll.is-overflowing tr > :first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background-color: #fff;
	box-shadow: inset -1px 0 0 var(--pdp-line);
}

.pdp-table-scroll.is-overflowing tr:nth-child(odd) > td:first-child {
	background-color: #f7f7f7;
}

.pdp-table-scroll.is-overflowing tr.is-part-hit > :first-child {
	background-color: #faf6ea;
	box-shadow: inset 3px 0 0 var(--color-primary), inset -1px 0 0 var(--pdp-line);
}

/* A part-number row linked to from site search. */
.pdp-tabs tr.is-part-hit > * {
	background: #faf6ea;
	box-shadow: inset 3px 0 0 var(--color-primary);
}

/* ------------------------------------------------------------ Accessories */

/*
 * Four across at most, however wide the page gets.
 *
 * auto-fit on its own kept going: at 1600px and up it fitted five, and five
 * short names in a row read as a list of parts rather than a set of boxes.
 * The max() raises the track minimum to a quarter of the row once a quarter
 * is wider than 230px, so the browser can never fit a fifth. Below that the
 * 230px still rules and the grid drops to three, two and one as before.
 *
 * --acc-gap has to stay in step with the column gap below, since the sum
 * subtracts the three gutters between four columns.
 */
.pdp-accessories {
	--acc-gap: 22px;
	--acc-cols: 4;
	--acc-min: 230px;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(var(--acc-min), (100% - (var(--acc-cols) - 1) * var(--acc-gap)) / var(--acc-cols)), 1fr));
	/* Every row as tall as the tallest, so a lone short name on the last row
	   isn't a smaller box than the two-line names above it (#216). */
	grid-auto-rows: 1fr;
	gap: 8px var(--acc-gap);
	margin: 14px 0;
	padding: 0;
	list-style: none;
}

/*
 * The box, but not the padded row: that is the child, so a row with a product
 * can make the whole tile a link rather than just the words in it. flex here
 * so that child stretches to the tile's full height, which the grid has
 * already equalised across the row.
 */
.pdp-accessories li {
	display: flex;

	/* style.css indents every list item by 50px for its bullet. In a grid
	   that pushes each tile into its track and leaves it 50px short of the
	   next, so the boxes neither line up with the copy above nor fill their
	   columns. */
	margin: 0;
	border: 1px solid var(--pdp-line);
	border-radius: var(--pdp-radius-sm);
	font-size: 14.5px;
	transition: border-color 0.15s, background-color 0.15s;
}

/*
 * An <a> when the row names a product, a <span> when it does not.
 *
 * Centred, so a one-line name in a row the grid has stretched for a two-line
 * neighbour sits in the middle of its box, not along the top (#139).
 */
.pdp-accessories__item {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	color: inherit;
	text-decoration: none;
}

.pdp-accessories li.is-linked:hover,
.pdp-accessories li.is-linked:focus-within {
	border-color: var(--color-primary);
	background: var(--pdp-muted);
}

a.pdp-accessories__item:hover,
a.pdp-accessories__item:focus-visible {
	color: inherit;
	text-decoration: underline;
}

.pdp-accessories__icon {
	flex: 0 0 auto;
	display: flex;
	color: var(--color-primary-dark);
}

@media (max-width: 560px) {
	.pdp-tabs__panel {
		padding: 20px 0 8px;
	}

	.pdp-tabs__tab {
		min-height: 48px;
		padding: 12px 18px;
		font-size: 15px;
	}
}

/* ============================================================= Utility bar */

/*
 * style.css sets `a:visited { color: var(--color-primary) }`, which outranks a
 * single class, so a tile whose link had been visited turned gold while its
 * neighbours stayed dark. Every link styled by one class here carries :visited
 * alongside it.
 *
 * Three separate cards, laid out like the homepage's support links in
 * css/homepage-v2.css: an 8px frame, a square icon block flush to the left,
 * and the label set in from it. The colours stay this page's, so the card is
 * white and the icon block keeps the light tint rather than the homepage gold.
 */
.pdp-utilbar {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 48px 0 0;
	padding: 0;
	background: var(--pdp-muted);
	border: 0;
}

.pdp-utilbar__tile,
.pdp-utilbar__tile:visited {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 8px;
	background: #fff;
	color: var(--pdp-ink);
	text-decoration: none;
	transition: background 0.15s;
}

.pdp-utilbar__tile:hover,
.pdp-utilbar__tile:focus-visible {
	background: #fbfaf8;
	text-decoration: none;
}

.pdp-utilbar__icon {
	flex: 0 0 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background: var(--pdp-muted);
	color: var(--color-primary-dark);
	transition: background 0.15s, color 0.15s;
}

.pdp-utilbar__tile:hover .pdp-utilbar__icon {
	background: var(--color-primary);
	color: #fff;
}

.pdp-utilbar__body {
	padding: 0 18px;
}

.pdp-utilbar__body b {
	display: block;
	font-size: 15px;
	line-height: 1.25;
}

.pdp-utilbar__body span {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.35;
	color: var(--pdp-ink);
}

/* ================================================== Most common part numbers */

/* No inset, so the block lines up with the tab panel above it. */
/*
 * V7 draws this as its own panel: tinted, bordered, padded away from the tab
 * content above it. Previously it sat flush on the band with no edges, which
 * left the chips looking like a loose list rather than a block.
 */
.pdp-parts {
	margin: 60px 0 0;
	padding: 16px 18px;
	border: 1px solid var(--pdp-line);
	border-radius: var(--pdp-radius-lg);
	background: var(--pdp-muted);
}

.pdp-parts__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

/* V7's 25px in the display face; in caps, as headlines are (#138). */
.pdp-parts__title {
	margin: 0;
	font-family: var(--pdp-display);
	font-size: 25px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.2px;
	text-transform: uppercase;
}

/*
 * A wrapping row of cards, per the V7 wireframe. This replaces the vertical
 * list of underlined links the page carried before: V7 shows them as boxes so
 * a part number reads as something you can act on rather than as body copy.
 *
 * Square corners, not the wireframe's 8px. Rounded corners were ruled out as a
 * design language for this site, and a part chip is not the place to reopen it.
 */
/* One chip per row, full width (#170), now that each is two lines. */
.pdp-parts__chips {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Part number on the first line, its specs on the second (#170): on one line
   the two ran together as one long string. */
.pdp-parts__chip {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 8px 13px;
	border: 1px solid var(--pdp-line);
	border-radius: var(--pdp-radius-sm);
	background: #fff;
	color: var(--pdp-ink);
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.pdp-parts__chip:hover,
.pdp-parts__chip:focus-visible {
	border-color: var(--color-primary);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
	color: var(--pdp-ink);
	text-decoration: none;
}

/*
 * Monospace for the part number, as V7 has it. Digits and letters line up at a
 * fixed width, which is what makes a column of codes scannable and what stops
 * 0/O and 1/l reading as each other on a label somebody is copying.
 */
.pdp-parts__chip b {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--pdp-ink);
}

.pdp-parts__chip span {
	font-size: 13px;
	color: var(--pdp-ink-2);
}

/* --------------------------------------------------- Recommendation guide */

/*
 * V7 hangs this off the bottom of the parts panel behind a rule, rather than
 * floating a second white card on the tint. Someone reading the common setup is
 * the person who needs the guide next, so it reads as the end of that block.
 */
.pdp-parts__guide {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 16px;
	padding: 16px 0 0;
	border: 0;
	border-top: 1px solid var(--pdp-line);
	background: none;
}

/* A filled gold chip, the one place on the page that carries the brand solid. */
.pdp-parts__guide-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--pdp-radius);
	background: var(--color-primary);
	color: #fff;
}

.pdp-parts__guide-body {
	flex: 1;
	min-width: 220px;
}

.pdp-parts__guide-body b {
	display: block;
	font-family: var(--pdp-display);
	font-size: 17px;
	font-weight: 600;
}

.pdp-parts__guide-body span {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: var(--pdp-ink-2);
}

@media (max-width: 860px) {
	.pdp-utilbar {
		grid-template-columns: 1fr;
	}

	.pdp-body-band {
		padding: 40px 0;
	}

	.pdp-utilbar,
	.pdp-parts {
		margin-top: 24px;
	}
}

@media (max-width: 560px) {
	.pdp-parts__title {
		font-size: 20px;
	}

}

/* ============================ Videos, guides & customer stories ============ */

/*
 * Band headings, shared by this section, the documents band and where to buy.
 *
 * V7 gives each band a gold eyebrow over a large sentence-case heading. The
 * eyebrow is the display face tracked out wide; the heading is the same face
 * at the wireframe's clamp, which is a long way above the theme's flat 24px h2
 * and is what makes a band read as a band rather than as another paragraph.
 */
.pdp-content__eyebrow,
.pdp-wtb__eyebrow {
	display: block;
	font-family: var(--pdp-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-primary-dark);
}

.pdp-content__title,
.pdp-wtb__title {
	margin: 10px 0 0;
	font-family: var(--pdp-display);
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: 0.2px;
	text-transform: none;
}

.pdp-content__head,
.pdp-wtb__head {
	margin-bottom: 34px;
}

/* ------------------------------------------------------------- Filter chips */

.pdp-content__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
}

/*
 * The chips' own wrapper adds no box on a wide screen: they stay flex items of
 * the filter row beside the parts select. On a phone (#129) they become one
 * row that scrolls sideways instead of wrapping onto a second line, and the
 * select drops to its own line below.
 */
.pdp-content__chips {
	display: contents;
}

@media (max-width: 600px) {

	.pdp-content__chips {
		display: flex;
		flex: 1 0 100%;
		gap: 6px;
		overflow-x: auto;
		/* Room for the focus ring, which overflow would otherwise clip. */
		padding: 2px;
		margin: -2px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.pdp-content__chips::-webkit-scrollbar {
		display: none;
	}

	/*
	 * Small enough that the usual four (All, How To Guide, Videos, Reference)
	 * fit a 400px phone without scrolling; a product with more types scrolls.
	 * Two classes: the base chip rule below comes later in the file.
	 */
	.pdp-content__chips .pdp-content__chip {
		flex: 0 0 auto;
		padding: 7px 9px;
		font-size: 12px;
		white-space: nowrap;
	}

	.pdp-content__select {
		margin-left: 0;
	}
}

/*
 * Lozenges on the tinted band, selected in dark ink. Same shape and the same
 * selected treatment as the tab buttons above, because they do the same job.
 */
.pdp-content__chip {
	appearance: none;
	margin: 0;   /* style.css: button + button */
	min-height: 40px;
	padding: 7px 15px;
	border: 1px solid var(--pdp-line);
	border-radius: var(--pdp-radius-pill);
	background: #fff;
	color: var(--pdp-ink-2);
	font-size: 13.5px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.pdp-content__chip:hover {
	border-color: var(--color-primary-dark);
	color: var(--pdp-ink);
}

.pdp-content__chip.is-active,
.pdp-content__chip.is-active:hover {
	background: var(--pdp-ink);
	border-color: var(--pdp-ink);
	color: #fff;
}

/*
 * margin: 0 matters. style.css puts margin-bottom on every label, and a flex
 * item is centred on its margin box, so five pixels underneath lifted the whole
 * control two and a half pixels above the chips beside it.
 */
.pdp-content__select {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 0 4px;
	font-size: 13px;
	color: var(--pdp-ink);
}

/*
 * appearance: none strips the inset shadow and the native arrow a select
 * carries on macOS; the chevron is drawn as a background image instead, with
 * padding on the right so it never sits against the edge. Height matches the
 * chips beside it rather than relying on the control's own metrics.
 */
.pdp-content__select select {
	appearance: none;
	-webkit-appearance: none;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0 40px 0 15px;
	box-shadow: none;
	border: 1px solid var(--pdp-line);
	border-radius: var(--pdp-radius-pill);
	background-color: #fff;
	background-image: url("../images/pdp/custom_chevron_down.svg");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 11px;
	color: var(--pdp-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 40px;
	cursor: pointer;
}

.pdp-content__select select:hover {
	border-color: var(--color-primary-dark);
}

/* ------------------------------------------------------------------- Tiles */

.pdp-content__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	/*
	 * Each card as tall as its own content (#118). Stretched to the row, a
	 * guide with a two-line title sat beside a video card as a tall white box
	 * with nothing in it.
	 */
	align-items: start;
}

/*
 * Masonry (#118): product-detail.js sets this once it has measured the cards.
 * The rows become 4px tracks and each card spans as many as its height plus
 * the 20px gap, so a short card no longer leaves a hole under it and the next
 * one moves up. Cards stay in source order, left to right, so the tab order
 * still follows the page. Without the script it is the plain grid above.
 */
.pdp-content__grid.is-masonry {
	grid-auto-rows: 4px;
	row-gap: 0;
}

.pdp-content__grid.is-masonry > .pdp-content__tile {
	grid-row-end: span var(--pdp-rows, 1);
}

.pdp-content [hidden] {
	display: none !important;
}

/*
 * White cards with an edge, on the tinted band. The tiles previously took the
 * band's own tint, which left twelve of them reading as one grey field rather
 * than as twelve things you can click.
 *
 * overflow: hidden is what lets the thumbnail take the card's top corners.
 */
.pdp-content__tile,
.pdp-content__tile:visited {
	display: flex;
	flex-direction: column;
	padding: 0;
	border: 1px solid var(--pdp-line);
	border-radius: var(--pdp-radius-lg);
	overflow: hidden;
	background: #fff;
	color: var(--pdp-ink);
	text-align: left;
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

a.pdp-content__tile:hover,
a.pdp-content__tile:focus-visible {
	border-color: var(--color-primary-dark);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
	text-decoration: none;
}

/*
 * The video still: the document's own featured image.
 *
 * Near black behind it, as V7 has it, which is also what the tile shows when a
 * document has no image or its file fails to load. A white rectangle inside a
 * white card reads as a gap in the tile rather than as a frame.
 */
.pdp-content__thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #111;
	color: var(--color-primary);
}

.pdp-content__still {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The play mark, over the still.
 *
 * On a dark empty panel the gold reads on its own. Over a photograph it has to
 * carry its own ground, because the frame behind it could be anything: a disc
 * the same dark as the empty panel, so the two states are one idea rather than
 * two. The scrim lifts the contrast of the whole still a little and keeps the
 * badge and title below it from fighting a bright frame.
 */
.pdp-content__play {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.pdp-content__thumb--has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.25);
}

.pdp-content__thumb--has-image .pdp-content__play {
	--play-ground: rgba(17, 17, 17, 0.72);

	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--play-ground);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/*
 * The tile is the link, so the mark answers to the tile's hover, not its own.
 * Through the property rather than the background, which keeps the selector
 * short and means a tile with no still, where nothing reads the property, is
 * left alone instead of growing a disc on hover.
 */
.pdp-content__tile:hover .pdp-content__play,
.pdp-content__tile:focus-visible .pdp-content__play {
	--play-ground: rgba(17, 17, 17, 0.88);
}

.pdp-content__body {
	display: block;
	flex: 1;
	padding: 14px 15px;
}

/*
 * A tinted pill per type. This is the only thing that tells a video from a
 * guide from a customer story at a glance, which is why it is the one place on
 * the page carrying colours from outside the brand palette. Foreground and
 * background are a pair; see the tokens at the top of the file.
 */
.pdp-content__badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 5px;
	margin-bottom: 8px;
	padding: 3px 9px;
	border-radius: var(--pdp-radius-pill);
	background: var(--pdp-badge-default-bg);
	color: var(--pdp-badge-default-fg);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* One rule per tag slug. The modifier is the documentation_tag slug. */
.pdp-content__badge--videos {
	background: var(--pdp-badge-videos-bg);
	color: var(--pdp-badge-videos-fg);
}

.pdp-content__badge--how-to-guide {
	background: var(--pdp-badge-how-to-guide-bg);
	color: var(--pdp-badge-how-to-guide-fg);
}

.pdp-content__badge--reference {
	background: var(--pdp-badge-reference-bg);
	color: var(--pdp-badge-reference-fg);
}

.pdp-content__badge--customer-stories {
	background: var(--pdp-badge-customer-stories-bg);
	color: var(--pdp-badge-customer-stories-fg);
}

.pdp-content__tile-title {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

/*
 * The dot is what separates the tag from the title above it without a rule or
 * another margin. Decorative, so it is drawn rather than written.
 */
.pdp-content__tag {
	display: block;
	margin-top: 7px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: var(--pdp-gray);
}

.pdp-content__tag::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 7px;
	border-radius: 50%;
	background: var(--color-primary);
	vertical-align: middle;
}

.pdp-content__quote {
	display: block;
	font-size: 14.5px;
	line-height: 1.45;
}

.pdp-content__who {
	display: block;
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--pdp-gray);
}

.pdp-content__empty {
	margin-top: 8px;
	color: var(--pdp-ink);
}

/*
 * A ghost button, as V7 has it. "Show more" is a way of carrying on reading,
 * not the thing the band wants you to do, so it does not compete with the gold
 * calls to action further up the page.
 */
.pdp-content__more,
.pdp-content__more:visited {
	margin-top: 24px;
	border: 1px solid var(--pdp-line);
	background: transparent;
	color: var(--pdp-ink);
}

.pdp-content__more:hover,
.pdp-content__more:focus-visible {
	border-color: var(--pdp-ink);
	background: var(--pdp-muted);
	color: var(--pdp-ink);
}


/* ================================= Where to buy ============================ */

/*
 * A photo banner the width of the page measure (#99, Figma "CTA Bar - 2" and
 * its 360 mobile frame). The photo fills the box; a scrim in the theme's ink
 * keeps white type readable over it, darkest behind the copy and fading out
 * across the photo. The copy sits at the left on desktop and at the foot of a
 * taller box on mobile, where the scrim turns to run top to bottom.
 *
 * The eyebrow and title share their base rules with the content band above;
 * only what changes on the photo is set here, so this block comes after them.
 */
.pdp-wtb {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 400px;
	padding: 48px 80px;
	overflow: hidden;
	background: var(--pdp-ink);  /* until the photo loads */
	color: #fff;
}

.pdp-wtb__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	/* Figma crops the frame to its vertical middle and keeps the left edge. */
	-o-object-position: 0 49%;
	object-position: 0 49%;
}

.pdp-wtb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(38, 37, 36, 0.94) 0%, rgba(38, 37, 36, 0.72) 50%, rgba(38, 37, 36, 0.12) 100%);
	pointer-events: none;
}

.pdp-wtb__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	/*
	 * Figma's column is 520px, set in Saira. The site's display face (Erbaum)
	 * runs wider: at 36px "Authorized distributor" measures 522px, so at 520px
	 * the title broke onto three lines. Anything from 522px to 602px gives the
	 * design's break ("Buy through an / Authorized distributor"); wider than
	 * that pulls "Authorized" up onto the first line.
	 */
	max-width: 560px;
}

.pdp-wtb__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

/*
 * The brand's light gold. It reads on the scrim: 5.7:1 on the dark end and
 * 4.8:1 even over a white photo. Was #f9a80f ("spark gold"), which is not a
 * brand colour.
 */
.pdp-wtb__eyebrow {
	color: var(--color-primary-light, #cc9433);
	line-height: 1.5;
}

.pdp-wtb__title {
	margin: 0;
	font-size: 36px;
	line-height: 40px;
	text-transform: uppercase;
	color: #fff;
}

/* The site's button gold, white text (#117). */
.pdp-wtb__cta,
.pdp-wtb__cta:visited {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: var(--btn-pad, 13px 24px);
	background-color: var(--color-button, #956a1b);
	color: var(--color-button-text, #fff);
	font-size: var(--btn-size, 15px);
	line-height: var(--btn-line, 1.2);
}

.pdp-wtb__cta:hover,
.pdp-wtb__cta:focus-visible {
	background-color: var(--color-button-hover, #7e5a1b);
	color: var(--color-button-text, #fff);
}

@media (max-width: 900px) {
	.pdp-wtb {
		padding: 40px 48px;
	}
}

@media (max-width: 560px) {
	.pdp-wtb {
		justify-content: flex-end;
		min-height: 370px;
		padding: 24px;
	}

	/* The mobile frame keeps the welder in view: the left-centre of the photo. */
	.pdp-wtb__photo {
		-o-object-position: 45% 75%;
		object-position: 45% 75%;
	}

	.pdp-wtb::after {
		background: linear-gradient(180deg, rgba(38, 37, 36, 0.1) 0%, rgba(38, 37, 36, 0.25) 22%, rgba(38, 37, 36, 0.8) 42%, rgba(38, 37, 36, 0.95) 100%);
	}

	.pdp-wtb__content {
		gap: 24px;
		max-width: none;
		width: 100%;
	}

	.pdp-wtb__title {
		font-size: 28px;
		line-height: 32px;
	}

	/*
	 * Full width, per the 360 frame. Erbaum runs wider than the design's Inter,
	 * and at 15px with 22px sides the label broke onto two lines at 360. A
	 * point smaller with 12px sides keeps it on one; below about 340px it may
	 * still wrap, so it stays centred rather than nowrap, which would overflow.
	 */
	.pdp-wtb__cta,
	.pdp-wtb__cta:visited {
		justify-content: center;
		width: 100%;
		padding-inline: 12px;
		font-size: 14px;
		text-align: center;
	}
}

/* ------------------------------------------------- Overview panel callouts */

/*
 * Copy on the left, up to three callouts on the right, per the V7 wireframe.
 * The column is a fixed share rather than auto, so the callouts line up across
 * products whose overview copy runs to very different lengths.
 */
.pdp-overview {
	display: grid;
	/* 360px, not 300: the client wanted the callouts wider, taking the room
	   from the copy (#169), so labels like "Ball Swivel Maneuverability" fit. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	gap: 40px;
	align-items: start;
}

.pdp-overview__body > *:first-child {
	margin-top: 0;
}

.pdp-overview__notes {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pdp-overview__note {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--pdp-line);
	border-radius: var(--pdp-radius-sm);
	background: #fff;
}

/* A 42px tinted chip, so the icon reads as part of the card rather than as a
   glyph floating beside the text. */
.pdp-overview__note-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--pdp-radius-sm);
	background: var(--pdp-muted);
	color: var(--color-primary-dark);
	line-height: 1;
}

.pdp-overview__note-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.pdp-overview__note-body b {
	font-family: var(--pdp-display);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pdp-ink);
}

.pdp-overview__note-body span {
	font-size: 14px;
	line-height: 1.45;
	color: var(--pdp-ink-2);
}

@media (max-width: 900px) {
	.pdp-overview {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}


@media (max-width: 1100px) {
	.pdp-content__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 860px) {
	.pdp-content__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.pdp-content__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   "Request more info" lightbox (#76)

   A native <dialog>, so the focus trap, Escape and the inert page come from
   the browser. The form inside is the Contact Us form with the theme's own
   field styles; only its spacing is adjusted here.
   ========================================================================== */

.pdp-request {
	width: min(640px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 0;
	border-radius: var(--pdp-radius-lg);
	background: #fff;
	color: var(--pdp-ink);
	box-shadow: var(--pdp-shadow);
	overflow: hidden;
}

.pdp-request::backdrop {
	background-color: rgba(8, 8, 8, 0.7);
}

.pdp-request__inner {
	position: relative;
	max-height: calc(100vh - 32px);
	padding: 40px 40px 32px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.pdp-request__close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--pdp-gray);
	cursor: pointer;
}

.pdp-request__close:hover,
.pdp-request__close:focus-visible {
	color: var(--pdp-ink);
}

.pdp-request__close span[aria-hidden] {
	display: block;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("../images/close-btn.svg") no-repeat center / contain;
	mask: url("../images/close-btn.svg") no-repeat center / contain;
}

/* Clear of the close button. */
.pdp-request__title {
	margin: 0 40px 12px 0;
	font-family: var(--pdp-display);
	font-size: 28px;
	line-height: 1.15;
}

.pdp-request__intro {
	margin: 0 0 24px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--pdp-gray);
}

.pdp-request__note {
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
	color: var(--pdp-gray);
}

.pdp-request .wpcf7 label {
	display: block;
	margin-bottom: 16px;
	font-weight: 600;
}

.pdp-request .treg-optional {
	font-weight: 400;
	color: var(--pdp-gray);
}

.pdp-request .wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.pdp-request .wpcf7 select,
.pdp-request .wpcf7 textarea {
	width: 100%;
	max-width: none;
	margin-top: 6px;
	font-weight: 400;
}

.pdp-request .wpcf7 textarea {
	height: 120px;
}

/* Country and ZIP side by side, as in the wireframe. */
.pdp-request .treg-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}

/* CF7 turns the line breaks between the two labels into <br> and <p>. */
.pdp-request .treg-form-row > br,
.pdp-request .treg-form-row > p:empty {
	display: none;
}

.pdp-request .wpcf7 input[type="submit"] {
	width: 100%;
	margin-top: 20px;
}

@media (max-width: 560px) {
	.pdp-request__inner {
		padding: 32px 20px 24px;
	}

	.pdp-request .treg-form-row {
		grid-template-columns: 1fr;
	}

	.pdp-request__title {
		font-size: 22px;
	}
}