/* 07-product.css: the product page (design system, Product). Gallery left at desktop, first on phone; the buy box
 * beside it: title (Jeremy's full title at h2 size, wraps) → promise → price → menus → personalization fields →
 * add to cart (the launch message in its place before launch) → buy note. Full width sections after.
 * Personalization fields come from Flexible Product Fields (free): label, required mark, help as a tooltip,
 * a character limit. No text under the 13 px label role. */
body.woopify.single-product .content-area { width: 100%; float: none; }
body.woopify.single-product div.product .product_title { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--color-ink); margin: 0 0 var(--space-md); }
body.woopify.single-product div.product .summary .price { font-family: var(--font-body); font-size: var(--fs-price); line-height: var(--lh-price); font-weight: 600; color: var(--color-ink); margin: 0 0 var(--space-md); }
body.woopify.single-product div.product .woocommerce-product-details__short-description { color: var(--color-ink); }
body.woopify.single-product div.product .woocommerce-product-gallery { background: var(--color-surface); border-radius: var(--radius-md); }
body.woopify.single-product div.product .woocommerce-product-gallery img { border-radius: var(--radius-md); }

/* Menus (size, finish): labels and selects on tokens. Swatches come from the variation swatches plugin. */
body.woopify.single-product table.variations th.label, body.woopify.single-product table.variations td.label label { font-family: var(--font-body); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: 0.04em; color: var(--color-ink); }
body.woopify.single-product table.variations select { min-height: 44px; background: var(--color-surface); border: 1px solid var(--color-input-border); border-radius: var(--radius-sm); color: var(--color-ink); font-family: var(--font-body); font-size: var(--fs-body-md); padding: 0 var(--space-md); }
body.woopify.single-product .reset_variations { color: var(--color-ink-muted); font-size: var(--fs-label); }
body.woopify.single-product .woocommerce-variation-price .price { font-size: var(--fs-price); }

/* Personalization fields (Flexible Product Fields). */
body.woopify .fpf-fields, body.woopify .fpf-field { margin: 0 0 var(--space-md); }
body.woopify .fpf-fields label, body.woopify .fpf-field label { display: block; font-family: var(--font-body); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; letter-spacing: 0.04em; color: var(--color-ink); margin-bottom: var(--space-xs); }
body.woopify .fpf-fields label .optional, body.woopify .fpf-field label .optional { display: none; }
body.woopify .fpf-fields abbr.required, body.woopify .fpf-field abbr.required { color: var(--color-error); text-decoration: none; border: 0; }
body.woopify .fpf-input-field { width: 100%; min-height: 44px; background: var(--color-surface); border: 1px solid var(--color-input-border); border-radius: var(--radius-sm); color: var(--color-ink); font-family: var(--font-body); font-size: var(--fs-body-md); padding: var(--space-sm) var(--space-md); }
body.woopify textarea.fpf-input-field { min-height: 88px; }
body.woopify .fpf-input-field::placeholder { color: var(--color-ink-muted); opacity: 1; }
body.woopify .fpf-input-field:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); }
body.woopify .fpf-field-tooltip { cursor: help; }
body.woopify .fpf-field-tooltip-icon { color: var(--color-ink-muted); }

/* Add to cart and quantity. */
body.woopify.single-product div.product form.cart .single_add_to_cart_button { min-height: 52px; padding: 0 var(--space-lg); border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body-md); }
body.woopify.single-product div.product form.cart .quantity input.qty { min-height: 52px; border: 1px solid var(--color-input-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); }
body.woopify .woopify-options-help, body.woopify .woopify-buy-note { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--color-ink-muted); margin: var(--space-md) 0; }
body.woopify.single-product .product_meta { font-size: var(--fs-label); color: var(--color-ink-muted); }
body.woopify.single-product .product_meta a { color: var(--color-ink-muted); }

/* Tabs and the description (Jeremy's description, verbatim, until product copy files exist). */
body.woopify.single-product .woocommerce-tabs { border-top: 1px solid var(--color-border); margin-top: var(--space-xl); padding-top: var(--space-lg); }
body.woopify.single-product .woocommerce-tabs ul.tabs li a { font-family: var(--font-body); font-weight: 600; color: var(--color-ink); }
body.woopify.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--color-accent); }
body.woopify.single-product .woocommerce-Tabs-panel { max-width: 75ch; }
body.woopify.single-product .woocommerce-Tabs-panel h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

/* Related products: same cards as collections (06-collection.css). */
body.woopify.single-product .related > h2, body.woopify.single-product .upsells > h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }

/* "Not selling yet" message in the buy box (11-not-selling.css shows it). */
body.woopify.single-product .woopify-launch-message p { margin: 0; }
@media (max-width: 767px) {
  body.woopify.single-product div.product .product_title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
}

/* Shoptimizer and plugin defaults that reached the product page (QA 2026-10-14): tokens only. */
body.woopify .archive-header, body.woopify .archive-header .col-full, body.woopify .shoptimizer-archive, body.woopify .shoptimizer-archive > .col-full { background: transparent; }
body.woopify.single-product div.product form.cart .single_add_to_cart_button { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
body.woopify.single-product .woocommerce-Tabs-panel :where(p, li, td, th, span, div) { font-family: var(--font-body); color: var(--color-ink); }
body.woopify.single-product .woocommerce-tabs ul.tabs li a span, body.woopify #page .woocommerce-tabs ul.tabs li span { background: var(--color-border); color: var(--color-ink); font-family: var(--font-body); }
body.woopify.single-product table.variations :is(label, label span) { color: var(--color-ink); font-family: var(--font-body); }
body.woopify .variable-items-wrapper .variable-item-span { color: var(--color-ink); font-family: var(--font-body); }
body.woopify .variable-items-wrapper .variable-item:not(.radio-variable-item) { background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-input-border); border-radius: var(--radius-sm); }
body.woopify .variable-items-wrapper .variable-item.selected:not(.radio-variable-item) { box-shadow: 0 0 0 2px var(--color-accent); }
body.woopify .fpf-fields-config { background: transparent; border: 1px solid var(--color-ink); color: var(--color-ink); font-family: var(--font-body); border-radius: var(--radius-sm); }
body.woopify.single-product .product_meta :is(span, .sku_wrapper, .posted_in, .tagged_as) { color: var(--color-ink-muted); font-family: var(--font-body); }
/* Shoptimizer's "Request a Call Back" button is not in the design system or the copy: hidden, not switched off. */
body.woopify .call-back-feature { display: none; }