/* Theme Name: Woodmart Child Description: Woodmart Child Theme Author: XTemos Author URI: http://xtemos.com Template: woodmart Version: 1.0.0 Text Domain: woodmart */ /* ============================================================ Onyx — Product card: model number (SKU) above title ============================================================ */ /* Woodmart wraps the title row in .wd-product-header as a flex container, which keeps the SKU on the same line as the title. Force it to block so the SKU sits on its own line above the title. */ .woocommerce .wd-product-header, .woocommerce-page .wd-product-header { display: block !important; } /* Rendered as a at priority 5, before the title (priority 10), inside the woocommerce_shop_loop_item_title hook. Displayed as a block so it sits on its own line above the title text. */ .woocommerce .onyx-product-model, .woocommerce-page .onyx-product-model { display: block; font-size: 0.78em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-gray-600, #6b7280); line-height: 1.2; margin-bottom: 4px; } /* Ensure the model number does not inherit the title's anchor colour when the whole product card is wrapped in a link (some Woodmart card layouts). */ a .onyx-product-model, a:hover .onyx-product-model { color: var(--color-gray-600, #6b7280); text-decoration: none; } .product_meta .sku { color: var(--color-gray-800); font-weight: 600; } .wd-product.wd-hover-buttons-on-hover .wd-product-wrapper:hover { transform: translateY(-10px) !important; } :is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content.product-categories { max-height: 700px; overflow-y: auto; } @media screen and (max-width: 500px) { #slider-70 .wd-slide { min-height: 200px !important; max-height: 200px !important; } #slider-70 .wd-nav-arrows { display:none } } /* ============================================================ Onyx — Home "Shop by Item" collections carousel ============================================================ */ /* Each tile's height came entirely from a 310px bottom padding, so a title that wraps to two lines ("Business Card Holders") made that tile taller than the rest and its cover background scaled up with it. Fixing the height instead makes every tile identical no matter how the title wraps. */ /* !important is needed: Elementor writes .elementor-element- .wd-info-box { padding: 20px 20px 310px } into post-15.css, which has the same specificity as this rule but loads later, so it wins without it. */ .onyx-collections-carousel .wd-carousel-item .wd-info-box { min-height: 360px !important; padding-bottom: 20px !important; } @media (max-width: 768px) { .onyx-collections-carousel .wd-carousel-item .wd-info-box { min-height: 300px !important; } } /* ============================================================ Onyx — Shop sidebar "Featured This Week" banner (client task 2026-09-08 #2) ============================================================ */ /* The widget's "Fixed height" toggle (520px) forced .banner-image img into a box far taller/narrower than the product photo's own aspect ratio, so cover AND contain both fought the same box mismatch (cover cropped the product; contain kept it whole but letterboxed with dead white space above/below). Removed custom_height/image_height from the widget settings entirely instead — with no --wd-img-height, height:var(--wd-img-height) falls back to `auto`, so the image just renders at its own natural aspect ratio. No crop, no letterboxing, no wasted space. */ /* Woodmart's text overlay (.wrapper-content-banner) is its .wd-fill utility class — position:absolute; inset:0 — anchored to the bottom via .wd-items-bottom, designed on the assumption that the image always fills a tall fixed box behind it. Now that the image is only as tall as its own content, that absolute overlay would still cover the bottom slice of it. Taking it out of absolute positioning lets it flow in normal order below the image instead — the banner's total height is simply image + text now, not the two stacked on top of each other. */ .elementor-element-ccefa4d .wrapper-content-banner { position: static !important; inset: auto !important; } /* ============================================================ Onyx — client tasks 2026-09-09 ============================================================ */ /* #1 Home banner focal point. The slide image is an inside .wd-slide-bg, and Woodmart hardcodes `object-fit:cover; object-position:center` on it — the slide's own "Image position" setting only writes background-position on the wrapper div, which has no background image, so it has no effect on the photo. At 470px tall and a wide viewport the photo is cropped top and bottom, which is what cut both hands. The hands sit low in the frame (their centre is ~56% down), so centring the crop on them instead of on the image keeps both in view. The hands occupy ~420px of the 641px-tall image, and the visible window at a 1920px viewport is 470px, so at 65% both hands sit clear of both edges with margin; on ultrawide (>2000px), where the window is shorter than the hands, 65% splits the unavoidable loss evenly between the two instead of taking it all off one. Verified 768-1920px. */ #slide-151 .wd-slide-bg img { object-position: center 65%; } /* #4 Home "Popular Categories" circles — bigger, 5 per row. The 5-per-row part is the widget's own `columns` setting. The size is not: the widget asks WordPress for a 160x160 crop, but the designer's icon artwork is only 128x128, and WordPress never upscales — it just serves the 128px original with width="128", so the circles stayed the old size. Setting the box in CSS is what actually enlarges them. Kept to 160px (a 1.25x upscale) deliberately: enough to read as "bigger" without the soft edges a larger jump would show. For genuinely larger circles the designer needs to re-export the 29 icons at 256px — then the widget's 160x160 request starts resolving to real pixels and this rule simply matches it. !important is required, not lazy: Woodmart's own `.products:not(.wd-img-width) .cat-design-alt img { width: revert-layer }` loads after this file and reverts the width to the img's width="128" attribute. revert-layer can't be outranked by specificity, so without !important only the height applied and the icons came out stretched. */ .elementor-element-d0d4c1a .wd-cat-thumb img { width: 160px !important; height: 160px !important; } /* #3 Shop filters — drop the product counts. The 4-digit "All" count (1002) was too wide to sit next to its label and wrapped onto its own row, breaking the list. Client asked for the numbers gone on all three filters: Category, Colour (Woodmart swatches) and Shape (WooCommerce layered nav). Scoped to those widgets so counts elsewhere (e.g. cart/menu badges) are untouched. The Filter by Item widget added 2026-09-15 still *computes* its counts — that is how it hides item types with no matches in the current category — but must not display them. */ .wd-product-category-filter .count, .woodmart-woocommerce-layered-nav .count, .widget_layered_nav .count, .onyx-tag-filter .count { display: none; } /* --------------------------------------------------------------------------- Header — "Register now to see prices" badge (client request NR-7) Sits in the header-bottom centre column, where the old free-shipping badge was. --------------------------------------------------------------------------- */ .onyx-register-prompt { display: inline-block; padding: 6px 16px; border-radius: 999px; background-color: #e8f0fb; color: #1c4fa1; font-size: 13px; font-weight: 500; line-height: 1.4; text-align: center; white-space: nowrap; transition: background-color .2s ease, color .2s ease; } .onyx-register-prompt:hover, .onyx-register-prompt:focus { background-color: #000; color: #fff; } /* The header column is centred by the header builder; this keeps the pill centred inside it at every width rather than hugging the left edge. */ .whb-column .wd-header-html:has(.onyx-register-prompt) { justify-content: center; text-align: center; width: 100%; } /* Long wording should wrap rather than force the header wider on small screens. */ @media (max-width: 768px) { .onyx-register-prompt { white-space: normal; padding: 5px 12px; font-size: 12px; } } /* --------------------------------------------------------------------------- Shop by Item — equal gap between tiles and between rows (client request NR-6) --------------------------------------------------------------------------- */ /* "Shop by Item" is two stacked wd_nested_carousel widgets, five tiles then seven. Both spacings were already 30px on paper — Elementor writes margin-bottom:30px on the first carousel, and the grid carries --wd-gap-lg:30px inline — yet the rows read as further apart than the columns. The reason is the rule further up this file: each tile gets padding-bottom:20px INSIDE the info box. The box has no background, so that padding is indistinguishable from a gap — but only vertically. Rows therefore read as 30 + 20 = 50px while columns read as 30px. So the row margin is set to the intended gap MINUS that padding, and both now derive from one value. max() keeps it from going negative at the mobile gap, where the padding alone already exceeds it. */ .onyx-collections-carousel { --onyx-tile-gap: 30px; --onyx-tile-pad-bottom: 20px; } /* Only the carousel that is actually followed by another needs a row gap; the last one must not push the section below it down. */ .onyx-collections-carousel:has(+ .onyx-collections-carousel) > .elementor-widget-container { margin-bottom: max(0px, calc(var(--onyx-tile-gap) - var(--onyx-tile-pad-bottom))) !important; } /* --wd-gap-lg is what this grid actually uses, and Woodmart writes it as an inline style on .wd-carousel, so overriding it needs !important. */ .onyx-collections-carousel .wd-carousel { --wd-gap-lg: var(--onyx-tile-gap) !important; } @media (max-width: 768px) { .onyx-collections-carousel { --onyx-tile-gap: 10px; } .onyx-collections-carousel .wd-carousel { --wd-gap-sm: var(--onyx-tile-gap) !important; } } /* --------------------------------------------------------------------------- Banners — stop cropping the photos (client requests 1-4, 2026-09-21) --------------------------------------------------------------------------- */ /* All three banner photos are 3:1 (1920x641 hero, 1920x640 page title) and all three were being cover-cropped into a box with a FIXED height — 470px for the hero slider, content-driven for the page title. A 1920-wide viewport needs 640px to show a 3:1 image whole, so roughly 170px was being cut, and cover takes it off top and bottom: hence "edges are cut off at the bottom". Giving each box the image's own aspect ratio means cover has nothing left to crop — the photo is shown whole, at the framing the designer exported. It also settles the search-page complaint for free: the page title box no longer takes its height from its content, so it is identical on /shop/ and on a search result, where the heading is empty and the box used to collapse. Height now follows viewport width (640px at 1920, 480px at 1440), which is taller than the old fixed 470px. That is the unavoidable cost of not cropping a 3:1 image across the full width. */ @media (min-width: 769px) { #slider-70 .wd-slide { aspect-ratio: 1920 / 641; height: auto; min-height: 0; } /* The page title banner keeps a SHALLOWER ratio than its photo. The hero at the full 3:1 is right — it carries a headline and a button — but the same height on a shop or search page, whose banner holds one word, reads as far too much. 4.8:1 gives 400px at a 1920 viewport, close to the height this banner had before, and scales down with the window. Because the ratio is fixed rather than driven by content, /shop/ and a search result still come out identical, which was the point of the original complaint. A shallower box than the photo does mean cropping, so the crop is centred on the hands rather than on the image. In Default-Banner.webp the hands run from about 40% to 75% of the height, with the cufflink at ~58%; 71% puts that band in the middle of the visible window at every width, so nothing is cut off. */ html .wd-page-title { aspect-ratio: 1920 / 400; min-height: 0; display: flex; align-items: center; } /* `html` on the front is doing real work. Woodmart writes `.wd-page-title .wd-page-title-bg img { object-position: center center }` into an inline