/**
 * Commerce7 product detail page — /store/detail/{slug} on the source.
 *
 * Ported from the same source stylesheet as c7-collection.css, with the same two conversions: rem
 * resolved to px (the source is `html { font-size: 62.5% }`, so its 1rem is 10px against our 16px)
 * and `.uk-section.product-details` — the old theme's wrapper, which we have no equivalent of —
 * re-anchored onto the Commerce7 template's own structure.
 *
 * WHAT MAKES THIS PAGE DIFFERENT FROM THE COLLECTION
 * --------------------------------------------------
 * The collection's card template is self-contained. The product template is not: Commerce7 renders
 * it with UIkit classes — `uk-padding`, `uk-flex`, `uk-width-1-2@m`, `uk-modal`, `uk-toggle` —
 * because the source site loads UIkit 3.4.2 and the tenant's template was authored against it. The
 * rebuild does not load UIkit, so without the block below the page has no two-column layout, no
 * padding, and an unhidden lightbox.
 *
 * Reproducing the handful of classes the template actually uses is deliberate, in preference to
 * pulling in UIkit for one page. Every value is UIkit 3.4.2's own, taken from the build the source
 * loads, and each is scoped to `#c7-content` so a generic name like `.uk-flex` cannot leak into
 * anything Elementor renders.
 *
 * NOT PORTED, and why:
 *   - `.product-details-wrapper { min-height: 300px }` guards against layout jump while Commerce7
 *     fetches. It is a property of the old theme's wrapper element, which has no counterpart here;
 *     if the jump proves visible, measure it against our own DOM rather than copying 300px.
 *   - `.uk-section.product-details h4` and the `.sku` block style an older, pre-Commerce7 product
 *     template. Neither element appears in the markup C7 serves today — verified on the source.
 *   - The price / quantity / add-to-cart rules already live in c7-collection.css. The source writes
 *     them once against `.product-items` (this page) and `.product-panel` (the card) together, and
 *     that pair was ported whole rather than split. Both stylesheets load site-wide, so this page
 *     is already covered; see the note there.
 */

/* ---- UIkit primitives the tenant's template depends on (UIkit 3.4.2 values) ---- */

#c7-content .uk-flex { display: flex; }
#c7-content .uk-flex-wrap { flex-wrap: wrap; }

#c7-content .uk-padding { padding: 30px; }
@media (min-width: 1200px) {
	#c7-content .uk-padding { padding: 40px; }
}

/* UIkit's `@m` breakpoint is 960px. The `@` is escaped because it is part of the class name. */
@media (min-width: 960px) {
	#c7-content .uk-width-1-2\@m { width: 50%; }
}

/**
 * The image lightbox. The markup is `<div id="modal-product-image" uk-modal>`; UIkit's JS adds the
 * `.uk-modal` class on init, and it is that class which carries `display: none`. With no UIkit JS
 * the class never arrives, so the dialog — a full-size copy of the product image plus a close
 * button — would render inline underneath the page. Hidden on the attribute instead, which is in
 * the served markup and needs no JS.
 *
 * This hides the lightbox; it does not reimplement it. The `<a href="#modal-product-image"
 * uk-toggle>` around the product image is inert without UIkit, so clicking the image does nothing
 * where the source opens a zoom. Restoring that needs a real decision — a small vanilla toggle, or
 * a lightbox the rebuild already has — rather than a line of CSS.
 */
#c7-content [uk-modal] { display: none; }

/* ---- product-details heading and teaser ---- */

/**
 * The title. Anchored on the template's own shape — the h2 is a direct child of the first
 * `.uk-padding` block inside `.c7-content`. A looser `.c7-content h2` would also catch the
 * collection page's card titles and its `.collection-title`, which must stay Montserrat.
 *
 * A DELIBERATE DIVERGENCE FROM THE SOURCE, decided for the rebuild rather than measured:
 *
 *                        source                     here
 *     title font         Georgia 40px               Italianno 50px
 *     title align        centred                    left
 *     teaser colour      #740a14                    body text colour
 *     teaser align       centred                    left
 *
 * The source gives product titles Georgia specifically so they escape its global Italianno
 * heading font. The rebuild goes the other way and brings them INTO the Italianno heading style
 * used everywhere else, matching the collection title and the Elementor kit's heading widget, so
 * headings read as one family across the site. Anyone diffing against the live site will see these
 * four differences and they are intended — do not "fix" them back.
 *
 * The colour goes through Elementor's global so it tracks the kit, exactly as the collection title
 * does. Weight 400 is required, not stylistic: domino-fonts loads Italianno at 400 only, so a
 * heavier value would be a synthesised bold at the wrong glyph widths.
 */
.c7-content > .uk-padding > h2 {
	font-family: Italianno, sans-serif;
	font-size: 50px;
	font-weight: 400;
	line-height: 50px;
	margin: 0.2em 0;
	color: var( --e-global-color-primary, #740a14 );
	text-align: left;
}

/**
 * The teaser reads as the opening line of the description rather than as a coloured standfirst, so
 * it takes the same colour the description resolves to — Commerce7's own body text variable, which
 * is what `.product-description` inherits — instead of the source's brand red.
 */
.c7-content .teaser {
	color: var( --c7-body-text-color );
	text-align: left;
}

.c7-content .product-description { padding-right: 20px; }