/* ========================================================================== Designer Alliance — WooCommerce single product -------------------------------------------------------------------------- The only hand-written stylesheet on this site, authorised as a deliberate exception because WooCommerce renders its product markup from PHP templates, which Elementor global classes cannot attach to. Scope: single product pages only (body.single-product.woocommerce). Nothing here can affect the Elementor-built pages. Mirrors the hand-built /product/ page, class for class: .woocommerce-breadcrumb -> .da-crumbs / .da-crumb-sep .single-product-category -> .da-eyebrow h1.product_title -> .da-h1 p.price -> .da-price .woocommerce-product-gallery -> .da-pdp-media / .da-pdp-main / .da-pdp-thumb table.shop_attributes -> .da-spec-table / .da-spec-key / .da-spec-value .single_add_to_cart_button -> .da-btn + .da-btn-primary Loaded by wp-content/novamira-sandbox/da-woocommerce-styles.php ========================================================================== */ body.single-product.woocommerce { --da-ink: #0B0B0B; --da-ink-soft: #111111; --da-line: #2C2A26; --da-line-soft: #1F1E1B; --da-paper: #F5F3EE; --da-paper-dim: #DAD6CC; --da-mute: #948E84; --da-brass: #C8A96A; --da-font-display: "Cormorant Garamond", "Times New Roman", serif; --da-font-sans: "Jost", "Helvetica Neue", Helvetica, sans-serif; } /* -------------------------------------------------------------------------- Layout — mirrors .da-section padding and the .da-pdp split -------------------------------------------------------------------------- */ /* Astra puts a 60px margin on #primary, which stacked on top of the 112px section padding below and left a 172px gap under the header. The ID is in the selector because Astra's own rule uses #primary and would otherwise win. 112px top and bottom now matches .da-section on the Elementor pages. */ body.single-product.woocommerce #primary, body.single-product.woocommerce .content-area.primary { margin-top: 0; margin-bottom: 0; } /* A two column grid rather than flex, so the summary, the description and specs, and the call to action can all stack in the right hand column while the gallery spans them on the left — the .da-pdp arrangement. WooCommerce emits them as three separate siblings, which flex cannot column together. */ body.single-product.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: 56px; row-gap: 24px; align-items: start; /* Top padding removed on desktop by request, so the gallery image reaches the top of the browser - and the vertical drift (see the JS file) starts - sooner in the scroll. Bottom padding (112px) keeps the full section rhythm above the footer. */ padding-block: 0 112px; } /* anything WooCommerce adds that is not placed below spans the full width */ body.single-product.woocommerce div.product > * { grid-column: 1 / -1; min-width: 0; } /* Moved 2026-09-15 from a full-width bar above the gallery + summary row (grid-row: 1 on div.product) to inside the summary column, directly above the product name. It is now a child of .summary.entry-summary - see woocommerce_single_product_summary in the sandbox PHP file - and "order: 0" (the same explicit-order system item 6's byline uses, in the block below) puts it ahead of the eyebrow/title/byline stack regardless of hook-priority DOM order. */ body.single-product.woocommerce div.product > .summary.entry-summary > .woocommerce-breadcrumb { order: 0; margin: 0 0 16px; } /* !important on width: Astra's WooCommerce grid stylesheet (compatibility/woocommerce/woocommerce-layout-grid.min.css) sizes these two columns to 48%/50% for its float layout and wins here, which would halve both grid cells. Everything else in this rule applies normally. */ body.single-product.woocommerce div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 2 / span 3; width: 100% !important; max-width: none; margin: 0; padding: 0; float: none; } /* .da-pdp-info: fixed 420px column */ body.single-product.woocommerce div.product > .summary.entry-summary { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 24px; width: 100% !important; max-width: none; margin: 0; padding: 0; float: none; } /* Widened 2026-09-15 from grid-column: 2 (the narrow 420px summary column) to the full row, so the grouped specification columns below (.da-spec- section) have room - the request that prompted "adjust the width of the shop". Moved to grid-row: 5, after row 4 - the last row the gallery's own "grid-row: 2 / span 3" reaches (rows 2-4) - since a full-width row 3 would otherwise overlap the gallery, which still owns column 1 there. */ body.single-product.woocommerce div.product > .woocommerce-tabs { grid-column: 1 / -1; grid-row: 5; margin: 0; padding: 0; } /* Related/upsell products are also direct children of div.product. Given an explicit row here rather than left to auto-placement, which would otherwise drop them into row 1 - empty since the breadcrumb moved out of it and into .summary above - ahead of everything else instead of after the tabs/spec section, the same failure mode the tabs row comment above describes. */ body.single-product.woocommerce div.product > section.related, body.single-product.woocommerce div.product > section.upsells { grid-column: 1 / -1; grid-row: 6; } /* -------------------------------------------------------------------------- Specification section - .da-spec-section, .da-spec-group Repeats the product name, lists the SKU, and groups the attributes into three columns (Dimensions; Electrical/Lamping/Certifications; Overview), replacing the "Additional information" tab's own narrow key/value list - see da_render_spec_section() in the sandbox PHP file. Full-bleed to the viewport (the 100vw / -50vw margin breakout) and re-centred at a wider measure than the 1072px site container, since three columns of specification text want more room than the product row's own tuned 56px gap / 420px summary column were sized for. -------------------------------------------------------------------------- */ body.single-product.woocommerce div.product .da-spec-section { position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; padding: 72px 0 0; } body.single-product.woocommerce div.product .da-spec-section__inner { max-width: 1400px; margin: 0 auto; padding: 0 56px; } body.single-product.woocommerce div.product .da-spec-section__title { margin: 0 0 4px; font-family: var(--da-font-display); font-weight: 300; font-size: 32px; line-height: 1.15; color: var(--da-paper); } /* Filled in by da-woocommerce-product.js once a Finish is selected; empty and invisible (no extra gap) the rest of the time. */ body.single-product.woocommerce div.product .da-spec-section__title-finish { font-weight: 300; color: var(--da-mute); } body.single-product.woocommerce div.product .da-spec-section__sku { margin: 0 0 40px; font-family: var(--da-font-sans); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--da-mute); } /* Three columns, matching how Bellacor lays out its own spec section: Dimensions/Electrical, Lamping/Certifications, and Overview/Warranty sharing the third column (Overview above Warranty). Overview and Warranty are nested inside one shared .da-spec-section__col3 grid item (see da_render_spec_section() in the sandbox PHP file) rather than each being placed in the grid directly - giving Warranty its own explicit row alongside Dimensions/Lamping stretched that row to match whichever of those two columns is tallest (usually Lamping, with far more rows than a short Overview paragraph), stranding Warranty well below Overview's actual text instead of directly under it. Nested together, the two stack by ordinary document flow, sized only by their own content - independent of column 1/2's height. .da-spec-section__col3 switches to display: contents on mobile (see the ≤990px block further down), unwrapping back to two independent grid items so Overview alone can move to the top of the stack without dragging Warranty up with it. */ body.single-product.woocommerce div.product .da-spec-section__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } body.single-product.woocommerce div.product .da-spec-section__col--dimensions { grid-column: 1; grid-row: 1; } body.single-product.woocommerce div.product .da-spec-section__col--lamping { grid-column: 2; grid-row: 1; } body.single-product.woocommerce div.product .da-spec-section__col3 { grid-column: 3; grid-row: 1; } /* Warranty's own top spacing when stacked under Overview inside col3 - matches the rhythm .da-spec-section__col > h3:not(:first-child) gives Dimensions/Electrical stacked the same way within column 1. Reset to 0 on mobile (see the ≤990px block), where the two become independent grid items again and the grid's own gap supplies the spacing instead. */ body.single-product.woocommerce div.product .da-spec-section__col3 > .da-spec-section__col--warranty { margin-top: 32px; } body.single-product.woocommerce div.product .da-spec-section__col > h3 { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--da-line-soft); font-family: var(--da-font-sans); font-weight: 400; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--da-paper); } body.single-product.woocommerce div.product .da-spec-section__col > h3:not(:first-child) { margin-top: 32px; } /* Each group's rows are now table.shop_attributes markup (see da_render_spec_section() in the sandbox PHP file) rather than a definition list, so the value sits on the same line as its label - the existing "Attributes table" rule block further down already styles that selector; nothing extra is needed here. */ body.single-product.woocommerce div.product .da-spec-section__overview { font-family: var(--da-font-sans); font-weight: 300; font-size: 16px; line-height: 1.62; color: var(--da-mute); } body.single-product.woocommerce div.product .da-spec-section__overview p { margin: 0 0 16px; } body.single-product.woocommerce div.product .da-spec-section__overview p:last-child { margin-bottom: 0; } @media (max-width: 990px) { body.single-product.woocommerce div.product .da-spec-section__grid { grid-template-columns: 1fr; gap: 40px; } /* Single column now, so the explicit grid-column/grid-row placement that puts col3 (Overview + Warranty) side by side with Dimensions/ Lamping on desktop (further up) would otherwise strand it on a column/row that no longer makes sense here. col3 itself unwraps via display: contents, promoting Overview and Warranty back to being direct grid items (see da_render_spec_section() in the sandbox PHP file) - reset to auto and resequenced with order instead. Overview moves to the very top of the stack (-1, ahead of Dimensions at the implicit 0), directly under the SKU line, per request; Warranty stays at the end where it always was. */ body.single-product.woocommerce div.product .da-spec-section__col3 { display: contents; } body.single-product.woocommerce div.product .da-spec-section__col--dimensions, body.single-product.woocommerce div.product .da-spec-section__col--lamping, body.single-product.woocommerce div.product .da-spec-section__col--overview, body.single-product.woocommerce div.product .da-spec-section__col--warranty { grid-column: 1; grid-row: auto; } body.single-product.woocommerce div.product .da-spec-section__col--overview { order: -1; } body.single-product.woocommerce div.product .da-spec-section__col--warranty { order: 2; } /* Overrides the 32px desktop stacking margin (.da-spec-section__col3 > .da-spec-section__col--warranty further up) - Warranty is a direct grid item again here, not nested under Overview, so the grid's own gap supplies that spacing instead; keeping both would double it up. Repeats the ">.da-spec-section__col3>" segment to match that rule's specificity - a bare ".da-spec-section__col--warranty" here has one fewer class and loses the comparison outright regardless of source order. */ body.single-product.woocommerce div.product .da-spec-section__col3 > .da-spec-section__col--warranty { margin-top: 0; } /* No "Overview" heading here - immediately under the SKU line, it reads as the section's own opening copy (matching how it read before this was folded back into the desktop 3-column grid) rather than a separate labelled column the way it appears on desktop. */ body.single-product.woocommerce div.product .da-spec-section__col--overview > h3 { display: none; } body.single-product.woocommerce div.product .da-spec-section__sku { margin-bottom: 16px; } body.single-product.woocommerce div.product .da-spec-section__col > h3:first-child { margin-top: 0; } } body.single-product.woocommerce div.product > .da-wc-cta { grid-column: 2; grid-row: 4; } /* -------------------------------------------------------------------------- Breadcrumb — .da-crumbs, with .da-crumb-sep coloured separators -------------------------------------------------------------------------- */ /* margin is deliberately left to the layout rule above, which spaces the breadcrumb off the product; setting it here would override it. */ body.single-product.woocommerce div.product .woocommerce-breadcrumb { padding: 0; font-family: var(--da-font-sans); font-size: 13px; line-height: 1.6; letter-spacing: 0.08em; text-transform: uppercase; color: #D8D1C6; } body.single-product.woocommerce div.product .woocommerce-breadcrumb a { color: var(--da-mute); text-decoration: none; } body.single-product.woocommerce div.product .woocommerce-breadcrumb a:hover { color: var(--da-brass); } /* -------------------------------------------------------------------------- Category line, used as the collection eyebrow — .da-eyebrow -------------------------------------------------------------------------- */ /* Hidden 2026-09-15: redundant now that the breadcrumb (moved above the title) already names the category, and the design no longer wants it repeated as a separate eyebrow line. Left in the DOM/markup rather than removed in PHP - Astra prints it as part of its own consolidated title block with no clean hook to stop it - so display: none is the actual removal point. */ body.single-product.woocommerce div.product .single-product-category { display: none; } /* -------------------------------------------------------------------------- Title and price — .da-h1, .da-price -------------------------------------------------------------------------- */ body.single-product.woocommerce div.product h1.product_title { margin: 0; padding: 0; font-family: var(--da-font-display); font-weight: 300; font-size: 52px; line-height: 1.04; letter-spacing: 0.01em; color: var(--da-paper); } /* Designer name, printed as plain text directly under the title - see the PHP note. Muted brand font rather than brass, so it reads as a byline rather than a second label. */ body.single-product.woocommerce div.product .da-designer-by { margin: 2px 0 0; padding: 0; font-family: var(--da-font-sans); font-weight: 300; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #946838; } /* Astra prints title/eyebrow/price/cart as one consolidated block (Astra_Woocommerce::single_product_content_structure) rather than the separate hooks WooCommerce core uses, so there is no reliable hook priority to slot "BY: {Designer}" in between them by DOM order alone. .summary is already a flex column (see the layout rule above), so visual order is fixed explicitly here instead - safe regardless of where in the DOM Astra or the PHP hook actually places each element. */ body.single-product.woocommerce div.product > .summary.entry-summary > h1.product_title { order: 2; } body.single-product.woocommerce div.product > .summary.entry-summary > .da-designer-by { order: 3; } /* The full product description (item 9 in the PHP file) sits directly under the designer name, then Finish/Size/Glass/Shade follow, each its own row - same reasoning as the rest of this block: Astra's consolidated markup gives no reliable hook-priority ordering, so visual order is fixed explicitly here regardless of DOM order. */ /* Finish, Size, Glass, Shade: each its own full-width row again (undoes the 2026-09-19 .da-options-row change that put Finish and Size side by side on one shared row). .cart holds the interactive Finish dropdown for a variable product (built client-side, see da-woocommerce-product.js); .da-attr-box--finish is the static box for a simple product's Finish instead (see da_render_static_attribute_box() in the PHP file) - the two are mutually exclusive per product, so sharing order: 5 is safe. */ body.single-product.woocommerce div.product > .summary.entry-summary .cart { order: 5; } body.single-product.woocommerce div.product > .summary.entry-summary .da-attr-box--finish { order: 5; } /* A simple product's cart form holds only the (hidden) quantity box and button, so it renders empty - but as a flex item it still took its own 24px gap, doubling the space under the Finish box. Variable products keep theirs (form.variations_form holds the Finish dropdown). */ body.single-product.woocommerce div.product > .summary.entry-summary form.cart:not(.variations_form) { display: none; } body.single-product.woocommerce div.product > .summary.entry-summary .da-attr-box--glass { order: 7; } body.single-product.woocommerce div.product > .summary.entry-summary .da-attr-box--shade { order: 8; } /* Size is always the last attribute box (user rule, 2026-09-28). */ body.single-product.woocommerce div.product > .summary.entry-summary .da-attr-box--size { order: 9; } /* The full product description (item 9 in the PHP file), printed under the designer name and above the Finish selector/cart. */ body.single-product.woocommerce div.product > .summary.entry-summary > .da-product-description { order: 4; } /* Astra's own excerpt slot - replaced by the description above, which shows the full text rather than the short description or an auto-generated trim of it. */ body.single-product.woocommerce div.product .woocommerce-product-details__short-description { display: none; } /* -------------------------------------------------------------------------- Gallery — .da-pdp-main (600px) and .da-pdp-thumb (84px, brass when active) -------------------------------------------------------------------------- */ /* !important is required here alone: flexslider writes the viewport height inline. */ body.single-product.woocommerce div.product .woocommerce-product-gallery .flex-viewport { height: 600px !important; } body.single-product.woocommerce div.product .woocommerce-product-gallery__wrapper, body.single-product.woocommerce div.product .woocommerce-product-gallery__image, body.single-product.woocommerce div.product .woocommerce-product-gallery__image a { display: block; height: 100%; } body.single-product.woocommerce div.product .woocommerce-product-gallery__image img { width: 100%; height: 100%; object-fit: cover; } /* Thumbnail rail (2026-09-28, emulating Bellacor's PDP): a single vertical column overlaid on the left edge of the hero photo and centered on its height, rather than a wrapping strip underneath it that could run to two rows. Measured from Bellacor's live page: 20px in from the left edge, top 50% + translateY(-50%), a 4px-padded panel, 4px gaps and 4:5 portrait thumbs with a 2px outline marking the active one. The panel is ink rather than Bellacor's cream so it reads on this site's darker photography. Once the
    is out of flow the gallery box is exactly the 600px viewport, so 50% is the hero's own center. max-height + overflow keep a long gallery inside the photo instead of spilling past it, and da-woocommerce-product.js scrolls the active thumb into view. The viewport's own 16px bottom margin (from WooCommerce) is zeroed so the gallery box ends at the photo - otherwise 50% lands 8px low. */ body.single-product.woocommerce div.product .woocommerce-product-gallery { position: relative; } body.single-product.woocommerce div.product .woocommerce-product-gallery .flex-viewport { margin-bottom: 0; } body.single-product.woocommerce div.product ol.flex-control-thumbs { position: absolute; top: 50%; left: 20px; z-index: 5; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px; max-height: calc(100% - 40px); margin: 0; padding: 4px; overflow-y: auto; scrollbar-width: none; list-style: none; background: rgba(11, 11, 11, 0.55); } body.single-product.woocommerce div.product ol.flex-control-thumbs::-webkit-scrollbar { display: none; } body.single-product.woocommerce div.product ol.flex-control-thumbs li { flex: 0 0 auto; width: 48px; height: 60px; margin: 0; padding: 0; float: none; list-style: none; } body.single-product.woocommerce div.product ol.flex-control-thumbs li img { display: block; width: 48px; height: 60px; object-fit: cover; border: 0; outline: 2px solid transparent; outline-offset: -2px; opacity: 0.75; cursor: pointer; transition: opacity 0.2s ease, outline-color 0.2s ease; } body.single-product.woocommerce div.product ol.flex-control-thumbs li img.flex-active, body.single-product.woocommerce div.product ol.flex-control-thumbs li img:hover { outline-color: var(--da-brass); opacity: 1; } /* Wide screens (2026-09-28, by request): from 1090px up the rail moves off the photo into the page margin, 16px to its left, so the photo shows with nothing over it. Astra caps the content at 1072px (20px padding), which leaves under 72px of margin until about 1190px - in that range --da-rail-room shifts only the gallery right (the specs/related rows below keep their width) so the rail's left edge lands flush with the screen. The 60px target (72px of rail + gap, less 12px) allows for a Windows scrollbar, which 100vw includes. Above ~1190px it is 0 and the photo is full size again. The panel background is dropped: outside the photo it would only be a dark box on the dark page. */ @media (min-width: 1090px) { body.single-product.woocommerce div.product > .woocommerce-product-gallery { --da-rail-room: max(0px, calc(60px - (100vw - 1072px) / 2)); width: calc(100% - var(--da-rail-room)) !important; margin-left: var(--da-rail-room); } body.single-product.woocommerce div.product ol.flex-control-thumbs { left: auto; right: calc(100% + 16px); max-height: 100%; background: none; } } /* Mobile-only "next photo" arrow and progress bar - see da-woocommerce-product.js, which adds both and reveals the arrow (.da-next-visible) after a tap or swipe on the photo. Hidden above the mobile breakpoint, where the rail above does the navigating. */ body.single-product.woocommerce div.product .da-gallery-next, body.single-product.woocommerce div.product .da-gallery-progress { display: none; } /* -------------------------------------------------------------------------- Tabs — the design has no tab bar, so the panels are stacked instead -------------------------------------------------------------------------- */ body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs { display: none; } /* !important: WooCommerce's JS hides the inactive panels with an inline style. */ body.single-product.woocommerce div.product .woocommerce-tabs .panel { display: block !important; max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; } /* the design carries no reviews block. Needs to outrank the .panel rule above, hence the doubled class rather than a shorter selector. */ body.single-product.woocommerce div.product .woocommerce-tabs .panel.woocommerce-Tabs-panel--reviews { display: none !important; } /* -------------------------------------------------------------------------- Description copy — the full description in the summary column and the paragraphs inside the spec panel -------------------------------------------------------------------------- */ body.single-product.woocommerce div.product .woocommerce-Tabs-panel p, body.single-product.woocommerce div.product .da-product-description p { margin: 0 0 16px; font-family: var(--da-font-sans); font-weight: 300; font-size: 16px; line-height: 1.62; color: var(--da-mute); } body.single-product.woocommerce div.product .woocommerce-Tabs-panel p:last-child, body.single-product.woocommerce div.product .da-product-description p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- Attributes table — .da-spec-table / .da-spec-key / .da-spec-value -------------------------------------------------------------------------- */ body.single-product.woocommerce div.product table.shop_attributes { width: 100%; max-width: none; margin: 0; border: 0; border-collapse: collapse; } body.single-product.woocommerce div.product table.shop_attributes tr { border-bottom: 1px solid var(--da-line-soft); } body.single-product.woocommerce div.product table.shop_attributes th, body.single-product.woocommerce div.product table.shop_attributes td { padding: 12px 0; border: 0; background: none; font-style: normal; } body.single-product.woocommerce div.product table.shop_attributes th { width: 1%; /* 1% + nowrap makes the label column shrink to its own text, so "Overall height" stays on one line and the value column takes the rest. */ white-space: nowrap; padding-right: 24px; text-align: left; font-family: var(--da-font-sans); font-weight: 400; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--da-mute); } body.single-product.woocommerce div.product table.shop_attributes td { text-align: right; font-family: var(--da-font-sans); font-weight: 300; font-size: 16px; color: var(--da-paper-dim); } body.single-product.woocommerce div.product table.shop_attributes td p { margin: 0; /* WooCommerce wraps each value in a

    , which the tab-panel prose rule above would otherwise paint --da-mute. The design has values lighter than their labels, so restate the colour here. */ color: var(--da-paper-dim); font-weight: inherit; font-size: inherit; line-height: inherit; } /* -------------------------------------------------------------------------- Purchase controls, hidden now that variations carry a real 99 so the Finish selector renders (see the note above table.variations). The price line, quantity box, Add to Cart button, and stock text are left in the DOM rather than removed in PHP, because the Finish dropdown's image-swap script (wc-add-to-cart-variation.js) reads and updates this same markup; removing it outright would break that swap along with it. Where to Buy (below) is the only call to action shown. -------------------------------------------------------------------------- */ body.single-product.woocommerce div.product p.price, body.single-product.woocommerce div.product p.stock, body.single-product.woocommerce div.product .quantity, body.single-product.woocommerce div.product .single_add_to_cart_button, body.single-product.woocommerce div.product .woocommerce-variation-price, body.single-product.woocommerce div.product .woocommerce-variation-availability { display: none !important; } /* -------------------------------------------------------------------------- Price, hidden everywhere WooCommerce lists products in a grid: the shop page, every product-category/collection archive, related/upsell/cross-sell products, and any products widget or shortcode. Unscoped by body class (unlike the rest of this file) because ul.products can appear on any page, not just single-product ones - see the enqueue note above for why the stylesheet now loads site-wide rather than only on is_product(). -------------------------------------------------------------------------- */ .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .woocommerce-Price-amount { display: none !important; } /* -------------------------------------------------------------------------- "Shop retailer" call to action — .da-cta-row + .da-btn + .da-btn-primary Printed by wp-content/novamira-sandbox/da-woocommerce-styles.php, because WooCommerce escapes HTML inside attribute values. -------------------------------------------------------------------------- */ body.single-product.woocommerce div.product .da-wc-cta { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; margin: 0; } body.single-product.woocommerce div.product .da-wc-btn { display: inline-flex; align-items: center; justify-content: center; padding: 15px 30px; border: 1px solid var(--da-brass); border-radius: 0; background: var(--da-brass); color: var(--da-ink); font-family: var(--da-font-sans); font-weight: 400; font-size: 13px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; } body.single-product.woocommerce div.product .da-wc-btn:hover, body.single-product.woocommerce div.product .da-wc-btn:focus { background: var(--da-paper); border-color: var(--da-paper); color: var(--da-ink); } /* -------------------------------------------------------------------------- Variation selector — no-JS fallback only. WooCommerce's own table.variations markup (label + in sync -

    would buy it nothing extra. -------------------------------------------------------------------------- */ body.single-product.woocommerce div.product .da-attr-box { display: block; width: 100%; border: 1px solid var(--da-line); border-radius: 2px; background: transparent; } body.single-product.woocommerce div.product .da-attr-box__label { flex: 0 0 auto; font-family: var(--da-font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--da-mute); } /* Small inline colour chip, shared by every box variant and by the option rows inside a dropdown's panel - sized for sitting next to a line of text, not the old 56px hero square the always-expanded row used. */ body.single-product.woocommerce div.product .da-swatch-square { display: inline-block; flex: 0 0 auto; width: 22px; height: 22px; border: 1px solid var(--da-line); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); } /* ---- static box ---- */ body.single-product.woocommerce div.product .da-attr-box--static { display: flex; align-items: center; gap: 12px; padding: 14px 16px; } body.single-product.woocommerce div.product .da-attr-box--static .da-attr-box__value { display: flex; align-items: center; gap: 10px; font-family: var(--da-font-sans); font-size: 14px; font-weight: 300; color: var(--da-paper); } /* ---- dropdown box: shared summary/panel chrome, native
    (Size) and JS-built
    (Finish) alike ---- */ body.single-product.woocommerce div.product .da-attr-box--dropdown { transition: border-color 0.15s ease; } body.single-product.woocommerce div.product .da-attr-box--dropdown:hover, body.single-product.woocommerce div.product .da-attr-box--dropdown[open], body.single-product.woocommerce div.product .da-attr-box--dropdown.is-open { border-color: var(--da-brass); } /* min-height matches the static boxes (their 22px swatch sets their height), so every attribute row is the same height. */ body.single-product.woocommerce div.product .da-attr-box__summary { min-height: 51px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; } body.single-product.woocommerce div.product .da-attr-box__summary::-webkit-details-marker, body.single-product.woocommerce div.product .da-attr-box__summary::marker { display: none; } body.single-product.woocommerce div.product .da-attr-box__summary-left { display: flex; align-items: center; gap: 10px; min-width: 0; } body.single-product.woocommerce div.product .da-attr-box__current { font-family: var(--da-font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--da-paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Placeholder ("Select Finish", set by da-woocommerce-product.js before a Finish is chosen) reads a little softer than an actual selected value, so it doesn't look like a decision has already been made. */ body.single-product.woocommerce div.product .da-attr-box__current[data-placeholder="true"] { color: var(--da-mute); } /* Once chosen, a JS-built dropdown (Finish, a Size variation) reads like a static box: label, swatch (colour attributes only), value - the same 12px label-to-value gap and 14px light value text, not the uppercase placeholder style. The size-siblings
    box keeps its own summary styling. */ body.single-product.woocommerce div.product div.da-attr-box--dropdown .da-attr-box__summary-left { gap: 12px; } body.single-product.woocommerce div.product .da-attr-box__summary .da-attr-box__value { display: flex; align-items: center; gap: 10px; min-width: 0; } body.single-product.woocommerce div.product .da-attr-box__current[data-placeholder="false"] { font-size: 14px; font-weight: 300; letter-spacing: normal; text-transform: none; } /* A plain rotated border-corner chevron rather than an icon font/SVG - one fewer asset to load, and the whole page already leans on simple CSS shapes for its other affordances. */ body.single-product.woocommerce div.product .da-attr-box__chevron { flex: 0 0 auto; width: 8px; height: 8px; border-right: 1.5px solid var(--da-mute); border-bottom: 1.5px solid var(--da-mute); transform: rotate(45deg); transition: transform 0.15s ease; margin-top: -4px; } body.single-product.woocommerce div.product .da-attr-box--dropdown[open] .da-attr-box__chevron, body.single-product.woocommerce div.product .da-attr-box--dropdown.is-open .da-attr-box__chevron { transform: rotate(-135deg); margin-top: 4px; } body.single-product.woocommerce div.product .da-attr-box__panel { border-top: 1px solid var(--da-line); max-height: 280px; overflow-x: hidden; overflow-y: auto; } /* The JS-built Finish box keeps its panel in the DOM at all times (JS toggles .is-open on the box itself instead) - hidden here rather than with display: none directly on the class, so the same rule also covers a
    summary’s panel, which the browser already hides on its own whenever [open] is absent. */ body.single-product.woocommerce div.product .da-attr-box--dropdown:not([open]):not(.is-open) .da-attr-box__panel { display: none; } body.single-product.woocommerce div.product .da-attr-option { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; padding: 10px 16px; border: 0; background: none; cursor: pointer; appearance: none; -webkit-appearance: none; font-family: var(--da-font-sans); font-size: 13px; font-weight: 300; color: var(--da-paper); text-align: left; text-decoration: none; } body.single-product.woocommerce div.product .da-attr-option:hover, body.single-product.woocommerce div.product .da-attr-option.is-selected, body.single-product.woocommerce div.product .da-attr-option.is-current { background: rgba(200, 169, 106, 0.14); } body.single-product.woocommerce div.product .da-attr-option.is-selected, body.single-product.woocommerce div.product .da-attr-option.is-current { font-weight: 700; } body.single-product.woocommerce div.product .da-attr-option.is-current { cursor: default; } /* -------------------------------------------------------------------------- Related / upsell headings, for when there is more than one product -------------------------------------------------------------------------- */ body.single-product.woocommerce section.related > h2, body.single-product.woocommerce section.upsells > h2 { font-family: var(--da-font-display); font-weight: 300; font-size: 40px; line-height: 1.2; color: var(--da-paper); } /* -------------------------------------------------------------------------- Mobile — a single 990px breakpoint (2026-09-22; previously a 1024px "tablet" layout switch plus a separate 767px mobile pass - folded into one, since the design doesn't need a distinct tablet treatment between them). Above 990px, div.product's two-column grid (see the Layout rule near the top of this file: minmax(0, 1fr) for the gallery, a fixed 420px for the summary column) is left alone all the way up - the gallery is the flexible column, so it's the one that narrows as the viewport does, keeping the 420px text column at a stable, readable width right up to this breakpoint, where the gallery and summary column are roughly even (~half the row each) just before the stack below flips them to one column entirely. -------------------------------------------------------------------------- */ @media (max-width: 990px) { body.single-product.woocommerce div.product { grid-template-columns: minmax(0, 1fr); column-gap: 0; padding-block: 32px 56px; } /* single column: let everything fall back into a defined order rather than pure source order - see the note below. The breadcrumb is no longer in this list - it now lives inside .summary.entry-summary (see the "Breadcrumb" rule block above) and travels with it. */ body.single-product.woocommerce div.product > *, body.single-product.woocommerce div.product > .woocommerce-product-gallery, body.single-product.woocommerce div.product > .summary.entry-summary, body.single-product.woocommerce div.product > .woocommerce-tabs, body.single-product.woocommerce div.product > .da-wc-cta { grid-column: 1; grid-row: auto; } /* Square aspect ratio instead of a fixed pixel height (2026-09-22 per request) - once the layout stacks to one column at this breakpoint the gallery runs full-bleed width, and a short fixed height against that much width was cropping a large slice off the top and bottom of every (square) product photo via object-fit: cover. Scaling the box's height to match its own width instead keeps it square at any viewport in this range, so the full photo always fits without cropping. Still !important for the same reason as the desktop rule above: flexslider writes its own inline height, and this has to win over that. */ body.single-product.woocommerce div.product .woocommerce-product-gallery .flex-viewport { height: auto !important; aspect-ratio: 1 / 1; } /* Mobile gallery (2026-09-28, emulating Bellacor): no thumbnail rail - shoppers swipe the photo left and right (FlexSlider's own touch handling), and a next arrow fades in on the right once they tap or swipe it. The
      is only hidden, not removed, because the Finish swap and the default-image override in da-woocommerce-product.js still change slides by clicking its thumbnails. */ body.single-product.woocommerce div.product ol.flex-control-thumbs { display: none; } body.single-product.woocommerce div.product .da-gallery-next { position: absolute; top: 50%; right: 12px; z-index: 6; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(11, 11, 11, 0.6); color: var(--da-paper); cursor: pointer; opacity: 0; pointer-events: none; transform: translate(8px, -50%); transition: opacity 0.25s ease, transform 0.25s ease; } body.single-product.woocommerce div.product .da-gallery-next svg { width: 18px; height: 18px; } /* Gallery progress bar (2026-09-28, emulating Bellacor's mobile PDP): measured from Bellacor, a 2px full-width track on the photo's bottom edge with a fill that grows from the left to (current photo / total) over 0.1s linear. Colours are the site's own rather than Bellacor's tan-and-black: a faint paper track and a brass fill, matching the desktop rail's active outline. The JS sets the fill's width. */ body.single-product.woocommerce div.product .da-gallery-progress { position: absolute; right: 0; bottom: 0; left: 0; z-index: 6; display: block; height: 2px; background: rgba(245, 243, 238, 0.25); pointer-events: none; } body.single-product.woocommerce div.product .da-gallery-progress span { display: block; width: 0; height: 100%; background: var(--da-brass); transition: width 0.1s linear; } body.single-product.woocommerce div.product .woocommerce-product-gallery.da-next-visible .da-gallery-next { opacity: 1; pointer-events: auto; transform: translate(0, -50%); } body.single-product.woocommerce div.product h1.product_title { font-size: 30px; } body.single-product.woocommerce div.product table.shop_attributes th { font-size: 11px; } body.single-product.woocommerce div.product table.shop_attributes td { font-size: 15px; } body.single-product.woocommerce div.product .da-spec-section { padding-top: 40px; } body.single-product.woocommerce div.product .da-spec-section__inner { padding: 0 20px; } body.single-product.woocommerce div.product .da-spec-section__title { font-size: 26px; } body.single-product.woocommerce section.related > h2, body.single-product.woocommerce section.upsells > h2 { font-size: 25px; } } /* ========================================================================== Mobile PDP pass (2026-09-18, folded into the single 990px breakpoint 2026-09-22) — every product. Each rule here ties the matching desktop rule on specificity and wins on source order, so keep this block last. Reorders the stack to: breadcrumb, title, designer, gallery (photo + thumbnails + swipe), description ("design story"), Finish/Size/Glass/ Shade attribute boxes, spec tabs, Where to Buy, related products - per request (2026-09-22) the attribute boxes now come AFTER the description instead of before it (an earlier pass, 2026-09-18, had them directly under the gallery, ahead of the description). .summary.entry-summary is unwrapped with display: contents so its children (breadcrumb, title, designer, description, attribute boxes) share one ordering context with the gallery/tabs/cta/related - those live outside .summary, as siblings of it on div.product, and CSS order can only reorder items that already share one flex/grid container. This is the only way to land the gallery between two of .summary's own children. row-gap is zeroed and each item gets its own explicit margin-top instead of the uniform grid gap used elsewhere - breadcrumb/title/designer want a tight rhythm, the blocks further down (gallery, description, attribute boxes, tabs, cta, related) want a looser one, and one uniform gap can't give two different rhythms to the same grid. ========================================================================== */ @media (max-width: 990px) { body.single-product.woocommerce div.product { row-gap: 0; } body.single-product.woocommerce div.product > .summary.entry-summary { display: contents; } body.single-product.woocommerce div.product > .summary.entry-summary > .woocommerce-breadcrumb { order: 1; margin: 0 0 6px; font-size: 10px; } body.single-product.woocommerce div.product > .summary.entry-summary > h1.product_title { order: 2; margin-top: 0; } body.single-product.woocommerce div.product > .summary.entry-summary > .da-designer-by { order: 3; margin-top: 4px; } body.single-product.woocommerce div.product > .woocommerce-product-gallery { order: 4; margin-top: 24px; } body.single-product.woocommerce div.product > .summary.entry-summary > .da-product-description { order: 5; margin-top: 16px; } body.single-product.woocommerce div.product > .summary.entry-summary > .cart, body.single-product.woocommerce div.product > .summary.entry-summary > .da-attr-box--finish, body.single-product.woocommerce div.product > .summary.entry-summary > .da-attr-box--size, body.single-product.woocommerce div.product > .summary.entry-summary > .da-attr-box--glass, body.single-product.woocommerce div.product > .summary.entry-summary > .da-attr-box--shade { order: 6; margin-top: 24px; } body.single-product.woocommerce div.product > .woocommerce-tabs { order: 7; margin-top: 8px; } body.single-product.woocommerce div.product > .da-wc-cta { order: 8; margin-top: 24px; width: 100%; } /* Full width, per request - the only call to action on the page, held at the bottom of the summary flow, directly above related products. */ body.single-product.woocommerce div.product > .da-wc-cta .da-wc-btn { width: 100%; } /* grid-row: auto overrides the unconditional desktop rule's grid-row: 6 (further up) - that rule's selector carries an extra type selector ("section"), which outranks this breakpoint's own blanket grid-row: auto reset purely on specificity, regardless of source order. Left at grid-row: 6 while this block interleaves the gallery, description, and attribute boxes into what's now a 9-item sequence (was a 5-item one), it reserves row 6 outright and leaves every auto-placed item after it fighting over the remaining rows - the direct cause of the large empty gap this rule fixes. */ body.single-product.woocommerce div.product > section.related, body.single-product.woocommerce div.product > section.upsells { grid-row: auto; grid-column: 1; order: 9; margin-top: 40px; } } /* Two or more variation dropdowns (e.g. Tuscany's Size + Glass Option) sit together inside form.variations_form, outside the summary's own 24px flex gap / mobile margin-top - give them the same 24px between boxes. */ body.single-product.woocommerce div.product form.variations_form .da-attr-box + .da-attr-box { margin-top: 24px; } /* WooCommerce's variation details area (.single_variation) is always empty here (no prices or availability shown), but its theme margin-bottom still added ~18px under the cart form - so a box after a variation form (e.g. Bulles's Glass under its Finish dropdown) sat 42px away instead of 24px. */ body.single-product.woocommerce div.product form.variations_form .single_variation { margin-bottom: 0; } /* da-mobile-spec-wrap (2026-09-29) - phones/tablets (<=990px), where the spec tables stack in one column. A long unbreakable value ("2700/3000/4000/4500/ 5000" beside "Lamping Color Temperature") made the table wider than a 375px screen, so the page scrolled sideways. The real fix is the after each slash in da_spec_groups_html() (sandbox PHP); minmax(0, 1fr) is the safety net that stops any too-wide table from ever widening the grid. Labels keep their one-line nowrap look. */ @media (max-width: 990px) { body.single-product.woocommerce div.product .da-spec-section__grid { grid-template-columns: minmax(0, 1fr); } }