/** * Product page (PDP) branding. * * Scoped to `.mv-product-chrome` (added to only on product pages * via MV_Assets::body_class()) rather than editing frontend.css directly. * * Class names below (wp-block-woocommerce-*) are WooCommerce Blocks' * own markup for block-theme product templates. These are standard, * documented class names for WooCommerce 10.x block templates, but if a * WooCommerce update changes them, these rules may need re-checking. */ /* --------------------------------------------------------------------- * Page background — matches the homepage's white background for * consistency across the site. * ------------------------------------------------------------------- */ .mv-product-chrome { background: #ffffff; } /* This theme (a block/FSE theme) automatically adds top spacing between * every direct child of its page wrapper (.wp-site-blocks) — normally * invisible, but on product pages our custom header/footer/drawers get * inserted directly into that same wrapper (via the template-part swap * in class-mv-assets.php), so they pick up that spacing too, creating a * visible gap between the announcement bar and header that doesn't exist * anywhere else on the site. Reset to zero for the header-area elements, * since nothing should come before them. */ .mv-product-chrome .mv-announcement-bar, .mv-product-chrome .mv-app-header, .mv-product-chrome .mv-drawer-overlay, .mv-product-chrome #mv-drawer, .mv-product-chrome #mv-cart-drawer { margin: 0 !important; } /* The footer DOES need separation from the content above it — zeroing * its margin (like the header elements above) removed that gap * entirely, making related-product buttons collide with the footer bar. * Give it explicit spacing instead of relying on the theme's automatic * block gap. */ .mv-product-chrome .mv-app-footer { margin: 48px 0 0 !important; } /* --------------------------------------------------------------------- * Hide redundant content: * - SKU/Category meta row * - The Description/Reviews tabs block (the short description is * already shown near the top of the page, making this a duplicate) * ------------------------------------------------------------------- */ .mv-product-chrome .wp-block-woocommerce-product-meta { display: none !important; } .mv-product-chrome .wp-block-woocommerce-product-details { display: none !important; } /* --------------------------------------------------------------------- * Buttons — match the brand's pill-shaped maroon CTA style used * elsewhere (.mv-button--primary). * ------------------------------------------------------------------- */ .mv-product-chrome .wp-block-woocommerce-add-to-cart-form .wp-element-button, .mv-product-chrome form.cart .button, .mv-product-chrome .wc-block-add-to-cart-form .wp-element-button { background: #980000; border: 2px solid #980000; border-radius: 999px; color: #ffffff; font-weight: 900; padding: 14px 28px; transition: background 0.16s ease, transform 0.16s ease; } .mv-product-chrome .wp-block-woocommerce-add-to-cart-form .wp-element-button:hover, .mv-product-chrome form.cart .button:hover { background: #7a0000; border-color: #7a0000; transform: translateY(-2px); } /* Quantity input, to match the rounded/gold-accent style used elsewhere */ /* Quantity stepper: JS (pdp.js) wraps the native quantity input with * +/- buttons and adds the mv-qty-wrapper class to its container. */ .mv-product-chrome .quantity.mv-qty-wrapper { display: inline-flex; align-items: stretch; border: 2px solid #d4a017; border-radius: 999px; overflow: hidden; } .mv-product-chrome .quantity.mv-qty-wrapper input.qty { border: none !important; border-radius: 0 !important; text-align: center; width: 48px; -moz-appearance: textfield; } .mv-product-chrome .quantity.mv-qty-wrapper input.qty::-webkit-inner-spin-button, .mv-product-chrome .quantity.mv-qty-wrapper input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .mv-product-chrome .mv-qty-btn { background: #fff8e6; border: none; color: #980000; font-size: 1.15rem; font-weight: 800; width: 38px; cursor: pointer; line-height: 1; } .mv-product-chrome .mv-qty-btn:hover { background: #f5e6bd; } .mv-product-chrome .mv-qty-btn:disabled { background: #eee; color: #999; cursor: not-allowed; } /* Fallback plain styling for any quantity input pdp.js doesn't manage * to wrap (e.g. if WooCommerce changes its markup) — keeps it from * looking totally unstyled. */ .mv-product-chrome .quantity:not(.mv-qty-wrapper) input.qty, .mv-product-chrome input[type="number"]:not(.mv-qty-wrapper input) { border: 2px solid #d4a017; border-radius: 12px; } /* Smaller title so most product names fit on one line instead of * wrapping — the theme's default h1 size (xx-large) was too big for * this two-column layout. Scoped to h1 specifically: .wp-block-post-title * is also the class used on the small related-product card titles (as * h3), which must NOT get this same size. */ .mv-product-chrome h1.wp-block-post-title { font-size: 2.1rem !important; line-height: 1.15 !important; } /* Tighten the spacing around the price — it had noticeably more * breathing room than the title/description above and below it. */ .mv-product-chrome .wp-block-woocommerce-product-price { margin-top: 4px !important; margin-bottom: 4px !important; } .mv-product-chrome .wc-block-components-product-price { margin: 0 !important; padding: 0 !important; } /* Price in brand maroon so it stands out against the black body text. */ .mv-product-chrome .wp-block-woocommerce-product-price .woocommerce-Price-amount, .mv-product-chrome .wc-block-components-product-price { color: #980000 !important; } /* Maroon price, matching the brand accent used on buttons/badges/headings * elsewhere, so it stands out against the black title/description text. */ .mv-product-chrome .wc-block-components-product-price .woocommerce-Price-amount, .mv-product-chrome .wc-block-components-product-price .woocommerce-Price-currencySymbol { color: #980000; font-weight: 700; } /* Stretch the image column to match the text column's height (title + * price + description + quantity/button), so the image bottom and the * quantity/button row bottom line up instead of the image floating at * its own natural aspect-ratio height. object-fit: cover crops rather * than distorting the photo. */ .mv-product-chrome .wp-block-columns.alignwide { align-items: stretch !important; } .mv-product-chrome .wp-block-woocommerce-product-image-gallery, .mv-product-chrome .woocommerce-product-gallery, .mv-product-chrome .woocommerce-product-gallery__wrapper, .mv-product-chrome .woocommerce-product-gallery__image { height: 100%; } .mv-product-chrome .woocommerce-product-gallery__image img { height: 100%; width: 100%; object-fit: cover; } /* Badges now sit above the product title (in the text column), not on * the image — overriding the absolute/overlay positioning from * badges.css, which is meant for the small product cards where the * badge floats on top of a photo. */ .mv-product-chrome .mv-pdp-summary-badges { position: static; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; pointer-events: auto; } .mv-product-chrome .mv-pdp-summary-badges .mv-product-badge { padding: 6px 16px; font-size: 0.85rem; } .mv-product-chrome [id*="digital-wallet"], .mv-product-chrome [class*="digital-wallet"], .mv-product-chrome [id*="payment-request"], .mv-product-chrome [class*="payment-request"] { display: none !important; } /* "Closed" state outside pickup ordering hours — matches the disabled * gray look used on the Order Now page (.mv-closed-button), applied here * via JS (pdp.js) to both the main Add to Cart button and related * product buttons. Actual enforcement is server-side; this is just the * matching visual state. */ .mv-product-chrome .mv-pdp-closed-button { background: #999999 !important; border-color: #999999 !important; color: #ffffff !important; cursor: not-allowed !important; opacity: 1 !important; } .mv-product-chrome .mv-pdp-closed-button:hover { background: #999999 !important; transform: none !important; } /* --------------------------------------------------------------------- * Related products section — restyle to match brand. The heading TEXT * itself ("Related products" → "Other Recommended Products") is changed * via pdp.js below, since it's literal text content inside the block * template, not something CSS can rewrite. * * Note: this WooCommerce version renders related products as a "Product * Collection" block (data-collection="woocommerce/product-collection/related"), * not the older dedicated "Related Products" block — so the container * selector is scoped to that attribute rather than a wp-block-woocommerce-* * class name. * ------------------------------------------------------------------- */ .mv-product-chrome [data-collection="woocommerce/product-collection/related"] h2, .mv-product-chrome [data-collection="woocommerce/product-collection/related"] .wp-block-heading { color: #980000; font-size: 1.3rem !important; } .mv-product-chrome [data-collection="woocommerce/product-collection/related"] .add_to_cart_button, .mv-product-chrome [data-collection="woocommerce/product-collection/related"] .wp-element-button, .mv-product-chrome [data-collection="woocommerce/product-collection/related"] .wp-block-button__link { background: #980000 !important; border: none !important; border-radius: 999px !important; color: #ffffff !important; } .mv-product-chrome [data-collection="woocommerce/product-collection/related"] .add_to_cart_button:hover, .mv-product-chrome [data-collection="woocommerce/product-collection/related"] .wp-element-button:hover, .mv-product-chrome [data-collection="woocommerce/product-collection/related"] .wp-block-button__link:hover { background: #7a0000 !important; }