/* ═══════════════════════════════════════════════════════════════════════════ DW C CHROME — Direction C "Purple Cap" restyle of the sitewide chrome designerwater.co.za · drafted 3 Sep 2026 · NOT DEPLOYED Covers: Elementor header template 72723 (top bar, logo row, main nav, dropdowns, WP Menu Cart count), DW Mobile Menu v1.1 drawer (#dw-mm-trigger / #dw-mm-backdrop / #dw-mm-drawer), WooCommerce cart (page 76678, [woocommerce_cart]) and checkout (page 76679, [woocommerce_checkout]) plus generic WooCommerce buttons and notices. System: purple #9003a3 and white only. Black #0d0d1a for type, 3px borders and hard shadows. Gold #d4a843 for CTAs with dark plum #1a0928 text. Green #25D366 for WhatsApp only, always with dark text. Rubik 700–900 uppercase display, Nunito Sans 600 body. No radii, no gradients, no blur. Every selector below exists in the live markup fetched 3 Sep 2026 (home / cart) or the 27 May 2026 checkout snapshot, or in WooCommerce 11.x core templates. Selector inventory is verified by selfcheck.py. !important policy: used in exactly three places, each commented, each forced by an existing !important in WooCommerce core or an inline style. Load order assumption: enqueued in at wp_enqueue_scripts priority 999 (after woocommerce.css / select2.css / Elementor post CSS). The DW Mobile Menu prints its own CSS in wp_footer, AFTER this file, so every drawer rule uses the element ids for specificity instead of relying on source order. Colour of .alt / #place_order / checkout-button buttons is owned by dw-checkout-fixes (v1.6.0) — this file only adds layout, size and type for those and never fights the plugin's !important values. ═══════════════════════════════════════════════════════════════════════════ */ :root { --dwc-purple: #9003a3; --dwc-ink: #0d0d1a; --dwc-white: #ffffff; --dwc-gold: #d4a843; --dwc-plum: #1a0928; --dwc-wa: #25D366; --dwc-border: 3px solid #0d0d1a; --dwc-shadow: 6px 6px 0 #0d0d1a; --dwc-shadow-sm: 4px 4px 0 #0d0d1a; --dwc-display: Rubik, "Helvetica Neue", Arial, sans-serif; --dwc-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif; } /* ─── 1 · HEADER · top bar (all pages · header template 72723, section 4e979e75) Keeps the purple bar. Tightens it from ~40px to ~32px and sets the phone / email / hours list in Rubik 700 11px uppercase. ─────────────────────────── */ .elementor-72723 .elementor-element.elementor-element-4e979e75 > .elementor-container.elementor-column-gap-default { min-height: 32px; } .elementor-72723 .elementor-element.elementor-element-4e979e75 > .elementor-container > .elementor-column > .elementor-widget-wrap.elementor-element-populated { padding: 5px 10px; } .elementor-72723 .elementor-element.elementor-element-2ab63ee4 .elementor-icon-list-items .elementor-icon-list-item > .elementor-icon-list-text { font-family: var(--dwc-display); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; line-height: 1; color: var(--dwc-white); } .elementor-72723 .elementor-element.elementor-element-2ab63ee4 .elementor-icon-list-items .elementor-icon-list-item > .elementor-icon-list-text a { color: var(--dwc-white); text-decoration: none; } .elementor-72723 .elementor-element.elementor-element-287142f7 .elementor-social-icons-wrapper .elementor-social-icon { background: transparent; width: 26px; height: 26px; transition: opacity .15s ease; } .elementor-72723 .elementor-element.elementor-element-287142f7 .elementor-social-icons-wrapper .elementor-social-icon:hover { opacity: .7; } /* ─── 2 · HEADER · logo row + main nav on ONE row (section 6d50e95a) Fold economy: the legacy header is ~290px tall on desktop (40px bar + 282px-wide logo + dotted nav). Putting the 64px logo and the nav on a single 84px row under a 32px bar gives ~120px total. The widget wrap is already display:flex in Elementor; we stop it wrapping and size the two widgets to auto. ─────────────────────────────────────────────────────── */ .elementor-72723 .elementor-element.elementor-element-6d50e95a { background: var(--dwc-white); border-bottom: var(--dwc-border); } .elementor-72723 .elementor-element.elementor-element-187ac9ce > .elementor-widget-wrap.elementor-element-populated { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 10px 40px; box-sizing: border-box; } .elementor-72723 .elementor-element.elementor-element-58c3921d.elementor-widget-theme-site-logo { width: auto; flex: 0 0 auto; margin: 0; text-align: left; } /* Beats the template's `.elementor-element-58c3921d img { width:282px }` (0,3,1) at (0,3,2). */ .elementor-72723 .elementor-element.elementor-element-58c3921d picture img { width: auto; height: 64px; display: block; } .elementor-72723 .elementor-element.elementor-widget-nav-menu.elementor-element-7f43787c { width: auto; flex: 1 1 auto; min-width: 0; margin: 0; border: 0; } /* ─── 3 · HEADER · main nav items (widget 7f43787c, nav.elementor-nav-menu--main) Rubik 700 13px uppercase .12em, ink, 3px purple underline on hover / current via inset box-shadow so nothing shifts. Elementor's own "double-line" pointer pseudo-elements are switched off. ──────────────── */ .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main ul.elementor-nav-menu { justify-content: flex-end; align-items: center; flex-wrap: nowrap; margin-inline-start: auto; margin-inline-end: 0; } .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main .elementor-nav-menu a.elementor-item { font-family: var(--dwc-display); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; line-height: 20px; color: var(--dwc-ink); fill: var(--dwc-ink); padding: 14px 13px; background: transparent; box-shadow: inset 0 -3px 0 transparent; transition: box-shadow .15s ease, color .15s ease; } .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover, .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:focus-visible, .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main .elementor-nav-menu a.elementor-item.highlighted, .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main .elementor-nav-menu a.elementor-item.elementor-item-active { color: var(--dwc-purple); fill: var(--dwc-purple); background: transparent; box-shadow: inset 0 -3px 0 var(--dwc-purple); } /* (0,7,2) beats Elementor's pointer rules at (0,6,1) and (0,7,1). */ .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main.e--pointer-double-line .elementor-nav-menu a.elementor-item::before, .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main.e--pointer-double-line .elementor-nav-menu a.elementor-item::after { display: none; content: none; } .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main .elementor-nav-menu a.elementor-item .sub-arrow { padding-inline-start: 6px; } .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main .elementor-nav-menu a.elementor-item .sub-arrow .e-font-icon-svg { width: 11px; height: 11px; } /* ─── 4 · HEADER · dropdown submenus (ul.sub-menu.elementor-nav-menu--dropdown) White panel, 3px black border, 6px hard shadow, 44px items, purple fill on hover. Position / top / left / min-width stay with dw-menu-zindex-fix (dw-seo-fixes prints them with !important so the CSS-only hover reveal survives WP Rocket Delay JS). ────────────────────────────────────────── */ .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu.elementor-nav-menu--dropdown { background: var(--dwc-white); border: var(--dwc-border); border-radius: 0; box-shadow: var(--dwc-shadow); padding: 0; margin: 0; width: 300px; font-size: 12px; } .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu.elementor-nav-menu--dropdown > li.menu-item > a.elementor-sub-item { display: flex; align-items: center; min-height: 44px; padding: 0 18px; border: 0; border-bottom: 2px solid var(--dwc-ink); font-family: var(--dwc-display); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; white-space: normal; color: var(--dwc-ink); background: var(--dwc-white); transition: background .12s ease, color .12s ease; } .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu.elementor-nav-menu--dropdown > li.menu-item:last-child > a.elementor-sub-item { border-bottom: 0; } .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu.elementor-nav-menu--dropdown > li.menu-item > a.elementor-sub-item:hover, .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu.elementor-nav-menu--dropdown > li.menu-item > a.elementor-sub-item:focus, .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu.elementor-nav-menu--dropdown > li.menu-item > a.elementor-sub-item.highlighted, .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main ul.elementor-nav-menu > li.menu-item-has-children > ul.sub-menu.elementor-nav-menu--dropdown > li.menu-item > a.elementor-sub-item.elementor-item-active { background: var(--dwc-purple); color: var(--dwc-white); } /* ─── 5 · HEADER · WP Menu Cart item (li#wpmenucartli) — count as a black pill Also used inside the drawer (same markup is cloned there). ───────────── */ .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main .elementor-nav-menu li.wpmenucartli a.wpmenucart-contents { display: flex; align-items: center; gap: 8px; padding: 8px 0 8px 14px; font-family: var(--dwc-display); font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dwc-ink); text-decoration: none; } .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main .elementor-nav-menu li.wpmenucartli a.wpmenucart-contents .wpmenucart-icon-shopping-cart-0 { font-size: 17px; color: var(--dwc-purple); } .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main .elementor-nav-menu li.wpmenucartli a.wpmenucart-contents span.cartcontents { background: var(--dwc-ink); color: var(--dwc-white); border-radius: 999px; padding: 5px 10px; font-size: 11px; line-height: 1; letter-spacing: .06em; } .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main .elementor-nav-menu li.wpmenucartli a.wpmenucart-contents span.amount { color: var(--dwc-ink); } .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main .elementor-nav-menu li.wpmenucartli a.wpmenucart-contents:hover span.cartcontents { background: var(--dwc-purple); } /* ─── 6 · HEADER · responsive (tablet ≤1024 stacks logo over nav; phone ≤767 hides the horizontal nav — Elementor does that — and shrinks the logo). Trigger offsets in block 7 are tuned to these heights. ───────────────── */ @media (max-width: 1024px) { .elementor-72723 .elementor-element.elementor-element-187ac9ce > .elementor-widget-wrap.elementor-element-populated { flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px 20px; } .elementor-72723 .elementor-element.elementor-element-58c3921d.elementor-widget-theme-site-logo { width: 100%; text-align: center; margin: 0; } .elementor-72723 .elementor-element.elementor-element-58c3921d picture img { height: 56px; margin: 0 auto; } .elementor-72723 .elementor-element.elementor-widget-nav-menu.elementor-element-7f43787c { width: 100%; } .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main ul.elementor-nav-menu { justify-content: center; flex-wrap: wrap; margin-inline: auto; } .elementor-72723 .elementor-element.elementor-element-7f43787c .elementor-nav-menu--main .elementor-nav-menu a.elementor-item { font-size: 12px; padding: 12px 10px; } } @media (max-width: 767px) { .elementor-72723 .elementor-element.elementor-element-4e979e75 > .elementor-container > .elementor-column > .elementor-widget-wrap.elementor-element-populated { padding: 4px 10px; } .elementor-72723 .elementor-element.elementor-element-187ac9ce > .elementor-widget-wrap.elementor-element-populated { padding: 8px 72px 8px 16px; /* right gutter keeps the logo clear of the fixed trigger */ } .elementor-72723 .elementor-element.elementor-element-58c3921d picture img { height: 44px; } } /* ─── 7 · MOBILE MENU · hamburger trigger (button#dw-mm-trigger, all pages ≤1024) Purple square, 3px black border, hard shadow. Ids give (1,1,1) so these win over DW Mobile Menu's footer-printed (0,1,0) rules regardless of order. `display` is left alone: the plugin's ≤1024 media rule shows it. ─ */ button#dw-mm-trigger.dw-mm-trigger { width: 48px; height: 48px; top: 52px; right: 16px; border: var(--dwc-border); border-radius: 0; background: var(--dwc-purple); box-shadow: var(--dwc-shadow-sm); transition: transform .12s ease, box-shadow .12s ease; } button#dw-mm-trigger.dw-mm-trigger:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--dwc-ink); } button#dw-mm-trigger.dw-mm-trigger:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--dwc-ink); } button#dw-mm-trigger.dw-mm-trigger span { width: 22px; height: 3px; border-radius: 0; background: var(--dwc-white); } @media (max-width: 767px) { button#dw-mm-trigger.dw-mm-trigger { top: 36px; } } /* ─── 8 · MOBILE MENU · backdrop + drawer (#dw-mm-backdrop, aside#dw-mm-drawer) Purple panel with a black left rule, white head holding the wordmark, white Rubik uppercase links 52px tall with black rules, white sub-menus with black type. JS contract untouched: .is-open on trigger/backdrop/ drawer, .is-expanded on li.menu-item-has-children, body.dw-mm-lock. ──── */ #dw-mm-backdrop.dw-mm-backdrop { background: rgba(13, 13, 26, .55); /* ink scrim; no blur */ backdrop-filter: none; -webkit-backdrop-filter: none; } #dw-mm-drawer.dw-mm-drawer { background: var(--dwc-purple); color: var(--dwc-white); border-left: var(--dwc-border); box-shadow: none; font-family: var(--dwc-body); } #dw-mm-drawer .dw-mm-head { background: var(--dwc-white); border-bottom: var(--dwc-border); padding: max(12px, env(safe-area-inset-top)) 16px 12px 18px; } #dw-mm-drawer .dw-mm-logo img { height: 40px; } #dw-mm-drawer .dw-mm-close { width: 44px; height: 44px; border: var(--dwc-border); border-radius: 0; background: var(--dwc-white); color: var(--dwc-ink); box-shadow: 3px 3px 0 var(--dwc-ink); } #dw-mm-drawer .dw-mm-close:hover { background: var(--dwc-purple); color: var(--dwc-white); } #dw-mm-drawer .dw-mm-nav { padding: 0; } #dw-mm-drawer .dw-mm-nav a { min-height: 52px; padding: 0 22px; font-family: var(--dwc-display); font-weight: 800; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; color: var(--dwc-white); background: transparent; border-bottom: 2px solid var(--dwc-ink); transition: background .12s ease, color .12s ease; } #dw-mm-drawer .dw-mm-nav a:hover, #dw-mm-drawer .dw-mm-nav a:active { background: var(--dwc-white); color: var(--dwc-purple); } #dw-mm-drawer .dw-mm-nav .current-menu-item > a, #dw-mm-drawer .dw-mm-nav .current-menu-ancestor > a { color: var(--dwc-white); border-left: 0; padding-left: 22px; box-shadow: inset 6px 0 0 var(--dwc-gold); /* the one gold accent in the drawer */ } #dw-mm-drawer .dw-mm-nav .menu-item-has-children > a::after { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; } #dw-mm-drawer .dw-mm-nav .menu-item-has-children.is-expanded > a { background: var(--dwc-white); color: var(--dwc-purple); } #dw-mm-drawer .dw-mm-nav .menu-item-has-children.is-expanded > a::after { border-color: currentColor; } #dw-mm-drawer .dw-mm-nav .sub-menu { background: var(--dwc-white); } #dw-mm-drawer .dw-mm-nav .sub-menu a { min-height: 48px; padding-left: 34px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--dwc-ink); border-bottom: 2px solid var(--dwc-ink); } #dw-mm-drawer .dw-mm-nav .sub-menu a:hover { background: var(--dwc-white); color: var(--dwc-purple); } #dw-mm-drawer .dw-mm-nav li.wpmenucartli a.wpmenucart-contents { justify-content: flex-start; gap: 10px; } #dw-mm-drawer .dw-mm-nav li.wpmenucartli a.wpmenucart-contents span.cartcontents { background: var(--dwc-ink); color: var(--dwc-white); border-radius: 999px; padding: 5px 10px; font-size: 11px; line-height: 1; } #dw-mm-drawer .dw-mm-foot { background: var(--dwc-purple); border-top: var(--dwc-border); gap: 10px; padding: 14px 16px max(16px, env(safe-area-inset-bottom)); } #dw-mm-drawer .dw-mm-foot .dw-mm-foot-btn { border: var(--dwc-border); border-radius: 0; background: var(--dwc-white); color: var(--dwc-ink); box-shadow: 3px 3px 0 var(--dwc-ink); font-family: var(--dwc-display); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 12px 10px; } #dw-mm-drawer .dw-mm-foot .dw-mm-foot-btn:hover { background: var(--dwc-white); color: var(--dwc-purple); } #dw-mm-drawer .dw-mm-foot .dw-mm-foot-btn.dw-mm-whatsapp { background: var(--dwc-wa); color: var(--dwc-plum); /* white on WhatsApp green fails WCAG (1.9:1) */ } #dw-mm-drawer .dw-mm-foot .dw-mm-foot-btn.dw-mm-whatsapp:hover { background: var(--dwc-wa); color: var(--dwc-plum); } #dw-mm-drawer .dw-mm-foot .dw-mm-foot-cta { background: var(--dwc-gold); color: var(--dwc-plum); border: var(--dwc-border); border-radius: 0; box-shadow: var(--dwc-shadow-sm); font-family: var(--dwc-display); font-weight: 900; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; padding: 15px; } #dw-mm-drawer .dw-mm-foot .dw-mm-foot-cta:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--dwc-ink); } /* ─── 9 · WOOCOMMERCE · generic buttons (cart, checkout, shop, product, account) Gold block, dark plum text, 3px black border, hard shadow, Rubik 800 uppercase. .alt / #place_order / .checkout-button colours are also set (with !important) by dw-checkout-fixes v1.6.0 to the same values; the .woocommerce-page .woocommerce variants out-rank WooCommerce core on the cart and checkout pages even if load order ever changes. ─────────────── */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce a.added_to_cart, .woocommerce-page .woocommerce a.button, .woocommerce-page .woocommerce button.button, .woocommerce-page .woocommerce input.button, .woocommerce-page .woocommerce a.button.alt, .woocommerce-page .woocommerce button.button.alt, .woocommerce-page .woocommerce input.button.alt { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--dwc-gold); color: var(--dwc-plum); border: var(--dwc-border); border-radius: 0; box-shadow: var(--dwc-shadow-sm); font-family: var(--dwc-display); font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; padding: 14px 22px; text-decoration: none; text-shadow: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce a.added_to_cart:hover, .woocommerce-page .woocommerce a.button:hover, .woocommerce-page .woocommerce button.button:hover, .woocommerce-page .woocommerce input.button:hover, .woocommerce-page .woocommerce a.button.alt:hover, .woocommerce-page .woocommerce button.button.alt:hover, .woocommerce-page .woocommerce input.button.alt:hover { background: var(--dwc-gold); color: var(--dwc-plum); border-color: var(--dwc-ink); transform: translate(-2px, -2px); box-shadow: var(--dwc-shadow); } .woocommerce a.button:active, .woocommerce button.button:active, .woocommerce input.button:active, .woocommerce-page .woocommerce a.button:active, .woocommerce-page .woocommerce button.button:active, .woocommerce-page .woocommerce input.button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--dwc-ink); } .woocommerce a.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button.disabled, .woocommerce input.button:disabled, .woocommerce-page .woocommerce button.button:disabled, .woocommerce-page .woocommerce button.button.disabled { background: var(--dwc-gold); color: var(--dwc-plum); opacity: .5; cursor: not-allowed; transform: none; box-shadow: var(--dwc-shadow-sm); } /* ─── 10 · WOOCOMMERCE · notices (cart, checkout, shop, account) Purple-bordered white tiles with a purple hard shadow; the WooCommerce icon font glyph turns purple. ───────────────────────────────────────── */ .woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message, .woocommerce-page .woocommerce-error, .woocommerce-page .woocommerce-info, .woocommerce-page .woocommerce-message { background: var(--dwc-white); color: var(--dwc-ink); border: 3px solid var(--dwc-purple); border-radius: 0; box-shadow: 4px 4px 0 var(--dwc-purple); padding: 16px 20px 16px 52px; margin: 0 0 24px; font-family: var(--dwc-body); font-weight: 600; font-size: 14px; line-height: 1.5; } .woocommerce .woocommerce-error::before, .woocommerce .woocommerce-info::before, .woocommerce .woocommerce-message::before, .woocommerce-page .woocommerce-error::before, .woocommerce-page .woocommerce-info::before, .woocommerce-page .woocommerce-message::before { color: var(--dwc-purple); top: 17px; left: 20px; } .woocommerce .woocommerce-error li, .woocommerce-page .woocommerce-error li { margin: 4px 0; } .woocommerce .woocommerce-error a, .woocommerce .woocommerce-info a, .woocommerce .woocommerce-message a, .woocommerce-page .woocommerce-error a, .woocommerce-page .woocommerce-info a, .woocommerce-page .woocommerce-message a { color: var(--dwc-purple); font-weight: 800; } /* ─── 11 · CART (/cart/, page 76678, body.woocommerce-cart) · table desktop Black-bordered table tile, Rubik uppercase heads, 80px thumbs, 44px quantity input, square remove control, black-bordered coupon field. ──── */ .woocommerce-cart .woocommerce-cart-form { margin: 0 0 32px; } .woocommerce-cart table.shop_table.cart { border: var(--dwc-border); border-radius: 0; border-collapse: separate; border-spacing: 0; margin: 0 0 8px; background: var(--dwc-white); box-shadow: var(--dwc-shadow); font-family: var(--dwc-body); color: var(--dwc-ink); } .woocommerce-cart table.shop_table.cart thead th { font-family: var(--dwc-display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dwc-ink); padding: 14px; border-bottom: var(--dwc-border); background: var(--dwc-white); } .woocommerce-cart table.shop_table.cart td { padding: 16px 14px; border-top: 2px solid var(--dwc-ink); vertical-align: middle; font-weight: 600; font-size: 15px; color: var(--dwc-ink); background: var(--dwc-white); } .woocommerce-cart table.shop_table.cart tbody tr:first-child td { border-top: 0; } .woocommerce-cart table.cart td.product-thumbnail img { width: 80px; height: 80px; object-fit: contain; display: block; border: 2px solid var(--dwc-ink); background: var(--dwc-white); } .woocommerce-cart table.cart td.product-name a { font-family: var(--dwc-display); font-weight: 800; font-size: 16px; letter-spacing: .02em; text-transform: uppercase; color: var(--dwc-ink); text-decoration: none; } .woocommerce-cart table.cart td.product-name a:hover { color: var(--dwc-purple); } .woocommerce-cart table.cart td.product-price .woocommerce-Price-amount, .woocommerce-cart table.cart td.product-subtotal .woocommerce-Price-amount { font-family: var(--dwc-display); font-weight: 800; font-size: 16px; color: var(--dwc-ink); } .woocommerce-cart table.cart td.product-subtotal .woocommerce-Price-amount { font-size: 18px; color: var(--dwc-purple); } .woocommerce-cart table.cart td.product-quantity .quantity .qty { width: 84px; height: 44px; padding: 0 8px; border: 2px solid var(--dwc-ink); border-radius: 0; background: var(--dwc-white); color: var(--dwc-ink); font-family: var(--dwc-display); font-weight: 800; font-size: 16px; text-align: center; box-shadow: none; outline: none; transition: box-shadow .12s ease, border-color .12s ease; } .woocommerce-cart table.cart td.product-quantity .quantity .qty:focus { border-color: var(--dwc-purple); box-shadow: 3px 3px 0 var(--dwc-purple); } /* !important forced by WooCommerce core `.woocommerce a.remove { color: var(--wc-red) !important }`. */ .woocommerce-cart table.cart td.product-remove a.remove { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 2px solid var(--dwc-ink); border-radius: 0; background: var(--dwc-white); color: var(--dwc-ink) !important; font-size: 20px; font-weight: 700; line-height: 1; transition: background .12s ease, border-color .12s ease; } .woocommerce-cart table.cart td.product-remove a.remove:hover { background: var(--dwc-purple); border-color: var(--dwc-purple); color: var(--dwc-white) !important; } .woocommerce-cart table.shop_table.cart td.actions { padding: 16px 14px; border-top: var(--dwc-border); } .woocommerce-cart table.cart td.actions .coupon { float: left; display: flex; align-items: center; gap: 10px; } .woocommerce-cart table.cart td.actions .coupon input#coupon_code.input-text { float: none; width: 200px; height: 44px; margin: 0; padding: 0 12px; border: 2px solid var(--dwc-ink); border-radius: 0; background: var(--dwc-white); color: var(--dwc-ink); font-family: var(--dwc-body); font-weight: 600; font-size: 14px; outline: none; box-shadow: none; transition: box-shadow .12s ease, border-color .12s ease; } .woocommerce-cart table.cart td.actions .coupon input#coupon_code.input-text:focus { border-color: var(--dwc-purple); box-shadow: 3px 3px 0 var(--dwc-purple); } /* Apply coupon + Update cart = secondary (white, black border) so the gold Proceed button is the only primary on the page. (0,5,2) beats block 9. */ .woocommerce-cart table.cart td.actions .coupon button.button, .woocommerce-cart table.cart td.actions > button.button { background: var(--dwc-white); color: var(--dwc-ink); height: 44px; padding: 0 18px; font-size: 12px; box-shadow: 3px 3px 0 var(--dwc-ink); } .woocommerce-cart table.cart td.actions .coupon button.button:hover, .woocommerce-cart table.cart td.actions > button.button:hover { background: var(--dwc-purple); color: var(--dwc-white); border-color: var(--dwc-ink); box-shadow: 5px 5px 0 var(--dwc-ink); } .woocommerce-cart table.cart td.actions > button.button[name="update_cart"] { float: right; } .woocommerce-cart table.cart td.actions > button.button:disabled { background: var(--dwc-white); color: var(--dwc-ink); box-shadow: 3px 3px 0 var(--dwc-ink); } /* ─── 12 · CART · totals tile + Proceed to checkout (div.cart_totals) White tile, black border, hard shadow, purple order total, gold block button (colour from dw-checkout-fixes; size and shadow here). ────────── */ .woocommerce-cart .cart-collaterals div.cart_totals { float: none; width: 100%; max-width: 460px; margin: 0 0 0 auto; padding: 22px 22px 24px; background: var(--dwc-white); border: var(--dwc-border); box-shadow: var(--dwc-shadow); font-family: var(--dwc-body); color: var(--dwc-ink); box-sizing: border-box; } .woocommerce-cart .cart-collaterals div.cart_totals h2 { font-family: var(--dwc-display); font-weight: 900; font-size: 24px; letter-spacing: -.01em; text-transform: uppercase; line-height: 1; color: var(--dwc-ink); margin: 0 0 14px; } .woocommerce-cart .cart-collaterals div.cart_totals table.shop_table { border: 0; border-radius: 0; box-shadow: none; margin: 0 0 18px; width: 100%; } .woocommerce-cart .cart-collaterals div.cart_totals table.shop_table tr th { width: 40%; padding: 12px 0; border-top: 2px solid var(--dwc-ink); border-bottom: 0; font-family: var(--dwc-display); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dwc-ink); vertical-align: top; } .woocommerce-cart .cart-collaterals div.cart_totals table.shop_table tr td { padding: 12px 0; border-top: 2px solid var(--dwc-ink); border-bottom: 0; text-align: right; font-weight: 700; font-size: 15px; color: var(--dwc-ink); vertical-align: top; } .woocommerce-cart .cart-collaterals div.cart_totals table.shop_table tr:first-child th, .woocommerce-cart .cart-collaterals div.cart_totals table.shop_table tr:first-child td { border-top: 0; } .woocommerce-cart .cart-collaterals div.cart_totals table.shop_table tr.order-total th { font-size: 13px; padding-top: 16px; } .woocommerce-cart .cart-collaterals div.cart_totals table.shop_table tr.order-total td { padding-top: 12px; font-family: var(--dwc-display); font-weight: 900; font-size: 28px; letter-spacing: -.02em; line-height: 1; color: var(--dwc-purple); } .woocommerce-cart .cart-collaterals div.cart_totals table.shop_table tr.order-total td .includes_tax { display: block; margin-top: 6px; font-family: var(--dwc-body); font-weight: 600; font-size: 12px; letter-spacing: 0; color: var(--dwc-ink); } .woocommerce-cart .cart-collaterals div.cart_totals ul#shipping_method { margin: 0; padding: 0; } .woocommerce-cart .cart-collaterals div.cart_totals ul#shipping_method li { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; padding: 0; text-indent: 0; line-height: 1.4; text-align: left; font-weight: 600; font-size: 14px; } .woocommerce-cart .cart-collaterals div.cart_totals ul#shipping_method li input { margin: 2px 0 0; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--dwc-purple); } .woocommerce-cart .cart-collaterals div.cart_totals ul#shipping_method li label { display: inline; font-weight: 600; } .woocommerce-cart .cart-collaterals div.cart_totals .woocommerce-shipping-destination { font-size: 12px; font-weight: 600; margin: 0; text-align: left; } .woocommerce-cart .cart-collaterals div.cart_totals .wc-proceed-to-checkout { padding: 0; margin: 0; } /* Colour / border / padding come from dw-checkout-fixes v1.6.0 (!important). */ .woocommerce-cart .cart-collaterals div.cart_totals .wc-proceed-to-checkout a.checkout-button.button.alt { display: flex; width: 100%; box-sizing: border-box; justify-content: center; margin: 6px 0 0; font-size: 16px; box-shadow: var(--dwc-shadow); } /* ─── 13 · CART · empty state (live markup: .wc-empty-cart-message, p.return-to-shop) Also neutralises the inline-styled green fallback card that dw-checkout-fixes §7 injects when the cart is empty on load (it ships inline `background:#1b7a1b`, hence the three !important below). ──────── */ .woocommerce-cart .wc-empty-cart-message .cart-empty.woocommerce-info { font-family: var(--dwc-display); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; } .woocommerce-cart p.return-to-shop a.button.wc-backward { display: inline-flex; } .woocommerce-cart #dw-cart-empty-fallback-ui a { background: var(--dwc-gold) !important; color: var(--dwc-plum) !important; border-radius: 0 !important; border: var(--dwc-border); box-shadow: var(--dwc-shadow-sm); font-family: var(--dwc-display); } /* ─── 14 · CART · mobile ≤768 (WooCommerce's own smallscreen breakpoint) Each cart row becomes a black-bordered tile with the 80px thumb on the left (WooCommerce hides it by default — restored here), the remove control top-right and data-title labels in Rubik. ────────────────────── */ @media (max-width: 768px) { .woocommerce-cart table.shop_table.cart { border: 0; box-shadow: none; background: transparent; margin: 0 0 20px; } .woocommerce-cart table.shop_table.cart tbody tr.cart_item { display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "thumb name" "thumb price" "thumb qty" "thumb subtotal"; column-gap: 14px; row-gap: 6px; position: relative; padding: 14px; margin: 0 0 16px; background: var(--dwc-white); border: var(--dwc-border); box-shadow: var(--dwc-shadow-sm); } .woocommerce-cart table.shop_table.cart tbody tr.cart_item td { display: block; border: 0; padding: 0; background: transparent; font-size: 14px; } .woocommerce-cart table.shop_table.cart tbody tr.cart_item td::before { content: attr(data-title); float: left; font-family: var(--dwc-display); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; line-height: 24px; color: var(--dwc-ink); } .woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-thumbnail { display: block; grid-area: thumb; } .woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-thumbnail::before, .woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-name::before { display: none; } .woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-remove { position: absolute; top: 10px; right: 10px; } /* !important forced by woocommerce-smallscreen.css `tr td { text-align:right !important }`. */ .woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-name { grid-area: name; text-align: left !important; padding-right: 40px; } .woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-price { grid-area: price; } .woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-quantity { grid-area: qty; } .woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-quantity::before { line-height: 44px; } .woocommerce-cart table.shop_table.cart tbody tr.cart_item td.product-subtotal { grid-area: subtotal; border-top: 2px solid var(--dwc-ink); padding-top: 8px; } .woocommerce-cart table.shop_table.cart tbody tr:not(.cart_item) { display: block; padding: 0; margin: 0; } .woocommerce-cart table.shop_table.cart td.actions { display: block; padding: 0; border: 0; background: transparent; } .woocommerce-cart table.cart td.actions .coupon { float: none; display: flex; gap: 10px; margin: 0 0 12px; padding: 0; } .woocommerce-cart table.cart td.actions .coupon input#coupon_code.input-text { width: auto; flex: 1 1 auto; min-width: 0; } .woocommerce-cart table.cart td.actions .coupon button.button { display: inline-flex; width: auto; flex: 0 0 auto; float: none; } .woocommerce-cart table.cart td.actions > button.button[name="update_cart"] { display: flex; width: 100%; float: none; } .woocommerce-cart .cart-collaterals div.cart_totals { max-width: none; margin: 0; padding: 18px 16px 20px; box-shadow: var(--dwc-shadow-sm); } .woocommerce-cart .cart-collaterals div.cart_totals table.shop_table tr td::before { font-family: var(--dwc-display); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dwc-ink); line-height: 20px; } .woocommerce-cart .cart-collaterals div.cart_totals table.shop_table tr.order-total td::before { line-height: 28px; } } /* ─── 15 · CHECKOUT (/checkout/, page 76679, body.woocommerce-checkout) · layout Fields left (58%), order tile right (38%) using floats so the stray wpautop

wrappers in the live markup can't break a grid. ──────────── */ .woocommerce-checkout form.checkout.woocommerce-checkout { font-family: var(--dwc-body); color: var(--dwc-ink); } .woocommerce-checkout form.checkout.woocommerce-checkout::after { content: ""; display: table; clear: both; } .woocommerce-checkout form.checkout #customer_details.col2-set { float: left; width: 58%; } .woocommerce-checkout form.checkout #customer_details.col2-set .col-1, .woocommerce-checkout form.checkout #customer_details.col2-set .col-2 { float: none; width: 100%; } .woocommerce-checkout form.checkout h3#order_review_heading { float: right; width: 38%; clear: none; } .woocommerce-checkout form.checkout #order_review.woocommerce-checkout-review-order { float: right; width: 38%; clear: right; box-sizing: border-box; background: var(--dwc-white); border: var(--dwc-border); box-shadow: var(--dwc-shadow); padding: 20px 20px 22px; } .woocommerce-checkout form.checkout h3, .woocommerce-checkout form.checkout h3#order_review_heading { font-family: var(--dwc-display); font-weight: 900; font-size: 22px; letter-spacing: -.01em; text-transform: uppercase; line-height: 1; color: var(--dwc-ink); margin: 0 0 16px; padding: 0 0 10px; border-bottom: var(--dwc-border); } .woocommerce-checkout form.checkout .col-2 h3#ship-to-different-address { float: none; font-size: 13px; letter-spacing: .08em; border-bottom: 0; padding: 6px 0 0; margin: 8px 0 12px; } .woocommerce-checkout form.checkout .woocommerce-additional-fields, .woocommerce-checkout form.checkout .woocommerce-shipping-fields { margin: 0 0 12px; } /* ─── 16 · CHECKOUT · labels + fields (.form-row, .input-text, select, textarea) Labels Rubik 700 12px uppercase; fields 2px black border, 12px padding, purple focus shadow. Same rules cover the coupon and login forms that sit above form.checkout. ─────────────────────────────────────────────── */ .woocommerce-checkout form.checkout .form-row, .woocommerce-checkout form.checkout_coupon .form-row, .woocommerce-checkout form.login .form-row { padding: 0; margin: 0 0 16px; } .woocommerce-checkout form.checkout .form-row-first, .woocommerce-checkout form.checkout .form-row-last { width: calc(50% - 8px); } .woocommerce-checkout form.checkout .form-row label, .woocommerce-checkout form.checkout_coupon .form-row label, .woocommerce-checkout form.login .form-row label { display: block; margin: 0 0 6px; font-family: var(--dwc-display); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; color: var(--dwc-ink); } .woocommerce-checkout form.checkout .form-row .required { visibility: visible; color: var(--dwc-purple); } .woocommerce-checkout form.checkout .form-row .optional { text-transform: none; letter-spacing: 0; font-family: var(--dwc-body); font-weight: 600; opacity: .65; } .woocommerce-checkout form.checkout .form-row .input-text, .woocommerce-checkout form.checkout .form-row select, .woocommerce-checkout form.checkout .form-row textarea, .woocommerce-checkout form.checkout_coupon .form-row .input-text, .woocommerce-checkout form.login .form-row .input-text { width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px; border: 2px solid var(--dwc-ink); border-radius: 0; background: var(--dwc-white); color: var(--dwc-ink); font-family: var(--dwc-body); font-weight: 600; font-size: 15px; line-height: 1.3; box-shadow: none; outline: none; transition: box-shadow .12s ease, border-color .12s ease; } .woocommerce-checkout form.checkout .form-row textarea { min-height: 120px; resize: vertical; } .woocommerce-checkout form.checkout .form-row .input-text:focus, .woocommerce-checkout form.checkout .form-row select:focus, .woocommerce-checkout form.checkout .form-row textarea:focus, .woocommerce-checkout form.checkout_coupon .form-row .input-text:focus, .woocommerce-checkout form.login .form-row .input-text:focus { border-color: var(--dwc-purple); box-shadow: 4px 4px 0 var(--dwc-purple); } .woocommerce-checkout form.checkout .form-row.woocommerce-invalid label { color: var(--dwc-purple); } .woocommerce-checkout form.checkout .form-row.woocommerce-invalid input.input-text, .woocommerce-checkout form.checkout .form-row.woocommerce-invalid select { border-color: var(--dwc-purple); } .woocommerce-checkout form.checkout .form-row.woocommerce-validated input.input-text, .woocommerce-checkout form.checkout .form-row.woocommerce-validated select { border-color: var(--dwc-ink); } .woocommerce-checkout form.checkout .form-row label.checkbox, .woocommerce-checkout form.checkout .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: flex-start; gap: 10px; text-transform: none; letter-spacing: 0; font-family: var(--dwc-body); font-weight: 600; font-size: 14px; line-height: 1.4; } .woocommerce-checkout form.checkout .input-checkbox, .woocommerce-checkout form.checkout .input-radio { accent-color: var(--dwc-purple); width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 18px; } /* ─── 17 · CHECKOUT · select2 province picker (billing_state / shipping_state) Black 2px frame, 48px tall, purple open state; the dropdown is appended to , which carries .woocommerce-checkout on this page. ──────────── */ .woocommerce-checkout .select2-container--default .select2-selection--single { height: 48px; border: 2px solid var(--dwc-ink); border-radius: 0; background: var(--dwc-white); transition: box-shadow .12s ease, border-color .12s ease; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px; padding: 0 44px 0 12px; color: var(--dwc-ink); font-family: var(--dwc-body); font-weight: 600; font-size: 15px; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; width: 40px; top: 0; right: 0; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--dwc-ink) transparent transparent; border-width: 7px 6px 0; margin-left: -6px; margin-top: -3px; } .woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--dwc-purple); box-shadow: 4px 4px 0 var(--dwc-purple); } .woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--dwc-purple); border-width: 0 6px 7px; } .woocommerce-checkout .select2-dropdown { border: var(--dwc-border); border-radius: 0; background: var(--dwc-white); box-shadow: var(--dwc-shadow); } .woocommerce-checkout .select2-container--default .select2-search--dropdown .select2-search__field { border: 2px solid var(--dwc-ink); padding: 10px 12px; font-family: var(--dwc-body); font-weight: 600; } .woocommerce-checkout .select2-results__option { padding: 10px 12px; font-family: var(--dwc-body); font-weight: 600; font-size: 14px; color: var(--dwc-ink); } .woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected], .woocommerce-checkout .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--dwc-purple); color: var(--dwc-white); } /* ─── 18 · CHECKOUT · review-order table inside the tile (#order_review) ── */ .woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table { border: 0; border-radius: 0; box-shadow: none; margin: 0 0 18px; width: 100%; } .woocommerce-checkout #order_review table.shop_table thead th { padding: 0 0 10px; border-bottom: var(--dwc-border); font-family: var(--dwc-display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dwc-ink); } .woocommerce-checkout #order_review table.shop_table thead th.product-total { text-align: right; } .woocommerce-checkout #order_review table.shop_table tbody td { padding: 12px 0; border-top: 0; border-bottom: 2px solid var(--dwc-ink); font-family: var(--dwc-body); font-weight: 600; font-size: 14px; color: var(--dwc-ink); vertical-align: top; } .woocommerce-checkout #order_review table.shop_table tbody td.product-name { font-family: var(--dwc-display); font-weight: 800; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.3; } .woocommerce-checkout #order_review table.shop_table tbody td.product-name .product-quantity { color: var(--dwc-purple); white-space: nowrap; } .woocommerce-checkout #order_review table.shop_table tbody td.product-total { text-align: right; white-space: nowrap; font-weight: 700; } .woocommerce-checkout #order_review table.shop_table tfoot th { padding: 12px 0; border-top: 0; text-align: left; font-family: var(--dwc-display); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dwc-ink); vertical-align: top; } .woocommerce-checkout #order_review table.shop_table tfoot td { padding: 12px 0; border-top: 0; text-align: right; font-family: var(--dwc-body); font-weight: 700; font-size: 15px; color: var(--dwc-ink); vertical-align: top; } .woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th, .woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td { border-top: var(--dwc-border); padding-top: 14px; } .woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td { font-family: var(--dwc-display); font-weight: 900; font-size: 28px; letter-spacing: -.02em; line-height: 1; color: var(--dwc-purple); } .woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td .includes_tax { display: block; margin-top: 6px; font-family: var(--dwc-body); font-weight: 600; font-size: 12px; letter-spacing: 0; color: var(--dwc-ink); } .woocommerce-checkout #order_review ul#shipping_method { margin: 0; padding: 0; } .woocommerce-checkout #order_review ul#shipping_method li { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; padding: 0; text-indent: 0; text-align: left; line-height: 1.4; font-weight: 600; font-size: 13px; } .woocommerce-checkout #order_review ul#shipping_method li input { margin: 1px 0 0; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--dwc-purple); } .woocommerce-checkout #order_review ul#shipping_method li label { display: inline; font-weight: 600; } /* ─── 19 · CHECKOUT · payment methods + place order (#payment) ──────────── */ .woocommerce-checkout #order_review #payment.woocommerce-checkout-payment { background: transparent; border-radius: 0; } .woocommerce-checkout #order_review #payment ul.payment_methods { padding: 0; margin: 0 0 16px; border-bottom: 0; list-style: none; } .woocommerce-checkout #order_review #payment ul.payment_methods li.wc_payment_method { margin: 0 0 10px; padding: 14px 16px; border: 2px solid var(--dwc-ink); background: var(--dwc-white); line-height: 1.4; } .woocommerce-checkout #order_review #payment ul.payment_methods li.wc_payment_method label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--dwc-display); font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--dwc-ink); } .woocommerce-checkout #order_review #payment ul.payment_methods li.wc_payment_method label img { max-height: 24px; width: auto; margin: 0; padding: 0; } .woocommerce-checkout #order_review #payment ul.payment_methods li.wc_payment_method input.input-radio { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: middle; accent-color: var(--dwc-purple); } .woocommerce-checkout #order_review #payment div.payment_box { background: var(--dwc-white); color: var(--dwc-ink); border: 0; border-top: 2px solid var(--dwc-ink); border-radius: 0; padding: 12px 0 0; margin: 12px 0 0; font-family: var(--dwc-body); font-weight: 600; font-size: 13px; line-height: 1.5; } .woocommerce-checkout #order_review #payment div.payment_box::before { display: none; } .woocommerce-checkout #order_review #payment .form-row.place-order { padding: 0; margin: 0; } .woocommerce-checkout #order_review #payment .woocommerce-terms-and-conditions-wrapper { margin: 0 0 14px; font-family: var(--dwc-body); font-weight: 600; font-size: 13px; line-height: 1.5; color: var(--dwc-ink); } .woocommerce-checkout #order_review #payment .woocommerce-privacy-policy-text p { margin: 0 0 10px; font-size: 12px; } .woocommerce-checkout #order_review #payment .woocommerce-terms-and-conditions-wrapper a { color: var(--dwc-purple); font-weight: 800; } /* Colour / border / padding come from dw-checkout-fixes v1.6.0 (!important). */ .woocommerce-checkout #order_review #payment button#place_order.button.alt { float: none; display: flex; width: 100%; box-sizing: border-box; justify-content: center; margin: 0 0 4px; font-size: 17px; box-shadow: var(--dwc-shadow); } .woocommerce-checkout #order_review #payment .dw-checkout-trust img { border: 2px solid var(--dwc-ink); padding: 6px; background: var(--dwc-white); box-sizing: border-box; } /* ─── 20 · CHECKOUT · coupon + login forms above form.checkout ───────────── */ .woocommerce-checkout form.checkout_coupon.woocommerce-form-coupon, .woocommerce-checkout form.login.woocommerce-form-login { border: var(--dwc-border); border-radius: 0; box-shadow: var(--dwc-shadow-sm); background: var(--dwc-white); padding: 18px; margin: 0 0 24px; } .woocommerce-checkout form.checkout_coupon .form-row-first, .woocommerce-checkout form.checkout_coupon .form-row-last { width: calc(50% - 8px); margin-bottom: 0; } .woocommerce-checkout form.checkout_coupon .form-row-last button.button { height: 48px; width: 100%; } /* ─── 21 · CHECKOUT · responsive ────────────────────────────────────────── */ @media (max-width: 980px) { .woocommerce-checkout form.checkout #customer_details.col2-set, .woocommerce-checkout form.checkout h3#order_review_heading, .woocommerce-checkout form.checkout #order_review.woocommerce-checkout-review-order { float: none; width: 100%; } .woocommerce-checkout form.checkout #order_review.woocommerce-checkout-review-order { box-shadow: var(--dwc-shadow-sm); padding: 18px 16px 20px; } } @media (max-width: 768px) { .woocommerce-checkout form.checkout .form-row-first, .woocommerce-checkout form.checkout .form-row-last, .woocommerce-checkout form.checkout_coupon .form-row-first, .woocommerce-checkout form.checkout_coupon .form-row-last { float: none; width: 100%; } .woocommerce-checkout form.checkout_coupon .form-row-first { margin-bottom: 10px; } .woocommerce-checkout form.checkout h3, .woocommerce-checkout form.checkout h3#order_review_heading { font-size: 20px; } .woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td { font-size: 24px; } } /* ─── 22 · HEADER · align the top bar and logo row to the 1200px content column (John, 3 Sep 2026) ─── */ .elementor-72723 .elementor-element.elementor-element-4e979e75 > .elementor-container, .elementor-72723 .elementor-element.elementor-element-6d50e95a > .elementor-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; } @media (max-width: 980px) { .elementor-72723 .elementor-element.elementor-element-4e979e75 > .elementor-container, .elementor-72723 .elementor-element.elementor-element-6d50e95a > .elementor-container { padding: 0 22px; } } .elementor-72723 .elementor-element.elementor-element-4e979e75 > .elementor-container > .elementor-column > .elementor-widget-wrap, .elementor-72723 .elementor-element.elementor-element-6d50e95a > .elementor-container > .elementor-column > .elementor-widget-wrap { padding-left: 0; padding-right: 0; } .elementor-72723 .elementor-element.elementor-element-4e979e75 .elementor-icon-list-items.elementor-inline-items { flex-wrap: nowrap; } .elementor-72723 .elementor-element.elementor-element-4e979e75 .elementor-icon-list-item { white-space: nowrap; } .elementor-72723 .elementor-element.elementor-element-4e979e75 .elementor-icon-list-text { font-size: 12px; } /* ─── 23 · CART · inline coupon error (WooCommerce 9.x prints it beside the Apply button as p.coupon-error-notice inside td.actions .coupon, coloured var(--wc-red) at 0,5,2 specificity, so these selectors match that weight) */ .woocommerce-cart table.cart td.actions .coupon, .woocommerce-page table.cart td.actions .coupon { flex-wrap: wrap; } .woocommerce-cart table.cart td.actions .coupon .coupon-error-notice, .woocommerce-page table.cart td.actions .coupon .coupon-error-notice, .woocommerce table.cart td.actions .coupon .coupon-error-notice { display: block; flex: 1 1 100%; width: 100%; margin: 10px 0 0; padding: 10px 14px; background: var(--dwc-white); color: var(--dwc-ink); border: 2px solid var(--dwc-purple); border-radius: 0; box-shadow: 3px 3px 0 var(--dwc-purple); font-family: var(--dwc-body); font-weight: 700; font-size: 13px; line-height: 1.4; } .woocommerce-cart table.cart td.actions .coupon input.input-text.has-error, .woocommerce-page table.cart td.actions .coupon input.input-text.has-error { border-color: var(--dwc-purple); } /* ═══════════════════════════════════════════════════════════════════════════ 24–30 · PRODUCT PAGES + SHOP ARCHIVE (v1.1.0, drafted 4 Sep 2026, NOT DEPLOYED) Markup family (fetched 4 Sep 2026 with a desktop Chrome UA): · Single product = WooCommerce DEFAULT templates inside Hello Elementor's main#main.site-main (body.single-product, no elementor-location-single, no .elementor-widget-woocommerce-* widgets). div#product-N.product > div.woocommerce-product-gallery.images + div.summary.entry-summary + div.woocommerce-tabs + section.up-sells.upsells.products (packs only) + section.related.products. · /shop/ and /product-category/* = Elementor Pro theme-builder ARCHIVE template 94234 (div.elementor-94234.elementor-location-archive) holding a heading widget 53129936 and the wc-archive-products widget da3018b (.elementor-widget-wc-archive-products.elementor-wc-products. elementor-products-grid > div.woocommerce.columns-5 > h1.page-title + ul.products.elementor-grid). /shop/ lists li.product-category tiles, category pages list li.product cards. No result-count / ordering / pagination is rendered live (6 products, one page); those rules match WooCommerce core templates so they are styled if ever switched on. Specificity notes: Elementor's inline post CSS for 94234 styles the loop title / price / button / star-rating at (0,6,2)–(0,7,2), so every archive rule below starts with body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products which lands at (0,6,3)+ before the element part. WooCommerce core is never above (0,3,2) on the single product, so body.single-product div.product prefixes are enough there. dw-checkout-fixes owns the colour / border / padding of button.single_add_to_cart_button (!important); this file adds only layout for it. Product titles stay Title Case (no text-transform) so "pH10" reads. Section headings without product names are uppercase Rubik 900. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── 24 · PRODUCT · breadcrumb + page frame (body.single-product) ──────── */ body.single-product main#main.site-main { padding-top: 24px; padding-bottom: 56px; } body.single-product .woocommerce nav.woocommerce-breadcrumb, body.single-product nav.woocommerce-breadcrumb { margin: 0 0 24px; padding: 0; font-family: var(--dwc-display); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; color: var(--dwc-ink); } body.single-product nav.woocommerce-breadcrumb a { color: var(--dwc-purple); text-decoration: underline; /* permanent: link-in-text-block needs a non-colour cue against the ink crumbs */ text-decoration-thickness: 2px; text-underline-offset: 3px; } body.single-product nav.woocommerce-breadcrumb a:hover, body.single-product nav.woocommerce-breadcrumb a:focus-visible { color: var(--dwc-ink); text-decoration-color: var(--dwc-purple); } body.single-product div.product { margin-bottom: 0; } /* ─── 25 · PRODUCT · gallery frame (div.woocommerce-product-gallery.images) White tile, 3px black border, hard shadow. Works in both the no-JS state (extra images inline at 25%) and the flexslider state (.flex-viewport + ol.flex-control-thumbs built by wc-single-product.js). ───────────────── */ body.single-product div.product div.images.woocommerce-product-gallery { float: left; width: 47%; margin: 0 0 40px; padding: 18px; box-sizing: border-box; background: var(--dwc-white); border: var(--dwc-border); border-radius: 0; box-shadow: var(--dwc-shadow); } body.single-product div.product div.images .woocommerce-product-gallery__wrapper { margin: 0; padding: 0; } body.single-product div.product div.images .woocommerce-product-gallery__image:first-child img { display: block; width: 100%; height: auto; margin: 0; box-shadow: none; } body.single-product div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) { width: 22%; margin: 14px 4% 0 0; padding: 4px; box-sizing: border-box; border: 2px solid var(--dwc-ink); background: var(--dwc-white); vertical-align: top; } body.single-product div.product div.images .woocommerce-product-gallery__image:nth-child(4n+1):not(:first-child) { margin-right: 0; } body.single-product div.product div.images .flex-control-thumbs { margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } body.single-product div.product div.images .flex-control-thumbs li { width: calc(25% - 8px); float: none; margin: 0; } body.single-product div.product div.images .flex-control-thumbs li img { padding: 4px; box-sizing: border-box; border: 2px solid var(--dwc-ink); background: var(--dwc-white); opacity: 1; cursor: pointer; } body.single-product div.product div.images .flex-control-thumbs li img.flex-active, body.single-product div.product div.images .flex-control-thumbs li img:hover { border-color: var(--dwc-purple); } /* Zoom / lightbox trigger: square, black ring, keeps the WooCommerce glyph */ body.single-product div.product div.images .woocommerce-product-gallery__trigger { top: 12px; right: 12px; width: 40px; height: 40px; border: 2px solid var(--dwc-ink); border-radius: 0; background: var(--dwc-white); box-shadow: var(--dwc-shadow-sm); } body.single-product div.product div.images .woocommerce-product-gallery__trigger::before { left: 11px; top: 11px; border-color: var(--dwc-ink); } body.single-product div.product div.images .woocommerce-product-gallery__trigger::after { left: 24px; top: 21px; background: var(--dwc-ink); } /* ─── 26 · PRODUCT · summary tile (div.summary.entry-summary) Title Rubik 900 Title Case, purple Rubik 800 price, 44px quantity, full-height gold add-to-cart (colour owned by dw-checkout-fixes), meta row, stock line, gold sale sticker. ─────────────────────────────────── */ body.single-product div.product div.summary.entry-summary { float: right; width: 49%; margin: 0 0 40px; padding: 28px 28px 24px; box-sizing: border-box; background: var(--dwc-white); border: var(--dwc-border); border-radius: 0; box-shadow: var(--dwc-shadow); color: var(--dwc-ink); font-family: var(--dwc-body); } body.single-product div.product div.summary h1.product_title.entry-title { margin: 0 0 12px; padding: 0; font-family: var(--dwc-display); font-weight: 900; font-size: 32px; line-height: 1.1; letter-spacing: -.01em; text-transform: none; /* keeps "pH10" readable */ color: var(--dwc-ink); } /* rating row */ body.single-product div.product div.summary .woocommerce-product-rating { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; line-height: 1; } body.single-product div.product div.summary .woocommerce-product-rating .star-rating { float: none; margin: 0; font-size: 16px; color: var(--dwc-purple); /* gold #d4a843 is 2.2:1 on white and fails AA on the star-rating text; purple is 7.3:1 */ } body.single-product div.product div.summary .woocommerce-product-rating .star-rating::before { color: rgba(13, 13, 26, .18); } body.single-product div.product div.summary .woocommerce-product-rating a.woocommerce-review-link { font-family: var(--dwc-body); font-weight: 700; font-size: 13px; color: var(--dwc-purple); text-decoration: none; } body.single-product div.product div.summary .woocommerce-product-rating a.woocommerce-review-link:hover { text-decoration: underline; } /* price */ body.single-product div.product div.summary p.price, body.single-product div.product div.summary span.price { margin: 0 0 20px; font-family: var(--dwc-display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--dwc-purple); } body.single-product div.product div.summary p.price .woocommerce-Price-amount, body.single-product div.product div.summary p.price ins, body.single-product div.product div.summary p.price ins .woocommerce-Price-amount { color: var(--dwc-purple); font-weight: 800; text-decoration: none; } body.single-product div.product div.summary p.price del, body.single-product div.product div.summary p.price del .woocommerce-Price-amount { color: rgba(13, 13, 26, .72); /* solid tint, ~8:1 on white; WooCommerce core puts opacity:.7 on div.product .price del, reset below */ opacity: 1; font-size: 20px; font-weight: 700; margin-right: 8px; } body.single-product div.product div.summary .woocommerce-product-details__short-description { margin: 0 0 20px; font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--dwc-ink); } /* stock line (core template: p.stock.in-stock / .out-of-stock) */ body.single-product div.product div.summary p.stock { margin: 0 0 16px; font-family: var(--dwc-display); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dwc-ink); } body.single-product div.product div.summary p.stock.out-of-stock { color: var(--dwc-purple); } /* cart form: quantity + button on one row, button stretches */ body.single-product div.product div.summary form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin: 0 0 22px; } body.single-product div.product div.summary form.cart::before, body.single-product div.product div.summary form.cart::after { content: none; display: none; } body.single-product div.product div.summary form.cart div.quantity { float: none; margin: 0; flex: 0 0 auto; } body.single-product div.product div.summary form.cart div.quantity input.qty { width: 76px; height: 56px; margin: 0; padding: 0 8px; box-sizing: border-box; border: 2px solid var(--dwc-ink); border-radius: 0; background: var(--dwc-white); font-family: var(--dwc-display); font-weight: 800; font-size: 18px; text-align: center; color: var(--dwc-ink); -moz-appearance: textfield; } body.single-product div.product div.summary form.cart div.quantity input.qty:focus { outline: 0; border-color: var(--dwc-purple); box-shadow: 3px 3px 0 var(--dwc-purple); } /* sold-individually packs render the qty as a hidden input: collapse the wrapper */ body.single-product div.product div.summary form.cart div.quantity:has(> input[type="hidden"]) { display: none; } body.single-product div.product div.summary form.cart button.single_add_to_cart_button { float: none; flex: 1 1 200px; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; font-size: 16px; white-space: normal; text-align: center; } /* meta: SKU / Category / Tags */ body.single-product div.product div.summary div.product_meta { margin: 0; padding: 16px 0 0; border-top: 2px solid var(--dwc-ink); font-family: var(--dwc-display); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.7; color: var(--dwc-ink); } body.single-product div.product div.summary div.product_meta > span { display: block; margin: 0 0 6px; } body.single-product div.product div.summary div.product_meta span.sku, body.single-product div.product div.summary div.product_meta a { font-family: var(--dwc-body); font-weight: 700; font-size: 13px; letter-spacing: 0; text-transform: none; } body.single-product div.product div.summary div.product_meta a { color: var(--dwc-purple); text-decoration: none; } body.single-product div.product div.summary div.product_meta a:hover { text-decoration: underline; } /* sale sticker on the single product (core template span.onsale, first child of div.product) */ body.single-product div.product > span.onsale { top: 14px; left: 14px; right: auto; min-width: 0; min-height: 0; margin: 0; padding: 9px 14px; z-index: 20; background: var(--dwc-gold); color: var(--dwc-ink); border: var(--dwc-border); border-radius: 0; box-shadow: var(--dwc-shadow-sm); font-family: var(--dwc-display); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; line-height: 1; transform: rotate(-3deg); } /* ─── 27 · PRODUCT · tabs as pills + panels + reviews (div.woocommerce-tabs) WooCommerce draws the folder-tab look with li::before/::after and a ul::before baseline; all three are removed. ────────────────────────── */ body.single-product div.product div.woocommerce-tabs { clear: both; margin: 0 0 48px; } body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0; overflow: visible; list-style: none; } body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs::before, body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs::after { content: none; display: none; border: 0; } body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs li { display: block; margin: 0; padding: 0; border: 2px solid var(--dwc-ink); border-radius: 0; background: var(--dwc-white); color: var(--dwc-ink); z-index: auto; } body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs li::before, body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs li::after { content: none; display: none; border: 0; box-shadow: none; } body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs li a { display: block; min-height: 44px; box-sizing: border-box; padding: 15px 18px; font-family: var(--dwc-display); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1; color: var(--dwc-ink); text-decoration: none; text-shadow: none; } body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs li a:hover, body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs li a:focus-visible { color: var(--dwc-purple); text-decoration: none; } body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs li.active { background: var(--dwc-purple); border-color: var(--dwc-purple); box-shadow: var(--dwc-shadow-sm); } body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs li.active a, body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs li.active a:hover { color: var(--dwc-white); } /* panels */ body.single-product div.product div.woocommerce-tabs .woocommerce-Tabs-panel.panel { margin: 0; padding: 28px 30px; background: var(--dwc-white); border: var(--dwc-border); border-radius: 0; box-shadow: var(--dwc-shadow); font-family: var(--dwc-body); font-weight: 600; font-size: 15px; line-height: 1.65; color: var(--dwc-ink); } body.single-product div.product div.woocommerce-tabs .woocommerce-Tabs-panel.panel > h2 { margin: 0 0 18px; font-family: var(--dwc-display); font-weight: 900; font-size: 22px; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; color: var(--dwc-ink); } body.single-product div.product div.woocommerce-tabs .woocommerce-Tabs-panel.panel h3 { margin: 24px 0 8px; font-family: var(--dwc-display); font-weight: 800; font-size: 17px; line-height: 1.2; color: var(--dwc-purple); } body.single-product div.product div.woocommerce-tabs .woocommerce-Tabs-panel.panel p { margin: 0 0 14px; } body.single-product div.product div.woocommerce-tabs .woocommerce-Tabs-panel.panel ul { margin: 0 0 14px; padding: 0 0 0 22px; } body.single-product div.product div.woocommerce-tabs .woocommerce-Tabs-panel.panel ul li { margin: 0 0 6px; } body.single-product div.product div.woocommerce-tabs .woocommerce-Tabs-panel.panel a { color: var(--dwc-purple); font-weight: 800; } /* additional information table */ body.single-product div.product div.woocommerce-tabs table.shop_attributes { width: 100%; margin: 0; border: 2px solid var(--dwc-ink); border-collapse: collapse; } body.single-product div.product div.woocommerce-tabs table.shop_attributes th, body.single-product div.product div.woocommerce-tabs table.shop_attributes td { padding: 10px 14px; border: 0; border-bottom: 2px solid var(--dwc-ink); background: var(--dwc-white); line-height: 1.5; vertical-align: top; } body.single-product div.product div.woocommerce-tabs table.shop_attributes tr:nth-child(2n) th, body.single-product div.product div.woocommerce-tabs table.shop_attributes tr:nth-child(2n) td { background: var(--dwc-white); } body.single-product div.product div.woocommerce-tabs table.shop_attributes tr:last-child th, body.single-product div.product div.woocommerce-tabs table.shop_attributes tr:last-child td { border-bottom: 0; } body.single-product div.product div.woocommerce-tabs table.shop_attributes th { width: 180px; border-right: 2px solid var(--dwc-ink); font-family: var(--dwc-display); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dwc-ink); } body.single-product div.product div.woocommerce-tabs table.shop_attributes td { font-style: normal; font-family: var(--dwc-body); font-weight: 600; font-size: 14px; } body.single-product div.product div.woocommerce-tabs table.shop_attributes td p { margin: 0; padding: 0; } /* reviews list */ body.single-product div.product #reviews h2.woocommerce-Reviews-title { text-transform: none; /* contains the product name (pH10) */ font-size: 20px; } body.single-product div.product #reviews #comments ol.commentlist { margin: 0 0 28px; padding: 0; } body.single-product div.product #reviews #comments ol.commentlist li.review { margin: 0 0 14px; padding: 0; } body.single-product div.product #reviews #comments ol.commentlist li .comment-text { margin: 0; padding: 16px 18px 4px; border: 2px solid var(--dwc-ink); border-radius: 0; background: var(--dwc-white); } body.single-product div.product #reviews #comments ol.commentlist li .comment-text .star-rating { float: none; margin: 0 0 8px; font-size: 14px; color: var(--dwc-purple); } body.single-product div.product #reviews #comments ol.commentlist li .comment-text .star-rating::before { color: rgba(13, 13, 26, .18); } body.single-product div.product #reviews #comments ol.commentlist li .comment-text p.meta { margin: 0 0 8px; font-family: var(--dwc-display); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dwc-ink); } body.single-product div.product #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__author { color: var(--dwc-purple); } body.single-product div.product #reviews #comments ol.commentlist li .comment-text .description p { margin: 0 0 12px; font-size: 15px; } /* review form */ body.single-product div.product #review_form #respond { padding: 22px 0 0; border-top: 2px solid var(--dwc-ink); } body.single-product div.product #review_form #respond #reply-title { display: block; margin: 0 0 14px; font-family: var(--dwc-display); font-weight: 900; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; color: var(--dwc-ink); } body.single-product div.product #review_form #respond #reply-title small a { font-family: var(--dwc-body); font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--dwc-purple); } body.single-product div.product #review_form #respond p.comment-notes { margin: 0 0 14px; font-size: 13px; } body.single-product div.product #review_form #respond label { display: block; margin: 0 0 6px; font-family: var(--dwc-display); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dwc-ink); } body.single-product div.product #review_form #respond .required { color: var(--dwc-purple); } body.single-product div.product #review_form #respond p { margin: 0 0 14px; } body.single-product div.product #review_form #respond input[type="text"], body.single-product div.product #review_form #respond input[type="email"], body.single-product div.product #review_form #respond select#rating, body.single-product div.product #review_form #respond textarea { display: block; width: 100%; max-width: 520px; min-height: 48px; padding: 12px 14px; box-sizing: border-box; border: 2px solid var(--dwc-ink); border-radius: 0; background: var(--dwc-white); font-family: var(--dwc-body); font-weight: 600; font-size: 15px; color: var(--dwc-ink); box-shadow: none; } body.single-product div.product #review_form #respond select#rating { width: auto; min-width: 200px; } body.single-product div.product #review_form #respond textarea { max-width: 100%; min-height: 140px; } body.single-product div.product #review_form #respond input:focus, body.single-product div.product #review_form #respond select:focus, body.single-product div.product #review_form #respond textarea:focus { outline: 0; border-color: var(--dwc-purple); box-shadow: 3px 3px 0 var(--dwc-purple); } body.single-product div.product #review_form #respond p.form-submit { margin: 4px 0 0; } /* colour + border come from §9 (.woocommerce #respond input#submit) */ body.single-product div.product #review_form #respond p.form-submit input#submit { min-height: 48px; padding: 14px 26px; } /* ─── 28 · PRODUCT · related + upsell tiles (section.related.products, section.up-sells.upsells.products > ul.products.columns-4) ────────── */ body.single-product div.product section.related.products, body.single-product div.product section.up-sells.products { clear: both; margin: 0 0 40px; } body.single-product div.product section.related.products > h2, body.single-product div.product section.up-sells.products > h2 { margin: 0 0 24px; padding: 0 0 0 16px; border-left: 6px solid var(--dwc-purple); font-family: var(--dwc-display); font-weight: 900; font-size: 24px; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; color: var(--dwc-ink); } body.single-product div.product section.products ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; margin: 0; padding: 0 6px 6px 0; /* room for the hard shadow */ } body.single-product div.product section.products ul.products::before, body.single-product div.product section.products ul.products::after { content: none; display: none; } body.single-product div.product section.products ul.products li.product { position: relative; float: none; width: auto; margin: 0; padding: 16px 16px 18px; box-sizing: border-box; display: flex; flex-direction: column; background: var(--dwc-white); border: var(--dwc-border); border-radius: 0; box-shadow: var(--dwc-shadow); color: var(--dwc-ink); } body.single-product div.product section.products ul.products li.product a.woocommerce-loop-product__link { display: flex; flex-direction: column; flex: 1 1 auto; position: relative; text-decoration: none; color: var(--dwc-ink); } body.single-product div.product section.products ul.products li.product a.woocommerce-loop-product__link img { display: block; width: 100%; height: auto; margin: 0 0 14px; box-shadow: none; } body.single-product div.product section.products ul.products li.product h2.woocommerce-loop-product__title { margin: 0 0 8px; padding: 0; font-family: var(--dwc-display); font-weight: 800; font-size: 15px; line-height: 1.3; text-transform: none; color: var(--dwc-ink); } body.single-product div.product section.products ul.products li.product .star-rating { float: none; display: block; margin: 0 0 8px; font-size: 13px; color: var(--dwc-purple); } body.single-product div.product section.products ul.products li.product .star-rating::before { color: rgba(13, 13, 26, .18); } body.single-product div.product section.products ul.products li.product span.price, body.single-product div.product section.products ul.products li.product span.price .woocommerce-Price-amount, body.single-product div.product section.products ul.products li.product span.price ins, body.single-product div.product section.products ul.products li.product span.price ins .woocommerce-Price-amount { display: block; margin: auto 0 0; font-family: var(--dwc-display); font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--dwc-ink); text-decoration: none; } body.single-product div.product section.products ul.products li.product span.price del, body.single-product div.product section.products ul.products li.product span.price del .woocommerce-Price-amount { display: inline; font-size: 14px; font-weight: 700; color: rgba(13, 13, 26, .72); opacity: 1; /* WooCommerce core: div.product span.price del { opacity:.7 } would compound to 3.7:1 */ } body.single-product div.product section.products ul.products li.product a.button.add_to_cart_button, body.single-product div.product section.products ul.products li.product a.added_to_cart { display: flex; width: 100%; min-height: 48px; margin: 14px 0 0; padding: 13px 14px; box-sizing: border-box; justify-content: center; font-size: 13px; } body.single-product div.product section.products ul.products li.product a.added_to_cart { margin-top: 8px; background: var(--dwc-white); color: var(--dwc-ink); } /* sale sticker on a tile: one per tile, top-left, over the image */ body.single-product div.product section.products ul.products li.product span.onsale { top: 8px; left: 8px; right: auto; min-width: 0; min-height: 0; margin: 0; padding: 7px 10px; z-index: 5; background: var(--dwc-gold); color: var(--dwc-ink); border: 2px solid var(--dwc-ink); border-radius: 0; box-shadow: 3px 3px 0 var(--dwc-ink); font-family: var(--dwc-display); font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; line-height: 1; transform: rotate(-3deg); } /* ─── 29 · SHOP ARCHIVE · /shop/ + /product-category/* (template 94234) Eyebrow heading widget, Rubik 900 page title, category tiles with a purple heading strip + visible count, product cards, count / sort row, pagination. Prefix P = body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products (0,4,1). ── */ body.archive.woocommerce .elementor-location-archive .elementor-element.elementor-widget-heading { margin: 0 0 8px; } body.archive.woocommerce .elementor-location-archive .elementor-widget-heading h2.elementor-heading-title { margin: 0; font-family: var(--dwc-display); font-weight: 700; font-size: 13px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--dwc-purple); } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products h1.woocommerce-products-header__title.page-title { margin: 0 0 32px; font-family: var(--dwc-display); font-weight: 900; font-size: 40px; line-height: 1.05; letter-spacing: -.01em; text-transform: none; /* category titles carry "pH10" */ color: var(--dwc-ink); } /* grid: 3 across on desktop so 6 products fill two rows and 3 category tiles fill one (live template is columns-5, which leaves 2–4 empty cells) */ body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products .woocommerce ul.products.elementor-grid { grid-column-gap: 28px; grid-row-gap: 36px; padding: 0 6px 6px 0; } @media (min-width: 1025px) { body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products .woocommerce.columns-5 ul.products, body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products .woocommerce.columns-4 ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* shared tile shell for product cards and category tiles */ body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product { position: relative; display: flex; flex-direction: column; float: none; width: auto; margin: 0; padding: 18px 18px 20px; box-sizing: border-box; background: var(--dwc-white); border: var(--dwc-border); border-radius: 0; box-shadow: var(--dwc-shadow); color: var(--dwc-ink); } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product a.woocommerce-loop-product__link { display: flex; flex-direction: column; flex: 1 1 auto; position: relative; text-decoration: none; color: var(--dwc-ink); } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product a img { display: block; width: 100%; height: auto; margin: 0 0 16px; box-shadow: none; } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product h2.woocommerce-loop-product__title { margin: 0 0 10px; padding: 0; font-family: var(--dwc-display); font-weight: 800; font-size: 17px; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--dwc-ink); } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .star-rating { float: none; display: block; margin: 0 0 10px; font-size: 14px; color: var(--dwc-purple); } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .star-rating::before { color: rgba(13, 13, 26, .18); } /* black price on cards (Elementor template paints it accent cyan) */ body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price, body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price .amount, body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price .amount bdi, body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price ins, body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price ins .amount { display: block; margin: auto 0 0; font-family: var(--dwc-display); font-weight: 800; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; color: var(--dwc-ink); text-decoration: none; } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del, body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product .price del .amount { display: inline; margin: 0 8px 0 0; font-size: 15px; font-weight: 700; color: rgba(13, 13, 26, .72); opacity: 1; /* WooCommerce core: div.product span.price del { opacity:.7 } would compound to 3.7:1 */ } /* gold add-to-cart (Elementor template paints it brand green with white text) */ body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product a.button, body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product a.button.add_to_cart_button { display: flex; width: 100%; min-height: 52px; margin: 16px 0 0; padding: 14px 16px; box-sizing: border-box; align-items: center; justify-content: center; background: var(--dwc-gold); background-image: none; color: var(--dwc-plum); border: var(--dwc-border); border-radius: 0; box-shadow: var(--dwc-shadow-sm); font-family: var(--dwc-display); font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product a.button:hover, body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product a.button:focus-visible { background: var(--dwc-gold); color: var(--dwc-plum); transform: translate(-2px, -2px); box-shadow: var(--dwc-shadow); } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product a.button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--dwc-ink); } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product a.button.loading { opacity: .6; } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product a.added_to_cart, body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products .added_to_cart { display: flex; width: 100%; min-height: 48px; margin: 8px 0 0; padding: 12px 16px; box-sizing: border-box; justify-content: center; background: var(--dwc-white); color: var(--dwc-ink); border: var(--dwc-border); box-shadow: var(--dwc-shadow-sm); font-family: var(--dwc-display); font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; } /* sale sticker on a card: one per tile, top-left over the image */ body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product span.onsale { display: block; top: 8px; left: 8px; right: auto; min-width: 0; min-height: 0; margin: 0; padding: 8px 12px; z-index: 5; background: var(--dwc-gold); color: var(--dwc-ink); border: 2px solid var(--dwc-ink); border-radius: 0; box-shadow: 3px 3px 0 var(--dwc-ink); font-family: var(--dwc-display); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; line-height: 1; transform: rotate(-3deg); } /* category tiles on /shop/ (li.product-category.product > a > picture + h2) */ body.woocommerce-shop .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product.product-category, body.tax-product_cat .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product.product-category { padding: 0; } body.woocommerce-shop .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product.product-category > a, body.tax-product_cat .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product.product-category > a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--dwc-ink); } body.woocommerce-shop .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product.product-category > a picture, body.tax-product_cat .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product.product-category > a picture { display: block; padding: 18px 18px 0; } body.woocommerce-shop .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product.product-category > a img, body.tax-product_cat .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product.product-category > a img { margin: 0 0 18px; } body.woocommerce-shop .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product.product-category h2.woocommerce-loop-category__title, body.tax-product_cat .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product.product-category h2.woocommerce-loop-category__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: auto 0 0; padding: 16px 18px; border-top: 3px solid var(--dwc-ink); background: var(--dwc-purple); font-family: var(--dwc-display); font-weight: 800; font-size: 14px; line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; color: var(--dwc-white); } body.woocommerce-shop .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product.product-category h2.woocommerce-loop-category__title mark.count, body.tax-product_cat .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product.product-category h2.woocommerce-loop-category__title mark.count { flex: 0 0 auto; display: inline-block; padding: 6px 10px; background: var(--dwc-white); color: var(--dwc-purple); border: 2px solid var(--dwc-ink); font-family: var(--dwc-display); font-weight: 800; font-size: 12px; letter-spacing: .04em; line-height: 1; } body.woocommerce-shop .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product.product-category:hover h2.woocommerce-loop-category__title, body.tax-product_cat .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product.product-category:hover h2.woocommerce-loop-category__title { background: var(--dwc-ink); } /* result count + ordering (WooCommerce core templates, not rendered by the live archive widget today; styled so they land right if enabled) */ body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products p.woocommerce-result-count { float: left; margin: 8px 0 24px; font-family: var(--dwc-display); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dwc-ink); } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products form.woocommerce-ordering { float: right; margin: 0 0 24px; } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products form.woocommerce-ordering select.orderby { height: 44px; padding: 0 40px 0 14px; border: 2px solid var(--dwc-ink); border-radius: 0; background: var(--dwc-white) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230d0d1a' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 14px center; -webkit-appearance: none; appearance: none; font-family: var(--dwc-display); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dwc-ink); cursor: pointer; } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products form.woocommerce-ordering select.orderby:focus { outline: 0; border-color: var(--dwc-purple); box-shadow: 3px 3px 0 var(--dwc-purple); } /* pagination (WooCommerce core nav.woocommerce-pagination > ul.page-numbers) */ body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products nav.woocommerce-pagination { margin: 40px 0 0; text-align: center; } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products nav.woocommerce-pagination ul.page-numbers { display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; white-space: normal; } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products nav.woocommerce-pagination ul.page-numbers li { float: none; display: block; margin: 0; padding: 0; border: 0; overflow: visible; } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products nav.woocommerce-pagination ul.page-numbers li a, body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products nav.woocommerce-pagination ul.page-numbers li span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; box-sizing: border-box; border: 2px solid var(--dwc-ink); background: var(--dwc-white); color: var(--dwc-ink); font-family: var(--dwc-display); font-weight: 800; font-size: 13px; line-height: 1; text-decoration: none; } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products nav.woocommerce-pagination ul.page-numbers li a:hover, body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products nav.woocommerce-pagination ul.page-numbers li a:focus-visible { background: var(--dwc-ink); color: var(--dwc-white); } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products nav.woocommerce-pagination ul.page-numbers li span.current { background: var(--dwc-purple); border-color: var(--dwc-purple); color: var(--dwc-white); box-shadow: var(--dwc-shadow-sm); } /* ─── 30 · PRODUCT + SHOP · responsive. Tablet 768–1024 keeps two columns; phone ≤767 is single column, gallery capped in px, buttons full width, tiles stacked. WooCommerce's own smallscreen sheet (≤768) already drops the gallery/summary floats; these rules restate it for ≤767 so the frame holds if that sheet is ever dequeued. ─────────────────────────────────── */ @media (max-width: 1024px) { body.single-product div.product section.products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.single-product div.product div.summary h1.product_title.entry-title { font-size: 28px; } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products .woocommerce ul.products.elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column-gap: 24px; grid-row-gap: 30px; } } @media (max-width: 767px) { body.single-product main#main.site-main { padding-top: 16px; padding-bottom: 40px; } body.single-product nav.woocommerce-breadcrumb { margin: 0 0 16px; font-size: 10px; } body.single-product div.product div.images.woocommerce-product-gallery, body.single-product div.product div.summary.entry-summary { float: none; width: 100%; margin: 0 0 26px; box-shadow: 5px 5px 0 var(--dwc-ink); } body.single-product div.product div.images.woocommerce-product-gallery { padding: 14px; } body.single-product div.product div.images .woocommerce-product-gallery__image:first-child img { width: auto; max-width: 100%; max-height: 320px; margin: 0 auto; object-fit: contain; } body.single-product div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) { width: 22%; margin: 12px 4% 0 0; } body.single-product div.product div.summary.entry-summary { padding: 22px 18px 20px; } body.single-product div.product div.summary h1.product_title.entry-title { font-size: 26px; } body.single-product div.product div.summary p.price { font-size: 30px; } body.single-product div.product div.summary form.cart div.quantity { flex: 1 1 100%; } body.single-product div.product div.summary form.cart div.quantity input.qty { width: 100%; height: 52px; } body.single-product div.product div.summary form.cart button.single_add_to_cart_button { flex: 1 1 100%; width: 100%; min-height: 56px; font-size: 15px; } body.single-product div.product > span.onsale { top: 10px; left: 10px; } body.single-product div.product div.woocommerce-tabs { margin: 0 0 36px; } body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs { gap: 8px; } body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs li { flex: 1 1 auto; } body.single-product div.product div.woocommerce-tabs ul.tabs.wc-tabs li a { padding: 14px 14px; font-size: 11px; text-align: center; } body.single-product div.product div.woocommerce-tabs .woocommerce-Tabs-panel.panel { padding: 20px 18px; box-shadow: 5px 5px 0 var(--dwc-ink); font-size: 15px; } body.single-product div.product div.woocommerce-tabs .woocommerce-Tabs-panel.panel > h2 { font-size: 20px; } body.single-product div.product div.woocommerce-tabs table.shop_attributes tr { display: block; border-bottom: 2px solid var(--dwc-ink); } body.single-product div.product div.woocommerce-tabs table.shop_attributes tr:last-child { border-bottom: 0; } body.single-product div.product div.woocommerce-tabs table.shop_attributes th, body.single-product div.product div.woocommerce-tabs table.shop_attributes td { display: block; width: auto; max-width: 100%; border: 0; padding: 8px 12px 2px; } body.single-product div.product div.woocommerce-tabs table.shop_attributes td { padding: 0 12px 10px; } body.single-product div.product #review_form #respond input[type="text"], body.single-product div.product #review_form #respond input[type="email"], body.single-product div.product #review_form #respond select#rating { max-width: 100%; width: 100%; } body.single-product div.product section.related.products > h2, body.single-product div.product section.up-sells.products > h2 { font-size: 20px; } body.single-product div.product section.products ul.products { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0 5px 5px 0; } body.single-product div.product section.products ul.products li.product { width: 100%; float: none; margin: 0; box-shadow: 5px 5px 0 var(--dwc-ink); } body.single-product div.product section.products ul.products li.product a.woocommerce-loop-product__link img, body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product a img { width: auto; max-width: 100%; max-height: 220px; margin-left: auto; margin-right: auto; object-fit: contain; } /* archive */ body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products h1.woocommerce-products-header__title.page-title { margin: 0 0 22px; font-size: 28px; } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products .woocommerce ul.products.elementor-grid, body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products .products { grid-template-columns: minmax(0, 1fr); grid-column-gap: 0; grid-row-gap: 24px; padding: 0 5px 5px 0; } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product { box-shadow: 5px 5px 0 var(--dwc-ink); } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product a.button, body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product a.button.add_to_cart_button { min-height: 56px; font-size: 15px; } body.woocommerce-shop .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product.product-category > a img, body.tax-product_cat .elementor-widget-wc-archive-products.elementor-wc-products ul.products li.product.product-category > a img { max-height: 200px; } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products p.woocommerce-result-count, body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products form.woocommerce-ordering { float: none; width: 100%; margin: 0 0 14px; } body.archive.woocommerce .elementor-widget-wc-archive-products.elementor-wc-products form.woocommerce-ordering select.orderby { width: 100%; } } /* ─── 31 · COMMERCE · hide the fixed mobile menu trigger on cart, checkout, order-pay and account so it cannot overlap form fields or the order button (4 Sep 2026 audit). The WhatsApp float is already suppressed there. ─── */ body.woocommerce-cart button#dw-mm-trigger.dw-mm-trigger, body.woocommerce-checkout button#dw-mm-trigger.dw-mm-trigger, body.woocommerce-order-pay button#dw-mm-trigger.dw-mm-trigger, body.woocommerce-order-received button#dw-mm-trigger.dw-mm-trigger, body.woocommerce-account button#dw-mm-trigger.dw-mm-trigger { display: none !important; } /* ─── 32 · PRODUCT · mobile first screen: drop the breadcrumb, cap the gallery, so title, price and Add to Cart land inside the first 660px (4 Sep audit) */ @media (max-width: 767px) { body.single-product nav.woocommerce-breadcrumb { display: none; } body.single-product div.images.woocommerce-product-gallery .woocommerce-product-gallery__wrapper, body.single-product div.images.woocommerce-product-gallery .woocommerce-product-gallery__image img { max-height: 220px; object-fit: contain; } body.single-product div.images.woocommerce-product-gallery { margin-bottom: 12px; } body.single-product div.images.woocommerce-product-gallery .flex-control-thumbs { display: none; } body.single-product div.summary.entry-summary { padding-top: 12px; } body.single-product div.summary.entry-summary h1.product_title { font-size: 24px; line-height: 1.15; margin-bottom: 6px; } body.single-product div.summary.entry-summary p.price { font-size: 28px; margin-bottom: 10px; } } /* ─── 33 · PRODUCT · mobile: summary (title, price, Add to Cart) above the gallery, gallery capped hard (flexslider sets an inline height) ─────── */ @media (max-width: 767px) { body.single-product div.product { display: flex; flex-direction: column; } body.single-product div.product > div.summary.entry-summary { order: -1; } body.single-product div.product > div.images.woocommerce-product-gallery { order: 0; } body.single-product div.images.woocommerce-product-gallery, body.single-product div.images.woocommerce-product-gallery .flex-viewport, body.single-product div.images.woocommerce-product-gallery .woocommerce-product-gallery__wrapper { max-height: 260px !important; overflow: hidden; } body.single-product div.images.woocommerce-product-gallery img { max-height: 240px !important; width: auto !important; margin: 0 auto; } body.single-product div.summary.entry-summary { margin-bottom: 10px; } }