/* Duck Mark — product detail.
 *
 * A new sheet rather than a repair of the old one. The plugin stylesheet this
 * replaces carries 141 colour literals from the palette it was written for and
 * 245 !important declarations; editing it rule by rule would have meant keeping
 * both of those. Everything here asks the pack for its colours and its rhythm,
 * and nothing here is !important — where a rule has to be strong it is strong by
 * being specific about the markup it belongs to.
 *
 * The markup is WooCommerce's `single-product.php` with Astra filling the
 * summary column and duck-mark-single-product-control inserting its own blocks
 * around it. None of that is touched: no template is replaced, no hook removed,
 * no variation script rewritten. This file only says what the result looks like.
 *
 * Scoped to `body.dm-commerce-single`, a class this feature adds itself, so the
 * sheet does not depend on the older plugin's body classes and survives that
 * plugin's stylesheet being switched off.
 */

/* These names are local handles, not new values. Each one points at a token from
 * the pack's own set of 34 unless that set has no answer, and the two that have
 * no answer say so on the line.
 *
 * Written the first time by inventing values — a radius made out of the gap, a
 * button text colour guessed at through a fallback — after looking for tokens
 * called `--dm-radius` and `--dm-text-on-accent`, finding neither, and calling
 * them missing. The pack has `--dm-radius-sm/md/lg/pill` and `--dm-on-primary`;
 * the names were wrong, not the tokens. Read the list before saying a token is
 * absent.
 */
body.dm-commerce-single {

	/* The pack now names the steps between its gap and its section gap, so these
	   are handles on pack tokens like every other line here. `band` is gone: its
	   six uses read the same at the large step. */



	/*
	 * The theme's own link colour, answered by the pack on this screen only.
	 *
	 * The add-to-cart button is blue because Astra's inline rule
	 * `.woocommerce button.button.alt.disabled.wc-variation-selection-needed`
	 * sets `background-color: var(--ast-global-color-0)`, and at [0,5,1] it
	 * outranks our [0,4,3] — measured branch by branch, neither side using
	 * !important. Adding a class to win would work until Astra adds one back;
	 * that race is how a stylesheet ends up with 245 !important declarations.
	 *
	 * So the selector is left to Astra and the value is answered here. Scoped to
	 * this screen's own body class, never globally, and only this one variable of
	 * the nine — it is the only one the button reads.
	 *
	 * Measured blast radius before committing: of 315 visible elements, 19 change
	 * colour — 18 inside div.product, 1 elsewhere, 0 in the header, 0 in the
	 * footer. Every one of them goes from Astra's #046bd2 to the pack's accent,
	 * which is the point.
	 *
	 * The same collision waits on cart, checkout, my account and order received:
	 * they load the same inline block and the same nine variables.
	 */
	--ast-global-color-0: var(--dm-text);
}

/* Answering the theme's link colour with ink takes the colour cue away, so the
   links that carried text get the cue back as an underline. Measured before
   committing: of 315 visible elements 18 change, all of them from #ff8fab to
   ink, none in the header, none in the footer, and no change in the opposite
   direction. Eleven of the eighteen are anchors.

   Four of those eleven are not text links and are left alone — two image
   wrappers (the gallery zoom trigger, the related-card thumbnail) and two
   anchors drawn as buttons (the related-card CTA, the sticky buy button). An
   underline on an image or a button is noise, not a cue. */
body.dm-commerce-single div.product a:not(.button):not(.woocommerce-product-gallery__trigger):not(.dm-spc-related-card__image):not(.dm-spc-related-card__button):not(.dm-spc-sticky__button):not(.wc-tabs a),
body.dm-commerce-single .dm-spc-related a:not(.dm-spc-related-card__image):not(.dm-spc-related-card__button) {
	text-decoration: underline;
	text-decoration-thickness: var(--dm-border-w);
	text-underline-offset: var(--dm-space-xs);
}

/* The tabs are a navigation strip, not prose. Their cue is the open tab's rule
   underneath, which is already ink at 16.66:1. */
body.dm-commerce-single div.product .woocommerce-tabs ul.tabs li a {
	text-decoration: none;
}

/*
 * The same variable, answered again for the one element that must not look
 * pressable: the add-to-cart button before a variation is chosen. Every flavour
 * in this pack is a variable product, so this is the state a customer meets
 * first on every product page.
 *
 * Astra paints both the enabled and the disabled button from
 * --ast-global-color-0, so filling it once at body level made "choose an option
 * first" look exactly like "buy this now". Answering it again on the element
 * separates them without touching the selector Astra won with.
 *
 * The value is --dms-quiet, and the reason is measured. Astra sets the button's
 * text to a literal white — not a variable — so no token can answer it, and the
 * background has to carry the contrast on its own:
 *
 *   --dms-panel  1.05:1   invisible
 *   --dms-line   1.25:1   invisible
 *   --dms-quiet  5.20:1   readable, and plainly not the accent
 *   --dms-ink   16.66:1   readable, but a near-black button reads as the primary
 *                         action, which is the opposite of what disabled means
 *
 * Blast radius measured before committing: of 315 visible elements, exactly 1
 * changes — this button. Header 0, footer 0.
 */
body.dm-commerce-single .single_add_to_cart_button.disabled {
	--ast-global-color-0: var(--dm-muted);
}

/* ------------------------------------------------------------ two columns */

body.dm-commerce-single div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--dm-space-lg);
	row-gap: var(--dm-space-lg);
	align-items: start;
	color: var(--dm-text);
	font-family: var(--dm-font-body, inherit);
}

/* The gallery and the summary are the two columns; everything else — tabs,
   related products, the plugin's own trailing blocks — spans both. */
body.dm-commerce-single div.product > .woocommerce-product-gallery {
	grid-column: 1;
	margin: 0;
}

body.dm-commerce-single div.product > .summary,
body.dm-commerce-single div.product > .entry-summary {
	grid-column: 2;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--dm-space-sm);
}

/* Fill the column instead of half of it.
 *
 * Astra's inline CSS gives these two `width: 50%` and `width: 46%` — the widths
 * that split a full-width `div.product` in the float layout. Once this sheet
 * makes that element a grid, the percentages resolve against the grid area and
 * halve each column again: measured 271 of 542 and 249 of 542, exactly 50% and
 * 46%.
 *
 * The winning selector carries an ID (`#content`, specificity [1,4,2]) so no
 * selector here can outrank it, and the values are literals so no token can
 * answer them. Neither raising specificity nor !important is on the table.
 *
 * `min-width` does not need to win — it is a different property, computed after
 * `width`, and Astra declares it on neither element (measured: 0 declarations
 * for both). So the column width is stated once, by us, and `width: 50%` simply
 * has nothing left to shrink.
 *
 * Measured before committing: gallery 271 -> 542, summary 249 -> 542, gallery
 * image 271 -> 542 (its file is 600px, so it was never the limit), document
 * scrollWidth unchanged at 1440 — no overflow — header 0, footer 0.
 */
body.dm-commerce-single div.product > .woocommerce-product-gallery,
body.dm-commerce-single div.product > .summary,
body.dm-commerce-single div.product > .entry-summary {
	min-width: 100%;
}

body.dm-commerce-single div.product > .woocommerce-tabs,
body.dm-commerce-single div.product > .dm-spc-related,
body.dm-commerce-single div.product > .related,
body.dm-commerce-single div.product > .upsells,
body.dm-commerce-single div.product > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

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

body.dm-commerce-single div.product .woocommerce-product-gallery__wrapper {
	border-radius: var(--dm-radius-lg);
	overflow: hidden;
	background: var(--dm-surface);
}

body.dm-commerce-single div.product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

body.dm-commerce-single div.product .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--dm-space-xs);
	margin: var(--dm-space-sm) 0 0;
	padding: 0;
	list-style: none;
}

body.dm-commerce-single div.product .flex-control-thumbs li {
	margin: 0;
	list-style: none;
}

body.dm-commerce-single div.product .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--dm-radius-sm);
	border: var(--dm-border-w) solid transparent;
	opacity: 0.62;
	cursor: pointer;
}

/* The thumbnail that is currently showing. Without this the gallery looks the
   same whichever image is open, which is the state most easily forgotten. */
body.dm-commerce-single div.product .flex-control-thumbs img.flex-active,
body.dm-commerce-single div.product .flex-control-thumbs img:hover,
body.dm-commerce-single div.product .flex-control-thumbs img:focus {
	opacity: 1;
	border-color: var(--dm-text);
}

/* -------------------------------------------------------- name and price */

body.dm-commerce-single div.product .product_title {
	margin: 0;
	color: var(--dm-text);
	font-family: var(--dm-font-display, var(--dm-font-body, inherit));
	line-height: 1.25;
}

body.dm-commerce-single div.product .summary > .price,
body.dm-commerce-single div.product .summary .price {
	margin: 0;
	color: var(--dm-text);
	font-family: var(--dm-font-display, var(--dm-font-body, inherit));
	line-height: 1.3;
}

/* A reduced price shows both numbers: the old one struck through and quiet, the
   new one in the reading colour. No product on this site carries a sale price
   today, so this is written from the markup WooCommerce emits, not from a
   screen, so the selector remains intentionally narrow and unverified outside this surface. */
body.dm-commerce-single div.product .price del,
body.dm-commerce-single div.product .price del .woocommerce-Price-amount {
	color: var(--dm-muted);
	text-decoration: line-through;
	font-weight: 400;
}

body.dm-commerce-single div.product .price ins,
body.dm-commerce-single div.product .price ins .woocommerce-Price-amount {
	color: var(--dm-text);
	text-decoration: none;
}

body.dm-commerce-single div.product .price .woocommerce-Price-currencySymbol {
	font-size: 0.8em;
}

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

body.dm-commerce-single div.product .woocommerce-product-details__short-description {
	color: var(--dm-text);
	line-height: 1.9;
}

body.dm-commerce-single div.product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------- stock and availability */

body.dm-commerce-single div.product .stock {
	margin: 0;
	color: var(--dm-muted);
}

body.dm-commerce-single div.product .stock.out-of-stock,
body.dm-commerce-single div.product.outofstock .stock {
	color: var(--dm-text);
	background: var(--dm-surface);
	border: var(--dm-border-w) solid var(--dm-border);
	border-radius: var(--dm-radius-sm);
	padding: var(--dm-space-xs) var(--dm-space-sm);
}

/* -------------------------------------------------------- options and cart */

body.dm-commerce-single div.product form.cart {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--dm-space-sm);
}

body.dm-commerce-single div.product table.variations {
	margin: 0;
	border: 0;
	width: 100%;
}

body.dm-commerce-single div.product table.variations th,
body.dm-commerce-single div.product table.variations td {
	border: 0;
	padding: 0 0 var(--dm-space-sm);
	vertical-align: middle;
	background: none;
}

body.dm-commerce-single div.product table.variations th.label {
	color: var(--dm-muted);
	text-align: left;
	white-space: nowrap;
	padding-right: var(--dm-space-sm);
}

body.dm-commerce-single div.product table.variations select {
	width: 100%;
	color: var(--dm-text);
	background: var(--dm-bg);
	border: var(--dm-border-w) solid var(--dm-border);
	border-radius: var(--dm-radius-sm);
	padding: var(--dm-space-xs) var(--dm-space-sm);
	font-family: inherit;
}

/* The select is also a state: it can be focused, and it can be the thing the
   customer has not answered yet. */
body.dm-commerce-single div.product table.variations select:hover {
	border-color: var(--dm-text);
}

body.dm-commerce-single div.product table.variations select:focus,
body.dm-commerce-single div.product table.variations select:focus-visible {
	outline: var(--dm-rule) solid var(--dm-text);
	outline-offset: var(--dm-space-xs);
	border-color: var(--dm-text);
}

body.dm-commerce-single div.product .reset_variations {
	color: var(--dm-muted);
	text-decoration: underline;
}

body.dm-commerce-single div.product .reset_variations:hover,
body.dm-commerce-single div.product .reset_variations:focus {
	color: var(--dm-text);
}

/* What the chosen variation costs, and whether it can be had. Both appear only
   after a choice is made, which is why they are styled as their own block
   rather than inheriting whatever sat there before. */
body.dm-commerce-single div.product .single_variation_wrap {
	display: flex;
	flex-direction: column;
	gap: var(--dm-space-sm);
}

body.dm-commerce-single div.product .woocommerce-variation-price .price {
	color: var(--dm-text);
}

body.dm-commerce-single div.product .woocommerce-variation-availability {
	color: var(--dm-muted);
}

body.dm-commerce-single div.product .woocommerce-variation-availability .out-of-stock {
	color: var(--dm-text);
}

body.dm-commerce-single div.product .quantity {
	display: inline-flex;
	align-items: stretch;
}

body.dm-commerce-single div.product .quantity input.qty {
	width: calc(var(--dm-gap) * 4);
	color: var(--dm-text);
	background: var(--dm-bg);
	border: var(--dm-border-w) solid var(--dm-border);
	border-radius: var(--dm-radius-sm);
	padding: var(--dm-space-xs);
	text-align: center;
	font-family: inherit;
}

body.dm-commerce-single div.product .quantity input.qty:focus,
body.dm-commerce-single div.product .quantity input.qty:focus-visible {
	outline: var(--dm-rule) solid var(--dm-text);
	outline-offset: var(--dm-space-xs);
}

body.dm-commerce-single div.product .cart .button,
body.dm-commerce-single div.product button.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dm-space-xs);
	min-height: calc(var(--dm-gap) * 3);
	padding: var(--dm-space-sm) var(--dm-space-lg);
	color: var(--dm-on-primary);
	/* Ink, not accent. Astra writes this button's text as a literal white that no
	   token can answer, so the background alone carries the contrast: white on
	   this pack's accent measures 2.15:1, white on ink 16.66:1. Accent stays
	   where it reads as emphasis rather than as a surface — the open tab's
	   underline, the badges. Three of the four packs have an accent too light to
	   take white text, so this is not a fruity-only adjustment. */
	background: var(--dm-text);
	border: var(--dm-border-w) solid transparent;
	border-radius: var(--dm-btn-radius);
	font-family: inherit;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

body.dm-commerce-single div.product button.single_add_to_cart_button:hover,
body.dm-commerce-single div.product .cart .button:hover {
	border-color: var(--dm-text);
}

/* The ring has to be findable on both of this button's backgrounds, and after
   the enabled button became --dm-text the ring was --dm-text on --dm-text: 1:1,
   a ring the same colour as the thing it surrounds. No rig is needed to see
   that; it is two hex values. Scored against both states:

     --dm-bg / --dm-on-primary  16.66 on active, 5.20 on disabled   usable
     --dm-surface               15.81 / 4.94                        usable
     --dm-surface-2             14.68 / 4.59                        usable
     --dm-border                13.31 / 4.16                        fails disabled
     --dm-text (what it was)     1.00 / 3.20                        fails both
     --dm-accent                 7.75 / 2.42                        fails disabled

   --dm-on-primary is the one whose name means this: the colour that reads on a
   filled primary surface. Same value as --dm-bg here, but chosen for what it
   says rather than for what it happens to equal. */
body.dm-commerce-single div.product button.single_add_to_cart_button:focus,
body.dm-commerce-single div.product button.single_add_to_cart_button:focus-visible,
body.dm-commerce-single div.product .cart .button:focus-visible {
	outline: var(--dm-rule) solid var(--dm-on-primary);
	outline-offset: var(--dm-space-xs);
}

body.dm-commerce-single div.product button.single_add_to_cart_button:active,
body.dm-commerce-single div.product .cart .button:active {
	border-color: var(--dm-text);
}

/* Before a variation is chosen WooCommerce marks the button disabled and
   wc-add-to-cart-variation.js keeps it that way. Saying so on screen is the
   difference between "nothing happened" and "you have not chosen yet". */
body.dm-commerce-single div.product button.single_add_to_cart_button.disabled,
body.dm-commerce-single div.product button.single_add_to_cart_button:disabled,
body.dm-commerce-single div.product button.single_add_to_cart_button.wc-variation-selection-needed {
	color: var(--dm-muted);
	background: var(--dm-surface);
	border-color: var(--dm-border);
	cursor: not-allowed;
}

/* ------------------------------------------- the plugin's own summary blocks */

body.dm-commerce-single .dm-spc-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dm-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.dm-commerce-single .dm-spc-badges span {
	color: var(--dm-text);
	background: var(--dm-surface);
	border: var(--dm-border-w) solid var(--dm-border);
	border-radius: var(--dm-radius-sm);
	padding: var(--dm-space-xs) var(--dm-space-sm);
}

body.dm-commerce-single .dm-spc-catch {
	margin: 0;
	color: var(--dm-text);
	font-family: var(--dm-font-display, var(--dm-font-body, inherit));
	line-height: 1.6;
}

body.dm-commerce-single .dm-spc-specs {
	margin: 0;
	color: var(--dm-text);
	background: var(--dm-surface);
	border-radius: var(--dm-radius-lg);
	padding: var(--dm-space-sm);
}

body.dm-commerce-single .dm-spc-specs dt,
body.dm-commerce-single .dm-spc-specs strong {
	color: var(--dm-muted);
}

body.dm-commerce-single .dm-spc-buy-area {
	display: flex;
	flex-direction: column;
	gap: var(--dm-space-sm);
	margin: 0;
	padding: var(--dm-space-sm);
	background: var(--dm-surface);
	border-radius: var(--dm-radius-lg);
}

body.dm-commerce-single .dm-spc-benefits {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dm-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.dm-commerce-single .dm-spc-benefits > * {
	color: var(--dm-text);
	list-style: none;
}

body.dm-commerce-single .dm-spc-benefits strong {
	display: block;
	color: var(--dm-text);
}

body.dm-commerce-single .dm-spc-benefits em,
body.dm-commerce-single .dm-spc-benefits span {
	color: var(--dm-muted);
	font-style: normal;
}

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

body.dm-commerce-single div.product .woocommerce-tabs {
	margin: var(--dm-space-lg) 0 0;
}

body.dm-commerce-single div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dm-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: var(--dm-border-w) solid var(--dm-border);
}

body.dm-commerce-single div.product .woocommerce-tabs ul.tabs::before,
body.dm-commerce-single div.product .woocommerce-tabs ul.tabs::after {
	display: none;
}

body.dm-commerce-single div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	list-style: none;
}

body.dm-commerce-single div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: var(--dm-space-sm) 0;
	color: var(--dm-muted);
	text-decoration: none;
	border-bottom: var(--dm-rule) solid transparent;
}

body.dm-commerce-single div.product .woocommerce-tabs ul.tabs li a:hover,
body.dm-commerce-single div.product .woocommerce-tabs ul.tabs li a:focus,
body.dm-commerce-single div.product .woocommerce-tabs ul.tabs li a:focus-visible {
	color: var(--dm-text);
}

/* The open tab. A border-bottom rather than an inset box-shadow: the shadow the
   old sheet used could never be read back through the measuring rig because the
   theme transitions every property on these links, and a border does not need a
   transition to be seen. */
body.dm-commerce-single div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--dm-text);
	border-bottom-color: var(--dm-text);
}

body.dm-commerce-single div.product .woocommerce-tabs .panel,
body.dm-commerce-single div.product .woocommerce-tabs .wc-tab,
body.dm-commerce-single div.product .woocommerce-Tabs-panel {
	margin: var(--dm-space-lg) 0 0;
	padding: 0;
	color: var(--dm-text);
	line-height: 1.9;
}

body.dm-commerce-single div.product .woocommerce-Tabs-panel h2,
body.dm-commerce-single .dm-spc-tab-box h2 {
	margin: 0 0 var(--dm-space-sm);
	color: var(--dm-text);
	font-family: var(--dm-font-display, var(--dm-font-body, inherit));
}

/* WooCommerce hides closed panels with inline display:none; nothing here may
   fight that, so the closed state is simply not styled. */

/* -------------------------------------------------------- related products */

body.dm-commerce-single .dm-spc-related,
body.dm-commerce-single div.product .related {
	margin: var(--dm-space-lg) 0 0;
	padding: var(--dm-space-lg) 0 0;
	border-top: var(--dm-border-w) solid var(--dm-border);
}

body.dm-commerce-single .dm-spc-related__head,
body.dm-commerce-single div.product .related > h2 {
	margin: 0 0 var(--dm-space-lg);
	color: var(--dm-text);
	font-family: var(--dm-font-display, var(--dm-font-body, inherit));
}

body.dm-commerce-single .dm-spc-related__grid,
body.dm-commerce-single div.product .related ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--dm-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

body.dm-commerce-single .dm-spc-related-card,
body.dm-commerce-single div.product .related ul.products li.product {
	margin: 0;
	width: auto;
	float: none;
	list-style: none;
}

body.dm-commerce-single .dm-spc-related-card img,
body.dm-commerce-single div.product .related ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--dm-radius-sm);
}

body.dm-commerce-single .dm-spc-related-card__title,
body.dm-commerce-single div.product .related ul.products li.product .woocommerce-loop-product__title {
	color: var(--dm-text);
}

body.dm-commerce-single .dm-spc-related-card:hover img,
body.dm-commerce-single div.product .related ul.products li.product:hover img {
	opacity: 0.88;
}

/* --------------------------------------------------------- what WooCommerce says

   Three notices reach this screen: a success line after something is added to
   the cart, an error when a variation has not been chosen and the form is
   submitted anyway, and a plain information line. None of them are visible in
   the resting screen, which is exactly why Vol.1 13 asks for them by name —
   without these rules the first customer to hit a validation error meets an
   unstyled block.

   They differ by the weight of their left edge, not by a colour this pack has
   not named. Same decision as the cart sheet. */

body.dm-commerce-single .woocommerce-message,
body.dm-commerce-single .woocommerce-error,
body.dm-commerce-single .woocommerce-info {
	margin: 0 0 var(--dm-space-sm);
	padding: var(--dm-space-sm);
	color: var(--dm-text);
	background: var(--dm-surface);
	border: var(--dm-border-w) solid var(--dm-border);
	border-radius: var(--dm-radius-sm);
	list-style: none;
}

body.dm-commerce-single .woocommerce-error {
	border-left: var(--dm-rule) solid var(--dm-text);
}

body.dm-commerce-single .woocommerce-message {
	border-left: var(--dm-rule) solid var(--dm-text);
}

body.dm-commerce-single .woocommerce-info {
	border-left: var(--dm-rule) solid var(--dm-border);
}

/* The notice carries its own button back to the cart. It is secondary here —
   the customer is still on the product page and may want another option. */
body.dm-commerce-single .woocommerce-message .button,
body.dm-commerce-single .woocommerce-error .button,
body.dm-commerce-single .woocommerce-info .button {
	color: var(--dm-text);
	background: none;
	border: var(--dm-border-w) solid var(--dm-border);
	border-radius: var(--dm-btn-radius);
	padding: var(--dm-space-xs) var(--dm-space-sm);
	text-decoration: none;
}

body.dm-commerce-single .woocommerce-message .button:hover,
body.dm-commerce-single .woocommerce-error .button:hover,
body.dm-commerce-single .woocommerce-info .button:focus-visible {
	border-color: var(--dm-text);
}

/* --------------------------------------------------------------- one column */

/* 782 is the pack's breakpoint. No second one is introduced here. */
@media (max-width: 782px) {
	body.dm-commerce-single div.product {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--dm-space-lg);
	}

	body.dm-commerce-single div.product > .woocommerce-product-gallery,
	body.dm-commerce-single div.product > .summary,
	body.dm-commerce-single div.product > .entry-summary,
	body.dm-commerce-single div.product > .woocommerce-tabs,
	body.dm-commerce-single div.product > .dm-spc-related,
	body.dm-commerce-single div.product > .related {
		grid-column: 1;
	}

	body.dm-commerce-single .dm-spc-benefits,
	body.dm-commerce-single .dm-spc-related__grid,
	body.dm-commerce-single div.product .related ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.dm-commerce-single div.product .woocommerce-tabs ul.tabs {
		gap: var(--dm-space-sm);
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	body.dm-commerce-single div.product .woocommerce-tabs ul.tabs li a {
		white-space: nowrap;
	}

	/* The button is the one thing that must stay reachable with a thumb. */
	body.dm-commerce-single div.product .cart .button,
	body.dm-commerce-single div.product button.single_add_to_cart_button {
		width: 100%;
	}

	body.dm-commerce-single div.product .quantity input.qty {
		width: calc(var(--dm-gap) * 5);
	}
}