/**
* product.css — the single product page.
*
* Pairs with woocommerce/content-single-product.php, which owns the markup and
* explains why that template exists at all. This file owns the three-column
* row, the sticky buy rail, and every state the page can be in.
*
* THE PAGE IS WHITE AND THE RAIL IS THE SHOP'S LIGHT BLUE. That is the one
* colour decision here and everything else follows it: the description column
* sits directly on the canvas with no card, no border and no shadow, so the
* single tinted box on the page is the one holding the price and the button.
* Nothing else may take a fill, or the rail stops being the thing the eye lands
* on.
*
* WIDTH AND GUTTER COME FROM base.css. The page container is already capped at
* --bedi-content-width with --bedi-gutter either side; nothing in this file
* declares a page measure.
*
* MOTION. Every interactive element here has a resting state, a hover, a focus
* ring and a press — in that order and with the identity value at rest, so a
* touch device that never hovers gets a control that looks finished. Durations
* come from motion.css; nothing here invents one. The whole section is undone
* under prefers-reduced-motion at the end.
*
* Sections
* 1. Layout — head, three columns, the sticky rail
* 2. The head: title, rating, wishlist
* 3. The description column
* 4. The buy rail: price, stock, form, buttons, payment
* 5. Specifications and help
* 6. Narrow, reduced motion, forced colours
*/
/* =========================================================================
* 1. LAYOUT
* ====================================================================== */
.bedi-product {
--bedi-prod-rail: #eaf0fa;
--bedi-prod-radius: var(--bedi-radius-lg);
/* The header is sticky and ~90px tall plus the utility band; the rail has to
clear it or its top row hides under the bar on every scroll. */
--bedi-prod-rail-top: 112px;
display: flex;
flex-direction: column;
/*
* md, not xl. 48px between the breadcrumb, the title and the content read
* as three unrelated blocks on a page whose first screen is mostly white —
* the client's note was "too big gaps". 24px still separates them clearly
* and puts the gallery above the fold.
*/
gap: var(--bedi-space-md);
}
/* Woo's breadcrumb sits directly above the title and needs no room of its own
beyond the stack's gap. */
.bedi-woo .woocommerce-breadcrumb {
margin-block: 0;
}
/*
* TWO COLUMNS: EVERYTHING, AND THE RAIL.
*
* It was three — gallery, description, rail — with the specifications and the
* help section full width underneath. That unstuck the rail the moment the
* visitor reached the spec table, which is exactly where the price and the
* button are most needed.
*
* So the left column now holds the whole product and the rail runs the full
* height beside it. `align-items: start` is what allows sticky to work at all:
* the default `stretch` makes the rail as tall as the column next to it, and an
* element that is already the height of its container has nothing to stick
* within.
*
* The rail is a fixed 368px rather than a fraction. A price, a quantity box and
* two buttons need about that and stop improving after it; at `1fr` it grew to
* 500px on a wide screen while the column that has something to say got the
* same.
*/
.bedi-product__layout {
align-items: start;
display: grid;
gap: var(--bedi-space-lg);
grid-template-columns: minmax(0, 1fr) 368px;
}
/* The left column: gallery + description on one row, then the spec table and
the help section stacked under them. */
.bedi-product__body {
display: flex;
flex-direction: column;
gap: var(--bedi-space-lg);
min-inline-size: 0;
}
.bedi-product__top {
display: grid;
gap: var(--bedi-space-lg);
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.bedi-product__buy {
position: sticky;
inset-block-start: var(--bedi-prod-rail-top);
min-inline-size: 0;
}
.bedi-product__buy-inner {
display: flex;
flex-direction: column;
gap: var(--bedi-space-sm);
}
.bedi-product__gallery,
.bedi-product__summary {
min-inline-size: 0;
}
/* =========================================================================
* 2. THE HEAD
* ====================================================================== */
.bedi-product__head {
align-items: start;
column-gap: var(--bedi-space-md);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
row-gap: var(--bedi-space-2xs);
}
.bedi-product__head-text {
flex: 1 1 24rem;
min-inline-size: 0;
}
/*
* The title is Woo's own `.product_title`, so it is selected by that rather
* than re-classed — a plugin that replaces the title template still produces
* an element with this class and still gets the right type.
*/
.bedi-product .product_title {
font-family: var(--bedi-font-display);
font-size: var(--bedi-text-3xl);
font-weight: var(--bedi-weight-bold);
line-height: 1.25;
margin: 0;
text-wrap: balance;
}
/*
* The head's wishlist button moved into the rail's Save/Share pair
* (product-buy.css section 7). Two wishlist controls on one page, forty pixels
* apart and in two different visual languages, was the actual bug.
*/
/* =========================================================================
* 3. THE DESCRIPTION COLUMN
* ====================================================================== */
.bedi-product__section-title {
font-family: var(--bedi-font-display);
font-size: var(--bedi-text-xl);
font-weight: var(--bedi-weight-bold);
margin: 0 0 var(--bedi-space-2xs);
}
.bedi-product__sku {
color: var(--bedi-ink-muted);
font-size: var(--bedi-text-base);
margin: 0 0 var(--bedi-space-sm);
}
.bedi-product__sku-label {
color: var(--bedi-accent);
font-weight: var(--bedi-weight-medium);
}
.bedi-product__sku-value {
color: var(--bedi-ink);
}
/*
* THE FULL DESCRIPTION. It replaced the excerpt (see the template), so it is
* arbitrary editor content — paragraphs, lists, sometimes a bare stack of
* tags one line each, which is what this catalogue's imported copy looks
* like. The tightened margin is for exactly that case: at the theme's default
* paragraph spacing a spec sheet imported as fifteen one-line paragraphs became
* a column three screens tall.
*/
.bedi-product__description {
color: var(--bedi-ink-muted);
font-size: var(--bedi-text-base);
line-height: 1.6;
}
.bedi-product__description p {
margin-block: 0 var(--bedi-space-2xs);
}
.bedi-product__description p:last-child,
.bedi-product__description ul:last-child {
margin-block-end: 0;
}
.bedi-product__description ul,
.bedi-product__description ol {
margin-block: 0 var(--bedi-space-2xs);
padding-inline-start: var(--bedi-space-sm);
}
/*
* NO HEIGHT CAP AND NO INNER SCROLLER ON THIS COLUMN.
*
* A previous pass capped it at 26rem with `overflow-y: auto` and
* `overscroll-behavior-y: contain`, to stop a long imported description driving
* the row's height. It worked and it was wrong: the description is the widest
* target on the upper half of the page, so a wheel gesture anywhere over the
* copy scrolled the box instead of the page, and `contain` stopped the scroll
* chaining out once the box hit its end. The page simply refused to move.
*
* The row is allowed to be as tall as the copy. The gallery beside it sits at
* the top of its cell, which is the correct place for it, and the buy rail is
* sticky precisely so a long column costs the visitor nothing.
*/
/*
* Woo prints the SKU and the category list again at priority 40. Both are
* already on the page — the SKU above, the categories in the breadcrumb — so
* the duplicate is hidden rather than removed, because remove_action() there
* would also take out anything a plugin appended to the same callback.
*/
.bedi-product .product_meta {
display: none;
}
/*
* The assurance list that lived here moved into the buy rail's trust group
* (product-buy.css section 8) — beside the button, where reassurance is
* actually consumed, rather than under a description most visitors never
* scroll to.
*/
/* =========================================================================
* 4. THE BUY RAIL
*
* MOVED, IN FULL, TO assets/css/product-buy.css. The rail is a component group
* with its own tokens, its own keyframes and its own forced-colors contract,
* and it is the part of this page most likely to be reworked again — keeping
* half of it here is how the next edit lands in the wrong file.
*
* One rule stayed behind with it and is worth knowing about: Woo echoes
* wc_get_stock_html() BEFORE it opens