/* ==========================================================================
MOULDSHOP PDP TOP — image, buy box, thumbnails. M4 / TASK-0094, items 1-3
and 10.
SCOPE: below the breadcrumb, above the variant table, on page 8454's grid.
Desktop 1440 except item 3, which is the one breakpoint-aware rule here.
── THE ROUTING, because every selector below depends on it ──────────────
Page 8454 carries `PageNavigationTag = ProductDetailPage`, and NO product
group sets `GroupMetaPrimaryPage` (283 blank, 38 null, 1 junk value). So
vendor's `ProductDetailRenderGrid.cshtml` always takes its fallback branch:
@RenderGrid(Model.PrimaryOrDefaultGroup.PrimaryPageId > 0
? Model.PrimaryOrDefaultGroup.PrimaryPageId
: GetPageIdByNavigationTag("ProductDetailPage"))
EVERY product in area 3 therefore renders 8454's rows, NESTED INSIDE page
5862's app column. Visiting /en-us/shop/mouldshop-product-details renders
the same rows STANDALONE with no product in context. Both surfaces are
matched on the paragraph item type rather than on a page or a depth, so
one rule serves both.
── THE REGION, measured at 1440 on a real product ───────────────────────
row def scheme space content
--- --------- -------- ------ -----------------------------------
0 1Column medium_2 4 / 2 breadcrumb (TASK-0093)
1 2Columns - 3 / 6 gallery 636 | buy box 636
2 1Column - 6 / 6 gallery thumbnails, full width 1288
3 1Column light_1 6 / 6 variant table (out of scope)
Rows 1 and 2 are this packet's. Rows 0 and 3 are named so the boundary is
explicit, and neither is touched.
========================================================================== */
:root {
/* Item 2: the operator's tile size. The gallery ships 88px for the strip
that used to sit under the big image; this strip is its own section now
and takes its own size. Declared here rather than edited into
mouldshop-product-gallery.css so the gallery keeps working unchanged if
this block is reverted. */
--ms-pdp-thumb-size: 175px;
/* Item 3: the column divider's inset, top and bottom. */
--ms-pdp-divider-inset: 1.5rem;
}
/* --------------------------------------------------------------------------
ITEM 1 — THE BIG IMAGE LOSES ITS BORDER.
Operator: it reads as a placeholder. MEASURED, and the border is NOT on the
that wraps it:
`1px solid rgba(10,41,121,.35)` with `border-radius: 2px` and a white
ground, from `.ms-gallery-main` in mouldshop-product-gallery.css. A rule
written against the image would have done nothing and looked correct.
The button stays a button: it is the lightbox trigger and its focus ring is
the keyboard affordance. Only the resting border and radius go.
-------------------------------------------------------------------------- */
.ms-gallery-main {
border: 0;
border-radius: 0;
}
/* --------------------------------------------------------------------------
ITEM 2 — THE THUMBNAIL STRIP IS ITS OWN SECTION, UNDER A RULE.
It is ALREADY its own row (row 2, 1Column, full content width) and already
starts at the image column's left edge, so the packet's "own section" and
"left-aligned to the image column" are satisfied by the existing authoring
and nothing is moved. What is added is the separator and the tile size.
A RULE ONLY, NO LABEL. The live reference puts a heading above this strip;
the operator's instruction is explicit that ours does not get one, so this
is a border and not a `::before` carrying text.
The rule sits on the thumbs container rather than on the row, so it tracks
the strip if the strip is ever re-authored into a different row.
-------------------------------------------------------------------------- */
.ms-gallery-thumbs {
border-block-start: 1px solid var(--ms-rule);
padding-block-start: var(--ms-gallery-thumb-gap, 0.75rem);
}
.ms-gallery-thumbs .ms-gallery-thumb {
width: var(--ms-pdp-thumb-size);
height: var(--ms-pdp-thumb-size);
}
/* THE STRIP IS A COLUMN GRID (operator, 2026-09-24: "distribute them as columns - 8 / 6 / 4", then "12/ 8 / 4").
Was a flex row of fixed 175px tiles, left-aligned and wrapping, so the row's right end was
ragged. Now the strip's width is split into equal columns and each thumb fills its cell as a
1:1 square:
>= 992px 12 columns (Bootstrap lg - where the image and buy box sit side by side)
750-991 8 columns
<= 749 4 columns (replaces the gallery's one-row sideways scroller on phones)
The gap stays --ms-gallery-thumb-gap. --ms-pdp-thumb-size no longer sizes the tiles. */
.ms-gallery-thumbs .ms-gallery-thumbs-list {
display: grid;
grid-template-columns: repeat(var(--ms-pdp-thumb-cols, 12), minmax(0, 1fr));
overflow: visible;
}
.ms-gallery-thumbs .ms-gallery-thumb {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
}
@media (max-width: 991.98px) {
.ms-gallery-thumbs { --ms-pdp-thumb-cols: 8; }
}
@media (max-width: 749px) {
.ms-gallery-thumbs { --ms-pdp-thumb-cols: 4; }
}
/* --------------------------------------------------------------------------
ITEM 3 — A VERTICAL DIVIDER BETWEEN THE IMAGE COLUMN AND THE BUY BOX.
THE ONE MOBILE-AWARE RULE IN THIS FILE, and the packet says so explicitly.
`@media (min-width: 992px)` is Bootstrap's `lg`, which is the breakpoint
the grid itself stacks at: the columns carry `g-col-12 g-col-lg-6`, so
below 992 they are full width and stacked. A vertical rule between stacked
columns would draw a line down the left edge of the buy box with nothing
on the other side of it, which is the failure the packet names.
ON THE BUY-BOX COLUMN'S LEADING EDGE, not as a separate element: there is
no element between the two columns to style, and adding one would mean
editing a vendor row template (DEC-0037).
THE INSET IS THE PADDING THE PACKET ASKS FOR. `border-image` cannot inset a
plain border, so the rule is drawn as a gradient background on the column's
leading edge instead -- one declaration, no extra markup, and it stops
short at both ends.
-------------------------------------------------------------------------- */
@media (min-width: 992px) {
[data-swift-gridrow="2Columns"]
> [data-swift-container]
> [data-swift-gridcolumn][data-dw-itemtype="swift-v2_productcomponentselector"] {
background-image: linear-gradient(
to bottom,
transparent 0,
transparent var(--ms-pdp-divider-inset),
var(--ms-rule) var(--ms-pdp-divider-inset),
var(--ms-rule) calc(100% - var(--ms-pdp-divider-inset)),
transparent calc(100% - var(--ms-pdp-divider-inset)),
transparent 100%
);
background-repeat: no-repeat;
background-size: 1px 100%;
background-position: left top;
padding-inline-start: var(--ms-pdp-divider-inset);
}
/* TWO EQUAL HALVES, THE DIVIDER ON THE CENTRE LINE (operator, 2026-09-24: "these two sides
should be equal - and divider between should be exactly in the middle of the page - it's
not"). Two causes, both fixed here, on the image | buy-box row only:
1. swift.css's .grid tracks are `1fr`, i.e. minmax(auto, 1fr): a column whose content
has a wide min-content (a long unbroken product name, the nowrap button row) pushes
its tracks wider and the other half narrower. minmax(0, 1fr) makes the twelve tracks
equal whatever the content.
2. the divider was drawn on the buy-box column's left edge, which sits HALF THE COLUMN
GAP (1rem, gap setting 3) right of the centre. The gap goes to 0 and the gallery
takes the buy box's inset on its own side, so the column boundary - where the
divider is - is the exact middle, with the same 1.5rem of air either side. */
[data-swift-gridrow="2Columns"]
> [data-swift-container]:has(> [data-swift-gridcolumn][data-dw-itemtype="swift-v2_productcomponentselector"]) {
grid-template-columns: repeat(var(--bs-columns, 12), minmax(0, 1fr));
column-gap: 0;
}
[data-swift-gridrow="2Columns"]
> [data-swift-container]
> [data-swift-gridcolumn][data-dw-itemtype="mouldshop_productgallery_custom"] {
padding-inline-end: var(--ms-pdp-divider-inset);
}
}
/* --------------------------------------------------------------------------
ITEM 10 — THE BUTTON ROW, NO-VARIANT BRANCH.
The fork itself already exists in the buy-box template and is NOT touched:
a variant product renders BUY NOW + SPECIFICATION side by side, and a
no-variant product renders the qty stepper + Add to basket, then
SPECIFICATION full width below. One template, one condition -- which is
what TASK-0092 requires and what the packet's item 10 restates.
WHAT IS WRONG TODAY IS ONLY THE WIDTHS. Measured at 1440 on
/en-us/shop/parts/lights/ascent-jet-set-head-taillight-combo: the stepper
is `flex: 0 0 auto` and sizes to its contents while Add to basket takes
`flex: 1 1 12rem` and fills the rest -- 478px against a stepper of roughly
half that. The packet asks for EQUAL width.
A two-column grid rather than flex weights, because "equal" should not
depend on either control's contents. `minmax(0, 1fr)` and not `1fr`: the
stepper contains a vendor input with its own intrinsic minimum, and a bare
`1fr` floors at that minimum and the two columns come out unequal again.
AND IT IS SCOPED TO THE CART ROW ONLY. `.ms-buybox-actions` -- the variant
branch's button pair and the secondary SPECIFICATION row -- keeps its flex
layout untouched, so the variant product's row is exactly as it was.
-------------------------------------------------------------------------- */
.ms-buybox-cart-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
}
.ms-buybox-cart-row .ms-buybox-qty {
flex: 1 1 auto;
justify-content: center;
}
.ms-buybox-cart-row .ms-buybox-add {
flex: 1 1 auto;
width: 100%;
}
/* Below lg the two stack, for the same reason the divider does not draw:
a 175px-wide stepper beside a 175px-wide button at 390 is neither. */
@media (max-width: 575.98px) {
.ms-buybox-cart-row {
grid-template-columns: minmax(0, 1fr);
}
}
/* --------------------------------------------------------------------------
ITEM 11 — FAVOURITES MOVES TO THE IMAGE.
The heart is emitted by the gallery template now (see its own header). This
block only suppresses the buy-box copy, so the control exists once.
SUPPRESSED FROM HERE RATHER THAN DELETED FROM THE BUY-BOX TEMPLATE, and
that is deliberate. The operator's standing rule is that an existing
element is not deleted (2026-09-06); the packet's rollback line requires
item 11 to revert independently. Removing this one rule restores the
buy-box favourite exactly, with no template change to undo.
VENDOR RENDERS NOTHING HERE FOR A SIGNED-OUT SHOPPER -- `Pageview.User`
gates it in the template, so an anonymous visitor sees no heart in either
place. Reported rather than worked around: the packet says to build it
anyway, and it is built.
-------------------------------------------------------------------------- */
.ms-buybox-fav {
display: none;
}
/* --------------------------------------------------------------------------
ITEM 11, continued — the heart's position on the image.
Absolutely placed against `.ms-gallery`, which is the wrapper the template
emits; `.ms-gallery-main` is the ratio box and positioning against it would
tie the heart to the image's aspect ratio rather than to the frame.
-------------------------------------------------------------------------- */
.ms-gallery {
position: relative;
}
.ms-gallery-fav {
position: absolute;
inset-block-start: 0.75rem;
inset-inline-end: 0.75rem;
z-index: 2;
line-height: 0;
}
/* The wrapper is emitted only when vendor's partial has something to draw, so
this never leaves an invisible hit target over the image. */
.ms-gallery-fav:empty {
display: none;
}
/* ==========================================================================
ITEMS 5, 7, 8 — BUILT TO THE TWO REFERENCE LAYOUTS, supplied by the
operator 2026-09-20 ("these are layouts").
BOTH REFERENCES ARE VARIANT PRODUCTS. Each shows BUY NOW plus a "From £"
price, which is the variant branch. THERE IS NO NO-VARIANT REFERENCE, so
the type below is applied to both branches for consistency and that choice
is reported rather than buried -- if the no-variant buy box should differ,
it needs its own reference.
WHAT THE LAYOUTS SHOW, READ OFF THEM:
element layout ours before
------------- ------------------------------------ ------------------
title navy, bold, large MATCHED already
manufacturer "Manufacturer:" light blue, ABSENT
name navy bold, under the title
order title / manufacturer / buttons / buttons then price
price -- ALREADY MATCHED
price LIGHT BLUE, large, regular weight navy, 16px (From)
navy 28px bold (now)
Files light-blue label + rule to the no label, no rule
right edge, then icon + link
========================================================================== */
/* --------------------------------------------------------------------------
ITEM 5 — MANUFACTURER.
-------------------------------------------------------------------------- */
.ms-buybox-manufacturer {
margin-block: 0 1rem;
font-family: var(--ms-font-body);
font-size: 15px;
line-height: 1.4;
}
.ms-buybox-manufacturer-label {
color: var(--ms-accent-ink);
}
.ms-buybox-manufacturer-name {
color: var(--ms-ink);
font-weight: 700;
}
/* --------------------------------------------------------------------------
ITEM 7 — THE PRICE.
Light blue and large in both layouts, and NOT bold -- the weight is what
separates it from the title above it, so matching the colour while leaving
it at 700 would read as a second heading.
BOTH BRANCHES, one rule. `.ms-buybox-from` is the variant branch's
"From £x" (the only one either reference shows) and `.ms-buybox-price-now`
is the no-variant branch's single price. The was-price keeps its own
treatment: the packet is explicit that it renders only when the product
carries one, so nothing here makes it appear.
-------------------------------------------------------------------------- */
.ms-buybox-from,
.ms-buybox-from-label,
.ms-buybox-from-value,
.ms-buybox-price-now {
font-family: var(--ms-font-display, var(--ms-font-head));
font-size: 32px;
line-height: 1.2;
font-weight: 400;
color: var(--ms-accent-ink);
}
/* THE CHILDREN HAVE TO BE NAMED, and the first pass here got it wrong.
mouldshop-buybox.css styles `.ms-buybox-from-label` (0.95rem, --ms-navy-60)
and `.ms-buybox-from-value` (1.5rem, 700, --ms-navy) SEPARATELY from their
container, so a rule on `.ms-buybox-from` alone changed nothing a reader
could see: the word "From" and the number both kept their own colour and
weight. Caught on the screenshot, not by the check -- which is why 7a now
reads the computed style of the element that actually carries the price.
The label is deliberately NOT given a smaller size: both reference layouts
set "From" and the figure at the same size and weight, as one phrase. */
.ms-buybox-from {
margin-block: 1rem 0;
}
/* --------------------------------------------------------------------------
ITEM 8 — THE SECTION LABEL AND ITS RULE.
The layouts draw a light-blue label with a hairline running from the end of
the word to the right edge of the column. That rule IS the packet's
"divider below the price" -- drawn as part of the heading rather than as a
standalone element, so it cannot outlive the block it introduces.
`flex` + a `::after` that grows, rather than a border on the container: a
border would run under the text as well as after it.
IMAGES DELIBERATELY HAS NO LABEL. The live layouts show one above the
thumbnail strip; the operator's instruction for item 2 was explicit -- "a
rule only, no section label, unlike the live reference" -- so that strip
keeps its bare rule and only Files gets a heading. The difference is a
decision, not an oversight, and item 9's own wording ("the whole block is
omitted, heading and divider included") is what says Files has one.
-------------------------------------------------------------------------- */
.ms-buybox-section-label {
display: flex;
align-items: center;
gap: 0.75rem;
margin-block: 1.5rem 0.75rem;
font-family: var(--ms-font-body);
font-size: 14px;
font-weight: 700;
color: var(--ms-accent-ink);
}
.ms-buybox-section-label::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--ms-rule);
}
/* ==========================================================================
TASK-0095 — THREE OPERATOR RULINGS on TASK-0094's reported deviations.
========================================================================== */
/* --------------------------------------------------------------------------
RULING 1 — SPECIFICATION IS FILLED, NOT OUTLINED.
Both reference layouts show it filled in the light blue with white text
beside a navy BUY NOW. Ours was a navy outline. TASK-0094 item 10's
"shipped, do not redo" covered the button LAYOUT; this ruling overrules the
COLOUR only, so the pair stays side by side on the variant branch and
SPECIFICATION stays full width under the stepper row on the no-variant one.
SCOPED BY THE DATA ATTRIBUTE the template already emits, not by `.ms-btn--
ghost`. That modifier is used elsewhere in this design, and repainting every
ghost button on the site is not what was ruled on.
BUY NOW IS NOT TOUCHED and is not named here.
-------------------------------------------------------------------------- */
[data-ms-buybox-spec] {
background-color: var(--ms-blue);
border-color: var(--ms-blue);
color: var(--ms-white, #FFFFFF);
}
[data-ms-buybox-spec]:hover,
[data-ms-buybox-spec]:focus-visible {
background-color: var(--ms-navy);
border-color: var(--ms-navy);
color: var(--ms-white, #FFFFFF);
}
/* --------------------------------------------------------------------------
RULINGS 2 and 3 — THE MANUFACTURER MOVES UP, THE PRODUCT NUMBER JOINS IT.
The short description is withdrawn (TASK-0094 item 4a), so the manufacturer
now sits directly under the title -- the slot 4a held -- and the product
number sits directly under the manufacturer. Two lines of the same kind, so
they share one treatment rather than being styled twice.
The manufacturer's own rule above already sets the label/name colours; this
only adds the product number to the same shape and tightens the pair so
they read as one block under the title rather than two stray lines.
-------------------------------------------------------------------------- */
.ms-buybox-productnumber {
margin-block: 0 1rem;
font-family: var(--ms-font-body);
font-size: 15px;
line-height: 1.4;
}
.ms-buybox-productnumber-label {
color: var(--ms-accent-ink);
}
.ms-buybox-productnumber-value {
color: var(--ms-ink);
font-weight: 700;
}
/* The manufacturer and the product number are consecutive when both render,
so the first one drops its gap and the pair closes up. */
.ms-buybox-manufacturer:has(+ .ms-buybox-productnumber) {
margin-block-end: 0.25rem;
}
/* ==========================================================================
PDP LONG DESCRIPTION — M4 / TASK-0096.
The block itself is full content width: it sits in a 1Column row on the
container ladder, so it is 1288 at 1440 with no width rule needed here and
none is written. What vendor caps is the TEXT MEASURE inside it, via its
TextReadability field (`mw-75ch`, default on). That control is left live
and is reported rather than overridden; making an admin setting inert is
the defect Q-0148 records.
TYPE: the site's body stack and navy, at the sizes already in use. No new
colours and no new scale, per the packet.
THE DESCRIPTION IS RICH TEXT AND KEEPS ITS OWN STRUCTURE. Headings, lists
and links come from the editor, so they are given the spacing they need
rather than being flattened. The last child drops its trailing margin so
the block ends where it looks like it ends.
========================================================================== */
.ms-pdp-longdesc {
font-family: var(--ms-font-body);
color: var(--ms-ink);
}
.ms-pdp-longdesc-body {
font-size: 16px;
line-height: 1.6;
}
.ms-pdp-longdesc-body > :last-child {
margin-block-end: 0;
}
.ms-pdp-longdesc-body h1,
.ms-pdp-longdesc-body h2,
.ms-pdp-longdesc-body h3,
.ms-pdp-longdesc-body h4 {
font-family: var(--ms-font-head);
color: var(--ms-ink);
margin-block: 1.5rem 0.5rem;
}
.ms-pdp-longdesc-body ul,
.ms-pdp-longdesc-body ol {
padding-inline-start: 1.25rem;
margin-block: 0 1rem;
}
.ms-pdp-longdesc-body a {
color: var(--ms-ink);
text-decoration: underline;
}
/* ==========================================================================
PDP TOP ON MOBILE — M4 / TASK-0100.
Operator, 2026-09-22: "no thumbs . only big image . square . scroll left
right . product details below image".
EVERYTHING HERE IS INSIDE ONE MEDIA QUERY and desktop is untouched. 991.98
is Bootstrap's lg boundary, which is already where this page's two columns
stack and where TASK-0094's vertical divider stops drawing. The same number
is in mouldshop-pdp-swipe.js; if one moves the other must.
========================================================================== */
@media (max-width: 991.98px) {
/* --- item 1: no thumbnail strip ----------------------------------------
THE ROW GOES, NOT JUST THE STRIP. Hiding `.ms-gallery-thumbs` alone would
leave its grid row behind with its own block padding — a band of nothing
between the image and the details. mouldshop.css's empty-row rule cannot
help: it fires on a column that rendered NO element, and this column
rendered one and then had it hidden.
EVERY COMBINATOR IN THE `:has()` IS LOAD-BEARING, and the first version of
this rule was a bare `:has(.ms-gallery-thumbs)` which would have hidden
THE ENTIRE PDP. On a real product URL page 8454's rows are nested inside
page 5862's app column, so that outer section also CONTAINS the strip as
a descendant and would have matched too — display:none on everything
below 992. Caught by re-reading the rule against the nesting measured in
TASK-0094, not by a test.
So the chain pins the strip to a row that OWNS it: the column must be a
direct grandchild of the section, must be the gallery's item type (the
app column is `swift-v2_app`), and must hold the strip as a DIRECT child
(the app column's direct children are sections). Three independent guards,
any one of which excludes the outer row.
The test is on the class the Thumbnails layout emits rather than on
`data-dw-itemtype` alone, because the big image shares that item type. */
section[data-swift-gridrow]:has(
> [data-swift-container]
> [data-swift-gridcolumn][data-dw-itemtype="mouldshop_productgallery_custom"]
> .ms-gallery-thumbs
) {
display: none;
}
/* --- item 2: the big image is square ----------------------------------
The ratio is a padding-top PERCENTAGE (see mouldshop-product-gallery.css
— deliberately not `aspect-ratio`, which does not take a percentage), and
the template writes `--ms-gallery-ratio` as an INLINE style from the
paragraph's own field. An inline custom property beats a stylesheet, so
`!important` is required here; it is not decoration. */
.ms-gallery-main {
--ms-gallery-ratio: 100% !important;
/* Vertical scrolling stays the browser's; horizontal is ours. Without
this the page scroll wins and the swipe never starts. */
touch-action: pan-y;
}
/* --- item 5: a thin rule between the image and the details -------------
On the gallery COLUMN, so it spans the content width once the two columns
have stacked, rather than only the width of the image. `--ms-rule` is the
same token every other line on this page uses, and since TASK-0098 it
follows the row's colour scheme. */
[data-swift-gridcolumn][data-dw-itemtype="mouldshop_productgallery_custom"] {
padding-block-end: 1rem;
border-block-end: 1px solid var(--ms-rule);
margin-block-end: 1rem;
}
/* --- item 6: the buttons stay side by side, equal width ----------------
THIS SUPERSEDES TASK-0094 item 10's narrow-width behaviour, deliberately
and on the operator's instruction: that packet stacked the stepper and
Add to basket below 576 because "a 175px stepper beside a 175px button at
390 is neither". TASK-0100 asks for side by side "as on desktop", so the
stack is removed.
`flex: 1 1 0` and not `1 1 12rem` on the action pair: a 12rem basis makes
two buttons need 24rem before they stop wrapping, which is wider than a
390 viewport, so BUY NOW and SPECIFICATION would drop onto separate lines
exactly where this packet says they must not. A zero basis divides the
row evenly at any width. */
.ms-buybox-cart-row {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.ms-buybox-actions > .ms-btn {
flex: 1 1 0;
}
}
/* ==========================================================================
BUY BOX SPACING — operator, 2026-09-22, from a mobile screenshot.
"padding of specification button and two above them is too big . we need
all padding between button same . horizontal and vertical"
"remove bottom padding or margin . from product name on mobile"
"add bottom padding to ms-buybox . specification is too close to
description"
========================================================================== */
/* --------------------------------------------------------------------------
1. ONE GAP BETWEEN BUTTONS, BOTH AXES.
MEASURED, and the mismatch is exact rather than approximate. `.ms-buybox`
is a flex COLUMN with `gap: var(--ms-buybox-gap)` = 1.25rem between all of
its children, and the cart row is a grid with `gap: 0.75rem` between the
stepper and Add to basket. So the horizontal gap is 0.75 and the vertical
gap down to SPECIFICATION is 1.25 — the operator is seeing a real 0.5rem
difference, not an illusion.
THE COLUMN GAP IS NOT CHANGED, and that is the point of doing it this way.
1.25rem is also the space under the title, the product number and the
price; dropping it to 0.75 to fix the buttons would compress the whole
column to fix two elements. Instead ONE adjacency is corrected: the pair
`.ms-buybox-cart` followed by the secondary action row.
The negative margin is the difference and is written as the arithmetic that
produces it, not as a literal, so it stays correct if either token moves.
NOT SCOPED TO MOBILE. The mismatch is identical at every width and the
instruction is about buttons, not about a breakpoint — the operator simply
happened to be looking at a phone.
-------------------------------------------------------------------------- */
.ms-buybox {
--ms-buybox-btn-gap: 0.75rem;
}
.ms-buybox-cart + .ms-buybox-actions--secondary {
margin-block-start: calc(var(--ms-buybox-btn-gap) - var(--ms-buybox-gap));
}
@media (max-width: 991.98px) {
/* ------------------------------------------------------------------------
2. NO SPACE UNDER THE PRODUCT NAME.
`.ms-buybox-title` already has `margin: 0`; the space the operator is
pointing at is the flex column's own gap, which no margin on the title
can remove. Cancelling it takes a negative margin of exactly that gap.
Mobile only, as instructed. On desktop the title sits beside the image
with room to breathe and the gap is doing its job there.
---------------------------------------------------------------------- */
.ms-buybox-title {
margin-block-end: calc(-1 * var(--ms-buybox-gap));
}
/* ------------------------------------------------------------------------
3. ROOM UNDER THE BUY BOX.
Below 992 the columns stack, so the long description lands directly under
SPECIFICATION with nothing between them. On desktop the description is
far below the variant table and this problem does not exist — which is
why the padding is inside the media query rather than on the component.
`--ms-buybox-gap` rather than a new number: the component already has a
rhythm and this is the same step, so nothing new has to be justified.
---------------------------------------------------------------------- */
.ms-buybox {
padding-block-end: var(--ms-buybox-gap);
}
}
/* ==========================================================================
PDP HEAD, TIGHT - TASK-0115 (operator's shop review, 2026-09-24, PDP 1-3).
"Product name: bottom padding and margin 0. Product number: bottom padding and
margin 0." Name, manufacturer and number read as ONE block; the buy box's own
flex gap (--ms-buybox-gap) resumes after the number, before the price.
The space under the name was never a margin - .ms-buybox-title is margin:0 - it
is the flex column's gap, so it is cancelled by a negative margin of exactly
that gap. This was mobile-only (TASK-0100 item 2, the media block above); it is
now every width. The mobile rule is left as it is: same value, so it is inert.
Manufacturer -> number keeps TASK-0094's 0.25rem step, net of the gap.
========================================================================== */
.ms-buybox-title {
padding-block-end: 0;
margin-block-end: calc(-1 * var(--ms-buybox-gap));
}
.ms-buybox-manufacturer:has(+ .ms-buybox-productnumber) {
margin-block-end: calc(0.25rem - var(--ms-buybox-gap));
}
.ms-buybox-productnumber {
padding-block-end: 0;
margin-block-end: 0;
}
/* ==========================================================================
PDP DESCRIPTION IN TWO COLUMNS - TASK-0115 (PDP 5).
Desktop (>= 992) only, and only when the template set --cols (>= 600 visible
characters; shorter text stays one column). A 1px rule in the project's rule
colour between the columns (--ms-rule), 3rem apart.
THE MEASURE. Vendor's TextReadability default emits mw-75ch (max-width: 75ch
!important) on this same element. Two columns inside 75ch would be ~34ch each -
too narrow to read - so in two-column mode the cap is read PER COLUMN: 75ch x 2
plus the gap. The admin setting stays live (Q-0148): switched off, there is no
mw-75ch and the columns take the full width.
BREAKS: headings, list items and paragraphs are kept whole where the browser
allows; a heading is not left alone at the foot of a column.
========================================================================== */
@media (min-width: 992px) {
.ms-pdp-longdesc-body--cols {
column-count: 2;
column-gap: 3rem;
column-rule: 1px solid var(--ms-rule);
}
.ms-pdp-longdesc-body--cols.mw-75ch {
max-width: calc(150ch + 3rem) !important;
}
.ms-pdp-longdesc-body--cols p,
.ms-pdp-longdesc-body--cols li,
.ms-pdp-longdesc-body--cols h1,
.ms-pdp-longdesc-body--cols h2,
.ms-pdp-longdesc-body--cols h3,
.ms-pdp-longdesc-body--cols h4 {
break-inside: avoid;
}
.ms-pdp-longdesc-body--cols h1,
.ms-pdp-longdesc-body--cols h2,
.ms-pdp-longdesc-body--cols h3,
.ms-pdp-longdesc-body--cols h4 {
break-after: avoid;
}
/* The first block in a column must not push its top margin down from the rule's top. */
.ms-pdp-longdesc-body--cols > :first-child {
margin-block-start: 0;
}
}