/* ============================================================================
   Maktune v5 — product pages, shop and category archives
   ----------------------------------------------------------------------------
   Loads on the product detail page, the shop, every product category archive
   and search results. NOT on cart, checkout or account — those are WooCommerce
   Blocks and a separate pass, and they keep the v3 sheets they have today.

   THE COLOUR PROGRESSION
   ----------------------
   Continued from the homepage, and applied by what a section is FOR rather
   than by alternating for its own sake:

     warm ivory        shopping and product selection — the buy area, the
                       catalogue index, cross-sell
     warm stone        its quieter partner, one step down
     pale technical    specifications. Cool, flat, no atmosphere at all: a spec
       grey            table is the one place on the site that should feel like
                       a document
     charcoal          the chapters that explain how the thing is built
     near-black        replaceable parts, with restrained cobalt. This is the
       + cobalt        brand's one argument and it gets the darkest room

   Blue is actions. Orange is a genuine, live discount and nothing else. The
   product supplies the visual interest; almost every ground here is flat.
   ========================================================================== */

/* Warm ivory is the page ground on both views. Set on the document wrapper so
   the chapters that want a different ground override rather than stack. */
.v5-pdp-doc,
.v5-shop-doc { background: var(--v5-ivory); }

/* ----------------------------------------------------------------------------
   "In stock", recalibrated — the same trap --mk-muted-soft hit.

   --mk-green (#11833B) was derived against WHITE and measures 4.85:1 there. On
   a card it is still on white, which is why the homepage and the product grids
   are fine. The purchase panel has NO card behind it: the text sits straight on
   warm ivory, where the same green measures 4.454:1 — axe caught it on all
   three product shapes.

   #0F7A37 is two steps darker at the same hue and clears every ground this
   template uses: 5.44 on white, 5.00 on ivory, 4.57 on stone.

   Scoped to .v5-commerce rather than to .v5, because the homepage does not have
   the problem — its stock chips are always on a white card — and it is frozen.
   -------------------------------------------------------------------------- */
.v5-commerce { --mk-green: #0F7A37; }

/* ============================================================================
   1b. Inline links inside prose
   ----------------------------------------------------------------------------
   Underlined, not just blue.

   A link that is distinguished from the sentence around it by colour ALONE
   fails WCAG 1.4.1 unless the two colours differ by 3:1 — brand blue on ivory
   against muted grey on ivory is nowhere near that. axe flagged the warranty
   link and the "send us a photo" link on every product page.

   Standalone actions (.v5-link, buttons, cards, nav) are exempt and stay clean:
   they are not embedded in a block of text, so there is nothing to confuse them
   with.
   ========================================================================== */

.v5-buy-help a,
.v5-buy-terms dd a,
.v5-assure p a,
.v5-fit-open a,
.v5-specgap p a,
.v5-shotnote a { text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================================
   2. The purchase area
   ----------------------------------------------------------------------------
   Gallery left, purchase panel right and sticky, so on a long page the price
   and the button stay with the customer without a floating overlay covering
   anything.
   ========================================================================== */

.v5-buy { padding-block: clamp(24px, 3vw, 40px) clamp(48px, 6vw, 84px); }

.v5-buy-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

/* ------------------------------------------------------------- Gallery --- */

.v5-stage {
	position: relative;
	margin: 0;
	aspect-ratio: 1 / 1;
	border-radius: var(--mk-r-lg);
	overflow: hidden;
	/* Near-white rather than ivory: the listing photography is shot on white,
	   and a warm ground behind a white cut-out draws a visible rectangle. */
	background: #FDFDFC;
	border: 1px solid var(--v5-paper-3);
	display: grid;
	place-items: center;
	padding: 4%;
}
.v5-stage img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: opacity var(--mk-dur) var(--v5-ease);
}
.v5-stage.is-swapping img { opacity: .25; }


.v5-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}
.v5-thumb {
	width: 76px;
	height: 76px;
	flex: none;
	padding: 6px;
	border-radius: var(--mk-r);
	border: 1px solid var(--v5-paper-3);
	background: #FDFDFC;
	cursor: pointer;
	transition: border-color var(--mk-dur) var(--v5-ease);
}
.v5-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.v5-thumb:hover { border-color: var(--v5-ink-soft); }
.v5-thumb.is-active { border-color: var(--v5-blue); box-shadow: 0 0 0 1px var(--v5-blue); }

/* The film that does not exist yet. Deliberately quiet — it should read as a
   position held open, not as a broken player. The still behind it is knocked
   back so nobody mistakes it for the footage. */
.v5-videoslot { margin: clamp(18px, 2vw, 26px) 0 0; }
.v5-videoslot .v5-media { background: var(--v5-charcoal); }
.v5-videoslot img { opacity: .32; filter: grayscale(.7); }
/* Below the frame, not over it. These descriptions run to two or three lines
   and a fixed-ratio box cannot grow, so an overlay clipped them mid-word. */
.v5-shotnote {
	margin: 12px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mk-muted-soft);
	max-width: 62ch;
}
.v5-dark .v5-shotnote { color: var(--v5-on-dark-soft); }

/* ------------------------------------------------------ Purchase panel --- */

.v5-buy-panel { position: sticky; top: calc(var(--v5-hdr-h, 72px) + 20px); }

.v5-buy-sku {
	margin: 0 0 10px;
	font-family: var(--mk-font-mono);
	font-size: 12.5px;
	letter-spacing: .02em;
	color: var(--mk-muted-soft);
}
.v5-buy-title {
	font-size: clamp(27px, 3vw, 40px);
	line-height: 1.08;
	letter-spacing: var(--v5-display-tight);
	font-weight: 700;
	margin: 0;
	text-wrap: balance;
}
.v5-buy-rating {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 14px;
	font-size: 14px;
	color: var(--v5-ink-soft);
	text-decoration: none;
}
.v5-buy-rating:hover { color: var(--v5-blue); }
.v5-buy-rating-n { font-weight: 650; color: var(--v5-ink); }
.v5-buy-lede {
	margin: 16px 0 0;
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--v5-ink-soft);
	max-width: 46ch;
}

.v5-buy-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: clamp(20px, 2.4vw, 30px);
}
.v5-buy-now {
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1;
}
.v5-buy-price del { font-size: 17px; color: var(--mk-muted-soft); font-weight: 500; }
/* WooCommerce wraps a sale price in <ins>, which browsers underline. On a price
   that reads as a strikethrough — the opposite of what it means. */
.v5-buy-price ins { text-decoration: none; background: none; color: inherit; }
.v5-buy-tax { margin: 8px 0 0; font-size: 13.5px; color: var(--mk-muted-soft); }

.v5-buy-stock { margin: 18px 0 0; font-size: 14px; font-weight: 560; color: var(--mk-green); display: flex; align-items: center; gap: 8px; }
.v5-buy-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.v5-buy-stock.is-out { color: var(--mk-muted-soft); }

/* ------------------------------------ WooCommerce add-to-cart, restyled --- */
/* Woo's own template, so the nonce, the quantity handling and the AJAX hooks
   the cart fragments depend on all survive. Only the appearance changes. */

.v5-buy-cart { margin-top: clamp(20px, 2.4vw, 28px); }
.v5-buy-cart form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
	margin: 0;
}
.v5-buy-cart .quantity {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--v5-paper-3);
	border-radius: var(--mk-r);
	background: #fff;
	overflow: hidden;
	flex: none;
}
.v5-buy-cart .quantity input.qty {
	width: 56px;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: 16px;      /* 16px or iOS zooms the page on focus */
	font-weight: 620;
	color: var(--v5-ink);
	/* The spinner arrows are 11px tall and sit on top of each other; the
	   stepper buttons replace them with something a thumb can hit. */
	-moz-appearance: textfield;
	appearance: textfield;
}
.v5-buy-cart .quantity input.qty::-webkit-outer-spin-button,
.v5-buy-cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.v5-buy-cart .quantity input.qty:focus-visible { outline: 2px solid var(--v5-blue); outline-offset: -2px; }

.v5-qty-btn {
	width: 46px;
	min-height: 52px;
	border: 0;
	background: transparent;
	color: var(--v5-ink);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--mk-dur) var(--v5-ease);
}
.v5-qty-btn:hover { background: var(--v5-paper-2); }
.v5-qty-btn[disabled] { color: var(--mk-muted-soft); cursor: default; }
.v5-qty-btn:hover[disabled] { background: transparent; }

.v5-buy-cart .single_add_to_cart_button {
	flex: 1;
	min-width: 200px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 30px;
	border: 1px solid transparent;
	border-radius: var(--mk-r);
	background: var(--v5-blue);
	color: #fff;
	font-size: 15.5px;
	font-weight: 640;
	letter-spacing: -0.005em;
	cursor: pointer;
	transition: background var(--mk-dur) var(--v5-ease), transform var(--mk-dur) var(--v5-ease);
}
.v5-buy-cart .single_add_to_cart_button:hover { background: var(--mk-blue-dark); transform: translateY(-1px); }
.v5-buy-cart .single_add_to_cart_button.loading { opacity: .7; }
.v5-buy-cart .woocommerce-variation-add-to-cart,
.v5-buy-cart .woocommerce-variation-price { width: 100%; }
.v5-buy-cart .stock { display: none; }   /* already stated above the button */

/* Wishlist — TI Wishlist's own button, which the plugin injects INSIDE the cart
   form via woocommerce_after_add_to_cart_button. Not re-rendered by the
   template (that produced two buttons, one of them inert); styled down to a text
   action instead, because the brief asks for it as the quieter option and a
   second filled button competes with Add to Cart.
   flex-basis: 100% drops it onto its own row under the button rather than
   squeezing in beside it. */
.v5-buy-cart .tinv-wraper { flex-basis: 100%; margin: 2px 0 0; }
.v5-buy-cart .tinv-wishlist-clear,
.v5-buy-cart .tinvwl-tooltip { display: none; }
.v5-buy-cart .tinvwl_add_to_wishlist_button {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 0 4px;
	background: none;
	border: 0;
	color: var(--v5-ink-soft);
	font-size: 14.5px;
	font-weight: 560;
	text-decoration: none;
	cursor: pointer;
}
.v5-buy-cart .tinvwl_add_to_wishlist_button:hover { color: var(--v5-blue); }

.v5-buy-eta {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 22px 0 0;
	padding: 14px 16px;
	border-radius: var(--mk-r);
	background: var(--v5-stone);
	font-size: 14px;
	line-height: 1.5;
	color: var(--v5-ink);
}
.v5-buy-eta svg { flex: none; margin-top: 1px; color: var(--v5-blue); }

.v5-buy-terms { margin: 22px 0 0; }
.v5-buy-terms > div {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 14px;
	padding: 12px 0;
	border-top: 1px solid var(--v5-paper-3);
	font-size: 14px;
}
.v5-buy-terms dt { font-weight: 620; }
.v5-buy-terms dd { margin: 0; color: var(--v5-ink-soft); }
.v5-buy-terms dd a { color: var(--v5-blue); }

/* The cushion qualifier — "wear and tear is not a claim" — sits under its term
   rather than running on, because it is a limit on the promise above it and
   reads as one when it is on its own line. */
.v5-buy-terms-note {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: var(--mk-muted-soft);
}

.v5-buy-help { margin: 20px 0 0; font-size: 14px; line-height: 1.55; color: var(--v5-ink-soft); }
.v5-buy-help a { color: var(--v5-blue); }

/* ============================================================================
   3. Story chapters
   ========================================================================== */

.v5-story-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 76px);
	align-items: center;
}
.v5-story-row--flip .v5-story-media { order: 2; }
.v5-story-body .v5-lede { margin-top: 16px; }
.v5-story-p { margin: 18px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--v5-ink-soft); max-width: 52ch; }
.v5-dark .v5-story-p { color: var(--v5-on-dark-soft); }
.v5-story-note {
	margin: clamp(28px, 3vw, 42px) 0 0;
	padding-top: clamp(20px, 2vw, 28px);
	border-top: 1px solid var(--v5-steel);
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--v5-on-dark-soft);
	max-width: 62ch;
}
/* Component photography is shot on white. On a dark chapter it needs a plate to
   sit on, or the cut-out draws its own rectangle. */
.v5-media--plate { background: var(--v5-paper); padding: 7%; }
.v5-media--plate img { object-fit: contain; }

/* ------------------------------------------------------ Recline angles --- */

.v5-angles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(10px, 1.4vw, 20px);
	counter-reset: none;
}
.v5-angles li {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: clamp(20px, 2.4vw, 30px) clamp(16px, 1.8vw, 24px);
	border: 1px solid var(--v5-steel);
	border-radius: var(--mk-r-lg);
	background: var(--v5-gunmetal);
}
.v5-angle-n {
	font-size: clamp(26px, 2.8vw, 38px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--v5-on-dark);
	font-variant-numeric: tabular-nums;
}
.v5-angle-l { font-size: 13px; color: var(--v5-on-dark-soft); }
/* Cobalt marks the two ends of the range — the only two positions that mean
   something on their own. Everything between them is a number. */
.v5-angles li:first-child,
.v5-angles li:last-child { border-color: var(--v5-cobalt-dim); }
.v5-angles li:first-child .v5-angle-l,
.v5-angles li:last-child .v5-angle-l { color: #A9B8FF; }   /* 7.0:1 on gunmetal */

/* ---------------------------------------------------------- Adjustment --- */

.v5-adjust { margin: clamp(24px, 3vw, 34px) 0 0; }
.v5-adjust > div {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 16px;
	padding: 13px 0;
	border-top: 1px solid var(--v5-paper-3);
	font-size: 15px;
}
.v5-adjust dt { font-weight: 620; }
.v5-adjust dd { margin: 0; color: var(--v5-ink-soft); }

/* -------------------------------------------------- What carries the load - */

.v5-load {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(14px, 1.8vw, 24px);
}
.v5-load a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 20px;
	border: 1px solid var(--v5-steel);
	border-radius: var(--mk-r-lg);
	background: var(--v5-gunmetal);
	color: var(--v5-on-dark);
	text-decoration: none;
	transition: border-color var(--mk-dur) var(--v5-ease), transform var(--mk-dur) var(--v5-ease);
}
.v5-load a:hover,
.v5-load a:focus-visible { border-color: var(--v5-cobalt); transform: translateY(-3px); }
.v5-load-media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--v5-paper);
	border-radius: var(--mk-r);
	padding: 8%;
	margin-bottom: 16px;
}
.v5-load-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.v5-load-name { font-size: 16px; font-weight: 620; letter-spacing: -0.014em; }
.v5-load-note { margin-top: 7px; font-size: 13.5px; line-height: 1.55; color: var(--v5-on-dark-soft); }
.v5-load-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	padding-top: 16px;
	font-size: 13.5px;
	font-weight: 620;
	color: #93A6FF;      /* 6.4:1 on gunmetal */
}
.v5-load a:hover .v5-load-link svg { transform: translateX(3px); }
.v5-load-link svg { transition: transform var(--mk-dur) var(--v5-ease); }

/* ============================================================================
   4. Part pages
   ========================================================================== */

.v5-fitfacts { margin: clamp(24px, 3vw, 34px) 0 0; }
.v5-fitfacts > div {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--v5-steel);
	font-size: 15px;
}
.v5-fitfacts dt { font-weight: 620; color: var(--v5-on-dark); }
.v5-fitfacts dd { margin: 0; color: var(--v5-on-dark-soft); line-height: 1.55; }
.v5-fitfacts-sku { font-family: var(--mk-font-mono); color: var(--v5-on-dark) !important; letter-spacing: .02em; }

.v5-confirmed {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 5px 10px;
	border-radius: var(--mk-r-pill);
	border: 1px solid rgba(120, 209, 155, .34);
	font-size: 12px;
	font-weight: 620;
	color: #7ED9A2;      /* 8.3:1 on charcoal */
}
.v5-story-p--ask { margin-top: 24px; }

.v5-fitgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
	gap: clamp(28px, 4vw, 60px);
	align-items: start;
}
/* No film to sit beside: the rows take the full measure in two columns rather
   than running down 55% of the page with dead space alongside. */
.v5-fitgrid.is-solo { grid-template-columns: 1fr; }
.v5-fitgrid.is-solo .v5-fitrows {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(28px, 4vw, 60px);
}
.v5-fitgrid.is-solo .v5-fitrows li:nth-child(2) { border-top: 0; padding-top: 0; }
.v5-fitrows { list-style: none; margin: 0; padding: 0; }
.v5-fitrows li { padding: 20px 0; border-top: 1px solid var(--v5-paper-3); }
.v5-fitrows li:first-child { border-top: 0; padding-top: 0; }
.v5-fitrows h3 { font-size: 16px; font-weight: 620; letter-spacing: -0.014em; margin: 0 0 10px; }
.v5-fit-answer { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--v5-ink); max-width: 52ch; }
.v5-fit-note { margin: 6px 0 0; font-size: 13px; color: var(--mk-muted-soft); }
.v5-fit-open { margin: 0; font-size: 15px; line-height: 1.6; color: var(--v5-ink-soft); max-width: 52ch; }
.v5-fit-open .v5-tbc-flag { margin-right: 8px; vertical-align: 2px; }
.v5-fitrows .v5-link { margin-top: 12px; }

.v5-fitfilm { position: sticky; top: calc(var(--v5-hdr-h, 72px) + 20px); }
.v5-fitfilm .v5-videoslot { margin-top: 0; }

/* ============================================================================
   5. Specification
   ----------------------------------------------------------------------------
   Pale technical grey, flat, no gradient. A spec table is the one place on this
   site that should feel like a document rather than a photograph.
   ========================================================================== */

.v5-specsheet { background: var(--v5-mist); }

.v5-specgrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 clamp(32px, 5vw, 72px);
}
.v5-specgroup { break-inside: avoid; }
.v5-specgroup h3 {
	font-size: 12px;
	font-weight: 650;
	letter-spacing: var(--v5-eyebrow-track);
	text-transform: uppercase;
	color: var(--mk-muted-soft);
	margin: 0 0 4px;
	padding-top: clamp(20px, 2vw, 28px);
}
.v5-specgroup:first-child h3,
.v5-specgroup:nth-child(2) h3 { padding-top: 0; }
.v5-specgroup dl { margin: 0; }
.v5-specgroup > dl > div,
.v5-spectable > div {
	display: grid;
	grid-template-columns: minmax(120px, 34%) 1fr;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid #DFE2E5;
	font-size: 15px;
}
.v5-specgroup dt,
.v5-spectable dt { color: var(--v5-ink-soft); }
.v5-specgroup dd,
.v5-spectable dd { margin: 0; font-weight: 560; color: var(--v5-ink); }
.v5-spectable { margin: 0; }
.v5-spectable.is-flat > div { grid-template-columns: 1fr; }
.v5-spectable dd.is-wide { font-weight: 500; color: var(--v5-ink); line-height: 1.55; }
.v5-specnote { margin: clamp(20px, 2.4vw, 30px) 0 0; font-size: 14px; color: var(--v5-ink-soft); }

.v5-specgap {
	margin-top: clamp(32px, 4vw, 52px);
	padding: clamp(22px, 2.6vw, 32px);
	border: 1px dashed #C9CFD4;
	border-radius: var(--mk-r-lg);
	background: rgba(255, 255, 255, .5);
}
.v5-specgap h3 { font-size: 16px; font-weight: 620; letter-spacing: -0.014em; margin: 0 0 8px; }
.v5-specgap > p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--v5-ink-soft); max-width: 60ch; }
.v5-specgap ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.v5-specgap li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14.5px; color: var(--v5-ink); }

/* ============================================================================
   6. Delivery, returns and warranty
   ========================================================================== */

.v5-assure {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(22px, 3vw, 44px);
}
.v5-assure h3 { font-size: 16px; font-weight: 620; letter-spacing: -0.014em; margin: 0 0 8px; }
.v5-assure p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--v5-ink-soft); }
.v5-assure a { color: var(--v5-blue); }
.v5-assure-eta { display: block; margin-top: 8px; color: var(--v5-ink); font-weight: 560; }

/* ------------------------------------------------ The warranty table
   Only on the chair and the bundles, where cover genuinely spans four terms.
   Styled as a DOCUMENT, not a feature: no card, no shadow, no icons, hairline
   rules only. It is the same register as the specification sheet, because it is
   the same kind of thing — a set of figures you check, not a set of promises
   you are being sold. The ten years is carried by the number, not by colour. */
.mk-warranty { margin: 34px 0 0; padding-top: 26px; border-top: 1px solid var(--v5-paper-3); }
.mk-warranty-lead {
	margin: 0 0 18px;
	max-width: 68ch;
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--v5-ink-soft);
}
/* Capped, not full-bleed. Across the full 1440px column "Castors (wheels)" and
   "10 years" end up an inch of screen apart and the eye has to travel a rule to
   pair them. A spec table is read by pairing, so the pair stays close. */
.mk-warranty-rows { margin: 0; max-width: 720px; }
.mk-warranty-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px 24px;
	align-items: baseline;
	padding: 13px 0;
	border-top: 1px solid var(--v5-paper-3);
}
.mk-warranty-row dt { font-size: 14.5px; line-height: 1.5; color: var(--v5-ink); }
.mk-warranty-row dd { margin: 0; text-align: right; }
.mk-warranty-row dd b {
	font-variant-numeric: tabular-nums;
	font-weight: 620;
	font-size: 15px;
	white-space: nowrap;
}
.mk-warranty-row dd span {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: var(--mk-muted-soft);
}
.mk-warranty-excl {
	margin: 18px 0 0;
	max-width: 68ch;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--mk-muted-soft);
}

/* ============================================================================
   7. Reviews
   ========================================================================== */

.v5-reviews-chapter { background: var(--v5-stone); }

.v5-rsum {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 52px);
	align-items: center;
	padding: clamp(22px, 2.6vw, 30px);
	border: 1px solid var(--v5-paper-3);
	border-radius: var(--mk-r-lg);
	background: #fff;
}
.v5-rsum-score { display: flex; flex-direction: column; gap: 6px; }
.v5-rsum-avg { font-size: 46px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.v5-rsum-outof { font-size: 13px; color: var(--mk-muted-soft); }
.v5-rsum-count { font-size: 13.5px; color: var(--v5-ink-soft); margin-top: 4px; }
.v5-rsum-bars { display: grid; gap: 8px; }
.v5-rbar { display: grid; grid-template-columns: 60px 1fr 28px; gap: 12px; align-items: center; font-size: 13px; }
.v5-rbar-label { color: var(--v5-ink-soft); }
.v5-rbar-track { height: 7px; border-radius: var(--mk-r-pill); background: var(--v5-paper-2); overflow: hidden; }
.v5-rbar-fill { display: block; height: 100%; border-radius: inherit; background: var(--v5-blue); }
.v5-rbar-n { text-align: right; color: var(--mk-muted-soft); font-variant-numeric: tabular-nums; }
.v5-rbar.is-empty .v5-rbar-fill { background: transparent; }

.v5-reviewlist-wrap { margin-top: clamp(24px, 3vw, 36px); }
.v5-reviewlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.v5-review-inner {
	padding: clamp(20px, 2.2vw, 26px);
	border: 1px solid var(--v5-paper-3);
	border-radius: var(--mk-r-lg);
	background: #fff;
}
.v5-review-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.v5-review-avatar { border-radius: var(--mk-r-circle); }
.v5-review-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.v5-review-author { font-weight: 640; font-size: 15px; }
.v5-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12.5px; color: var(--mk-muted-soft); }
.v5-review-verified { display: inline-flex; align-items: center; gap: 5px; color: var(--mk-green); font-weight: 620; }
.v5-review-body { margin-top: 14px; font-size: 15.5px; line-height: 1.62; color: var(--v5-ink); }
.v5-review-body p { margin: 0 0 10px; }
.v5-review-body p:last-child { margin-bottom: 0; }
.v5-review-pending { margin: 12px 0 0; font-size: 13.5px; color: var(--mk-muted-soft); }

.v5-reviews-none {
	padding: clamp(28px, 4vw, 44px);
	border: 1px dashed var(--v5-paper-3);
	border-radius: var(--mk-r-lg);
	text-align: center;
	color: var(--v5-ink-soft);
	background: rgba(255, 255, 255, .6);
}
.v5-reviews-none svg { color: var(--mk-muted-soft); }
.v5-reviews-none p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; }

.v5-reviewform { margin-top: clamp(28px, 3.4vw, 44px); }
.v5-reviewform-title { display: block; font-size: 20px; font-weight: 650; letter-spacing: -0.02em; margin-bottom: 16px; }
.v5-reviewform-inner { padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--v5-paper-3); border-radius: var(--mk-r-lg); background: #fff; }
.v5-reviewform label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
/* type="url" is in this list because WordPress's comment form emits the Website
   field as one, and leaving it out left a browser-default 180px box sitting
   among three styled inputs. */
.v5-reviewform input[type="text"],
.v5-reviewform input[type="email"],
.v5-reviewform input[type="url"],
.v5-reviewform select,
.v5-reviewform textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--v5-paper-3);
	border-radius: var(--mk-r);
	background: var(--v5-paper);
	font: inherit;
	font-size: 15px;
	color: var(--v5-ink);
}
.v5-reviewform textarea { min-height: 130px; resize: vertical; }
.v5-reviewform p { margin: 0 0 16px; }
/* The "save my details" row is a checkbox followed by its label; the blanket
   label rule above would otherwise put the text on its own line under the box. */
.v5-reviewform .comment-form-cookies-consent { display: flex; align-items: center; gap: 10px; }
.v5-reviewform .comment-form-cookies-consent input { width: 17px; height: 17px; flex: none; margin: 0; accent-color: var(--v5-blue); }
.v5-reviewform .comment-form-cookies-consent label { margin: 0; font-weight: 500; font-size: 13.5px; color: var(--v5-ink-soft); }
.v5-reviewform .form-submit { margin-bottom: 0; }
.v5-reviewform input[type="submit"] {
	min-height: 50px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--mk-r);
	background: var(--v5-blue);
	color: #fff;
	font-size: 15px;
	font-weight: 640;
	cursor: pointer;
}
.v5-reviewform input[type="submit"]:hover { background: var(--mk-blue-dark); }
.v5-reviewform .required { color: var(--mk-orange-ink); }

/* ------------------------------------------------- The rating control ---- */
/*
 * WooCommerce's script hides the <select> and injects
 *   <p class="stars"><span><a class="star-N">N of 5 stars</a>…</span></p>
 *
 * `p.stars` then collides with THE THEME'S OWN `.stars` display sprite in
 * main.css, which pins it to 88×16 with a background image — so the five
 * anchors pile on top of each other with their accessible text
 * ("1 of 5 stars2 of 5 stars…") showing through in gold. Measured on the
 * product page: an unreadable orange smear across the review form.
 *
 * shop-v3.css already carried this fix scoped to `body.v3-page`. Turning the v3
 * sheets off on product pages re-exposed the collision, so it is ported here —
 * the sprite shell has to be explicitly undone before the control is rebuilt.
 *
 * Fill logic needs no :has(): hovering the row golds every star, then the
 * siblings AFTER the hovered one revert. Same trick for the chosen value, via
 * WooCommerce's own `.selected` / `.active` classes.
 */
.v5-rate label { margin-bottom: 9px; }
.v5-rate p.stars {
	display: flex;
	width: auto;
	height: auto;
	background: none;
	margin: 0;
}
.v5-rate p.stars span { display: flex; gap: 6px; }
.v5-rate p.stars a {
	display: block;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23CBD2DE' d='M12 2l3 6.3 6.9 1-5 4.9 1.2 6.9L12 17.8 5.9 21.1 7.1 14.2l-5-4.9 6.9-1z'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: transform .12s var(--v5-ease);
}
.v5-rate p.stars:hover a,
.v5-rate p.stars.selected a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F0A93B' d='M12 2l3 6.3 6.9 1-5 4.9 1.2 6.9L12 17.8 5.9 21.1 7.1 14.2l-5-4.9 6.9-1z'/%3E%3C/svg%3E");
}
.v5-rate p.stars a:hover ~ a,
.v5-rate p.stars.selected a.active ~ a,
.v5-rate p.stars.selected:hover a:hover ~ a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23CBD2DE' d='M12 2l3 6.3 6.9 1-5 4.9 1.2 6.9L12 17.8 5.9 21.1 7.1 14.2l-5-4.9 6.9-1z'/%3E%3C/svg%3E");
}
.v5-rate p.stars a:hover { transform: scale(1.12); }
.v5-rate p.stars a:focus-visible { outline: 2px solid var(--v5-blue); outline-offset: 2px; }
/* Without JS the <select> is the control and must stay usable. */
.v5-rate select { max-width: 260px; }
.v5-reviews-gate { margin-top: 24px; font-size: 14.5px; color: var(--v5-ink-soft); }

/* ============================================================================
   8. Compact purchase bar (phones only)
   ----------------------------------------------------------------------------
   One row: what it is, what it costs, and the action. Revealed only after the
   real button has scrolled away, and the body gets matching bottom padding so
   it never covers the end of the page. The brief rules out large sticky
   promotions — this is neither large nor a promotion.
   ========================================================================== */

.v5-buybar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 60;
	background: rgba(251, 250, 248, .96);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--v5-paper-3);
	transform: translateY(101%);
	transition: transform .26s var(--v5-ease-out);
	padding-bottom: env(safe-area-inset-bottom);
}
.v5-buybar.is-up { transform: none; }
.v5-buybar-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px var(--mk-gutter);
	max-width: var(--mk-container);
	margin-inline: auto;
}
.v5-buybar-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.v5-buybar-info strong {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	/* The product name is up to 37 characters. Two lines, then clipped — never
	   allowed to push the row wider than the viewport. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.v5-buybar-info span { font-size: 14px; font-weight: 700; letter-spacing: -0.015em; }
.v5-buybar-info del { display: none; }
.v5-buybar-go { flex: none; min-height: 46px; padding-inline: 22px; font-size: 14.5px; }
@media (min-width: 861px) { .v5-buybar { display: none; } }

/* ============================================================================
   9. Shop and category archives
   ========================================================================== */

.v5-shophero { padding-block: clamp(26px, 3vw, 40px) clamp(24px, 2.6vw, 34px); }
.v5-shophero .v5-lede { margin-top: 16px; }

.v5-rail {
	position: relative;
	border-block: 1px solid var(--v5-paper-3);
	background: rgba(255, 255, 255, .55);
}
.v5-rail ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 4px;
	/* Horizontal scroll is CORRECT here and only here: it is a nav rail with a
	   known, short list, and it scrolls inside its own box. The page body still
	   never scrolls sideways. */
	overflow-x: auto;
	scrollbar-width: none;
}
.v5-rail ul::-webkit-scrollbar { display: none; }
.v5-rail-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	padding: 15px 16px;
	font-size: 14.5px;
	font-weight: 560;
	color: var(--v5-ink-soft);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color var(--mk-dur) var(--v5-ease), border-color var(--mk-dur) var(--v5-ease);
}
.v5-rail-item:hover { color: var(--v5-ink); }
.v5-rail-item.is-active { color: var(--v5-ink); border-bottom-color: var(--v5-blue); font-weight: 640; }
.v5-rail-n { font-size: 12px; color: var(--mk-muted-soft); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ Catalogue index --- */

.v5-group-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(22px, 2.6vw, 34px);
}
.v5-group-head h2 { font-size: clamp(24px, 2.6vw, 34px); }
.v5-group-head p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--v5-ink-soft); max-width: 54ch; }
.v5-group-head .v5-link { flex: none; }
/* Alternating ground, not a gradient per section. The chair group and the parts
   groups read as different rooms; the alternation is what separates them. */
.v5-group:nth-of-type(even) { background: var(--v5-stone); }

/* A group of one, laid out as a row so the single card has the presence the
   product does. Image left, everything else right, capped so it does not
   stretch to the full 1240px container. */
.v5-group--solo .v5-grid-4 { grid-template-columns: 1fr; max-width: 780px; }
.v5-group--solo .v5-card { flex-direction: row; align-items: stretch; }
.v5-group--solo .v5-card-media { width: 42%; flex: none; aspect-ratio: auto; padding: 5%; }
.v5-group--solo .v5-card-body { padding: clamp(22px, 2.6vw, 32px); gap: 10px; justify-content: center; }
.v5-group--solo .v5-card-t { font-size: clamp(19px, 1.9vw, 24px); letter-spacing: -0.02em; }
.v5-group--solo .v5-card-foot { margin-top: 12px; }
.v5-group--solo .v5-card-cta { width: auto; align-self: flex-start; padding-inline: 32px; }

/* ---------------------------------------------------------- Result list --- */

.v5-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: clamp(20px, 2.4vw, 30px);
}
.v5-toolbar-n { margin: 0; font-size: 14.5px; color: var(--v5-ink-soft); }
.v5-toolbar-n strong { color: var(--v5-ink); font-weight: 650; }
.v5-sort { display: flex; align-items: center; gap: 10px; margin: 0; }
.v5-sort label { font-size: 13.5px; color: var(--v5-ink-soft); }
.v5-sort-field { position: relative; display: flex; align-items: center; }
.v5-sort-field select {
	appearance: none;
	-webkit-appearance: none;
	min-height: 44px;
	padding: 0 38px 0 14px;
	border: 1px solid var(--v5-paper-3);
	border-radius: var(--mk-r);
	background: #fff;
	font: inherit;
	font-size: 14.5px;
	color: var(--v5-ink);
	cursor: pointer;
}
.v5-sort-field svg { position: absolute; right: 13px; pointer-events: none; color: var(--v5-ink-soft); }

.v5-pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: clamp(28px, 3.4vw, 44px); }
.v5-pager a,
.v5-pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--v5-paper-3);
	border-radius: var(--mk-r);
	background: #fff;
	font-size: 14.5px;
	font-weight: 560;
	color: var(--v5-ink);
	text-decoration: none;
}
.v5-pager a:hover { border-color: var(--v5-ink); }
.v5-pager .current { background: var(--v5-blue); border-color: var(--v5-blue); color: #fff; }
.v5-pager .dots { border-color: transparent; background: none; }

.v5-empty {
	padding: clamp(40px, 6vw, 80px) clamp(20px, 3vw, 40px);
	border: 1px dashed var(--v5-paper-3);
	border-radius: var(--mk-r-lg);
	text-align: center;
	background: rgba(255, 255, 255, .6);
}
.v5-empty svg { color: var(--mk-muted-soft); }
.v5-empty h2 { margin: 16px 0 0; }
.v5-empty p { margin: 12px auto 0; max-width: 48ch; color: var(--v5-ink-soft); line-height: 1.6; }
.v5-empty .v5-actions { justify-content: center; }

/* ============================================================================
   10. Chapter atmospheres
   ----------------------------------------------------------------------------
   Flat grounds almost everywhere. The two exceptions carry a single very low
   amplitude wash so the darkest rooms are not flat panels — the same rule the
   homepage follows, and for the same reason.
   ========================================================================== */

/* The chapters that explain construction. Charcoal, cool, lit from one side. */
.v5-story--back,
.v5-story--recline,
.v5-story--fixes,
.v5-story--load {
	background: var(--v5-charcoal);
	color: var(--v5-on-dark);
}
.v5-story--recline { background: var(--v5-hero-ink); }

/* Replaceable parts: near-black, with cobalt raking across the floor of the
   section. It is the one argument this brand makes and it gets the darkest
   room on the page. */
.v5-story--parts,
.v5-story--find,
.v5-discover {
	background:
		radial-gradient(120% 80% at 50% 118%, var(--v5-cobalt-glow) 0%, rgba(78, 107, 245, 0) 62%),
		var(--v5-hero-ink);
}

/* Shopping and selection stay warm and flat. */
.v5-story--adjust,
.v5-story--fitting,
.v5-terms-chapter,
.v5-alsofits { background: var(--v5-ivory); }
.v5-story--seat { background: var(--v5-stone); }

/* On a dark chapter the anatomy tiles pick up the cobalt edge on hover AND on
   keyboard focus — a hover-only affordance is invisible to anyone tabbing. */
.v5-story--parts .v5-anatomy-grid a { background: rgba(35, 40, 49, .58); border-color: var(--v5-steel); }
.v5-story--parts .v5-anatomy-grid a:hover,
.v5-story--parts .v5-anatomy-grid a:focus-visible { background: var(--v5-gunmetal); border-color: var(--v5-cobalt); }

/* The component nav is a white card by default; on the dark discovery chapters
   it becomes part of the room. */
.v5-story--find .v5-partnav,
.v5-discover .v5-partnav { background: rgba(35, 40, 49, .55); border-color: var(--v5-steel); }
.v5-story--find .v5-partnav li + li,
.v5-discover .v5-partnav li + li { border-left-color: var(--v5-steel); }
.v5-story--find .v5-partnav a:hover,
.v5-discover .v5-partnav a:hover { background: rgba(78, 107, 245, .10); }
.v5-story--find .v5-partnav-note,
.v5-discover .v5-partnav-note { color: var(--v5-on-dark-soft); }
.v5-story--find .v5-partnav svg,
.v5-discover .v5-partnav svg { color: var(--v5-cobalt); }
/* The dashed "not published yet" flag sits on near-black in these chapters, so
   the muted grey it normally uses would be 2.9:1. */
.v5-dark .v5-tbc-flag { border-color: rgba(162, 169, 184, .5); color: var(--v5-on-dark-soft); }

/* ============================================================================
   11. Breakpoints
   ----------------------------------------------------------------------------
   Designed, not compressed. On a phone the gallery comes first, the purchase
   panel stops being sticky (a sticky panel on a 600px-tall viewport is most of
   the screen), and every grid that would make a name or a price cramped drops
   to one column.
   ========================================================================== */

@media (max-width: 1080px) {
	/*
	 * Gallery, then price, then the film slot.
	 *
	 * Stacking the columns naively put the whole media block first — including
	 * the video placeholder, which is a 16:9 frame plus three lines of shot
	 * description. On a 390px screen that pushed the price and the Add to Cart
	 * button clean off the first two screens. The brief asks for the gallery
	 * first AND for the purchase information to stay readable; the placeholder
	 * is neither.
	 *
	 * display:contents lifts the three media children into the same flex
	 * container as the panel so they can be ordered independently. Safe here
	 * because .v5-buy-media is a presentational div with no role of its own —
	 * display:contents on an element that carried semantics would drop them.
	 */
	.v5-buy-grid { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 32px); }
	.v5-buy-media { display: contents; }
	.v5-stage { order: 1; }
	.v5-thumbs { order: 2; margin-top: -8px; }
	.v5-buy-panel { order: 3; position: static; }
	.v5-buy-grid .v5-videoslot { order: 4; margin-top: 0; }

	/*
	 * PRICE AND BUTTON ABOVE THE FOLD ON A PHONE.
	 *
	 * The panel reads sku, title, description, price, tax, stock, button. On a
	 * 390x844 screen that put the add-to-cart at 944px — a hundred pixels below
	 * the first screen, with a 77px description sitting between the price and
	 * the button. The conversion audit (2026-08-21) measured the same thing and
	 * called it the single biggest mobile conversion loss.
	 *
	 * The description is not removed, it moves below the button: a buyer who has
	 * already decided does not read it first, and one who has not can still read
	 * it without scrolling past anything. Explicit order on every child, because
	 * ordering one item and leaving the rest on `order: 0` would send the
	 * description to the end of the panel instead of just past the button.
	 *
	 * Squaring the stage to 5/4 buys the remaining pixels. object-fit is
	 * `contain`, so the photograph letterboxes rather than crops — nothing is
	 * cut off the product.
	 */
	.v5-stage { aspect-ratio: 5 / 4; }

	.v5-buy-panel { display: flex; flex-direction: column; }
	.v5-buy-sku    { order: 1; }
	.v5-buy-title  { order: 2; }
	.v5-buy-rating { order: 3; }
	.v5-buy-price  { order: 4; }
	.v5-buy-tax    { order: 5; }
	.v5-buy-stock  { order: 6; }
	.v5-buy-cart   { order: 7; }
	.v5-buy-lede   { order: 8; }
	.v5-buy-eta    { order: 9; }
	.v5-buy-terms  { order: 10; }
	.v5-buy-help   { order: 11; }

	.v5-story-row { grid-template-columns: 1fr; gap: clamp(24px, 3vw, 36px); }
	.v5-story-row--flip .v5-story-media { order: -1; }
	.v5-story-media { order: -1; }

	.v5-angles { grid-template-columns: repeat(3, 1fr); }
	.v5-load { grid-template-columns: repeat(2, 1fr); }
	.v5-fitgrid { grid-template-columns: 1fr; }
	.v5-fitfilm { position: static; order: -1; }
	.v5-specgrid { grid-template-columns: 1fr; }
	.v5-specgroup:nth-child(2) h3 { padding-top: clamp(20px, 2vw, 28px); }
	.v5-assure { grid-template-columns: 1fr; gap: 22px; }
	.v5-rsum { grid-template-columns: 1fr; gap: 22px; align-items: start; }
}

@media (max-width: 860px) {
	.v5-group-head { flex-direction: column; align-items: flex-start; gap: 14px; }
	/* Reserve room for the buy bar so it never covers the last section. Added
	   by JS only when the bar is actually in play, so a page without one keeps
	   its normal footer spacing. */
	body.v5-has-buybar { padding-bottom: 72px; }
}

@media (max-width: 620px) {
	/* "Frame, base, gas lift, tilt mechanism, tilt lever and armrests" against a
	   right-aligned "2 years" leaves the term stranded beside three wrapped
	   lines at 320px. Stacked, each row reads scope then term. */
	.mk-warranty-row { grid-template-columns: 1fr; gap: 4px; }
	.mk-warranty-row dd { text-align: left; }

	.v5-angles { grid-template-columns: repeat(2, 1fr); }
	.v5-load { grid-template-columns: 1fr; }
	.v5-load a { flex-direction: row; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
	.v5-load-media { width: 84px; flex: none; aspect-ratio: 1 / 1; margin-bottom: 0; }
	.v5-load-name { flex-basis: calc(100% - 100px); }
	.v5-load-note { flex-basis: 100%; margin-top: 10px; }
	.v5-load-link { padding-top: 12px; }

	.v5-buy-terms > div,
	.v5-adjust > div,
	.v5-fitfacts > div { grid-template-columns: 1fr; gap: 4px; }
	.v5-specgroup > dl > div,
	.v5-spectable > div { grid-template-columns: 1fr; gap: 4px; }

	/* The solo card's row layout is already what every card does at this width,
	   so it hands its widths back rather than staying 42%/32px wider than its
	   neighbours would be. Its selectors are (0,2,0) and win by default. */
	.v5-group--solo .v5-grid-4 { max-width: none; }
	.v5-group--solo .v5-card-media { width: 132px; padding: 12px; }
	.v5-group--solo .v5-card-body { padding: 16px 16px 16px 4px; }
	.v5-group--solo .v5-card-t { font-size: 15.5px; letter-spacing: -0.014em; }
	.v5-group--solo .v5-card-cta { width: 100%; padding-inline: 20px; }

	.v5-thumb { width: 62px; height: 62px; }
	.v5-buy-cart form.cart { gap: 10px; }
	.v5-buy-cart .single_add_to_cart_button { min-width: 0; }

	.v5-review-head { grid-template-columns: auto 1fr; }
	.v5-review-stars { grid-column: 2; }
	.v5-rbar { grid-template-columns: 52px 1fr 24px; gap: 8px; }
	.v5-toolbar { gap: 12px; }
	.v5-sort { width: 100%; }
	.v5-sort-field { flex: 1; }
	.v5-sort-field select { width: 100%; }
}