/* ========================================================================== Maayan Kalo — WordPress adaptation layer. Loads AFTER mk-theme.css. Bridges the ported Shopify design system with the live site's existing layers (Elementor kit, the published Customizer "Additional CSS" from 16.7.26, WooCommerce, plugins). Commerce pages (product / cart / checkout) are DESIGN-ONLY here: palette, type and shadows on top of the native markup. No layout overrides that could move or hide purchase controls. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Token bridge. The published Additional CSS defines the SAME variable names on :root with the old values (Playfair/Jost, old ink). It prints after theme styles, so :root fights are lost — but values set on body win by inheritance for every element on the page. This maps the old layer's own !important font rules (h1/h2/h3 { font-family: var(--mk-serif) !important }) onto the NEW fonts. -------------------------------------------------------------------------- */ body.mk-wp { --mk-serif: 'Marcellus', 'Cormorant Garamond', Georgia, serif; --mk-sans: 'Mulish', -apple-system, 'Helvetica Neue', Arial, sans-serif; --mk-cream: #faf1df; --mk-wall: #f2e5ca; --mk-ink: #23150e; --mk-ochre: #a97d3a; --mk-muted: #6b5142; --mk-track: 0.22em; --mk-border: rgba(35, 21, 14, 0.14); --mk-shadow: 0 3px 8px rgba(35, 21, 14, 0.12), 0 22px 40px -16px rgba(35, 21, 14, 0.28), 0 54px 90px -34px rgba(35, 21, 14, 0.5); --mk-shadow-hover: 0 5px 12px rgba(35, 21, 14, 0.16), 0 32px 56px -18px rgba(35, 21, 14, 0.34), 0 78px 120px -40px rgba(35, 21, 14, 0.6); font-family: var(--font-body); } /* Headings across the whole site (incl. Woo pages) speak Marcellus. */ body.mk-wp h1, body.mk-wp h2, body.mk-wp h3, body.mk-wp .product_title, body.mk-wp .woocommerce-loop-product__title { font-family: var(--font-display); } /* -------------------------------------------------------------------------- 2. Sticky header vs. the WP admin bar. -------------------------------------------------------------------------- */ body.admin-bar .mk-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .mk-header { top: 46px; } } /* -------------------------------------------------------------------------- 3. Hello Elementor / Elementor leftovers around our templates. -------------------------------------------------------------------------- */ .mk-wp .site-header, .mk-wp .site-footer { display: none; } /* parent theme fallbacks, if ever printed */ /* Pages still rendered by Elementor (tattoos, murals, legacy) keep their own content; they just get our header/footer + the wall. Give their first section breathing room under the sticky header. */ .mk-wp .elementor-location-header { display: none; } /* the old header template, if Elementor prints it */ /* -------------------------------------------------------------------------- 4. WooCommerce — design-only warmth on native markup. -------------------------------------------------------------------------- */ /* Buttons: ink, uppercase, ochre on hover — same language as .mk-button. Layout (size/position/display) untouched. */ body.mk-wp a.button, body.mk-wp button.button, body.mk-wp input.button, body.mk-wp a.button.alt, body.mk-wp button.button.alt, body.mk-wp input.button.alt, body.mk-wp #respond input#submit, body.mk-wp .single_add_to_cart_button.button, body.mk-wp .single_add_to_cart_button, body.mk-wp #place_order, body.mk-wp #place_order.button.alt, body.mk-wp .wc-block-components-button { background-color: var(--mk-ink); color: var(--mk-cream); font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; border-radius: 0; transition: background-color 0.3s; /* Only the colours were ever set here, so these inherited WooCommerce's own padding and came out 36px tall on a phone — under the 44px a thumb needs, on the one button the whole shop depends on (16.8.26). */ min-height: 3rem; padding-top: 0.9375rem; padding-bottom: 0.9375rem; } body.mk-wp a.button:hover, body.mk-wp button.button:hover, body.mk-wp input.button:hover, body.mk-wp a.button.alt:hover, body.mk-wp button.button.alt:hover, body.mk-wp input.button.alt:hover, body.mk-wp .single_add_to_cart_button.button:hover, body.mk-wp #place_order.button.alt:hover, body.mk-wp .wc-block-components-button:hover { background-color: var(--mk-ochre); color: var(--mk-cream); } /* Product page: title leads, price quiet, medium-style meta in ochre. */ .mk-wp.single-product .product_title { text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.05; } .mk-wp.single-product .posted_in, .mk-wp.single-product .sku_wrapper { text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; font-weight: 600; /* --mk-ochre is 2.96:1 on the wall — below AA at 11px (17.8.26). */ color: var(--mk-ochre-deep); } /* Zoom badge that mk-theme.js pins onto the native product gallery. */ .mk-zoom-badge--woo { position: absolute; bottom: 14px; right: 14px; z-index: 9; opacity: 1; transform: none; border: 0; cursor: zoom-in; } /* Forms (checkout/cart/account): warm fields, no stark white boxes. */ body.mk-wp form .form-row input.input-text, body.mk-wp form .form-row textarea, body.mk-wp form .form-row select { background-color: rgba(250, 241, 223, 0.6); border: 1px solid rgba(35, 21, 14, 0.18); color: var(--mk-ink); } /* ---- The checkout fields, for real this time ---- The rule below was written first and LOST. Verified on the live checkout: every field was still 14px. The checkout is rendered by Elementor's WooCommerce Checkout Page widget, whose stylesheet sets the size through `.elementor-widget-woocommerce-checkout-page .woocommerce #customer_details .form-row …` — an ID selector no class-based rule of ours can outrank. This is the one place in the theme that earns `!important`. Under 16px, Safari on iOS zooms the page in on focus and never comes back, so a buyer ends up dragging a magnified form around the screen while paying. The trade-off is not close. */ body.mk-wp #customer_details .form-row input.input-text, body.mk-wp #customer_details .form-row textarea, body.mk-wp #customer_details .form-row select, body.mk-wp #order_review input.input-text, body.mk-wp .woocommerce-checkout .form-row input.input-text, body.mk-wp .woocommerce-checkout .form-row textarea, body.mk-wp .woocommerce-checkout .form-row select, body.mk-wp .woocommerce-checkout .select2-selection__rendered { font-size: 1rem !important; } /* ---- 16px on every field a customer types into ---- All eleven checkout fields rendered at 14px. Safari on iOS zooms the page in whenever a field under 16px takes focus and never zooms back out, so a buyer filling in their address ends up dragging a magnified, half-visible form around the screen — mid-purchase (found on the live checkout, 16.8.26). 16px is the threshold; this only raises it, nothing else moves. */ body.mk-wp form .form-row input.input-text, body.mk-wp form .form-row textarea, body.mk-wp form .form-row select, body.mk-wp .woocommerce input.input-text, body.mk-wp .wc-block-components-text-input input, body.mk-wp .select2-container--default .select2-selection--single .select2-selection__rendered, body.mk-wp .select2-container--default .select2-search--dropdown .select2-search__field, body.mk-wp .woocommerce-cart-form input, body.mk-wp #coupon_code { font-size: 1rem; } /* Comfortable height for the same fields, so a thumb lands cleanly. */ body.mk-wp form .form-row input.input-text, body.mk-wp form .form-row select, body.mk-wp .select2-container--default .select2-selection--single { min-height: 2.875rem; } /* ---- The cart's two smallest controls ---- Quantity came out 51x28 at 14px, and the × that removes a line was ELEVEN pixels wide — on the page where a buyer corrects a mistake before paying (live cart, 16.8.26). */ /* Matched on the input itself: `.quantity .qty` caught the product page but not the cart table, where the field stayed 51x28 at 14px (measured live, 16.8.26). The class is on the input in every WooCommerce template. */ body.mk-wp input.qty { font-size: 1rem; min-height: 2.75rem; padding: 0.25rem 0.375rem; } body.mk-wp .product-remove a, body.mk-wp .woocommerce-cart-form .product-remove a.remove { width: 2.75rem; height: 2.75rem; line-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.375rem; } /* Cart/checkout panels: cream, hairlines, ochre links. */ body.mk-wp table.shop_table { background: rgba(250, 241, 223, 0.5); border-color: var(--mk-border); } body.mk-wp.woocommerce-page a:not(.button):not(.mk-button) { color: var(--mk-ochre-deep); /* the light ochre reads 2.96:1 — fails AA (17.8.26) */ } /* Product price: quiet, uppercase-adjacent tone instead of the loud default. */ body.mk-wp.single-product .price { color: var(--mk-muted); } /* -------------------------------------------------------------------------- 5. The plaster wall behind everything -------------------------------------------------------------------------- */ body.mk-wp { background-color: var(--mk-wall); } /* Safari safety: keep the modal in its own compositing context. */ .mk-modal, .mk-lb { isolation: isolate; } /* -------------------------------------------------------------------------- 6. Contact — form beside the King Fisher painting -------------------------------------------------------------------------- */ .mk-contact__inner--wide { max-width: 64rem; } .mk-contact__split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } @media (min-width: 800px) { .mk-contact__split { grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; } } .mk-contact__art { border-radius: 0.5rem; overflow: hidden; box-shadow: var(--shadow-float); max-width: 24rem; justify-self: center; } .mk-contact__art img { display: block; width: 100%; height: auto; } /* -------------------------------------------------------------------------- 6b. Gallery — single column, each painting at its true resolution, image after image down the screen. Name → original status → price beneath. (Yael, 23.7.26: never crop; image + name read together.) -------------------------------------------------------------------------- */ .mk-stack { max-width: 52rem; margin: 0 auto; display: flex; flex-direction: column; gap: 5.5rem; } /* Mobile gallery: each painting bleeds edge-to-edge (pilpeled principle, natural ratio kept — the width is the full screen, no crop). */ @media (max-width: 640px) { .mk-stack { gap: 4rem; } .mk-stack__media { margin-left: -1.5rem; margin-right: -1.5rem; border-radius: 0; } } .mk-stack__item { display: block; text-decoration: none; color: inherit; } .mk-stack__media { border-radius: 0.4rem; overflow: hidden; background: rgba(35, 21, 14, 0.05); box-shadow: var(--shadow-float); transition: box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .mk-stack__item:hover .mk-stack__media { transform: translateY(-4px); box-shadow: var(--shadow-float-hover); } .mk-stack__media img { width: 100%; height: auto; display: block; } /* natural ratio, no crop */ .mk-stack__cap { margin-top: 1.4rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; } .mk-stack__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.625rem; color: var(--mk-ink); transition: color 0.3s; } .mk-stack__item:hover .mk-stack__title { transform: scale(1.03); } .mk-stack__title { display: inline-block; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); } @media (prefers-reduced-motion: reduce) { .mk-stack__item:hover .mk-stack__title { transform: none; } } .mk-stack__status { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.75rem; font-weight: 600; } /* Availability is a fact, not an alert (Yael, 16.8.26: "ORIGINAL SOLD — לא באדום… הצבעים לא מחמיאים"). It used to be a stock-green (#3f6b43, a colour that appears nowhere else in the brand) against clay red — the vocabulary of an e-commerce stock badge, on a warm cream wall. The words already say which is which, so the type carries it: available reads at full strength, sold recedes. Also drops a red/green pair no colour-blind visitor could tell apart. */ .mk-stack__status--available { color: var(--mk-ink-soft); } .mk-stack__status--sold { color: var(--mk-muted); font-weight: 500; } .mk-stack__price { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8125rem; color: var(--mk-ink); } /* -------------------------------------------------------------------------- 6b-bis. Upright display headings — the specificity fix (Yael, 6.8.26). The Elementor kit rule is `.elementor-kit-13 h3 { font-style: italic }` (0,1,1). Our `.mk-jg__title { font-style: normal }` in mk-theme.css is only (0,1,0), so it LOST and the live card titles stayed faux-slanted even after v2.3.0 shipped — verified on the live DOM, not assumed. Scoping to `body.mk-wp` raises us to (0,2,1) and settles it for every heading we render. -------------------------------------------------------------------------- */ body.mk-wp .mk-jg__title, body.mk-wp .mk-stack__title, body.mk-wp .mk-project__title, body.mk-wp .mk-section-title, body.mk-wp .mk-pdp__title, body.mk-wp .mk-page-title, body.mk-wp .mk-about__title, body.mk-wp .mk-artist__title, body.mk-wp .mk-signup__title, body.mk-wp .mk-modal__title { font-style: normal; } /* The same kit rule was also colouring card titles: the live DOM measured `rgb(143, 141, 131)` on `.mk-jg__title`, 2.54:1 against the wall, so the name of the painting was the least legible text on its own card (UX audit, 13.8.26). Same (0,2,1) scope, so it settles with the italic fix above. */ body.mk-wp .mk-jg__title { color: var(--mk-ink); } /* -------------------------------------------------------------------------- 6c. Originals-only filter — see .mk-filter in mk-theme.css. The grid itself gets a slightly narrower measure than the page so a single wide painting on its own row keeps a margin of wall around it instead of running the full width of the screen (Yael, 6.8.26: "שיהיה קצת שוליים עם אוויר"). -------------------------------------------------------------------------- */ #mk-collection-grid { max-width: 68rem; margin: 0 auto; } @media (max-width: 640px) { #mk-collection-grid { max-width: none; } } /* -------------------------------------------------------------------------- 7. Projects grid — keep each image at its own natural proportion so the page feels composed, not cropped (Yael, 23.7.26). -------------------------------------------------------------------------- */ .mk-projects-grid { display: grid; grid-template-columns: 1fr; gap: 3.5rem 3rem; max-width: 62rem; margin: 0 auto; align-items: start; } @media (min-width: 720px) { .mk-projects-grid { grid-template-columns: 1fr 1fr; } } .mk-project__media { border-radius: 0.4rem; overflow: hidden; background: rgba(35, 21, 14, 0.05); box-shadow: var(--shadow-float); transition: box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .mk-project:hover .mk-project__media { transform: translateY(-4px); box-shadow: var(--shadow-float-hover); } .mk-project__media img { width: 100%; height: auto; object-fit: contain; display: block; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .mk-project:hover .mk-project__media img { transform: scale(1.03); } .mk-project__cap { margin-top: 1rem; text-align: center; } .mk-project__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.1875rem; color: var(--mk-ink); } .mk-project__meta { margin: 0.35rem 0 0; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem; font-weight: 600; color: var(--mk-muted); } .mk-commission2__card--form { max-width: 44rem; } .mk-commission2__card--form .mk-contact__form { text-align: left; margin-top: 1rem; } .mk-commission2__card--form .mk-contact__row { display: grid; grid-template-columns: 1fr; gap: 0; } @media (min-width: 600px) { .mk-commission2__card--form .mk-contact__row { grid-template-columns: 1fr 1fr; gap: 1.75rem; } } .mk-commission2__card--form [style*="margin-top"] { text-align: center; } /* -------------------------------------------------------------------------- 8. Product page — dress the NATIVE add-to-cart form in the Shopify look. Colors, spacing and typography only; no display:none on any control. -------------------------------------------------------------------------- */ .mk-pdp__notices { max-width: var(--mk-maxw); margin: 0 auto; padding: 0 1.5rem; } /* A tall canvas used to fill the whole screen with nothing around it. Cap the painting at most of the viewport height so there is always wall above and below it (Yael, 6.8.26). Ratio is kept — width follows the cap, never a crop. */ .mk-pdp__media, .mk-pdp__zoom { width: -moz-fit-content; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; } .mk-pdp__media img { width: auto; max-width: 100%; max-height: 78vh; } @media (max-width: 899px) { .mk-pdp__media img { max-height: 68vh; } } /* The original canvas line, right under the medium: is it still available and how big is it (Yael, 6.8.26). The size shows only for paintings whose canvas measurement is on record in mk_original_sizes(); nothing is ever guessed. */ .mk-pdp__original { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0.875rem 0 0; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem; font-weight: 600; } .mk-pdp__original-dot { width: 0.375rem; height: 0.375rem; border-radius: 999px; flex: 0 0 auto; } /* Same treatment as the gallery label: the product page carried the identical red/green pair, so fixing only the gallery would have put the red back one click later (16.8.26). */ .mk-pdp__original--available { color: var(--mk-ink-soft); } .mk-pdp__original--available .mk-pdp__original-dot { background: var(--mk-ink-soft); } .mk-pdp__original--sold { color: var(--mk-muted); } .mk-pdp__original--sold .mk-pdp__original-dot { background: var(--mk-muted); } .mk-pdp__original-size { color: var(--mk-muted); font-weight: 400; letter-spacing: 0.16em; padding-left: 0.5rem; border-left: 1px solid var(--mk-line); } .mk-pdp__buy .price { font-family: var(--font-display); font-size: 1.625rem; color: var(--mk-ink); } .mk-pdp__buy .price del { opacity: 0.5; } .mk-pdp__buy table.variations { width: 100%; border: 0; margin: 0 0 1rem; } .mk-pdp__buy table.variations th.label { display: none; } .mk-pdp__buy table.variations td { padding: 0; border: 0; } /* woovr radio rows (WPClever "Variations as Radio Buttons") → the mk-size row language from Shopify. The plugin's own JS keeps working; we only skin. */ .mk-pdp__buy .woovr-variations { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; } .mk-pdp__buy .woovr-variation { display: flex; align-items: center; gap: 1rem; border: 1px solid rgba(35, 21, 14, 0.18); border-radius: 0.375rem; background: rgba(250, 241, 223, 0.4); padding: 0.75rem 1rem; margin: 0; cursor: pointer; transition: border-color 0.3s, background-color 0.3s; } .mk-pdp__buy .woovr-variation:hover { border-color: rgba(169, 125, 58, 0.6); } .mk-pdp__buy .woovr-variation.woovr-variation-active { border-color: var(--mk-ink); background: rgba(250, 241, 223, 0.85); } .mk-pdp__buy .woovr-variation-image img { border-radius: 0.25rem; display: block; } .mk-pdp__buy .woovr-variation-info { display: flex; flex-direction: column; gap: 0.2rem; } .mk-pdp__buy .woovr-variation-name { font-family: var(--font-body); font-size: 0.9375rem; color: var(--mk-ink); } .mk-pdp__buy .woovr-variation-price, .mk-pdp__buy .woovr-variation-price .price { font-family: var(--font-display); font-size: 1.0625rem; color: var(--mk-ink); } .mk-pdp__buy .woovr-variation-price del { opacity: 0.5; } .mk-pdp__buy .woovr-variation-selector { flex: 0 0 auto; } /* The one-of-a-kind row, told apart from the prints at a glance (Yael, 6.8.26). Matched on the plugin's own data-attrs payload, so this is pure skin: no markup added, no plugin option changed, and a painting with no original just renders three ordinary print rows. */ .mk-pdp__buy .woovr-variation[data-attrs*="Original"] { background: linear-gradient(90deg, rgba(169, 125, 58, 0.16), rgba(169, 125, 58, 0.07)); border-color: rgba(169, 125, 58, 0.55); box-shadow: inset 3px 0 0 0 var(--mk-ochre); } .mk-pdp__buy .woovr-variation[data-attrs*="Original"]:hover { border-color: var(--mk-ochre); } .mk-pdp__buy .woovr-variation[data-attrs*="Original"].woovr-variation-active { border-color: var(--mk-ochre-deep); background: linear-gradient(90deg, rgba(169, 125, 58, 0.26), rgba(169, 125, 58, 0.12)); } .mk-pdp__buy .woovr-variation[data-attrs*="Original"] .woovr-variation-name { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } /* The original's own canvas size sits next to its name, the same way the print rows carry theirs (Yael, 6.8.26). The value is written onto .mk-pdp__buy as --mk-original-size by the template; a painting whose canvas measurement is not on record renders no chip at all rather than an empty one. */ .mk-pdp__buy .woovr-variation[data-attrs*="Original"] .woovr-variation-name::after { content: var(--mk-original-size, ''); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mk-cream); background: var(--mk-ochre-deep); border-radius: 999px; white-space: nowrap; padding: 0.1875rem 0.5rem; } .mk-pdp__buy:not([style*="--mk-original-size"]) .woovr-variation[data-attrs*="Original"] .woovr-variation-name::after { content: none; } /* Double size-picker fix (Yael, 26.7.26). When woovr renders its radio rows they ARE the picker, so the native synced as the underlying field (each radio carries data-attrs and drives it), so hiding it is design-only — the value still submits and the buy mechanism is untouched. This is the ONLY place we hide a native control, and it is scoped with :has() so it applies *only* when the radios exist; where woovr is off (or :has unsupported) the fallback (when the radio plugin is off): warm field, no stark white/gray box behind it. */ .mk-pdp__buy table.variations select { width: 100%; padding: 0.75rem 1rem; border: 1px solid rgba(35, 21, 14, 0.18); border-radius: 0.375rem; background-color: rgba(250, 241, 223, 0.6); color: var(--mk-ink); font-family: var(--font-body); } .mk-pdp__buy table.variations td.value { background: transparent; } .mk-pdp__buy .single_add_to_cart_button { width: auto; min-width: 14rem; padding: 0.9375rem 1.875rem; font-size: 0.75rem; letter-spacing: var(--mk-track); font-weight: 600; } .mk-pdp__buy .woocommerce-variation-description { color: var(--mk-muted); font-size: 0.9375rem; } .mk-pdp__buy .reset_variations { color: var(--mk-muted); font-size: 0.8125rem; } /* -------------------------------------------------------------------------- WhatsApp float (QL WhatsApp plugin) — same button, brand language: ink circle, ochre on hover, instead of the stock green that fights the wall. -------------------------------------------------------------------------- */ body.mk-wp .qlwapp__button, body.mk-wp .qlwapp .qlwapp-toggle { background-color: var(--mk-ink) !important; color: var(--mk-cream) !important; border: 1px solid rgba(250, 241, 223, 0.14) !important; box-shadow: 0 12px 30px -12px rgba(35, 21, 14, 0.5) !important; transition: background-color 0.3s, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } body.mk-wp .qlwapp__button:hover, body.mk-wp .qlwapp .qlwapp-toggle:hover { background-color: var(--mk-ochre) !important; transform: translateY(-2px); } body.mk-wp .qlwapp__button .qlwapp__icon, body.mk-wp .qlwapp__icon { color: var(--mk-cream) !important; } /* …and then it turned out the plugin button was never given a number: it rendered as an `` with no href and no chat panel, so clicking it did nothing, on every page, while the checkout was telling buyers to message on WhatsApp (UX audit, 13.8.26). The theme now renders its own `.mk-whatsapp` float from mk_whatsapp_number(), so the dead one is hidden here. To go back to the plugin: give it a number in Settings → Social Chat, delete this rule, and remove the float from footer.php. Better still, deactivate the plugin — nothing else on the site uses it. */ body.mk-wp .qlwapp, body.mk-wp .qlwapp__container { display: none !important; } /* -------------------------------------------------------------------------- Commerce CTAs — the one button that carries the money (UX audit, 13.8.26). Elementor Pro's Woo widgets hardcode #5bc0de on the two buttons that matter: `.elementor-widget-woocommerce-cart … .checkout-button` and `.elementor-widget-woocommerce-checkout-page … #place_order` — (0,4,x), so they beat the `body.mk-wp a.button.alt` rule in section 4 above, and the checkout CTA came out sky blue on a cream wall. The Side Cart plugin paints its own footer button a saturated yellow from its settings. Result was three different colours for "pay" across three screens, none of them the brand's. Ink, ochre on hover, same language as .mk-button. Layout is left alone. -------------------------------------------------------------------------- */ body.mk-wp .wc-proceed-to-checkout .checkout-button, body.mk-wp .elementor-widget-woocommerce-cart .woocommerce .wc-proceed-to-checkout .checkout-button, body.mk-wp .woocommerce-checkout #payment #place_order, body.mk-wp .elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment #place_order, body.mk-wp .xoo-wsc-ft-btn, body.mk-wp .xoo-wsc-footer .xoo-wsc-btn { background-color: var(--mk-ink) !important; border-color: var(--mk-ink) !important; color: var(--mk-cream) !important; border-radius: 0 !important; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; transition: background-color 0.3s !important; } body.mk-wp .wc-proceed-to-checkout .checkout-button:hover, body.mk-wp .elementor-widget-woocommerce-cart .woocommerce .wc-proceed-to-checkout .checkout-button:hover, body.mk-wp .woocommerce-checkout #payment #place_order:hover, body.mk-wp .elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment #place_order:hover, body.mk-wp .xoo-wsc-ft-btn:hover, body.mk-wp .xoo-wsc-footer .xoo-wsc-btn:hover { background-color: var(--mk-ochre) !important; border-color: var(--mk-ochre) !important; color: var(--mk-cream) !important; } /* The side cart stacks three buttons of equal weight. Only one of them is "pay", so everything that is not the checkout button steps back to an outline and the eye lands where the money is. Matched by exclusion rather than by class name: the plugin names only `-checkout` in its own stylesheet. */ body.mk-wp .xoo-wsc-footer .xoo-wsc-ft-btn:not(.xoo-wsc-ft-btn-checkout) { background-color: transparent !important; color: var(--mk-ink) !important; border: 1px solid rgba(35, 21, 14, 0.28) !important; } body.mk-wp .xoo-wsc-footer .xoo-wsc-ft-btn:not(.xoo-wsc-ft-btn-checkout):hover { background-color: rgba(35, 21, 14, 0.06) !important; color: var(--mk-ink) !important; border-color: var(--mk-ink) !important; } /* Header nav links: comfortable touch targets (the labels stay small). */ .mk-nav a, .mk-nav__btn { padding: 0.75rem 0.125rem; } /* -------------------------------------------------------------------------- Mobile polish — the paintings are swiped by touch; keep the chrome light. -------------------------------------------------------------------------- */ @media (max-width: 640px) { /* Smaller, quieter arrows — swipe is the primary gesture on touch. */ .mk-cf__nav { width: 2.5rem; height: 2.5rem; } .mk-cf__nav svg { width: 1rem; height: 1rem; } .mk-cf__nav--prev { left: 0.4rem; } .mk-cf__nav--next { right: 0.4rem; } .mk-hero-id .mk-hero__tagline { font-size: 1.1875rem; margin-top: 2.5rem; } .mk-pdp__grid { gap: 1.75rem; } .mk-pdp__info { max-width: none; } .mk-pdp__buy .single_add_to_cart_button { width: 100%; } .mk-contact__art { max-width: 100%; } .mk-commission2__card { padding: 2.25rem 1.5rem; } .mk-projects-grid { gap: 2.5rem; } } /* -------------------------------------------------------------------------- Mobile product page = a selling page (Yael, 23.7.26): the painting, the title and the PRICE + purchase come first; the story follows below. DOM order untouched — flex order only, so the native form is intact. -------------------------------------------------------------------------- */ @media (max-width: 899px) { .mk-pdp { padding-top: calc(var(--mk-header-h) + 0.75rem); } .mk-pdp__info { display: flex; flex-direction: column; } .mk-pdp__back { order: 1; } .mk-pdp__title { order: 2; } .mk-pdp__medium { order: 3; } .mk-pdp__original { order: 3; } .mk-pdp__buy { order: 4; margin-top: 1.5rem; } .mk-trust { order: 5; } .mk-pdp__divider { order: 6; } .mk-pdp__story { order: 7; margin-top: 0; } } /* Never allow sideways page wobble on touch. */ .mk-wp { overflow-x: clip; } /* Related works — three across */ .mk-related-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 700px) { .mk-related-grid { grid-template-columns: 1fr 1fr 1fr; } } .mk-related-grid .mk-jg__item { text-decoration: none; color: inherit; } /* -------------------------------------------------------------------------- Project pages (/projects//) Mixed aspect ratios, so nothing is cropped: a masonry column flow lets portrait and landscape frames sit together without a common height. -------------------------------------------------------------------------- */ .mk-proj { padding-top: calc(var(--mk-header-h) + 1.5rem); } /* .mk-inner carries max-width only; every other page gets its side padding from the .mk-section wrapper around it. These sections have no such wrapper, so without this the title and the photographs run off the left edge of a phone (Yael, 17.8.26). Same values as .mk-section, so the gutter matches the rest of the site. */ .mk-proj > section, .mk-proj > nav { padding-left: 1.5rem; padding-right: 1.5rem; } @media (min-width: 750px) { .mk-proj > section, .mk-proj > nav { padding-left: 2.5rem; padding-right: 2.5rem; } } .mk-proj__head { padding-bottom: 1.75rem; } .mk-proj__head .mk-pdp__back { margin-bottom: 1.75rem; } .mk-proj__title { font-family: var(--font-display); font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.12; font-size: clamp(1.75rem, 7vw, 3rem); color: var(--mk-ink); margin: 0; } .mk-proj__meta { margin: 0.75rem 0 0; text-transform: uppercase; letter-spacing: var(--mk-track); font-size: 0.6875rem; font-weight: 600; color: var(--mk-ochre-deep); } .mk-proj__dot { opacity: 0.5; margin: 0 0.15em; } /* ---- The opener ---- Two bugs lived here, one after the other. First the photograph was STRETCHED: `.mk-shot img{width:100%}` further down and `.mk-shot--lead img{width:auto}` here are the same specificity (0,1,1), so the later one won, the opener got the full column width together with a 76vh height cap, and `object-fit` at its default `fill` squashed the picture into that box. Measured live 17.8.26: Shenkin's square opener rendered 1280x684 (86% too wide), Ember's portrait 190% too wide. Fitting the image inside the box then exposed the second bug: `.mk-shot` carries the frame (tinted panel, radius, floating shadow), so a full-width button around a narrower picture drew a wide empty panel with the photograph marooned in the middle of it (Yael, 18.8.26). The frame has to be the picture. So the BUTTON is sized from the shot's own aspect ratio — the same device `.mk-wall` already uses for the gallery — and the image simply fills it. Height can never exceed the 76vh cap, width never exceeds the column or 64rem, and the ratio is always true. `--mk-lead-r` is written inline by parts/project-single.php. */ .mk-proj__lead-shot { padding-bottom: 3rem; } .mk-proj .mk-shot--lead { width: min(100%, 64rem, calc(76vh * var(--mk-lead-r, 1.5))); margin-inline: auto; } .mk-proj .mk-shot--lead img { display: block; width: 100%; height: auto; margin: 0; } .mk-proj__story { padding-bottom: 3.5rem; } .mk-proj__prose { max-width: 38rem; margin: 0 auto; } .mk-proj__prose p { margin: 0 0 1.1rem; color: var(--mk-ink-soft); font-size: 1rem; line-height: 1.8; } .mk-proj__prose p:last-child { margin-bottom: 0; } /* The rest of the set. */ .mk-proj__set { padding-bottom: 3.5rem; } .mk-shots { columns: 1; column-gap: 1.25rem; } @media (min-width: 45rem) { .mk-shots { columns: 2; column-gap: 1.5rem; } } @media (min-width: 64rem) { .mk-shots { columns: 3; column-gap: 1.75rem; } } .mk-shot { display: block; width: 100%; padding: 0; margin: 0 0 1.25rem; border: 0; background: rgba(35, 21, 14, 0.05); border-radius: 0.4rem; overflow: hidden; cursor: zoom-in; box-shadow: var(--shadow-float); transition: box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); break-inside: avoid; -webkit-column-break-inside: avoid; } @media (min-width: 45rem) { .mk-shot { margin-bottom: 1.5rem; } } @media (min-width: 64rem) { .mk-shot { margin-bottom: 1.75rem; } } .mk-shot img { display: block; width: 100%; height: auto; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .mk-shot:hover { box-shadow: var(--shadow-float-hover); transform: translateY(-3px); } .mk-shot:hover img { transform: scale(1.03); } .mk-shot:focus-visible { outline: 2px solid var(--mk-ochre); outline-offset: 3px; } /* Prev / next. */ .mk-proj__pager { border-top: 1px solid var(--mk-line); padding-top: 2rem; } .mk-proj__pager-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .mk-proj__pager-link { display: block; text-decoration: none; color: var(--mk-ink); } .mk-proj__pager-link--next { text-align: right; } .mk-proj__pager-dir { display: block; text-transform: uppercase; letter-spacing: var(--mk-track); font-size: 0.6875rem; font-weight: 600; color: var(--mk-muted); margin-bottom: 0.4rem; /* was 0.62rem = 9.9px (17.8.26) */ } .mk-proj__pager-name { font-family: var(--font-display); font-style: normal; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9375rem; line-height: 1.3; border-bottom: 1px solid transparent; transition: border-color 0.3s; } .mk-proj__pager-link:hover .mk-proj__pager-name { border-bottom-color: var(--mk-ink); } /* Index cards became links; keep the caption styling and kill the underline. */ .mk-project__link { display: block; text-decoration: none; color: inherit; } .mk-project__link:focus-visible { outline: 2px solid var(--mk-ochre); outline-offset: 6px; border-radius: 0.4rem; } .mk-project__count { display: block; margin-top: 0.45rem; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.6875rem; font-weight: 600; color: var(--mk-ochre-deep); /* was 0.6rem = 9.6px (17.8.26) */ } /* ========================================================================== The money pages, matched to the site (design audit 17.8.26). Cart and checkout are rendered by Elementor's Woo widgets, whose stylesheets carry widget- and ID-level specificity the theme's earlier rules LOST to — every rule below was first verified failing on the live computed styles (blue links at 1.86:1, cold grey fields, Dosis headings, 28px quantity field, 42px PLACE ORDER). !important here is the same trade already made for the checkout font-size in section 4: these selectors cannot be outranked cleanly, and this is where the money moves. ========================================================================== */ /* Cart links spoke Elementor blue: the name of the painting being bought measured rgb(91,192,222) on cream — 1.86:1, the least legible text in the whole purchase. Deep ochre, the brand's own link colour at AA strength. */ body.mk-wp.woocommerce-cart .shop_table a:not(.button), body.mk-wp .woocommerce-cart-form a:not(.button), body.mk-wp .cart_totals a:not(.button), body.mk-wp .woocommerce-checkout a:not(.button):not(#place_order) { color: var(--mk-ochre-deep) !important; } /* Apply coupon / Update cart: grey text in a sky-blue outline, neither from the brand. Quiet ink ghost buttons — the .mk-button--ghost language. */ body.mk-wp .woocommerce-cart .coupon .button, body.mk-wp button[name="update_cart"], body.mk-wp button[name="apply_coupon"] { background-color: transparent !important; color: var(--mk-ink) !important; border: 1px solid rgba(35, 21, 14, 0.32) !important; border-radius: 0 !important; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; } body.mk-wp .woocommerce-cart .coupon .button:hover, body.mk-wp button[name="update_cart"]:hover:not(:disabled), body.mk-wp button[name="apply_coupon"]:hover { background-color: rgba(35, 21, 14, 0.06) !important; color: var(--mk-ink) !important; border-color: var(--mk-ink) !important; } /* The cart quantity measured 51x28 at 14px on the live cart — the input.qty rule in section 4 exists on the live site and loses the cascade here. */ body.mk-wp .woocommerce-cart-form input.qty, body.mk-wp input.qty { font-size: 1rem !important; min-height: 2.75rem !important; } /* The remove-x was default black; ink, like every other control. */ body.mk-wp .product-remove a, body.mk-wp .woocommerce-cart-form .product-remove a.remove { color: var(--mk-ink) !important; } body.mk-wp .product-remove a:hover { color: var(--mk-clay) !important; background: none !important; } /* PLACE ORDER measured 293x42 on a phone — under the 44px floor, on the button that closes the sale. */ body.mk-wp .woocommerce-checkout #payment #place_order, body.mk-wp .elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment #place_order { min-height: 3rem !important; padding-top: 0.9375rem !important; padding-bottom: 0.9375rem !important; } /* "Billing Details" and "Your Order" rendered in Dosis 22px — a fourth typeface that appears nowhere else on the site — while "Ship to a different address?" was already Prata. One display voice for all three. */ body.mk-wp .woocommerce-checkout h3, body.mk-wp #order_review_heading { font-family: var(--font-display) !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.375rem; color: var(--mk-ink) !important; } /* The checkout fields came out cold grey (bg rgb(249,250,250), border #69727d) — the warm rule in section 4 loses to the checkout widget. */ body.mk-wp .woocommerce-checkout .form-row input.input-text, body.mk-wp .woocommerce-checkout .form-row textarea, body.mk-wp .woocommerce-checkout .form-row select, body.mk-wp .woocommerce-checkout .select2-container--default .select2-selection--single { background-color: rgba(250, 241, 223, 0.6) !important; border: 1px solid rgba(35, 21, 14, 0.18) !important; color: var(--mk-ink) !important; } /* The Elementor cart page heads itself "Cart" — 40px sentence case, left — while every other page title on the site is centered uppercase display type. Styled to the family; the markup stays Elementor's. */ body.mk-wp.woocommerce-cart h1 { text-transform: uppercase; letter-spacing: 0.05em; text-align: center; font-size: clamp(2rem, 8vw, 3.25rem); line-height: 1.05; color: var(--mk-ink); } /* -------------------------------------------------------------------------- Side cart (xoo-wsc) — the first thing a buyer sees after "Add to cart" was a pure white panel with a black title: the only white surface and the only black text on the site (measured #fff / #000, 17.8.26). Painted cream/ink; its buttons were already branded in the commerce-CTA section above. -------------------------------------------------------------------------- */ body.mk-wp .xoo-wsc-modal .xoo-wsc-container, body.mk-wp .xoo-wsc-header, body.mk-wp .xoo-wsc-body, body.mk-wp .xoo-wsc-footer { background-color: var(--mk-cream) !important; color: var(--mk-ink) !important; } body.mk-wp .xoo-wsch-text { color: var(--mk-ink) !important; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; } body.mk-wp .xoo-wsc-body a { color: var(--mk-ochre-deep) !important; } body.mk-wp .xoo-wsc-header { border-bottom: 1px solid var(--mk-border); } body.mk-wp .xoo-wsc-footer { border-top: 1px solid var(--mk-border); } /* The floating basket duplicated the header cart count and sat ON the paintings: at 375 the 60px bubble covered the artwork's right edge, at 768 it hid the first work's caption (measured 17.8.26). The header CART link and the side cart itself keep working. */ body.mk-wp .xoo-wsc-basket { display: none !important; } /* -------------------------------------------------------------------------- "More from the collection" — three works, three natural heights, so the captions landed 182px apart (tops measured 173/243/355 on the live page). Each painting now hangs centered in an equal-height row and the captions share one line; the shadow moves onto the image itself (the .mk-hero2__art pattern) so no empty box ever shows. Ratios stay true — nothing is cropped. -------------------------------------------------------------------------- */ .mk-related-grid .mk-jg__media { background: none; box-shadow: none; border-radius: 0; overflow: visible; height: 17rem; display: flex; align-items: center; justify-content: center; } .mk-related-grid .mk-jg__media img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0.3125rem; box-shadow: var(--shadow-float); transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .mk-related-grid .mk-jg__item:hover .mk-jg__media { box-shadow: none; } .mk-related-grid .mk-jg__item:hover .mk-jg__media img { box-shadow: var(--shadow-float-hover); } /* ========================================================================== Finishing pass (18.8.26) — measured at 375 and 1440 on the live site. The system, not the pixels. Three inventories had drifted far enough that the site was designed but not systematised: 45 distinct font sizes (eleven of them between 9.3px and 12px, ten between 14.4px and 17px), 17 tracking values and 15 line-heights. Most of the near-duplicates were arithmetic left over from the Shopify port (0.7188rem, 0.9062rem, 0.9688rem, 1.0312rem — px x 0.625 kept to four decimals), not decisions anyone made. Those are now snapped to a scale in place: nothing moved more than ~1px below 22px, so the page looks the same and the system finally holds. Sizes: 11 12 13 15 16 17 19 22 24 26 28 30 36 38 40 44 50 52 60 70. Tracking: 0.01 0.05 0.1 0.16 0.22 0.3(4). Leading: 1.05 1.3 1.5 1.65 1.8 1.9. What follows is the part that could not be done by normalising a number. ========================================================================== */ /* ---- Text links that are only as tall as their text ---- Measured on a phone: "All projects" 96x20, "Back to the gallery" 191x24, "Read Maayan's story" 169x24 — every one of them a primary way out of the page, and all under the 44px a thumb needs. The hit area is grown with an overlay so the underline stays tight to the text and nothing shifts. */ body.mk-wp .mk-link, body.mk-wp a.mk-pdp__back { position: relative; } body.mk-wp .mk-link::after, body.mk-wp a.mk-pdp__back::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2.75rem; transform: translateY(-50%); } /* The one link that goes home was a 22x35 target on every page: the header mark is a narrow mask, and the anchor shrank to it. */ body.mk-wp .mk-header__brand { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; } /* The scroll cue on the home page measured 24x31. */ body.mk-wp .mk-open__scroll, body.mk-wp .mk-hero2__scroll { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; } /* Line-drawn fields came out 43px — one pixel under, on every form. */ body.mk-wp .mk-field input, body.mk-wp .mk-field textarea, body.mk-wp .mk-signup__form input { min-height: 2.75rem; } /* The collector-list paragraph was setting 42 characters to the line in a 384px column — under the 45 where prose starts reading comfortably. A slightly wider text track fixes it without touching the artwork beside it. */ @media (min-width: 640px) { .mk-signup__grid { grid-template-columns: 1.12fr 0.88fr; gap: 2.75rem; } } /* ========================================================================== Round 2 of the finishing pass (18.8.26) — Yael: "אין רווח בין הטקסט לכפתור", "הרבה דברים לא ממורכזים", "עמוס במובייל". ========================================================================== */ /* ---- The Elementor kit was eating every paragraph's bottom margin ---- `.elementor-kit-13 p { margin-block-end: 0px }` is the kit's global "paragraph spacing" setting. At (0,1,1) it outranks every single-class rule in this theme, and it uses the logical property, so it lands on margin-bottom. Measured live: the collector-list paragraph sat flush against its email field (gap 0), the commission paragraph sat flush against its button (gap 0) — the two places on the home page where a paragraph has to hand off to a control. This is the same family as the kit's italic-h3 rule from 6.8.26 — the fix is the same: state it at a weight the kit cannot outrank. Only the rules written as a bare class lose. Anything of ours that names an element too (`.mk-proj__prose p`) already ties the kit and wins on load order, and was measured intact — those are left alone. */ body.mk-wp .mk-commission2__lead { margin-bottom: 2rem; } body.mk-wp .mk-signup__lead { margin-bottom: 1.75rem; } body.mk-wp .mk-modal__success-title { margin-bottom: 0.75rem; } /* A call to action needs air above it whatever precedes it. The rule above restores the paragraph's own margin; this guarantees the gap even where a button follows something else. */ body.mk-wp .mk-commission3__body .mk-button, body.mk-wp .mk-commission2__card .mk-button { margin-top: 0.5rem; } /* ---- The project page could not decide where its axis was ---- Measured at 1440 on /projects/story-shenkin-64/: the title and meta started at x=73, the opening photograph at x=369, the story at x=409 and the closing card at x=403 — four different left edges down one page, with a left-aligned headline sitting over a centred photograph. Every other page head on the site (`.mk-page-head` on the gallery and the projects index) is centred, so the detail page joins them. The photograph, the story and the card were already centred; now the head agrees with them. */ .mk-proj__head { text-align: center; } .mk-proj__head .mk-pdp__back { display: inline-flex; margin-left: auto; margin-right: auto; } /* The story measure and the closing card were 608px and 620px — near-identical widths read as an accident rather than a decision. One measure. */ .mk-commission2__card { max-width: 38rem; } /* ---- The home collection on a phone (19.8.26, Yael) ---- Once each painting takes the full column, the label under it started competing with it: the name set 17px in tracked capitals ran 271px wide in a 327px column, and with the status and the price underneath it the caption block stood 78px tall — 19% of the height of the artwork. Three lines of wide-tracked capitals read loud at any size. The name keeps its display capitals but steps back to the tracking the gallery label already uses, and the two meta lines go quiet. The painting wins the block again. Sizes stay on the scale: 15 / 11. */ @media (max-width: 640px) { body.mk-wp .mk-collection-hero .mk-jg__title { font-size: 0.9375rem; letter-spacing: 0.1em; } body.mk-wp .mk-collection-hero .mk-meta2, body.mk-wp .mk-collection-hero .mk-meta2 .mk-stack__status { font-size: 0.6875rem; letter-spacing: 0.1em; } body.mk-wp .mk-collection-hero .mk-jg__cap { margin-top: 0.875rem; } /* Three works, then the door to the rest. Six full-width paintings is a long scroll to the artist section on a phone, and the section is a taste, not the collection — the button under it is the way in (Yael, 19.8.26). Desktop still shows all six as two justified rows of three. */ body.mk-wp .mk-collection-hero .mk-jg__row:nth-child(n+4) { display: none; } } /* ---- A short last row reads as composed, not as a row that ran out ---- The justified algorithm scales a full row to the container, but leftover items keep the flat target height and stack from the left. At 768 six works packed as 3 + 2 + 1 and the sixth painting rendered 284px wide against the left edge with 389px of empty wall beside it (measured 19.8.26). The script now flags that row; centring it turns the gap into a margin. */ .mk-jg__row--tail { justify-content: center; } /* ========================================================================== Selection controls — one accent for the whole site (19.8.26) ========================================================================== The shipping radios at checkout rendered in the browser's default blue (#0d6efd on Chrome), the only colour on the page outside the palette. The product-page size selector was already accented in --mk-ink, so the site had two answers and one accident. Everything now uses --mk-ochre-deep: 5.3:1 against the wall, comfortably past the 3:1 WCAG asks of a non-text control, where plain --mk-ochre sits at 3.1:1 and only just clears it. accent-color tints the native widget instead of rebuilding it with appearance:none. Woo and iCredit both bind behaviour to these inputs, and a hand-drawn replacement is how a checkout ends up with a checkbox nobody can see. The native control keeps its focus ring, its keyboard behaviour and its high-contrast-mode rendering. */ body.mk-wp input[type="radio"], body.mk-wp input[type="checkbox"] { accent-color: var(--mk-ochre-deep); width: 1.125rem; height: 1.125rem; cursor: pointer; } /* The shipping row is a 14px radio beside 15px text — a 20px target on a phone. Woo wraps the whole row in a