/* Theme Name: Dedicated7 Theme URI: https://dedicated7.io Description: Dedicated7 child theme for WoodMart. Refurbished server & IT hardware store — clean, modern blue/purple/white identity. Author: Dedicated7 Author URI: https://dedicated7.io Template: woodmart Version: 1.0.0 Requires PHP: 7.4 Text Domain: dedicated7-child License: GNU General Public License v3.0 License URI: https://www.gnu.org/licenses/gpl-3.0.html */ /* ========================================================================= 1. DESIGN TOKENS Brand palette lifted from the Dedicated7 identity (dedicated7.io): deep space-navy, indigo primary, mauve-purple secondary, and the signature indigo->mauve gradient. Mirror the two accent colours in WoodMart Theme Settings -> Colors so builder previews match (SETUP.md). :root:root beats WoodMart's theme-settings inline CSS (a plain :root block on the wd-style-theme_settings_default handle that prints after this stylesheet) on specificity rather than source order. ========================================================================= */ :root:root { /* Brand palette */ --d7-indigo: #4f46e5; --d7-indigo-dark: #4338ca; --d7-purple: #7c3aed; --d7-mauve: #a56daf; --d7-blue: #4d67d5; --d7-navy: #1e1b4b; --d7-navy-soft: #312e81; --d7-ink: #1f2333; --d7-body: #4b5563; --d7-muted: #8b90a0; --d7-surface: #ffffff; --d7-surface-alt: #f5f5fa; --d7-line: #e6e6f0; --d7-success: #16a34a; --d7-gradient: linear-gradient(90deg, var(--d7-blue) 0%, var(--d7-mauve) 100%); /* Typography */ --d7-font-display: "Jost", sans-serif; --d7-font-body: "Source Sans 3", "Source Sans Pro", sans-serif; /* WoodMart token remap */ --wd-primary-color: var(--d7-indigo); --wd-alternative-color: var(--d7-purple); --wd-link-color: var(--d7-indigo); --wd-link-color-hover: var(--d7-indigo-dark); --wd-title-color: var(--d7-navy); --wd-text-color: var(--d7-body); --wd-entities-title-color: var(--d7-ink); --wd-entities-title-color-hover: var(--d7-indigo); --wd-brd-radius: 8px; /* Fonts through WoodMart's own variables */ --wd-title-font: var(--d7-font-display); --wd-entities-title-font: var(--d7-font-display); --wd-alternative-font: var(--d7-font-display); --wd-text-font: var(--d7-font-body); /* Primary CTA family ("accented" buttons = add to cart / checkout) */ --btn-accented-bgcolor: var(--d7-indigo); --btn-accented-bgcolor-hover: var(--d7-indigo-dark); --btn-accented-color: #ffffff; --btn-accented-color-hover: #ffffff; --btn-accented-brd-radius: 999px; --btn-accented-font-family: var(--d7-font-display); --btn-accented-font-weight: 600; /* Secondary buttons — quiet, outlined-feel on light surfaces */ --btn-default-bgcolor: var(--d7-surface-alt); --btn-default-bgcolor-hover: #ebebf5; --btn-default-color: var(--d7-navy); --btn-default-color-hover: var(--d7-indigo-dark); --btn-default-brd-radius: 999px; --btn-default-font-family: var(--d7-font-display); --btn-default-font-weight: 600; --btn-transform: none; } /* ========================================================================= 2. GLOBAL REFINEMENTS ========================================================================= */ body { font-family: var(--d7-font-body); } h1, h2, h3, h4, h5, h6 { letter-spacing: 0.01em; } /* Signature gradient CTA — apply .d7-btn-gradient to any WoodMart button (hero banners, promo blocks) for the brand's flagship treatment. */ .d7-btn-gradient, .d7-btn-gradient.btn, a.btn.d7-btn-gradient { background: var(--d7-gradient); color: #fff; border-radius: 999px; border: 0; font-family: var(--d7-font-display); font-weight: 600; transition: box-shadow 0.25s ease, transform 0.25s ease; } .d7-btn-gradient:hover { color: #fff; box-shadow: 0 8px 24px rgb(79 70 229 / 35%); transform: translateY(-1px); } /* ========================================================================= 3. HEADER SKIN (ETB-style structure, Dedicated7 identity) The header builder provides the rows; this skin pins the bottom (nav) row to deep navy with a gradient keyline, uppercase Jost links. ========================================================================= */ /* Top bar: WoodMart's default header ships a placeholder top bar ("ADD ANYTHING HERE…" + social icons). Removed entirely — social icons render in the footer instead (inc/footer.php). Drop this rule if a custom header built in the header builder needs a top bar again. */ .whb-row.whb-top-bar { display: none; } /* Footer copyright bar: social icons sit above the payment methods in the right-hand column (both injected via inc/footer.php). */ .wd-copyrights .wd-col-end .wd-social-icons { margin-bottom: 8px; } /* Payment badges (Stripe-supported brands only, inc/footer.php). */ .d7-payment-icons { display: inline-flex; gap: 6px; vertical-align: middle; } /* Footer link rows (inc/footer.php injects both into WoodMart's copyright bar, which has no list styling of its own). These rules used to live in assets/info.css, which functions.php enqueues only on pages, posts and category archives — so on the shop, product, cart, checkout and account templates the two lists fell back to browser defaults: bulleted, one link per line, a full phone-screen of stacked links pushing the copyright line off the bottom. They belong here, in the stylesheet that loads everywhere. inline-block rather than flex so each row keeps whatever text-align the copyright column already has (left on desktop, centred on mobile) instead of hard-coding an alignment that only matches one of them. */ .d7-footer-legal { /* Negative side margin keeps the first/last link's tap padding from indenting the row against the copyright line above and below it. */ margin: 0 -10px 6px; padding: 0; list-style: none; } .d7-footer-legal li { display: inline-block; margin: 0; padding: 0; list-style: none; vertical-align: middle; } /* Padded so each link is a comfortable thumb target rather than 13px of text. */ .d7-footer-legal a { display: inline-block; padding: 7px 10px; font-size: 13px; line-height: 1.4; color: inherit; opacity: .78; text-decoration: none; } .d7-footer-legal a:hover, .d7-footer-legal a:focus { opacity: 1; text-decoration: underline; } /* Site links read as primary navigation, the policy row below as fine print. */ .d7-footer-nav a { font-size: 13.5px; font-weight: 600; opacity: 1; } /* Phones: the footer is where a mis-tap is most annoying (Delivery and Returns sit next to each other), so trade a little height for a target close to the 44px guideline. */ @media (max-width: 768.98px) { .d7-footer-legal a { padding: 12px 10px; } } .whb-row.whb-header-bottom { background-color: var(--d7-navy); box-shadow: inset 0 -3px 0 0 transparent; border-bottom: 3px solid; border-image: linear-gradient(90deg, var(--d7-blue), var(--d7-mauve)) 1; } .whb-row.whb-header-bottom .wd-nav-main > li > a, .whb-row.whb-header-bottom .wd-nav > li > a { color: #fff; font-family: var(--d7-font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .whb-row.whb-header-bottom .wd-nav-main > li > a:hover, .whb-row.whb-header-bottom .wd-nav > li > a:hover, .whb-row.whb-header-bottom .wd-nav-main > li.current-menu-item > a { color: #c7c8f4; } /* The navy bar now carries only product categories (Servers, Storage, Networking, Components) — company/info links moved out to the .d7-utility strip above the header (rendered by inc/company-nav.php). */ .whb-row.whb-header-bottom .wd-nav { width: 100%; } /* Page-title band (About us, service pages, archives): WoodMart defaults to near-black; pin it to the brand navy with the hero's purple mesh. */ .wd-page-title.page-title.page-title { background-color: var(--d7-navy); background-image: radial-gradient(ellipse at 80% 0%, rgb(124 58 237 / 30%) 0%, transparent 55%); } /* Cart/checkout step indicator ("Shopping cart / Checkout / Order complete") inherits WoodMart's dark title-color by default, which is invisible against the navy page-title band above. */ .wd-page-title .wd-checkout-steps { --wd-title-color: #fff; } /* ========================================================================= 3.5 COMPANY UTILITY STRIP (rendered by inc/company-nav.php on wp_body_open, above WoodMart's header wrapper). Light strip: company links left (What we do gets a pure-CSS dropdown for its 5 children, since this markup lives outside WoodMart's nav JS), phone right. ========================================================================= */ .d7-utility { background-color: var(--d7-surface-alt); border-bottom: 1px solid var(--d7-line); position: relative; z-index: 400; } .d7-utility__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1222px; height: 36px; margin: 0 auto; padding: 0 15px; } .d7-utility__menu { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .d7-utility__menu li { position: relative; margin: 0; /* WoodMart's generic list style adds margin-bottom:10px except on :last-child, which skews flex centering */ } .d7-utility__menu > li > a { display: inline-block; padding: 8px 10px; color: var(--d7-body); font-family: var(--d7-font-display); font-size: 12.5px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; } .d7-utility__menu > li > a:hover, .d7-utility__menu > li > a:focus { color: var(--d7-indigo); } /* "What we do" dropdown: pure CSS, since this strip sits outside WoodMart's nav JS (wp_body_open, ahead of the header wrapper). */ .d7-utility__menu li.menu-item-has-children > a::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); } .d7-utility__menu .sub-menu { position: absolute; top: 100%; left: 0; z-index: 400; display: none; min-width: 220px; margin: 0; padding: 8px 0; list-style: none; background-color: var(--d7-surface); border: 1px solid var(--d7-line); border-radius: 6px; box-shadow: 0 12px 24px rgb(30 27 75 / 12%); } .d7-utility__menu li.menu-item-has-children:hover > .sub-menu, .d7-utility__menu li.menu-item-has-children:focus-within > .sub-menu { display: block; } .d7-utility__menu .sub-menu li a { display: block; padding: 7px 16px; color: var(--d7-body); font-family: var(--d7-font-body); font-size: 13px; font-weight: 400; white-space: nowrap; } .d7-utility__menu .sub-menu li a:hover, .d7-utility__menu .sub-menu li a:focus { color: var(--d7-indigo); background-color: var(--d7-surface-alt); } .d7-utility__phone { flex: 0 0 auto; color: var(--d7-navy); font-family: var(--d7-font-display); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; } .d7-utility__phone:hover { color: var(--d7-navy); text-decoration: underline; } @media (max-width: 768px) { .d7-utility__inner { justify-content: center; } .d7-utility__menu { display: none; } } /* ========================================================================= 3.6 HEADER CURRENCY SWITCHER CURCY flag dropdown ([woo_multi_currency_layout5]) injected next to Login/Register by data/add-currency-switcher-to-header.php. The plugin ships it as a bordered box; strip that so it reads like the neighbouring header tools (uppercase 13px text), and restyle the hover dropdown to match the company utility strip's own "What we do" dropdown (3.5 above, .d7-utility__menu .sub-menu): bordered card, 12px/24px purple-tinted shadow, flush against the trigger, and indigo-text + surface-alt-fill rows on hover. The My Account header dropdown (3.6a below) gets the same treatment so the three header dropdowns read as one family. Selectors repeat the plugin's own chain to out-rank it. ========================================================================= */ /* Text-only: hide the plugin's flag sprites in the trigger and dropdown. !important required — the plugin's flags-64.min.css sets `display: inline-block !important` on .vi-flag-64. */ .d7-currency-switcher .woo-multi-currency.wmc-shortcode.plain-vertical .wmc-currency-wrapper .vi-flag-64 { display: none !important; } .d7-currency-switcher .woo-multi-currency.wmc-shortcode.plain-vertical .wmc-currency-wrapper span.wmc-current-currency { width: auto; padding: 0 10px; border: 0; background: transparent; align-items: center; cursor: pointer; color: #333; font-size: 13px; font-weight: 600; text-transform: uppercase; transition: color 0.25s ease; } /* Indigo on hover, matching .d7-utility__menu > li > a:hover (3.5) — the trigger's hover colour should read the same as the dropdown card it opens. */ .d7-currency-switcher .woo-multi-currency.wmc-shortcode.plain-vertical .wmc-currency-wrapper:hover span.wmc-current-currency { color: var(--d7-indigo); } /* Small caret, same treatment as the utility-strip dropdown */ .d7-currency-switcher .woo-multi-currency.wmc-shortcode.plain-vertical .wmc-currency-wrapper span.wmc-current-currency::after { content: ""; flex: 0 0 auto; align-self: center; width: 5px; height: 5px; margin-inline-start: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); } /* CURCY shows/hides the panel via plain CSS (.wmc-currency-wrapper:hover .wmc-sub-currency), not JS. The 8px margin-top below opens a gap between the wrapper's own box and the panel's box that belongs to neither, so a slow diagonal mouse move through it drops out of :hover and the panel vanishes before the cursor arrives. This pseudo-element is a child of the wrapper itself, so hovering it keeps the wrapper's :hover alive across the gap — a standard "hover bridge". */ .d7-currency-switcher .woo-multi-currency.wmc-shortcode.plain-vertical .wmc-currency-wrapper::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 8px; } .d7-currency-switcher .woo-multi-currency.wmc-shortcode.plain-vertical .wmc-currency-wrapper .wmc-sub-currency { z-index: 450; top: 100%; /* .wmc-currency-wrapper (24px tall) is 8px shorter than the neighbouring .wd-header-my-account trigger box (40px tall) — both are centred in the same 40px header row, so without this the panel opens 8px earlier than the My Account dropdown despite both being "flush". */ margin-top: 8px; width: max-content; min-width: calc(100% + 2px); /* never narrower than the trigger */ padding: 8px 0; /* matches .d7-utility__menu .sub-menu */ background-color: var(--d7-surface); border: 1px solid var(--d7-line); border-radius: 6px; box-shadow: 0 12px 24px rgb(30 27 75 / 12%); text-align: start; } .d7-currency-switcher .woo-multi-currency.wmc-shortcode.plain-vertical .wmc-currency-wrapper .wmc-sub-currency .wmc-currency { padding: 0; } /* Selected currency: no fill — CURCY tags the current row `wmc-hidden` (hidden in other layouts; layout5 keeps it visible). Indigo text is the only "current" cue, matching how .d7-utility__menu has no separate current-item treatment of its own. */ .d7-currency-switcher .woo-multi-currency.wmc-shortcode.plain-vertical .wmc-currency-wrapper .wmc-sub-currency .wmc-currency.wmc-hidden { background-color: transparent; } .d7-currency-switcher .woo-multi-currency.wmc-shortcode.plain-vertical .wmc-currency-wrapper .wmc-sub-currency .wmc-currency.wmc-hidden a, .d7-currency-switcher .woo-multi-currency.wmc-shortcode.plain-vertical .wmc-currency-wrapper .wmc-sub-currency .wmc-currency.wmc-hidden a:hover { color: var(--d7-indigo); } .d7-currency-switcher .woo-multi-currency.wmc-shortcode.plain-vertical .wmc-currency-wrapper .wmc-sub-currency .wmc-currency a { display: block; padding: 7px 16px; /* matches .d7-utility__menu .sub-menu li a */ color: var(--d7-body); font-size: 13px; font-weight: 400; line-height: 1.3; } .d7-currency-switcher .woo-multi-currency.wmc-shortcode.plain-vertical .wmc-currency-wrapper .wmc-sub-currency .wmc-currency a:hover { color: var(--d7-indigo); background-color: var(--d7-surface-alt); font-weight: 400; /* plugin bolds on hover, which makes rows jump */ } /* ========================================================================= 3.6a HEADER "MY ACCOUNT" DROPDOWN WoodMart's native header dropdown (.wd-dropdown-my-account, built by woodmart_get_my_account_menu() in inc/integrations/woocommerce/template-tags.php). Re-skinned with the same card treatment as 3.5/3.6 above so all three header dropdowns match. ========================================================================= */ .wd-dropdown-my-account.wd-dropdown { margin-top: 0; /* flush against the trigger, like .d7-utility__menu .sub-menu */ border: 1px solid var(--d7-line); border-radius: 6px; box-shadow: 0 12px 24px rgb(30 27 75 / 12%); padding: 8px 0; } .wd-dropdown-my-account .wd-sub-menu li > a { padding: 7px 16px; color: var(--d7-body); font-size: 13px; } .wd-dropdown-my-account .wd-sub-menu li > a:hover { color: var(--d7-indigo); background-color: var(--d7-surface-alt); } /* Trigger itself: WoodMart's default .wd-tools-element:hover > a fades to a muted grey (--wd-header-el-color-hover). Override to indigo so "MY ACCOUNT" hovers the same way as the utility-strip and currency triggers. */ .wd-header-my-account.wd-tools-element:hover > a { color: var(--d7-indigo); } /* ========================================================================= 3.6b MAIN-MENU CATEGORY DROPDOWN WoodMart's main-nav submenu (.wd-nav-main .wd-dropdown-menu, e.g. the Servers -> HPE Gen10/Gen11 subcategory dropdown). Out of the box it uses a different card (8px radius, faint 3px shadow, 4px gap, no border, grey 14px rows) to the three header dropdowns. Re-skin it with the same card treatment as 3.5/3.6/3.6a so every dropdown on the site reads as one family. Selectors repeat WoodMart's own .wd-nav-main chain to out-rank the theme defaults. */ .wd-nav-main .wd-dropdown-menu.wd-dropdown { margin-top: 0; /* flush against the trigger, like .d7-utility__menu .sub-menu */ padding: 8px 0; /* horizontal inset moves onto the rows, matching the family */ border: 1px solid var(--d7-line); border-radius: 6px; box-shadow: 0 12px 24px rgb(30 27 75 / 12%); } .wd-nav-main .wd-dropdown-menu .wd-sub-menu li > a { padding: 7px 16px; color: var(--d7-body); font-size: 13px; } .wd-nav-main .wd-dropdown-menu .wd-sub-menu li > a:hover { color: var(--d7-indigo); background-color: var(--d7-surface-alt); } /* ========================================================================= 3.7 MOBILE DRAWER CURRENCY SWITCHER CURCY plain-horizontal row ([woo_multi_currency_plain_horizontal]) in the burger drawer's widget area (data/add-currency-switcher-to-mobile-menu.php). Flat GBP / EUR / USD pills — touch-friendly, no hover dropdown. Selected currency matches the desktop treatment: brand indigo, white text. ========================================================================= */ .widgetarea-mobile .woo-multi-currency.wmc-shortcode.plain-horizontal { display: flex; gap: 8px; } .widgetarea-mobile .woo-multi-currency.wmc-shortcode.plain-horizontal .wmc-currency { margin: 0; padding: 0; } .widgetarea-mobile .woo-multi-currency.wmc-shortcode.plain-horizontal .wmc-currency a { display: inline-block; padding: 7px 16px; border: 1px solid var(--d7-line); border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.2; } .widgetarea-mobile .woo-multi-currency.wmc-shortcode.plain-horizontal .wmc-currency.wmc-active a { background-color: var(--d7-indigo); border-color: var(--d7-indigo); color: #fff; font-weight: 600; /* plugin bolds the active link; keep weight uniform */ } /* ========================================================================= 4. TRUST STRIP (rendered by inc/trust-strip.php below the header) ========================================================================= */ .d7-trust-strip { background-color: var(--d7-surface-alt); border-bottom: 1px solid var(--d7-line); } .d7-trust-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 0; max-width: 1222px; margin: 0 auto; padding: 9px 15px; } .d7-trust-strip__item { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; color: var(--d7-ink); font-family: var(--d7-font-display); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.2; } .d7-trust-strip__item + .d7-trust-strip__item { border-left: 1px solid var(--d7-line); } .d7-trust-strip__icon { display: inline-flex; flex: 0 0 auto; width: 17px; height: 17px; color: var(--d7-success); } .d7-trust-strip__icon svg { width: 100%; height: 100%; } @media (max-width: 768.98px) { .d7-trust-strip__item { padding: 0 12px; font-size: 12px; } .d7-trust-strip__item:nth-child(n+3) { display: none; /* keep the strip to one tidy row on phones */ } } /* ========================================================================= 5. PRODUCT CARDS (ETB-style data: part number, From price, spec ticks) Markup added by inc/product-card.php on WooCommerce loop hooks. ========================================================================= */ .d7-part-no { margin-top: 2px; color: var(--d7-muted); font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .d7-part-no b { color: var(--d7-body); font-weight: 600; } .d7-from { margin-right: 4px; color: var(--d7-muted); font-family: var(--d7-font-display); font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .d7-card-ticks { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; } .d7-card-tick { display: inline-flex; align-items: center; gap: 6px; color: var(--d7-body); font-size: 12.5px; line-height: 1.3; } .d7-card-tick svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--d7-success); } /* Card images show the whole photo. WooCommerce no longer crops the catalogue thumbnail to a square (woocommerce_thumbnail_cropping = uncropped, see data/set-product-image-sizes.php), so the file itself is now the full frame; the fixed 3:2 box here is what keeps a grid row aligned when one photo has a different ratio to its neighbours - it letterboxes rather than crops. */ .wd-product-thumb .product-image-link img, .wd-product-thumb .hover-img img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; } /* Client brief: catalogue photography holds still. WoodMart stacks a second gallery photo over the main one (.wd-product-img-hover) and, on hover, cross-fades it in over 0.5s while scaling it to 1.09 over a full 2 seconds (woo-loop-prod-predefined.css: `.wd-loop-builder-off .wd-product-thumb:hover .wd-product-img-hover`), so the picture keeps creeping outwards the whole time the cursor rests on the card. Hiding the overlay leaves the photo exactly as it renders at rest, everywhere a product card appears - homepage strip, shop, category grids, related products, cart cross-sells. The rest of the card hover (white panel, add-to-basket) is untouched. The base rule this beats is a single class (.wd-product-img-hover), so two is enough; the :hover selector is there to match WoodMart's own specificity should a future version set `display` there too. */ .wd-product-thumb .wd-product-img-hover, .wd-product .wd-product-thumb:hover .wd-product-img-hover { display: none; } /* Price emphasis on cards */ .wd-product .price { color: var(--d7-navy); font-family: var(--d7-font-display); font-weight: 700; } /* ------------------------------------------------------------------------- 5.1 ALWAYS-VISIBLE "ADD TO BASKET" ON TOUCH / SMALL SCREENS WoodMart's "base" card hover puts the Add to basket button inside .wd-product-card-hover — an absolutely-positioned overlay that is visibility:hidden + opacity:0 until the card is hovered. Touch devices have no hover state, so on a phone or tablet the button was in the DOM at its full 85x39 but never painted and never tappable: a tap did nothing and the cart count stayed at zero. Every purchase had to route via the product page (QA issue #15, finding CHK-4). Below the desktop breakpoint — or on any device that reports no hover, which catches touch laptops at wide widths — the overlay is folded back into the card as a normal block and only the button is kept. The short description, wishlist and quick view are hover affordances that would make every card taller and noisier on a phone (and the wishlist link is a dead href="" anyway), so they stay hidden. Two WoodMart rules have to be beaten here, and neither yields to a plain class selector: 1. `.wd-hover-with-fade.hover-ready:not(.state-hover) .wd-product-card-hover` (0,4,0) sets the visibility/opacity. `:not()` takes its argument's specificity, so this ties with `:root:root .wd-product .wd-...` and wins on source order — WoodMart loads its module CSS late. Mirroring their selector under :root:root settles it outright. Overriding opacity on the overlay is unavoidable: opacity:0 on an ancestor cannot be undone by a descendant, so revealing only the button is not possible. The paired `:not(.state-hover)`-free selector covers the moment a tap does add .state-hover, so the button never flickers out. 2. `.wd-product.wd-hover-base .wd-bottom-actions:not(.wd-add-small-btn) .wd-add-btn > a` (0,5,0) sets `min-height: unset`, which collapsed the button to 36px — under the 44px minimum touch target. .wd-products is a CSS grid with align-items:flex-start, so cards were sized to their own content and the buttons stepped out of line across a row wherever a title wrapped to a different number of lines. Switching to stretch and pushing the actions down with margin-top:auto puts every button in a row on one baseline — which also settles the card-alignment half of finding CORE-25 at these widths. ------------------------------------------------------------------------- */ @media (hover: none), (max-width: 1024px) { :root:root .wd-hover-with-fade .wd-product-card-hover, :root:root .wd-hover-with-fade.hover-ready:not(.state-hover) .wd-product-card-hover { position: static; visibility: visible; opacity: 1; width: auto; max-height: none; overflow: visible; padding: 0; margin-top: auto; transition: none; } /* The white panel WoodMart stretches behind the revealed overlay has no job once the overlay is part of the card. */ :root:root .wd-hover-with-fade .wd-product-card-bg, :root:root .wd-hover-with-fade.hover-ready:not(.state-hover) .wd-product-card-bg { display: none; } :root:root .wd-product .wd-product-card-hover .hover-content, :root:root .wd-product .wd-product-card-hover .wd-more-desc, :root:root .wd-product .wrap-wishlist-button, :root:root .wd-product .wrap-quickview-button { display: none; } :root:root .wd-product .wd-bottom-actions { visibility: visible; opacity: 1; display: block; width: 100%; margin: 0; padding-top: 12px; } :root:root .wd-product .wd-add-btn { visibility: visible; opacity: 1; display: block; width: 100%; margin: 0; } /* Equal-height cards so the buttons share a baseline across each row. */ :root:root .wd-products { align-items: stretch; } :root:root .wd-product .wd-product-wrapper { height: 100%; } :root:root .wd-product .product-element-bottom { flex: 1 1 auto; display: flex; flex-direction: column; } :root:root .wd-product.wd-hover-base .wd-bottom-actions .wd-add-btn > a.button, :root:root .wd-product .wd-add-btn > a.button { visibility: visible; opacity: 1; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 0 14px; background: var(--d7-gradient); color: #fff; border: 0; border-radius: 999px; font-family: var(--d7-font-display); font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; text-align: center; white-space: nowrap; } /* WoodMart dims the button while the AJAX request is in flight; on touch there is no hover to restore it, so keep it solid throughout. */ :root:root .wd-product.wd-hover-base .wd-bottom-actions .wd-add-btn > a.button.loading, :root:root .wd-product .wd-add-btn > a.button.loading, :root:root .wd-product .wd-add-btn > a.button.added { opacity: 1; } :root:root .wd-product .wd-add-btn > a.added_to_cart { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; margin-top: 8px; color: var(--d7-indigo); font-family: var(--d7-font-display); font-size: 13px; font-weight: 600; text-decoration: underline; } } /* ========================================================================= 6. PAGE-BUILDING UTILITIES (used when assembling the homepage; see SETUP.md — vendors strip, Greenspark badge, hero overlay) ========================================================================= */ .d7-vendors { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 56px; padding: 28px 15px; border-block: 1px solid var(--d7-line); } /* wpautop guard: kill stray
wpautop injects between adjacent inline logo tags in the vendors strip */ .d7-vendors br { display: none; } /* Client brief: brand logos render full-colour at rest — no grayscale-until- hover treatment. */ .d7-vendors img { max-height: 44px; width: auto; } .d7-greenspark { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid #bbe5c8; border-radius: 999px; background-color: #f0faf3; color: #14532d; font-family: var(--d7-font-display); font-size: 13px; font-weight: 500; } /* Deep-navy hero section helper: add class d7-hero to the builder section */ .d7-hero { background-color: var(--d7-navy); background-image: radial-gradient(ellipse at 80% 0%, rgb(124 58 237 / 35%) 0%, transparent 55%), radial-gradient(ellipse at 15% 100%, rgb(77 103 213 / 30%) 0%, transparent 55%); color: #fff; } .d7-hero h1, .d7-hero h2, .d7-hero h3 { color: #fff; } /* ========================================================================= Shipping & Delivery product tab (inc/shipping-delivery-tab.php) ========================================================================= */ .d7-ship { font-family: var(--d7-font-body); color: var(--d7-body); max-width: 860px; } .d7-ship__lead { max-width: 62ch; margin: 0 0 26px; font-size: 16px; line-height: 1.6; } .d7-ship__lead strong { color: var(--d7-ink); font-weight: 600; } .d7-ship__zones { display: grid; /* Fluid: 3 cards side by side on desktop, wrapping to 2 then 1 as the tab content column narrows (tablet/mobile) without a hard breakpoint. */ grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 30px; } .d7-ship__zone { display: flex; flex-direction: column; gap: 2px; background-color: var(--d7-surface-alt); border: 1px solid var(--d7-line); border-radius: 12px; padding: 18px 18px 16px; /* Match the homepage pillar cards (assets/home-a.css). */ transition: transform 0.25s ease, box-shadow 0.25s ease; } .d7-ship__zone:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgb(30 27 75 / 8%); } .d7-ship__zone-ic { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 12px; border: 1px solid var(--d7-line); border-radius: 10px; background-color: var(--d7-surface); color: var(--d7-indigo); } .d7-ship__zone-ic svg { width: 19px; height: 19px; } .d7-ship__zone-name { font-family: var(--d7-font-display); font-weight: 600; font-size: 15.5px; color: var(--d7-ink); } .d7-ship__zone-rate { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--d7-line); font-size: 13.5px; color: var(--d7-muted); } .d7-ship__zone-rate b { display: block; margin-top: 1px; font-family: var(--d7-font-display); font-weight: 600; font-size: 15px; color: var(--d7-navy); } .d7-ship__zone-rate b.is-free { color: var(--d7-success); } .d7-ship__note { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; background-color: #f2f4fd; border: 1px solid #dfe3fa; border-radius: 12px; } .d7-ship__note-ic { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid #dfe3fa; border-radius: 8px; background-color: var(--d7-surface); color: var(--d7-indigo); } .d7-ship__note-ic svg { width: 17px; height: 17px; } .d7-ship__note p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--d7-body); } .d7-ship__note p strong { color: var(--d7-ink); font-weight: 600; } .d7-ship__vatno { font-family: var(--d7-font-display); font-weight: 600; letter-spacing: 0.03em; color: var(--d7-navy); } /* ========================================================================= Shop-title subcategory nav (ul.wd-nav-product-cat) ========================================================================= */ /* * Leaf categories (no subcategories, e.g. Storage) render this nav as an * empty