/** * A product's own page. * * Loaded after `landing.css` (tokens, card, grid), `product-form.css` and * `visualizer.css`, and scoped under `.pod-product`, which `ProductPage` puts on * the `` of a single product and nowhere else. The form and the room * preview's trigger are also rendered on the cart, the order screen and My * Designs, and none of this reaches them. * * `product-form.css` stays as it is: layout and state for the form wherever it * is used, in the theme's colours. This file dresses it for this page in the * shop front's tokens, so the spacing, controls and buttons match the landing * page, the shop and the cart. * * The rhythm of the summary, top to bottom: * * breadcrumb * 16 * category (eyebrow) 8, title 16, price * 24 (a rule between the price and the choices) * each choice: label 8, control; 24 between choices * 24 * summary card: total, notes, Upload & Design * 16 * See it on the wall * * `!important` appears only where it answers another `!important`, or an * inline style written by a plugin, and says which each time. */ /* --- 1. The frame ---------------------------------------------------------- */ /* * White, like the home page and the shop. Astra's site background is a pale * grey, which a white product photograph sits on as a white box. */ body.pod-product, .pod-product .site-content { background-color: var( --pod-surface ); color: var( --pod-ink ); } /* The shop's content column and its top and bottom, so the page lines up with the one before it. */ .pod-product .site-content > .ast-container { box-sizing: border-box; max-width: var( --pod-container ); padding-inline: var( --pod-gutter ); } .pod-product #primary { margin-block: 0; padding-block: var( --pod-frame-top ) var( --pod-frame-bottom ); width: 100%; } /* On a phone, the shop's: the same 56 at the top, 48 at the bottom. */ @media ( max-width: 767px ) { .pod-product #primary { padding-block: var( --pod-frame-top ) var( --pod-frame-bottom-sm ); } } /* --- 2. The gallery -------------------------------------------------------- */ /* * One rounded frame round the picture, and none round the page. With a slider * the frame goes on the viewport, which clips the slides; with one image, on * the wrapper. */ .pod-product .woocommerce-product-gallery > .flex-viewport, .pod-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { background: var( --pod-surface ); border: 1px solid var( --pod-line ); border-radius: var( --pod-radius-lg ); overflow: hidden; } /* The zoom button, as a small white disc on the photograph. */ .pod-product .woocommerce-product-gallery__trigger { align-items: center; background: var( --pod-surface ); border-radius: var( --pod-radius-pill ); box-shadow: var( --pod-shadow-sm ); display: flex; height: 40px; justify-content: center; right: var( --pod-near ); top: var( --pod-near ); width: 40px; } /* * Four across, filling the picture's width. `ol` and `div.product` in the * selectors because WooCommerce's grid sheet floats these at 25% under * `.woocommerce-js div.product div.woocommerce-product-gallery--columns-4 * .flex-control-thumbs li`, four classes and three elements. */ .pod-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs { display: grid; gap: var( --pod-tight ); grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); margin: var( --pod-tight ) 0 0; padding: 0; } .pod-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs li { float: none; margin: 0; padding: 0; width: auto; } .pod-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs img { aspect-ratio: 1; border: 1px solid var( --pod-line ); box-sizing: border-box; display: block; height: auto; object-fit: cover; width: 100%; border-radius: var( --pod-radius ); opacity: 0.7; transition: border-color var( --pod-fast ) var( --pod-ease ), opacity var( --pod-fast ) var( --pod-ease ); } .pod-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs img:hover, .pod-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs img.flex-active { border-color: var( --pod-ink ); opacity: 1; } /* --- 3. The head of the summary --------------------------------------------- */ .pod-product .summary .woocommerce-breadcrumb { color: var( --pod-ink-soft ); font-size: 0.875rem; line-height: 1.4; margin: 0 0 var( --pod-near ); } .pod-product .summary .woocommerce-breadcrumb a { color: inherit; text-decoration: none; } .pod-product .summary .woocommerce-breadcrumb a:hover, .pod-product .summary .woocommerce-breadcrumb a:focus-visible { color: var( --pod-ink ); text-decoration: underline; text-underline-offset: 0.25em; } /* * Astra gives every link `transition: all`, which fades a focus ring in. On * these links the colour alone eases, and the ring appears at once (§6). */ .pod-product .summary .woocommerce-breadcrumb a, .pod-product .summary .single-product-category a, .pod-product #content div.product div.woocommerce-tabs ul.tabs li a, .pod-product div.product form.variations_form a.reset_variations, .pod-product #reviews .comment-form-rating p.stars a { transition: color var( --pod-fast ) var( --pod-ease ); } /* * The one focus ring on the page's links: the breadcrumb, the category, the * tabs and the reset link. The theme's was a 3px grey outline at no offset. */ .pod-product .summary .woocommerce-breadcrumb a:focus-visible, .pod-product .summary .single-product-category a:focus-visible, .pod-product #content div.product div.woocommerce-tabs ul.tabs li a:focus-visible, .pod-product div.product form.variations_form a.reset_variations:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* * The category above the title, in the eyebrow the landing page and the shop * put over their headings. Accent on white only: see `tokens.css`. */ .pod-product .summary .single-product-category { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; margin: 0 0 var( --pod-tight ); } .pod-product .summary .single-product-category a { color: var( --pod-accent ); text-decoration: none; } .pod-product .summary .single-product-category a:hover, .pod-product .summary .single-product-category a:focus-visible { text-decoration: underline; text-underline-offset: 0.25em; } /* * The Item title tier (§3), a step down from the shop's: here it shares the * first screen with a photograph and a working form, not with a lead paragraph. * A pixel token, so a phone's smaller root size no longer takes it under 30px. */ .pod-product .summary .product_title { color: var( --pod-ink ); font-size: var( --pod-item-title-size ); font-weight: 800; letter-spacing: var( --pod-title-tracking ); line-height: 1.08; margin: 0 0 var( --pod-near ); text-wrap: balance; } /* The price, and under it the rule that starts the choices. */ .pod-product .summary > .price { border-bottom: 1px solid var( --pod-line ); color: var( --pod-ink ); font-size: 1.375rem; font-weight: 700; line-height: 1.3; margin: 0 0 var( --pod-apart ); padding-bottom: var( --pod-apart ); } /* A range's dash, and "From", read as quieter than the figures. */ .pod-product .summary > .price > span[aria-hidden='true']:not( .amount ) { color: var( --pod-ink-soft ); font-weight: 400; } /* --- 4. The print form: fields ---------------------------------------------- */ .pod-product .pod-form { margin: 0; } .pod-product .pod-form .pod-field { margin: 0 0 var( --pod-apart ); } .pod-product .pod-form .pod-label { color: var( --pod-ink ); font-size: 0.9375rem; font-weight: 700; line-height: 1.3; margin-bottom: var( --pod-tight ); } /* * Width and Height: the standard's field label, 0.875rem/600 in ink. They were * 13px grey, which read as a hint rather than as the name of the field. */ .pod-product .pod-form .pod-sublabel { color: var( --pod-ink ); font-size: 0.875rem; font-weight: 600; line-height: 1.4; margin-bottom: var( --pod-hair ); opacity: 1; } .pod-product .pod-form .pod-hint, .pod-product .pod-form .pod-note, .pod-product .pod-form .pod-framing__outer, .pod-product .pod-form .pod-framing__cleared { color: var( --pod-ink-soft ); font-size: 0.8125rem; line-height: 1.5; opacity: 1; } .pod-product .pod-form .pod-hint { margin: var( --pod-tight ) 0 0; } /* * Typed fields: the standard's text field. 48px like every other control on the * shop front, a `--pod-field-border` edge a customer can find (3:1, where the * `--pod-line` it had was 1.2:1), and the theme's dotted focus border replaced * by the standard's field focus. */ .pod-product .pod-form input[type='number'] { background: var( --pod-surface ); border: 1px solid var( --pod-field-border ); border-radius: var( --pod-radius ); box-shadow: none; box-sizing: border-box; color: var( --pod-ink ); font-size: var( --pod-field-size ); height: var( --pod-btn-h ); padding: 0 var( --pod-near ); /* No transition: the focus border appears at once (§6), and Astra's `all` goes too. */ transition: none; } .pod-product .pod-form input[type='number']:hover { border-color: var( --pod-ink ); } .pod-product .pod-form input[type='number']:focus { border-color: var( --pod-accent ); border-style: solid; box-shadow: 0 0 0 1px var( --pod-accent ); outline: 2px solid transparent; } .pod-product .pod-form .pod-dimensions { gap: var( --pod-tight ); } .pod-product .pod-form .pod-dimension__times { color: var( --pod-ink-soft ); line-height: var( --pod-btn-h ); opacity: 1; } /* --- 5. The print form: option cards ---------------------------------------- */ .pod-product .summary .pod-options { gap: var( --pod-tight ); } /* * Two columns as a grid rather than the form's wrapping flex, so an odd option * out (a third finishing, say) keeps its column's width instead of stretching * across both. */ @media ( min-width: 40em ) { .pod-product .summary .pod-options { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } /* * Options that carry a sentence under the name (materials, shapes) take a * row each. Two to a row, a 200px card wrapped "200gsm / Premium / Poster" * onto three lines beside its price. */ .pod-product .pod-form .pod-field.is-only .pod-options, .pod-product .summary .pod-options:has( .pod-option__for ) { grid-template-columns: minmax( 0, 1fr ); } } /* * A card per option. The chosen one takes a 2px accent edge drawn inside the * 1px border, so nothing moves when the choice changes (the form's own rule * widens the border and shrinks the padding to the same end). */ .pod-product .summary .pod-option, .pod-product .summary .pod-option:has( input:checked ) { background: var( --pod-surface ); border: 1px solid var( --pod-line ); border-radius: var( --pod-radius ); box-sizing: border-box; color: var( --pod-ink ); gap: 0.75rem; min-height: 56px; padding: 0.875rem var( --pod-near ); transition: background-color var( --pod-fast ) var( --pod-ease ), border-color var( --pod-fast ) var( --pod-ease ), box-shadow var( --pod-fast ) var( --pod-ease ); } .pod-product .summary .pod-option:hover { border-color: color-mix( in srgb, var( --pod-ink ) 35%, transparent ); } .pod-product .summary .pod-option:has( input:checked ) { background: var( --pod-accent-wash ); border-color: var( --pod-accent ); box-shadow: inset 0 0 0 1px var( --pod-accent ); } /* * The one focus ring, drawn on the card while its radio or checkbox has * keyboard focus: the control inside is small, and the card is what is chosen. */ .pod-product .summary .pod-option:has( input:focus-visible ) { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* The standard's native radio and checkbox: 20px, in the accent. */ .pod-product .summary .pod-option input[type='radio'], .pod-product .summary .pod-option input[type='checkbox'] { accent-color: var( --pod-accent ); flex: none; height: 20px; margin: 0; width: 20px; } /* With a description under the name, the control sits beside the name. */ .pod-product .summary .pod-option:has( .pod-option__for ) input { margin-top: 1px; } .pod-product .summary .pod-option__label { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; } /* * Ink-soft on the chosen card's wash is 5.47:1, which is why this is ink-soft * and not the accent. */ .pod-product .summary .pod-option__for { color: var( --pod-ink-soft ); font-size: 0.8125rem; font-weight: 400; line-height: 1.45; margin-top: 2px; opacity: 1; } .pod-product .summary .pod-option__meta { color: var( --pod-ink-soft ); font-size: 0.8125rem; font-variant-numeric: tabular-nums; font-weight: 600; opacity: 1; } .pod-product .summary .pod-option.is-unavailable { opacity: 0.45; } .pod-product .summary .pod-option.is-unavailable:hover { border-color: var( --pod-line ); } /* * One material is not a choice. The card stays (it says what the product is * printed on, and what that is for) but drawn as a fact: no radio, no accent, * no hover. The radio is still there and still checked, only out of sight, * because the form reads the material from it. */ .pod-product .pod-form .pod-field.is-only .pod-option, .pod-product .pod-form .pod-field.is-only .pod-option:hover, .pod-product .pod-form .pod-field.is-only .pod-option:has( input:checked ) { background: var( --pod-surface-2 ); border-color: var( --pod-line ); box-shadow: none; cursor: default; flex-basis: 100%; } .pod-product .pod-form .pod-field.is-only .pod-option input { height: 1px; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; width: 1px; } /* --- 6. The print form: size presets ----------------------------------------- */ /* * Pills, the chips' shape from the shop. The chosen size is filled in ink, as * the chosen category is there. * * Written as `button.pod-preset` inside the form, which out-ranks both Astra's * `button:hover` paint and the form's own ghost-button guard (see the long * note in `product-form.css`), and repeated for hover and focus so the fill * holds under the pointer. */ .pod-product .pod-form .pod-presets { gap: var( --pod-tight ); margin-bottom: var( --pod-near ); } .pod-product .pod-form button.pod-preset, .pod-product .pod-form button.pod-preset:hover, .pod-product .pod-form button.pod-preset:focus { align-items: center; background: var( --pod-surface ); border: 1px solid var( --pod-line ); border-radius: var( --pod-radius-pill ); color: var( --pod-ink ); display: inline-flex; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; line-height: 1.2; min-height: var( --pod-btn-compact-h ); padding: 0 var( --pod-near ); text-transform: none; transition: background-color var( --pod-fast ) var( --pod-ease ), border-color var( --pod-fast ) var( --pod-ease ), color var( --pod-fast ) var( --pod-ease ); } .pod-product .pod-form button.pod-preset:hover { border-color: var( --pod-ink ); } .pod-product .pod-form button.pod-preset:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } .pod-product .pod-form button.pod-preset[aria-pressed='true'], .pod-product .pod-form button.pod-preset[aria-pressed='true']:hover, .pod-product .pod-form button.pod-preset[aria-pressed='true']:focus { background: var( --pod-ink ); border-color: var( --pod-ink ); color: var( --pod-on-ink ); font-weight: 600; } /* --- 7. The print form: framing --------------------------------------------- */ /* A swatch is a thumbnail inside a control: the small radius. */ .pod-product .summary .pod-swatch__chip { border-color: var( --pod-line ); border-radius: var( --pod-radius-sm ); } /* * "See more frame options": the standard's compact secondary button. It was an * underlined link 28px tall, under the 40px a target needs, and it opens a * dialog, which a button says and a link does not. Compact because it sits * inside the Frame group, under its two option cards, not at the foot of the * form. Repeated for hover and focus to hold against Astra's `button:hover` * paint (see `product-form.css`). */ .pod-product .pod-form button.pod-framing__more, .pod-product .pod-form button.pod-framing__more:hover, .pod-product .pod-form button.pod-framing__more:focus { align-items: center; background: var( --pod-surface ); border: 1px solid var( --pod-field-border ); border-radius: var( --pod-radius-pill ); color: var( --pod-ink ); display: inline-flex; font-size: var( --pod-btn-compact-size ); font-weight: 700; justify-content: center; letter-spacing: 0; line-height: 1.2; margin-top: var( --pod-near ); min-height: var( --pod-btn-compact-h ); padding: 0 var( --pod-near ); text-decoration: none; text-transform: none; transition: background-color var( --pod-fast ) var( --pod-ease ), border-color var( --pod-fast ) var( --pod-ease ); } .pod-product .pod-form button.pod-framing__more:hover { background: var( --pod-surface-2 ); border-color: var( --pod-ink ); } .pod-product .pod-form button.pod-framing__more:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* --- 7b. The frame dialog ----------------------------------------------------- */ /* * "See more frame options". Rendered beside the form rather than inside it, so * its choices take the option cards above through `.summary`. Its shape (the * standard dialog's radius, shadow, width, scrim, head, body and foot) is in * `product-form.css`; this is the type and the controls. */ .pod-product .pod-framer__dialog { color: var( --pod-ink ); } /* The card heading (§3, §8.2). */ .pod-product .pod-framer__title { color: var( --pod-ink ); font-size: var( --pod-h3-size ); font-weight: 800; letter-spacing: -0.01em; } /* * The standard's group label, as the form's own Material and Size are. It was * 13px grey, a caption rather than the name of the choice below it. */ .pod-product .pod-framer__legend { color: var( --pod-ink ); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; margin-bottom: var( --pod-tight ); } .pod-product .pod-framer__choices { gap: var( --pod-tight ); } .pod-product .pod-framer__note, .pod-product .pod-framer__reason, .pod-product .pod-framer__outer { color: var( --pod-ink-soft ); font-size: 0.875rem; opacity: 1; } .pod-product .pod-framer__total { color: var( --pod-ink-soft ); } .pod-product .pod-framer__total strong { color: var( --pod-ink ); font-size: 1.25rem; font-weight: 800; } /* The standard's icon button: 40px round, transparent, surface-2 on hover. */ .pod-product .pod-framer button.pod-framer__close, .pod-product .pod-framer button.pod-framer__close:hover, .pod-product .pod-framer button.pod-framer__close:focus { align-items: center; background: transparent; border: 0; border-radius: var( --pod-radius-pill ); color: var( --pod-ink ); display: inline-flex; flex: none; height: 40px; justify-content: center; padding: 0; width: 40px; } .pod-product .pod-framer button.pod-framer__close:hover { background: var( --pod-surface-2 ); } .pod-product .pod-framer button.pod-framer__close:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* Use this frame: the primary pill. Same weight of selector as Add your design, for the same reason. */ body.pod-product .pod-framer button.button.pod-framer__done { background: var( --pod-accent ); border: 1px solid var( --pod-accent ); border-radius: var( --pod-radius-pill ); box-shadow: none; color: var( --pod-on-ink ); font-size: var( --pod-btn-size ); font-weight: 700; letter-spacing: 0; line-height: 1.2; min-height: var( --pod-btn-h ); padding: 0 var( --pod-btn-x ); text-transform: none; } body.pod-product .pod-framer button.button.pod-framer__done:hover, body.pod-product .pod-framer button.button.pod-framer__done:focus { background: var( --pod-accent-deep ); border-color: var( --pod-accent-deep ); color: var( --pod-on-ink ); } body.pod-product .pod-framer button.button.pod-framer__done:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* --- 8. The print form: quantity --------------------------------------------- */ /* * One 48px control: − | number | +. The field inside keeps no border of its * own; the group draws the standard field's edge, and takes the standard's * field focus while the number has focus. * * No `overflow: hidden`: it clipped the steppers' focus ring to a ring drawn * inside the button. The two buttons round their own outer corners instead, so * their hover fill still follows the group's shape. */ .pod-product .pod-stepper { align-items: stretch; background: var( --pod-surface ); border: 1px solid var( --pod-field-border ); border-radius: var( --pod-radius ); box-sizing: border-box; display: inline-flex; height: var( --pod-btn-h ); } .pod-product .pod-stepper:has( input:focus ) { border-color: var( --pod-accent ); box-shadow: 0 0 0 1px var( --pod-accent ); outline: 2px solid transparent; } .pod-product .pod-form .pod-stepper input[type='number'], .pod-product .pod-form .pod-stepper input[type='number']:hover, .pod-product .pod-form .pod-stepper input[type='number']:focus { -moz-appearance: textfield; appearance: textfield; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-variant-numeric: tabular-nums; font-weight: 600; height: 100%; outline: none; padding: 0; text-align: center; width: 4rem; } .pod-product .pod-stepper input[type='number']::-webkit-inner-spin-button, .pod-product .pod-stepper input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .pod-product .pod-form button.pod-stepper__step, .pod-product .pod-form button.pod-stepper__step:hover, .pod-product .pod-form button.pod-stepper__step:focus { background: transparent; border: 0; border-radius: var( --pod-radius ) 0 0 var( --pod-radius ); color: var( --pod-ink ); cursor: pointer; font-size: 1.25rem; font-weight: 500; letter-spacing: 0; line-height: 1; min-width: var( --pod-btn-h ); padding: 0; transition: background-color var( --pod-fast ) var( --pod-ease ); } .pod-product .pod-form button.pod-stepper__step:last-child, .pod-product .pod-form button.pod-stepper__step:last-child:hover, .pod-product .pod-form button.pod-stepper__step:last-child:focus { border-radius: 0 var( --pod-radius ) var( --pod-radius ) 0; } .pod-product .pod-form button.pod-stepper__step:hover { background: var( --pod-surface-2 ); } .pod-product .pod-form button.pod-stepper__step:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* --- 9. The print form: the total and the way to the designer ---------------- */ /* * The one panel in the column: what it costs and the button that buys it, * together, the way the landing page's price card is. The standard's summary * card: surface-2, no border, radius-lg, 24 of padding. */ .pod-product .pod-form .pod-summary { background: var( --pod-surface-2 ); border: 0; border-radius: var( --pod-radius-lg ); margin-top: var( --pod-apart ); padding: var( --pod-apart ); } .pod-product .pod-form .pod-total { gap: var( --pod-tight ); margin-bottom: var( --pod-tight ); } .pod-product .pod-form .pod-total__label { color: var( --pod-ink-soft ); font-size: 0.9375rem; font-weight: 600; } .pod-product .pod-form .pod-total__value { color: var( --pod-ink ); font-size: 1.75rem; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; } .pod-product .pod-form .pod-total__unit { color: var( --pod-ink-soft ); opacity: 1; } .pod-product .pod-form .pod-note { margin: 0 0 var( --pod-tight ); } /* * The standard's error notice: danger, not the crop-mark coral, which is a * decoration colour and too light to carry a message (3.72:1). */ .pod-product .pod-form .pod-error { background: var( --pod-danger-wash ); border-left: 3px solid var( --pod-danger ); border-radius: 0 var( --pod-radius ) var( --pod-radius ) 0; color: var( --pod-ink ); font-size: 0.9375rem; line-height: 1.5; margin: 0 0 var( --pod-near ); padding: var( --pod-near ) var( --pod-apart ); } /* * The primary action: the standard's primary button, full width. Written * against `button.button.pod-cta` in the body's scope because Astra's * WooCommerce rules for `.button.alt` carry three classes and an element. */ body.pod-product .pod-form button.button.pod-cta { align-items: center; background: var( --pod-accent ); border: 1px solid var( --pod-accent ); border-radius: var( --pod-radius-pill ); box-shadow: none; color: var( --pod-on-ink ); display: flex; font-size: var( --pod-btn-size ); font-weight: 700; justify-content: center; letter-spacing: 0; line-height: 1.2; margin-top: var( --pod-near ); min-height: var( --pod-btn-h ); padding: 0 var( --pod-btn-x ); text-transform: none; transition: background-color var( --pod-fast ) var( --pod-ease ), border-color var( --pod-fast ) var( --pod-ease ); width: 100%; } body.pod-product .pod-form button.button.pod-cta:hover, body.pod-product .pod-form button.button.pod-cta:focus { background: var( --pod-accent-deep ); border-color: var( --pod-accent-deep ); color: var( --pod-on-ink ); } body.pod-product .pod-form button.button.pod-cta:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } body.pod-product .pod-form button.button.pod-cta[disabled] { background: var( --pod-accent ); border-color: var( --pod-accent ); cursor: not-allowed; opacity: 0.5; } .pod-product .pod-summary > .pod-hint:last-child { margin-top: var( --pod-tight ); text-align: center; } /* --- 10. See it on your wall -------------------------------------------------- */ /* * The secondary action under the panel: the standard's secondary button, the * same 48px pill as the button above in outline. Its edge is * `--pod-field-border`, which a control needs (3:1), and its label is 700 like * every other button's; it had the decorative `--pod-line` edge and 600. * Scoped to the summary, because the same trigger sits under cart lines and * saved designs with a layout of its own there. */ .pod-product .summary .pod-viz { margin: var( --pod-near ) 0 0; } .pod-product .summary button.pod-viz__open, .pod-product .summary button.pod-viz__open:hover, .pod-product .summary button.pod-viz__open:focus { align-items: center; background: var( --pod-surface ); border: 1px solid var( --pod-field-border ); border-radius: var( --pod-radius-pill ); color: var( --pod-ink ); display: flex; font-size: var( --pod-btn-size ); font-weight: 700; justify-content: center; letter-spacing: 0; line-height: 1.2; min-height: var( --pod-btn-h ); padding: 0 var( --pod-btn-x ); text-transform: none; transition: background-color var( --pod-fast ) var( --pod-ease ), border-color var( --pod-fast ) var( --pod-ease ); } .pod-product .summary button.pod-viz__open:hover { background: var( --pod-surface-2 ); border-color: var( --pod-ink ); } .pod-product .summary button.pod-viz__open:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* --- 11. Garments: size and colour -------------------------------------------- */ .pod-product div.product form.variations_form table.variations { border: 0; margin: 0 0 var( --pod-apart ); width: 100%; } .pod-product div.product form.variations_form table.variations, .pod-product div.product form.variations_form table.variations tbody, .pod-product div.product form.variations_form table.variations tr, .pod-product div.product form.variations_form table.variations td { display: block; } .pod-product div.product form.variations_form table.variations tr + tr { margin-top: var( --pod-apart ); } /* * The attribute's name, shown. The swatches plugin's "no label" design hides it * with `display: none !important`, which with colour dots would leave nothing on * the page saying which colour is which; answered in kind. The plugin writes the * chosen value into the label ("Colour: Navy"), so it is the dots' caption. * * Its Astra compatibility rules pad both cells with `!important`, also * answered. */ body.pod-product.cfvsw-product-page div.product form.variations_form table.variations tr th.label { background: none; border: 0; color: var( --pod-ink ); display: block !important; font-size: 0.9375rem; font-weight: 700; line-height: 1.3; margin: 0 0 var( --pod-tight ); padding: 0 !important; text-align: left; } body.pod-product.cfvsw-product-page div.product form.variations_form table.variations td.value { border: 0; padding: 0 !important; } /* Size and Color: the standard's group label, 0.9375rem/700 in ink. */ .pod-product div.product form.variations_form table.variations th.label label { color: var( --pod-ink ); font-size: 0.9375rem; font-weight: 700; margin: 0; } /* * The attribute's own menu, for a product whose swatches are switched off * (the swatches plugin hides it otherwise): the standard's select. */ .pod-product div.product form.variations_form table.variations select { background-color: var( --pod-surface ); border: 1px solid var( --pod-field-border ); border-radius: var( --pod-radius ); box-shadow: none; box-sizing: border-box; color: var( --pod-ink ); font-size: var( --pod-field-size ); height: var( --pod-btn-h ); padding: 0 var( --pod-near ); transition: none; } .pod-product div.product form.variations_form table.variations select:focus { border-color: var( --pod-accent ); box-shadow: 0 0 0 1px var( --pod-accent ); outline: 2px solid transparent; } .pod-product div.product form.variations_form .cfvsw-selected-label { color: var( --pod-ink-soft ); font-weight: 400; } .pod-product div.product form.variations_form .cfvsw-selected-label::before { content: ': '; } .pod-product div.product form.variations_form .cfvsw-swatches-container { gap: var( --pod-tight ); } /* * Every swatch. The plugin writes each one's size and corners as an inline * style (24px, 3px), which only `!important` can answer. */ .pod-product div.product form.variations_form .cfvsw-swatches-option { background: var( --pod-surface ); border: 1px solid var( --pod-line ); margin: 0; transition: background-color var( --pod-fast ) var( --pod-ease ), border-color var( --pod-fast ) var( --pod-ease ), box-shadow var( --pod-fast ) var( --pod-ease ), color var( --pod-fast ) var( --pod-ease ); } .pod-product div.product form.variations_form .cfvsw-swatches-option:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* * Sizes: the presets' pill. The plugin's inline corner radius is taken out of * its markup (`ProductPage::swatch_shape()`), so this needs no `!important`. */ .pod-product div.product form.variations_form .cfvsw-label-option { border-radius: var( --pod-radius-pill ); color: var( --pod-ink ); font-size: 0.9375rem; font-weight: 600; min-height: 40px !important; min-width: 48px !important; padding: 0 var( --pod-near ); } .pod-product div.product form.variations_form .cfvsw-label-option:not( .cfvsw-swatches-disabled, .cfvsw-swatches-out-of-stock ):hover { border-color: var( --pod-ink ); } /* The plugin's selected border is `!important`; answered in kind. */ .pod-product div.product form.variations_form .cfvsw-label-option.cfvsw-selected-swatch { background: var( --pod-ink ); border-color: var( --pod-ink ) !important; color: var( --pod-on-ink ); } /* * Colours: a 40px dot. The ring round it is the swatch's own border, drawn off * the dot by 3px of white so a dark ring beside a dark colour still reads, and * the dot keeps a hairline of its own so white shows on white. */ .pod-product div.product form.variations_form .cfvsw-swatches-option:not( .cfvsw-label-option, .cfvsw-image-option ) { border: 2px solid transparent; border-radius: 50%; height: 40px; min-height: 40px !important; min-width: 40px !important; padding: 2px; width: 40px; } .pod-product div.product form.variations_form .cfvsw-swatches-option:not( .cfvsw-label-option, .cfvsw-image-option ) .cfvsw-swatch-inner { border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var( --pod-field-border ); height: 100%; width: 100%; } .pod-product div.product form.variations_form .cfvsw-swatches-option:not( .cfvsw-label-option, .cfvsw-image-option, .cfvsw-swatches-disabled, .cfvsw-swatches-out-of-stock ):hover { border-color: var( --pod-line ); } .pod-product div.product form.variations_form .cfvsw-swatches-option.cfvsw-selected-swatch:not( .cfvsw-label-option, .cfvsw-image-option ) { border-color: var( --pod-ink ) !important; } /* The plugin's "unavailable" veil, rounded with the swatch it covers. */ .pod-product div.product form.variations_form .cfvsw-swatches-option::before { border-radius: inherit; } .pod-product div.product form.variations_form a.reset_variations { color: var( --pod-ink-soft ); display: inline-block; font-size: 0.875rem; letter-spacing: 0; margin-top: var( --pod-tight ); text-decoration: underline; text-transform: none; text-underline-offset: 0.25em; } /* --- 12. Garments: price, quantity and Customize ------------------------------ */ .pod-product div.product form.variations_form .woocommerce-variation-price .price { color: var( --pod-ink ); font-size: 1.25rem; font-weight: 700; margin: 0 0 var( --pod-near ); } .pod-product div.product form.variations_form .woocommerce-variation-add-to-cart { align-items: center; display: flex; gap: var( --pod-tight ); } .pod-product div.product form.variations_form .quantity { margin: 0; } /* The standard's text field, and its focus. */ .pod-product div.product form.variations_form .quantity input.qty { background: var( --pod-surface ); border: 1px solid var( --pod-field-border ); border-radius: var( --pod-radius ); box-shadow: none; box-sizing: border-box; color: var( --pod-ink ); font-size: var( --pod-field-size ); font-weight: 600; height: var( --pod-btn-h ); width: 5rem; transition: none; } .pod-product div.product form.variations_form .quantity input.qty:focus { border-color: var( --pod-accent ); border-style: solid; box-shadow: 0 0 0 1px var( --pod-accent ); outline: 2px solid transparent; } /* * Lumise's Customize link, the garment's primary action, as the print form's. * An ID and three classes deep because the theme styles it as * `.woocommerce div.product form.cart .button`. */ body.pod-product div.product form.variations_form a#lumise-customize-button.button { align-items: center; background: var( --pod-accent ); border: 1px solid var( --pod-accent ); border-radius: var( --pod-radius-pill ); box-shadow: none; color: var( --pod-on-ink ); display: inline-flex; flex: 1; font-size: var( --pod-btn-size ); font-weight: 700; justify-content: center; letter-spacing: 0; line-height: 1.2; margin: 0; min-height: var( --pod-btn-h ); padding: 0 var( --pod-btn-x ); text-transform: none; transition: background-color var( --pod-fast ) var( --pod-ease ); width: auto; } body.pod-product div.product form.variations_form a#lumise-customize-button.button:hover, body.pod-product div.product form.variations_form a#lumise-customize-button.button:focus { background: var( --pod-accent-deep ); border-color: var( --pod-accent-deep ); color: var( --pod-on-ink ); } body.pod-product div.product form.variations_form a#lumise-customize-button.button:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* Until a size and a colour are chosen. */ body.pod-product div.product form.variations_form a#lumise-customize-button.button.disabled { background: var( --pod-accent ); border-color: var( --pod-accent ); cursor: not-allowed; opacity: 0.5; } /* What the garment's form says under the button: dispatch, and the print area. */ .pod-product .pod-facts { border-top: 1px solid var( --pod-line ); display: grid; gap: var( --pod-tight ); list-style: none; margin: var( --pod-apart ) 0 0; padding: var( --pod-apart ) 0 0; } .pod-product .pod-facts__item { align-items: center; color: var( --pod-ink-soft ); display: flex; font-size: 0.9375rem; gap: var( --pod-tight ); margin: 0; } .pod-product .pod-facts__item::before { background: var( --pod-accent ); border-radius: 50%; content: ''; flex: none; height: 6px; width: 6px; } /* --- 13. Below the fold: tabs and related products ---------------------------- */ /* * The tab selectors carry `#content` because WooCommerce's layout sheet writes * its tab rules as `.woocommerce #content div.product .woocommerce-tabs …`, and * an ID out-ranks any number of classes. */ .pod-product #content div.product div.woocommerce-tabs { clear: both; padding-top: var( --pod-split ); } .pod-product #content div.product div.woocommerce-tabs ul.tabs { border-bottom: 1px solid var( --pod-line ); display: flex; flex-wrap: wrap; gap: 0 var( --pod-apart ); margin: 0 0 var( --pod-apart ); padding: 0; } .pod-product #content div.product div.woocommerce-tabs ul.tabs::before { display: none; } /* In a row at every width. WooCommerce stacks them on a phone, one per line. */ .pod-product #content div.product div.woocommerce-tabs ul.tabs li { background: none; border: 0; display: block; margin: 0; padding: 0; } .pod-product #content div.product div.woocommerce-tabs ul.tabs li::before, .pod-product #content div.product div.woocommerce-tabs ul.tabs li::after { display: none; } /* * The tab labels are the card heading (§3, §8.2): they name the panel under * them the way a card's heading names the card. They were 16/600. */ .pod-product #content div.product div.woocommerce-tabs ul.tabs li a { border-bottom: 2px solid transparent; color: var( --pod-ink-soft ); display: inline-block; font-size: var( --pod-h3-size ); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: -1px; padding: 0 0 0.75rem; } .pod-product #content div.product div.woocommerce-tabs ul.tabs li.active a, .pod-product #content div.product div.woocommerce-tabs ul.tabs li a:hover { border-bottom-color: var( --pod-ink ); color: var( --pod-ink ); } .pod-product #content div.product div.woocommerce-tabs .panel { color: var( --pod-ink-soft ); line-height: 1.62; max-width: var( --pod-measure ); } /* A panel's own heading ("Description", "Sizes and colors"): the card heading. */ .pod-product #content div.product div.woocommerce-tabs .panel h2:first-child { color: var( --pod-ink ); font-size: var( --pod-h3-size ); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; text-wrap: balance; } /* A garment's "Additional information": its sizes and colours, as a list of rows. */ .pod-product #content div.product div.woocommerce-tabs table.woocommerce-product-attributes { border: 0; border-collapse: collapse; margin: 0; width: 100%; } .pod-product #content div.product div.woocommerce-tabs table.woocommerce-product-attributes th, .pod-product #content div.product div.woocommerce-tabs table.woocommerce-product-attributes td { background: none; border: 0; border-bottom: 1px solid var( --pod-line ); padding: 0.75rem 0; text-align: left; vertical-align: top; } .pod-product #content div.product div.woocommerce-tabs table.woocommerce-product-attributes th { color: var( --pod-ink ); font-weight: 600; padding-right: var( --pod-apart ); width: 30%; } .pod-product #content div.product div.woocommerce-tabs table.woocommerce-product-attributes td p { margin: 0; } /* --- 13b. Reviews ------------------------------------------------------------- */ /* * A star rating, wherever WooCommerce prints one (a review, the summary once a * product has reviews): filled stars in the accent, empty ones in the field * edge, which is what a customer compares them against. The theme's were two * greys of its own. */ .pod-product .star-rating::before { color: var( --pod-field-border ); } .pod-product .star-rating span::before { color: var( --pod-accent ); } /* "There are no reviews yet.": secondary text, spaced from the form below. */ .pod-product #reviews .woocommerce-noreviews { color: var( --pod-ink-soft ); font-size: 1rem; margin: 0 0 var( --pod-apart ); } /* * The reviews themselves: rows, not cards (`docs/design-standards.md` §5, * Tables). A `--pod-line` rule between them, the avatar round at 48px beside * the name, and the review in body copy. */ .pod-product #reviews #comments ol.commentlist { list-style: none; margin: 0 0 var( --pod-apart ); padding: 0; } .pod-product #reviews #comments ol.commentlist li { border-bottom: 1px solid var( --pod-line ); margin: 0 0 var( --pod-apart ); padding: 0 0 var( --pod-apart ); } .pod-product #reviews #comments ol.commentlist li:last-child { border-bottom: 0; margin-bottom: 0; } .pod-product #reviews #comments ol.commentlist li img.avatar { border-radius: var( --pod-radius-pill ); height: 48px; padding: 0; width: 48px; } .pod-product #reviews #comments ol.commentlist li .comment-text { margin: 0 0 0 calc( 48px + var( --pod-near ) ); padding: 0; } .pod-product #reviews #comments ol.commentlist li .comment-text p.meta { color: var( --pod-ink-soft ); font-size: 0.875rem; margin: 0 0 var( --pod-hair ); } .pod-product #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__author { color: var( --pod-ink ); font-size: 1.0625rem; font-weight: 700; } .pod-product #reviews #comments ol.commentlist li .comment-text .star-rating { margin: 0 0 var( --pod-tight ); } .pod-product #reviews #comments ol.commentlist li .comment-text .description { color: var( --pod-ink ); font-size: 1rem; line-height: 1.6; } .pod-product #reviews #comments ol.commentlist li .comment-text .description p { margin: 0; } /* * The review form: one summary card. WooCommerce borders `#review_form` and * pads `#respond` inside it, which with a tint of our own was a box in a box. */ .pod-product #reviews #review_form { background: var( --pod-surface-2 ); border: 0; border-radius: var( --pod-radius-lg ); padding: var( --pod-apart ); } .pod-product #reviews #review_form #respond { background: none; border: 0; margin: 0; padding: 0; } /* * "Be the first to review …": the card heading. WooCommerce prints it as a * `span` with `role="heading" aria-level="3"`, so it is a heading to a screen * reader already and only needed to look like one. */ .pod-product #review_form #respond .comment-reply-title { color: var( --pod-ink ); display: block; font-size: var( --pod-h3-size ); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 var( --pod-tight ); text-wrap: balance; } /* "Your email address will not be published.": the standard's helper text. */ .pod-product #review_form #respond .comment-notes { color: var( --pod-ink-soft ); font-size: 0.8125rem; line-height: 1.5; margin: 0 0 var( --pod-near ); } .pod-product #review_form #respond .comment-form-rating, .pod-product #review_form #respond p.comment-form-comment, .pod-product #review_form #respond p.comment-form-author, .pod-product #review_form #respond p.comment-form-email { margin: 0 0 var( --pod-near ); } /* The standard's field label: 0.875rem/600 in ink, 4px above its field. */ .pod-product #review_form #respond .comment-form-rating label, .pod-product #review_form #respond p.comment-form-comment label, .pod-product #review_form #respond p.comment-form-author label, .pod-product #review_form #respond p.comment-form-email label { color: var( --pod-ink ); display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.4; margin: 0 0 var( --pod-hair ); min-width: 0; } .pod-product #review_form #respond .required { color: var( --pod-danger ); } /* The standard's text field, select and textarea. */ .pod-product #review_form #respond textarea, .pod-product #review_form #respond select, .pod-product #review_form #respond input[type='text'], .pod-product #review_form #respond input[type='email'] { background: var( --pod-surface ); border: 1px solid var( --pod-field-border ); border-radius: var( --pod-radius ); box-shadow: none; box-sizing: border-box; color: var( --pod-ink ); font-size: var( --pod-field-size ); height: var( --pod-btn-h ); padding: 0 var( --pod-near ); width: 100%; transition: none; } /* Astra fixes the review box at 75px (`#reviews #comment`); the standard's is 7rem and grows. */ .pod-product #review_form #respond textarea { height: auto; min-height: 7rem; padding-block: 0.75rem; resize: vertical; } .pod-product #review_form #respond textarea:focus, .pod-product #review_form #respond select:focus, .pod-product #review_form #respond input[type='text']:focus, .pod-product #review_form #respond input[type='email']:focus { border-color: var( --pod-accent ); border-style: solid; box-shadow: 0 0 0 1px var( --pod-accent ); outline: 2px solid transparent; } /* * The rating picker WooCommerce's script draws over the select: five stars. * Accent, 40px targets (the theme's were about 19px), and the one focus ring * on the star that has focus. Each star is a link whose text ("3 of 5 stars") * the theme moves off screen and replaces with a glyph; the glyph is centred * in the 40px box rather than pinned to its corner. */ .pod-product #reviews .comment-form-rating p.stars { line-height: 1; margin: 0; } .pod-product #reviews .comment-form-rating p.stars span { display: inline-flex; } .pod-product #reviews .comment-form-rating p.stars a { border-radius: var( --pod-radius-sm ); color: var( --pod-accent ); display: inline-block; height: 40px; position: relative; top: 0; width: 40px; } .pod-product #reviews .comment-form-rating p.stars a::before { align-items: center; display: flex; font-size: 1.5rem; height: 100%; justify-content: center; width: 100%; } .pod-product #reviews .comment-form-rating p.stars a:hover { color: var( --pod-accent-deep ); } .pod-product #reviews .comment-form-rating p.stars a:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* * "Save my name, email, and website…": the standard's checkbox row, a native * 20px box in the accent on a row at least 44px tall. */ .pod-product #review_form #respond p.comment-form-cookies-consent { align-items: center; color: var( --pod-ink ); display: flex; font-size: 0.875rem; gap: var( --pod-tight ); line-height: 1.45; margin: 0 0 var( --pod-near ); min-height: 44px; } .pod-product #review_form #respond p.comment-form-cookies-consent input[type='checkbox'] { accent-color: var( --pod-accent ); flex: none; height: 20px; margin: 0; width: 20px; } .pod-product #review_form #respond p.comment-form-cookies-consent label { font-size: inherit; font-weight: 400; margin: 0; } /* Post review: the standard's primary button. */ body.pod-product #review_form #respond input#submit { background: var( --pod-accent ); border: 1px solid var( --pod-accent ); border-radius: var( --pod-radius-pill ); box-shadow: none; color: var( --pod-on-ink ); cursor: pointer; font-family: inherit; font-size: var( --pod-btn-size ); font-weight: 700; letter-spacing: 0; line-height: 1.2; min-height: var( --pod-btn-h ); padding: 0 var( --pod-btn-x ); text-transform: none; transition: background-color var( --pod-fast ) var( --pod-ease ), border-color var( --pod-fast ) var( --pod-ease ); } body.pod-product #review_form #respond input#submit:hover, body.pod-product #review_form #respond input#submit:focus { background: var( --pod-accent-deep ); border-color: var( --pod-accent-deep ); color: var( --pod-on-ink ); } body.pod-product #review_form #respond input#submit:focus-visible { outline: var( --pod-focus-width ) solid var( --pod-accent ); outline-offset: var( --pod-focus-offset ); } /* Related products, in the shop's grid and card. */ .pod-product .related.products, .pod-product .upsells.products { clear: both; padding-top: var( --pod-split ); } /* * "You might also like": the in-page section heading (§3), an H2 under the * item title. * * It matched no tier (30.7px at 1280). The landing's section size would put it * at 43.5px under a product title of 40, so the aside would outrank the page; * this tier is 24–30px, clearly under the title at every width. */ .pod-product .related.products > h2, .pod-product .upsells.products > h2 { color: var( --pod-ink ); font-size: var( --pod-h2-prose-size ); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 var( --pod-apart ); text-wrap: balance; } .pod-product .pod-product__grid { grid-template-columns: repeat( auto-fill, minmax( min( 100%, 15rem ), 1fr ) ); list-style: none; margin: 0; padding: 0; } .pod-product .pod-product__grid .pod-shop__item { display: flex; margin: 0; } .pod-product .pod-product__grid .pod-shop__item > .pod-card { flex: 1; } @media ( max-width: 599px ) { .pod-product .pod-product__grid { gap: var( --pod-near ); grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .pod-product .pod-product__grid .pod-card__name { font-size: 0.9375rem; } /* The space between major blocks, at its phone size. */ .pod-product #content div.product div.woocommerce-tabs, .pod-product .related.products, .pod-product .upsells.products { padding-top: var( --pod-split-sm ); } } @media ( prefers-reduced-motion: reduce ) { .pod-product .summary .pod-option, .pod-product .pod-form input[type='number'], .pod-product .pod-form button.pod-preset, .pod-product .pod-form button.pod-framing__more, .pod-product .pod-form button.pod-stepper__step, body.pod-product .pod-form button.button.pod-cta, .pod-product .summary button.pod-viz__open, .pod-product div.product form.variations_form .cfvsw-swatches-option, body.pod-product div.product form.variations_form a#lumise-customize-button.button, body.pod-product #review_form #respond input#submit, .pod-product div.product div.woocommerce-product-gallery ol.flex-control-thumbs img { transition: none; } }