/*
* Single product page.
*
* Loaded on the product view only — the gallery, the variation form, the quantity
* control and the details table exist nowhere else (§48).
*
* Sections:
* 1. Lead layout
* 2. Gallery
* 3. Full-size view
* 4. Summary: title, price, availability
* 5. Purchase form: variations, quantity, add to cart
* 6. Delivery and unavailable notices
* 7. Description and details
* 8. Related products
*
* Every value comes from a token defined in base.css, which aliases a theme.json
* preset. This file introduces no new colour, spacing or type-scale value.
*
* A note on the selectors. Many rules carry the full
* `.woocommerce div.product …` prefix. That is not decoration: WooCommerce's own
* stylesheets declare the same properties at that specificity, and the project rule
* is to match the plugin's selector shape rather than to dequeue its stylesheet or
* reach for !important (ARCHITECTURE.md §15). Each such rule names the declaration
* it is answering.
*/
/* ==========================================================================
1. Lead layout
========================================================================== */
/*
* Gallery and summary side by side.
*
* WooCommerce floats them at 48% each. Grid replaces that, and the plugin's float
* and width are reset explicitly below — a leftover float would take the element
* out of the grid flow and the second column would collapse.
*
* The two columns start at 48rem rather than at the navigation breakpoint. Waiting
* until 62rem would leave tablet portrait with a full-width square image and the
* price, options and buy button pushed off the screen (§12).
*
* The 48rem and 75rem thresholds below are also stated in the main gallery image's
* `sizes` attribute — see zakatek_product_gallery_sizes(). Keep the two in step.
*/
.zu-product-lead {
display: grid;
gap: var(--zu-space-4);
margin-block-end: var(--zu-space-5);
}
@media (min-width: 48rem) {
.zu-product-lead {
grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
gap: var(--zu-space-5);
align-items: start;
}
}
@media (min-width: 75rem) {
.zu-product-lead {
grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
}
}
/* Answers `.woocommerce div.product div.images { float: left; width: 48% }`. */
.woocommerce div.product .zu-product-lead div.images,
.woocommerce div.product .zu-product-lead div.summary {
float: none;
width: auto;
min-width: 0;
margin: 0;
}
/*
* The two known children are placed explicitly rather than left to auto-placement.
*
* `woocommerce_before_single_product_summary` is one of the most-used hooks on this
* page, and the theme renders the gallery at priority 20 — so anything a plugin adds
* at the default 10 would become the FIRST grid item, displacing the gallery into
* column two and the summary onto a second row. With the columns claimed, an
* unexpected sibling flows underneath instead of inside them. Raised by an
* independent review; latent today because no plugins are installed.
*/
@media (min-width: 48rem) {
.woocommerce div.product .zu-product-lead div.images {
grid-row: 1;
grid-column: 1;
}
.woocommerce div.product .zu-product-lead div.summary {
grid-row: 1;
grid-column: 2;
}
}
/*
* The product wrapper is a plain block again.
*
* WooCommerce's `div.product` carries `position: relative` for the absolutely
* positioned sale flash, which this theme does not use. Left alone it is harmless,
* so it stays — but the float clearing the plugin relies on is gone with the floats.
*/
.woocommerce div.product {
margin-bottom: 0;
}
/* ==========================================================================
2. Gallery
========================================================================== */
.zu-gallery {
display: flex;
flex-direction: column;
gap: var(--zu-space-2);
}
.zu-gallery__stage {
position: relative;
}
/*
* One fixed frame ratio, and the image is CONTAINED inside it, not cropped.
*
* This is the opposite decision from the product card, and deliberately so. In the
* grid, uniform tiles matter more than seeing every pixel, so the card crops with
* `object-fit: cover`. On the product page the shopper is deciding whether to buy:
* cropping the product out of its own photograph is the one thing the gallery must
* not do, and the catalogue has no uniform aspect ratio to rely on — the fixture set
* alone spans 4:5, 16:9, 1:1, 2:3 and 5:4.
*
* The frame stays square so switching between a portrait and a landscape image does
* not resize the column and shove the buy block up and down the page. Letterboxing
* against the surface colour is the visible cost, and it is the cheaper one.
*/
.zu-gallery__frame {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--zu-radius);
background-color: var(--zu-surface);
}
/*
* Answers `.woocommerce div.product div.images img { width: 100%; height: auto }`,
* which would defeat object-fit by letting the image keep its own height.
*/
.woocommerce div.product div.images img.zu-gallery__image,
.zu-gallery__image {
width: 100%;
height: 100%;
object-fit: contain;
}
.zu-gallery__frame--empty {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--zu-blush);
color: var(--zu-gold-decor);
}
/*
* The frame for a product with no image holds two things: the theme's icon, and a
* real `` that WooCommerce's variation script can mutate.
* Only one of them is ever on screen — until something swaps the image, all it could
* show is WooCommerce's grey placeholder graphic.
*
* Answers `.woocommerce div.product div.images img { display: block }`, which is the
* same plugin declaration already countered above for `width` and `height`. The
* simpler selector lost and the placeholder graphic rendered on top of the icon —
* caught by the suite, which is why it asserts the computed `display` rather than
* the presence of a class.
*/
.woocommerce div.product div.images .zu-gallery__frame--empty .zu-gallery__image,
.zu-gallery__frame--empty .zu-gallery__image {
display: none;
}
.woocommerce div.product div.images .zu-gallery__frame--empty.is-swapped .zu-gallery__image,
.zu-gallery__frame--empty.is-swapped .zu-gallery__image {
display: block;
}
.zu-gallery__frame--empty.is-swapped {
background-color: var(--zu-surface);
}
.zu-gallery__frame--empty.is-swapped .zu-gallery__placeholder {
display: none;
}
/* Answers `.woocommerce div.product div.images .woocommerce-product-gallery__image a`. */
.woocommerce div.product div.images .zu-gallery__frame a.zu-gallery__full,
.zu-gallery__full {
display: block;
width: 100%;
height: 100%;
outline-offset: var(--zu-focus-offset);
}
/* --- Badges --- */
/*
* Same vocabulary as the card, including `pointer-events: none` — the badge sits
* over the full-size link, and a click on it would otherwise land nowhere.
*/
.zu-gallery__badges {
pointer-events: none;
position: absolute;
inset-block-start: var(--zu-space-2);
inset-inline-start: var(--zu-space-2);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--zu-space-1);
z-index: 2;
}
/* --- Thumbnails --- */
.zu-gallery__thumbs {
display: flex;
flex-wrap: wrap;
gap: var(--zu-space-1);
margin: 0;
padding: 0;
list-style: none;
}
.zu-gallery__thumb-item {
margin: 0;
}
/*
* A real button, so the tab order includes it without a roving-tabindex scheme.
* 4.5rem is 72 px, above the 44 px touch minimum on every screen.
*/
.zu-gallery__thumb {
display: block;
width: 4.5rem;
height: 4.5rem;
padding: 0;
border: 1px solid var(--zu-line);
border-radius: var(--zu-radius-sm);
background-color: var(--zu-surface);
overflow: hidden;
cursor: pointer;
transition: border-color var(--zu-transition), opacity var(--zu-transition);
}
.woocommerce div.product div.images .zu-gallery__thumb img,
.zu-gallery__thumb-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/*
* The active thumbnail is marked by its border colour, which measures 6.40:1 against
* the idle border — twice the 3:1 the guidelines ask of a non-text indicator. The
* dimming of the inactive ones is a supporting cue and little more: an independent
* review measured the fill difference at 1.09:1 and found the inset ring painted
* under the image, so the border is doing the work. The machine-readable signal is
* `aria-current` on the button itself, which is what assistive technology reads.
*/
.zu-gallery__thumb[aria-current='false'] {
opacity: 0.65;
}
.zu-gallery__thumb:hover {
opacity: 1;
border-color: var(--zu-gold-decor);
}
.zu-gallery__thumb[aria-current='true'] {
opacity: 1;
border-color: var(--zu-accent-deep);
box-shadow: inset 0 0 0 1px var(--zu-accent-deep);
}
@media (prefers-reduced-motion: reduce) {
.zu-gallery__thumb {
transition: none;
}
}
/*
* Four 72 px thumbnails plus three gutters need 312 px; a 320 px screen offers 288
* inside the page gutters, so the fourth wrapped onto a row of its own. Measured by
* an independent review. Sixty pixels fits four with room to spare and stays well
* above the 44 px touch minimum. Five or more images still wrap, which is a second
* row rather than a defect.
*/
@media (max-width: 22.5rem) {
.zu-gallery__thumb {
width: 3.75rem;
height: 3.75rem;
}
}
/* ==========================================================================
3. Full-size view
========================================================================== */
/*
* A native dialog, not a lightbox library.
*
* `