/** * WooCommerce + Contact Form 7 - theme integration styles. * * WooCommerce and CF7 ship their own default CSS. This file restyles their * markup with the theme design tokens (--ewut-uny-*) so shop, cart, checkout, * account, single-product and CF7 forms look native to the Uny theme - the * same visual language as the ewub-uny-builder plugin (accent buttons, * 8px radius, flex grids, project typography). * * Loaded only on WooCommerce pages and on pages that contain a CF7 form. * * @package Uny_WordPress_Theme */ /* ────────────────────────────────────────────────────────────── Layout - give WC pages the theme container + vertical rhythm ────────────────────────────────────────────────────────────── */ /* Page-content vertical rhythm is set globally in main.css (.ewut-page-content: padding 24px top / 60px bottom). No WC-specific override needed. */ /* Breadcrumb - all text dark; accent only on hover. */ .woocommerce .woocommerce-breadcrumb, .woocommerce-page .woocommerce-breadcrumb { font-size: .92em; color: var(--ewut-uny-dark); } .woocommerce .woocommerce-breadcrumb a, .woocommerce-page .woocommerce-breadcrumb a { color: var(--ewut-uny-dark); transition: color .2s; } .woocommerce .woocommerce-breadcrumb a:hover, .woocommerce-page .woocommerce-breadcrumb a:hover { color: var(--ewut-uny-accent); } /* Stock status - dark text; out-of-stock accent. */ .woocommerce div.product .stock { color: var(--ewut-uny-dark); font-weight: 500; } .woocommerce div.product .stock.out-of-stock { color: var(--ewut-uny-accent); } .woocommerce-products-header__title, .woocommerce .page-title { font-size: 2.2em; font-weight: 700; letter-spacing: -0.02em; color: var(--ewut-uny-dark); margin: 0 0 12px; } .woocommerce-result-count { font-size: 16px; color: var(--ewut-uny-dark); /* Match the ordering select height so the count text centers on the same horizontal line as the dropdown. */ line-height: 44px; margin: 0; } .woocommerce-ordering select, .woocommerce select.orderby { height: 44px; padding: 0 14px; border: 1px solid var(--ewut-uny-border); border-radius: 8px; font-family: var(--ewut-uny-font); font-size: var(--ewut-uny-fs-body); color: var(--ewut-uny-dark); background-color: var(--ewut-uny-white); cursor: pointer; } /* When rendered as a customizable select (appearance: base-select) the button is a flex row - split it so the label hugs the left and the caret sits at the right edge. */ .woocommerce-ordering select.orderby { display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* The orderby select renders with the new customizable-select engine (appearance: base-select). Its button is a flex row, so the caret lands right after the text and the popup opens left-aligned. 1) push the caret to the far right edge, 2) right-align the popup under the button. */ /* The caret itself is the masked chevron from the global `select::picker-icon` rule; this selector only positions it. `color` is deliberately NOT set here: the shape is painted with `background-color` through a mask, so a `color` declaration would do nothing but suggest it still controls the glyph. */ .woocommerce-ordering select.orderby::picker-icon { margin-left: auto; transition: transform .2s ease; } .woocommerce-ordering select.orderby:open::picker-icon { transform: rotate(180deg); } /* Popup panel - mirror the builder nav dropdown (.ewub-nav--7__dropdown): white panel, 1px border, 8px radius, 0 8px 24px rgba(0,0,0,.08) shadow, NO inner padding, min-width 200px. */ .woocommerce-ordering select.orderby::picker(select) { position-area: bottom span-left; min-width: max(200px, anchor-size(width)); margin-top: 8px; border: 1px solid var(--ewut-uny-border); border-radius: 8px; background: var(--ewut-uny-white); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); padding: 0; } /* Options - mirror the nav dropdown links: 10px 20px rows, body size, dark text, light hover bg, 1px top border between items. */ .woocommerce-ordering select.orderby option { padding: 10px 20px; font-size: var(--ewut-uny-fs-body); color: var(--ewut-uny-dark); background: var(--ewut-uny-white); transition: background .15s; } .woocommerce-ordering select.orderby option + option { border-top: 1px solid var(--ewut-uny-border); } .woocommerce-ordering select.orderby option:hover, .woocommerce-ordering select.orderby option:focus { background: var(--ewut-uny-light); } .woocommerce-ordering select.orderby option:checked { font-weight: 600; color: var(--ewut-uny-dark); } /* Hide the native customizable-select checkmark ("✓") that the base-select engine prepends to options. The nav dropdown (our styling reference) has no such marker - the active row is shown with font-weight only, so we drop the checkmark here to match. Reserving zero space keeps option text left-aligned with the button label. */ .woocommerce-ordering select.orderby option::checkmark { content: none; display: none; } /* ────────────────────────────────────────────────────────────── Product grid (shop / archive) - flex, mirrors theme post cards ────────────────────────────────────────────────────────────── */ .woocommerce ul.products, .woocommerce-page ul.products { /* gap set to 24px below; product flex-basis calc()s subtract (cols-1)*24 */ display: flex !important; flex-wrap: wrap; gap: 24px; margin: 0 0 40px; padding: 0; list-style: none; } /* WooCommerce adds a clearfix ::before/::after (content:" "; display:table) to ul.products. In a flex container those pseudo-elements become flex items, stealing grid cells and knocking the columns out of alignment. Remove them. */ .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { display: none !important; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { flex: 0 0 calc((100% - 48px) / 3); max-width: calc((100% - 48px) / 3); margin: 0 !important; width: auto !important; padding: 0; text-align: left; display: flex; flex-direction: column; } /* Column count depends on the layout: • with sidebar (.ewut-layout-sidebar present) → 2 columns • without sidebar (full-width main) → 4 columns The 3-column rule above is the safe fallback. */ .ewut-layout-sidebar .woocommerce ul.products li.product, .ewut-layout-sidebar.woocommerce ul.products li.product, .ewut-layout-sidebar__main ul.products li.product { flex-basis: calc((100% - 24px) / 2); max-width: calc((100% - 24px) / 2); } .ewut-page-content:not(:has(.ewut-layout-sidebar)) .woocommerce ul.products li.product, .ewut-page-content:not(:has(.ewut-layout-sidebar)) ul.products li.product { flex-basis: calc((100% - 72px) / 4); max-width: calc((100% - 72px) / 4); } /* Narrow screens: 4 columns -> 2 -> 1. The selectors below repeat the layout-scoped ones above on purpose. A media query adds NO specificity, so the plain `.woocommerce ul.products li.product` (two classes) lost to `.ewut-page-content:not(:has(.ewut-layout-sidebar)) ul.products li.product` (three classes plus :not/:has) and the shop stayed FOUR columns all the way down: measured at a 390px viewport the items were 99px wide with `flex: 0 0 calc(25% - 18px)`, so titles were cut to "Aura Cera..." and every Add-to-cart button wrapped onto two lines. */ @media (max-width: 1024px) { .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .ewut-layout-sidebar .woocommerce ul.products li.product, .ewut-layout-sidebar.woocommerce ul.products li.product, .ewut-layout-sidebar__main ul.products li.product, .ewut-page-content:not(:has(.ewut-layout-sidebar)) .woocommerce ul.products li.product, .ewut-page-content:not(:has(.ewut-layout-sidebar)) ul.products li.product { flex-basis: calc((100% - 24px) / 2); max-width: calc((100% - 24px) / 2); } } @media (max-width: 576px) { .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .ewut-layout-sidebar .woocommerce ul.products li.product, .ewut-layout-sidebar.woocommerce ul.products li.product, .ewut-layout-sidebar__main ul.products li.product, .ewut-page-content:not(:has(.ewut-layout-sidebar)) .woocommerce ul.products li.product, .ewut-page-content:not(:has(.ewut-layout-sidebar)) ul.products li.product { flex-basis: 100%; max-width: 100%; } } .woocommerce ul.products li.product a img, .woocommerce ul.products li.product img { width: 100%; height: auto; border-radius: 8px; margin: 0 0 16px; transition: transform .3s ease; } .woocommerce ul.products li.product a:hover img { transform: scale(1.03); } .woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0; margin: 0 0 6px; font-size: 1.1em; font-weight: 600; line-height: 1.3; color: var(--ewut-uny-dark); /* One line only - clip long titles with an ellipsis so cards of different title lengths keep an even grid. */ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--ewut-uny-accent); } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ewut-uny-dark) !important; font-size: 1em; font-weight: 600; margin: 0 0 16px; } /* Loop card price - styled like the blog post-card meta line (.ewut-post-card__meta → .8em / 400 / muted grey), just kept BELOW the title where the shop card places it. */ .woocommerce ul.products li.product .price { color: var(--ewut-uny-muted) !important; font-size: .8em; font-weight: 400; margin: 0 0 16px; } .woocommerce ul.products li.product .price del { color: var(--ewut-uny-muted); font-weight: 400; opacity: 1; } .woocommerce ul.products li.product .price ins { color: var(--ewut-uny-accent); text-decoration: none; } .woocommerce ul.products li.product .star-rating { color: var(--ewut-uny-accent); margin: 0 0 12px; font-size: .85em; } /* Star rating glyphs - force the WooCommerce icon font on the star pseudo-elements. The global `* { font-family: var(--ewut-uny-font) }` rule overrides the star span's font to Google Sans, which renders the WC star character as the literal letter "S" (→ "SSSSS"). Restore the WC font so the filled + empty stars draw correctly. */ .woocommerce .star-rating, .woocommerce .star-rating::before, .woocommerce .star-rating span::before, .woocommerce p.stars a::before { font-family: "WooCommerce" !important; } /* ── Single-product Reviews tab ──────────────────────────────── */ /* "N reviews for …" heading - match the "Related products" heading scale (1.6em / 700) instead of the oversized 44px default. */ .woocommerce #reviews #comments h2.woocommerce-Reviews-title { font-size: 1.6em; font-weight: 700; line-height: 1.3; color: var(--ewut-uny-dark); margin: 0 0 40px; } /* Review avatar - round, no padding (WC default paints a 3px pad). */ .woocommerce #reviews #comments ol.commentlist li img.avatar { border-radius: 50%; padding: 0; border: none; } /* Review card border - WC default is a 4px-radius #e1ddE7 box; use the theme border token and 8px radius to match the rest of the UI. */ .woocommerce #reviews #comments ol.commentlist li .comment-text { border: 1px solid var(--ewut-uny-border); border-radius: 8px; } /* Read-only rating stars - accent fill everywhere they're shown (review list, the summary rating under the product title, loop cards). A small letter-spacing adds a 3px gap between the glyphs, which the default WooCommerce star font packs tightly. */ .woocommerce #reviews .commentlist .star-rating, .woocommerce #reviews .commentlist .star-rating span, .woocommerce .woocommerce-product-rating .star-rating, .woocommerce .woocommerce-product-rating .star-rating span { color: var(--ewut-uny-accent); } /* Add a small gap between the glyphs. WooCommerce sizes .star-rating with a fixed em width and `overflow:hidden`, so the extra letter-spacing would clip the 5th star - widen the box (5 gaps × 3px ≈ 0.9em) and let it show. The inner span (the accent fill) inherits the same spacing so its % width still lines up. */ .woocommerce #reviews .commentlist .star-rating, .woocommerce .woocommerce-product-rating .star-rating { letter-spacing: 3px; width: 6.6em; } .woocommerce #reviews .commentlist .star-rating span, .woocommerce .woocommerce-product-rating .star-rating span { letter-spacing: 3px; } /* "Your rating" interactive star picker (p.stars): the outline stays grey at rest; accent only on hover / when a rating is chosen. */ .woocommerce p.stars a::before { color: var(--ewut-uny-grey); } .woocommerce p.stars:hover a::before, .woocommerce p.stars.selected a.active::before, .woocommerce p.stars.selected a:not(.active):hover::before, .woocommerce p.stars a:hover::before, .woocommerce p.stars a.active::before { color: var(--ewut-uny-accent); } /* Required-field asterisk - accent across every WooCommerce form (checkout, account, review). */ .woocommerce .required, .woocommerce form .required, .woocommerce-page .required { color: var(--ewut-uny-accent); border: none; } /* Push the add-to-cart button to the bottom of equal-height cards */ .woocommerce ul.products li.product .button { margin-top: auto; } /* Sale flash */ .woocommerce span.onsale { background-color: var(--ewut-uny-accent); color: var(--ewut-uny-on-accent); font-weight: 600; font-size: .78em; min-height: auto; min-width: auto; line-height: 1; padding: 7px 12px; border-radius: 999px; top: 12px; left: 12px; margin: 0; } /* ────────────────────────────────────────────────────────────── Buttons - map every WC button to the theme .button look ────────────────────────────────────────────────────────────── */ .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 #place_order { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; height: 48px; padding: 0 28px; color: var(--ewut-uny-on-accent); font-family: var(--ewut-uny-font); font-size: 1em; font-weight: 500; line-height: 1; border: none; border-radius: 8px; background-color: var(--ewut-uny-accent); box-shadow: none; text-shadow: none; text-decoration: none; transition: background-color ease .2s; cursor: pointer; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #place_order:hover { background-color: var(--ewut-uny-accent-hover); color: var(--ewut-uny-on-accent); } /* Loop add-to-cart can be compact like .button.sm */ .woocommerce ul.products li.product .button { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; height: 42px; padding: 0 20px; font-size: .9em; min-width: auto; text-align: center; } /* Disabled / loading state */ .woocommerce a.button.loading, .woocommerce button.button.loading { opacity: .7; } .woocommerce a.added_to_cart { display: inline-flex; align-items: center; margin-top: 8px; font-size: .85em; font-weight: 500; color: var(--ewut-uny-accent); } /* ────────────────────────────────────────────────────────────── Single product ────────────────────────────────────────────────────────────── */ .woocommerce div.product .product_title { /* Match the blog single-post / page title (.ewut-page-title = 3em, lh 1.15, ls -0.02em) so the product name reads at the same scale. */ font-size: 3em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ewut-uny-dark); margin: 0 0 24px; } .woocommerce div.product div.images .woocommerce-product-gallery__image a img, .woocommerce div.product div.images > img { display: block; width: 100%; height: 350px; box-shadow: none; object-fit: cover; border-radius: 8px; } /* The flexslider viewport clips the main image - round it so the cover keeps the 8px radius while the slider is active. */ .woocommerce-product-gallery .flex-viewport { border-radius: 8px; } /* Gallery thumbnails (flex-control-nav) - small square previews, never stretched to the main image's 350px height. */ .woocommerce div.product div.images .flex-control-thumbs { display: flex; overflow: hidden; zoom: 1; margin: 4px 0 0; padding: 0; gap: 4px; } .woocommerce div.product div.images .flex-control-thumbs li img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; cursor: pointer; opacity: .7; transition: opacity .2s; } .woocommerce div.product div.images .flex-control-thumbs li img.flex-active, .woocommerce div.product div.images .flex-control-thumbs li img:hover { opacity: 1; } .woocommerce div.product div.images img:hover { border-radius: 8px; } .woocommerce div.product div.images .woocommerce-product-gallery__image a { display: block; outline-offset: 0; border-radius: 8px; overflow: hidden; } /* The zoom feature injects an absolutely-positioned img.zoomImg that is clipped by the nearest positioned ancestor - the gallery__image div (position:relative; overflow:hidden), NOT the . Round THAT element so the corners stay rounded while zooming on hover. */ .woocommerce div.product div.images .woocommerce-product-gallery__image { border-radius: 8px; overflow: hidden; } /* Full-screen zoom trigger (the 🔍 over the gallery image). WordPress replaces the glyph with which, without a width, collapses to a 1px-wide sliver. Pin the button to the top-right corner and force the emoji to a proper 20×20 square. */ .woocommerce div.product .woocommerce-product-gallery__trigger { top: 12px; right: 12px; left: auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--ewut-uny-white); border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); text-indent: 0; } .woocommerce div.product .woocommerce-product-gallery__trigger img.emoji { width: 20px !important; height: 20px !important; max-width: none !important; margin: 0; } .woocommerce div.product p.price, .woocommerce div.product span.price { /* Match the blog post-card meta line (.ewut-post-card__meta → 12.8px / 400 / muted grey). Price stays BELOW the product title. */ font-size: .8em !important; font-weight: 400 !important; color: var(--ewut-uny-muted) !important; margin-bottom: 24px; } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--ewut-uny-dark); /* Match blog prose body copy (.ewut-article__body p → 18px / 1.5). */ font-size: 18px; line-height: 1.5; margin-bottom: 24px; } .woocommerce div.product .woocommerce-product-details__short-description p { font-size: 18px; line-height: 1.5; } .woocommerce div.product p.stock { margin: 0 0 24px; } .woocommerce div.product form.cart { margin-bottom: 24px; } .woocommerce .quantity input.qty { height: 48px; width: 72px; border: 1px solid var(--ewut-uny-border); border-radius: 8px; font-family: var(--ewut-uny-font); font-size: 1em; text-align: center; color: var(--ewut-uny-dark); } .woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 24px; border-bottom: 1px solid var(--ewut-uny-border); } .woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--ewut-uny-border); } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: none; border-radius: 0; margin: 0 24px 0 0; padding: 0 0 12px; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { font-size: .95em; font-weight: 600; color: var(--ewut-uny-dark); padding: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ewut-uny-dark); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--ewut-uny-accent); } /* Tab panel heading - WC outputs an

that would inherit the 44px article section title. Scale it down to a card-sized heading. */ .woocommerce div.product .woocommerce-tabs .panel > h2:first-child, .woocommerce div.product .woocommerce-Tabs-panel > h2:first-child { font-size: 1.4em; font-weight: 700; line-height: 1.3; color: var(--ewut-uny-dark); margin: 0 0 16px; } /* Tab panel prose - match blog body copy (.ewut-article__body → 18px/1.5) instead of the WC 16px default. */ .woocommerce div.product .woocommerce-tabs .panel p, .woocommerce div.product .woocommerce-tabs .panel li, .woocommerce div.product .woocommerce-Tabs-panel p, .woocommerce div.product .woocommerce-Tabs-panel li { font-size: 18px; line-height: 1.5; color: var(--ewut-uny-dark); } /* ────────────────────────────────────────────────────────────── Product meta (SKU / Category / Tags) - stacked rows with icons ────────────────────────────────────────────────────────────── */ .woocommerce div.product .product_meta { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ewut-uny-border); font-size: .9em; } .woocommerce div.product .product_meta > span { display: block; color: var(--ewut-uny-dark); line-height: 1.6; padding: 6px 0; } .woocommerce div.product .product_meta > span + span { border-top: 1px dashed var(--ewut-uny-border); } /* Leading icon for each meta row */ .woocommerce div.product .product_meta > span::before { content: ""; display: inline-block; vertical-align: -3px; margin-right: 8px; width: 18px; height: 18px; background-color: var(--ewut-uny-ink); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 18px 18px; mask-size: 18px 18px; } /* SKU → hash/tag icon */ .woocommerce div.product .product_meta .sku_wrapper::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='4' y1='15' x2='20' y2='15'/%3E%3Cline x1='10' y1='3' x2='8' y2='21'/%3E%3Cline x1='16' y1='3' x2='14' y2='21'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='4' y1='15' x2='20' y2='15'/%3E%3Cline x1='10' y1='3' x2='8' y2='21'/%3E%3Cline x1='16' y1='3' x2='14' y2='21'/%3E%3C/svg%3E"); } /* Category → folder icon */ .woocommerce div.product .product_meta .posted_in::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); } /* Tag → tag icon */ .woocommerce div.product .product_meta .tagged_as::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E"); } /* The label words ("SKU:", "Category:", "Tag:") stay grey; the values pick up the dark text and links use the accent on hover. */ .woocommerce div.product .product_meta .sku, .woocommerce div.product .product_meta > span a { color: var(--ewut-uny-dark); font-weight: 500; } .woocommerce div.product .product_meta > span a:hover { color: var(--ewut-uny-accent); } /* Related / upsell headings */ .woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce .cross-sells > h2 { font-size: 1.6em; font-weight: 700; color: var(--ewut-uny-dark); margin: 0 0 24px; } /* Additional-information attributes table - WC ships italic values and center-aligned labels. Normalise to upright, left-aligned. */ .woocommerce div.product .woocommerce-product-attributes th, .woocommerce table.shop_attributes th { text-align: left; font-weight: 600; color: var(--ewut-uny-dark); } .woocommerce div.product .woocommerce-product-attributes td, .woocommerce table.shop_attributes td { font-style: normal; text-align: left; color: var(--ewut-uny-dark); } /* Remove WC's zebra striping (rgba(0,0,0,.024) on alternate rows). */ .woocommerce div.product .woocommerce-product-attributes tr th, .woocommerce div.product .woocommerce-product-attributes tr td, .woocommerce table.shop_attributes tr th, .woocommerce table.shop_attributes tr td { background: transparent !important; } /* Related / up-sell products - ALWAYS a single row on desktop, no matter how many items WooCommerce returns (it renders `ul.products.columns-N`, N=2..6). We size each card to 1/N of the row minus the (N-1) 24px gaps, driven by the columns-N class, so 3 items → 3 across, 4 → 4 across, etc. On narrower screens the row recomputes to fewer columns so cards never get too small. */ .related.products ul.products.columns-2 li.product, .up-sells ul.products.columns-2 li.product { flex-basis: calc((100% - 24px) / 2); max-width: calc((100% - 24px) / 2); } .related.products ul.products.columns-3 li.product, .up-sells ul.products.columns-3 li.product { flex-basis: calc((100% - 48px) / 3); max-width: calc((100% - 48px) / 3); } .related.products ul.products.columns-4 li.product, .up-sells ul.products.columns-4 li.product { flex-basis: calc((100% - 72px) / 4); max-width: calc((100% - 72px) / 4); } .related.products ul.products.columns-5 li.product, .up-sells ul.products.columns-5 li.product { flex-basis: calc((100% - 96px) / 5); max-width: calc((100% - 96px) / 5); } .related.products ul.products.columns-6 li.product, .up-sells ul.products.columns-6 li.product { flex-basis: calc((100% - 120px) / 6); max-width: calc((100% - 120px) / 6); } /* Tablet: cap at 3 across so cards keep a sensible width. */ @media (max-width: 1024px) { .related.products ul.products li.product, .up-sells ul.products li.product { flex-basis: calc((100% - 48px) / 3) !important; max-width: calc((100% - 48px) / 3) !important; } } /* Small tablet / large phone: 2 across. */ @media (max-width: 768px) { .related.products ul.products li.product, .up-sells ul.products li.product { flex-basis: calc((100% - 24px) / 2) !important; max-width: calc((100% - 24px) / 2) !important; } } /* Phone: single column. */ @media (max-width: 480px) { .related.products ul.products li.product, .up-sells ul.products li.product { flex-basis: 100% !important; max-width: 100% !important; } } /* ────────────────────────────────────────────────────────────── Cart ────────────────────────────────────────────────────────────── */ .woocommerce table.shop_table { border: 1px solid var(--ewut-uny-border); border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; } .woocommerce table.shop_table th { font-weight: 600; color: var(--ewut-uny-dark); padding: 16px; font-size: .9em; } .woocommerce table.shop_table td { padding: 16px; border-top: 1px solid var(--ewut-uny-border); color: var(--ewut-uny-dark); } .woocommerce a.remove { color: var(--ewut-uny-accent) !important; font-weight: 700; } .woocommerce a.remove:hover { background-color: var(--ewut-uny-accent) !important; color: var(--ewut-uny-on-accent) !important; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-cart .cart-collaterals .cart_totals { border: 1px solid var(--ewut-uny-border); border-radius: 8px; padding: 24px; } .woocommerce .cart_totals h2, .woocommerce-checkout #order_review_heading { font-size: 1.4em; font-weight: 700; color: var(--ewut-uny-dark); margin: 0 0 16px; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { width: 100%; } .woocommerce .coupon input.input-text { height: 48px; border: 1px solid var(--ewut-uny-border); border-radius: 8px; padding: 0 16px; font-family: var(--ewut-uny-font); } /* ────────────────────────────────────────────────────────────── Checkout + form fields ────────────────────────────────────────────────────────────── */ .woocommerce form .form-row label, .woocommerce-checkout label { display: block; font-size: .88em; font-weight: 500; line-height: 1.4; color: var(--ewut-uny-dark); margin-bottom: 6px; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-checkout input.input-text, .woocommerce-checkout textarea, .select2-container .select2-selection--single { min-height: 48px; padding: 12px 16px; border: 1px solid var(--ewut-uny-border); border-radius: 8px; font-family: var(--ewut-uny-font); font-size: var(--ewut-uny-fs-body); color: var(--ewut-uny-dark); outline: none; transition: border-color .15s ease; } /* WC core paints its own chevron via background-image + appearance:none on form-row shows TWO arrows (WC's own background-image chevron + our base-select ::picker-icon); drop the background one, keep the single picker-icon like every other themed select. */ .woocommerce table.variations th.label, .variations th.label { vertical-align: middle !important; text-align: left; padding-right: 32px; width: 1%; white-space: nowrap; } .woocommerce table.variations td.value, .variations td.value { vertical-align: middle !important; } .woocommerce table.variations select, .variations select { background-image: none !important; display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* Override the WooCommerce default (min-width:75%; margin/padding-right:1em) so the variation select fills the row width. */ .woocommerce div.product form.cart .variations select { min-width: 100%; margin-right: 1em; padding-right: 1em; } /* Constant gap below the attribute table so the qty + add-to-cart row never shifts between the "nothing selected" and "variation chosen" states. */ .woocommerce div.product form.cart table.variations { margin-bottom: 28px; } /* ── Variation swatches (custom theme feature) ───────────────── The theme renders clickable swatches in front of the native is visually hidden but stays in the DOM so WooCommerce's variation JS keeps working. */ .woocommerce div.product form.cart .variations td.value:has(.ewut-swatches) select { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ewut-swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .ewut-swatch { display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: 1px solid var(--ewut-uny-border); background: var(--ewut-uny-white); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease; font-family: var(--ewut-uny-font); color: var(--ewut-uny-dark); } .ewut-swatch:focus-visible { outline: 2px solid var(--ewut-uny-accent); outline-offset: 2px; } /* Colour swatches - round 32×32 chips filled with the colour itself. */ .ewut-swatches--color .ewut-swatch { width: 32px; height: 32px; border-radius: 50%; background-color: var(--ewut-swatch-color, #ccc); position: relative; } /* Text swatches - pills (e.g. sizes). */ .ewut-swatches--text .ewut-swatch { min-width: 48px; height: 40px; padding: 0 16px; border-radius: 8px; font-size: .95em; } /* Hover + active + disabled states. Hover uses a 2px muted ring; the chip is border-box so growing the border doesn't change its 32×32 footprint. */ .ewut-swatch:hover { border-width: 2px; border-color: var(--ewut-uny-muted); } .ewut-swatch.is-active { border-color: var(--ewut-uny-accent); box-shadow: 0 0 0 1px var(--ewut-uny-accent); } .ewut-swatches--text .ewut-swatch.is-active { background: var(--ewut-uny-accent); border-color: var(--ewut-uny-accent); color: var(--ewut-uny-on-accent); } .ewut-swatch.is-disabled { opacity: .35; cursor: not-allowed; pointer-events: none; } /* Reset control inside the swatch row: WooCommerce's "Clear" link rendered as a 32×32 circular refresh icon in the muted tone. Its text is replaced by a masked SVG. WooCommerce toggles it via `visibility`, so the slot is always reserved - the row never jumps between states. */ .ewut-swatches .reset_variations { /* 32px gap after the last swatch (row gap is 10px, so add the rest). */ margin-left: 22px; width: 20px; height: 20px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; /* No border - a ring here would read as one more colour swatch. */ border: 0; /* Hide the "Clear" text, the icon is drawn with a mask below. */ font-size: 0; line-height: 0; color: transparent; text-decoration: none; } .ewut-swatches .reset_variations::before { content: ""; flex: 0 0 20px; width: 20px; height: 20px; background-color: var(--ewut-uny-muted); -webkit-mask: var(--ewut-reset-icon) center / contain no-repeat; mask: var(--ewut-reset-icon) center / contain no-repeat; --ewut-reset-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E"); transition: background-color .15s ease; } /* Hover: darken the glyph itself (no ring). */ .ewut-swatches .reset_variations:hover::before { background-color: var(--ewut-uny-grey); } /* Replace the base-select default (a solid ▼ disclosure triangle) with the thin chevron ∨ used across the site (header nav, other selects). Draw it as a masked SVG stroke so it matches the light-weight caret, not a heavy filled triangle. */ .woocommerce table.variations select::picker-icon, .variations select::picker-icon { content: ""; width: 12px; height: 12px; margin-left: auto; /* `currentColor` keeps the caret on the select's own text colour, matching the global `select::picker-icon` rule in main.css. */ background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s ease; } .woocommerce table.variations select:open::picker-icon, .variations select:open::picker-icon { transform: rotate(180deg); } /* The "Clear" reset link appears under the select once a value is chosen. Left in flow it grows the row height, which pushes the vertically-centred label below the select's centre. Pin it out of flow so the label stays aligned to the select itself. */ .woocommerce table.variations td.value, .variations td.value { position: relative; } /* "Clear" reset link - when swatches are present the script moves it into the swatch row and it becomes a circular "reset" icon (see below). Without swatches (plain select) keep it out of flow under the field's right edge so it can't change the row height. */ .woocommerce table.variations td.value:not(:has(.ewut-swatches)) .reset_variations, .variations td.value:not(:has(.ewut-swatches)) .reset_variations { position: absolute; right: 0; top: 100%; margin-top: 4px; font-size: .85em; } /* Variable products: the per-variation price under the dropdown duplicates the main product price (which now reflects the selected variation via assets/js/wc-variation-price.js). Hide the duplicate but keep the .single_variation block's bottom margin to separate the qty + add-to-cart row below. */ .woocommerce div.product .single_variation .woocommerce-variation-price { display: none; } /* No dynamic margin here - the constant gap lives on table.variations above, so the add-to-cart row doesn't jump when a variation is chosen. */ .woocommerce div.product .woocommerce-variation.single_variation { margin: 0; } /* Placeholder + text color - match the builder forms exactly. WooCommerce (classic + block checkout) defaults to a dark #2B2D2F placeholder/text; the builder uses --ewut-uny-dark text and a 50% muted placeholder. Bring WC in line so theme & builder forms look identical. */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-checkout input.input-text, .woocommerce-checkout textarea, .wc-block-components-form .wc-block-components-text-input input[type="text"], .wc-block-components-form .wc-block-components-text-input input[type="email"], .wc-block-components-form .wc-block-components-text-input input[type="tel"], .wc-block-components-form .wc-block-components-text-input input[type="number"], .wc-block-components-form .wc-block-components-text-input input[type="password"], .wc-block-components-form .wc-block-components-text-input input[type="url"], .wc-block-components-text-input input, .wc-block-components-address-form input, .wc-block-components-textarea { color: var(--ewut-uny-dark) !important; } .woocommerce form .form-row input.input-text::placeholder, .woocommerce form .form-row textarea::placeholder, .woocommerce-checkout input.input-text::placeholder, .woocommerce-checkout textarea::placeholder, .wc-block-components-form .wc-block-components-text-input input[type="text"]::placeholder, .wc-block-components-form .wc-block-components-text-input input[type="email"]::placeholder, .wc-block-components-form .wc-block-components-text-input input[type="tel"]::placeholder, .wc-block-components-text-input input::placeholder, .wc-block-components-address-form input::placeholder, .wc-block-components-textarea::placeholder { color: rgba(15, 15, 15, .5); opacity: 1; } /* Block checkout uses a FLOATING LABEL as the visible placeholder (no real placeholder attribute). WC paints it dark (#2B2D2F → our dark); the builder's placeholder is 50% muted. Mute the resting label so it reads like the builder placeholder; once the field is filled the label shrinks to the top and we keep it readable. */ .wc-block-components-text-input label { color: rgba(15, 15, 15, .5) !important; } .wc-block-components-text-input.is-active label { color: var(--ewut-uny-grey) !important; } /* Select / combobox labels (Country, State) use a different class and stay full-dark by default - match the muted placeholder tone, and keep the shrunk/active label readable grey. */ .wc-blocks-components-select .wc-blocks-components-select__label, .wc-block-components-combobox label { color: rgba(15, 15, 15, .5) !important; } .wc-blocks-components-select.is-active .wc-blocks-components-select__label, .wc-block-components-combobox.is-active label { color: var(--ewut-uny-grey) !important; } /* Login form layout. The username/password rows are .form-row-wide: label STACKED above a full-width input (normal block flow). Only the LAST row (submit button + "Remember me") should be a horizontal flex row. Previously flex was applied to ALL .form-row which tipped the labels/inputs sideways. */ .woocommerce-form-login .form-row-wide, .woocommerce form.login .form-row-wide { display: block; margin-bottom: 20px; } .woocommerce-form-login .form-row-wide input.input-text, .woocommerce form.login .form-row-wide input.input-text { width: 100%; display: block; } /* Submit row: button + remember checkbox on one vertically-centred line. */ .woocommerce-form-login .form-row:not(.form-row-wide), .woocommerce form.login .form-row:not(.form-row-wide) { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } /* WC's .form-row carries a clearfix ::before/::after (display:table). In the flex submit row those become flex items and the 20px gap pushes the "Remember me" checkbox ~20px off the left edge. Remove them. */ .woocommerce-form-login .form-row:not(.form-row-wide)::before, .woocommerce-form-login .form-row:not(.form-row-wide)::after, .woocommerce form.login .form-row:not(.form-row-wide)::before, .woocommerce form.login .form-row:not(.form-row-wide)::after { display: none !important; } .woocommerce-form-login .form-row .button, .woocommerce form.login .form-row .button { margin: 0; flex: 0 0 auto; width: auto; min-width: 140px; } .woocommerce-form-login label.woocommerce-form__label-for-checkbox, .woocommerce form.login label.woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 8px; margin: 0; } /* Swap order: "Log in" button first, "Remember me" after it. */ .woocommerce-form-login .form-row:not(.form-row-wide) .button, .woocommerce form.login .form-row:not(.form-row-wide) .button { order: 0; } .woocommerce-form-login .form-row:not(.form-row-wide) label.woocommerce-form__label-for-checkbox, .woocommerce form.login .form-row:not(.form-row-wide) label.woocommerce-form__label-for-checkbox { order: 1; } .woocommerce-form-login label.woocommerce-form__label-for-checkbox input, .woocommerce form.login label.woocommerce-form__label-for-checkbox input { margin: 0; } /* ────────────────────────────────────────────────────────────── Classic WooCommerce form checkboxes: Remember me, the privacy opt-in on registration, Terms on the classic checkout. ────────────────────────────────────────────────────────────── Drawn by hand instead of handing the job to `accent-color`. With `accent-color` the browser keeps control of the tick and picks its colour by contrast against the fill: a dark accent gets a white tick, a LIGHT accent (the olive palette, for one) gets a near-black one. So the mark changed colour with the customer's brand colour, and on a light accent it read as a dirty smudge rather than a tick. `appearance: none` takes that decision back: accent fill, white tick, always, whatever the accent is. Same technique and metrics as the builder's own consent checkbox (`.ewub-form__terms input[type="checkbox"]`), including the 4px radius - 8px on an 18px box reads as a radio button. */ .woocommerce input[type="checkbox"].woocommerce-form__input-checkbox, #review_form .comment-form-cookies-consent input[type="checkbox"] { -webkit-appearance: none; appearance: none; position: relative; flex-shrink: 0; width: 18px; height: 18px; border: 1px solid var(--ewut-uny-border-dark); border-radius: 4px; background: var(--ewut-uny-white); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .woocommerce input[type="checkbox"].woocommerce-form__input-checkbox:checked, #review_form .comment-form-cookies-consent input[type="checkbox"]:checked { background: var(--ewut-uny-accent); border-color: var(--ewut-uny-accent); } /* The tick itself: two borders of a rotated box. No glyph, no SVG, so it cannot inherit a text colour or fail to load. */ .woocommerce input[type="checkbox"].woocommerce-form__input-checkbox:checked::after, #review_form .comment-form-cookies-consent input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .woocommerce input[type="checkbox"].woocommerce-form__input-checkbox:focus-visible, #review_form .comment-form-cookies-consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--ewut-uny-accent); outline-offset: 2px; } /* Kill WC's default boxed border around the login form - the theme uses a clean borderless form like the builder. */ .woocommerce form.login, .woocommerce form.register { border: none; padding: 0; margin: 0; border-radius: 0; } /* Login form: 60% wide, centered horizontally. */ .woocommerce form.woocommerce-form-login { width: 60%; margin-left: auto; margin-right: auto; } /* On the login page, center the whole column (page header with title + the WooCommerce login block) to the same 60% so they all line up. Scoped via :has() so the logged-in dashboard stays full-width. */ .ewut-article:has(.woocommerce-form-login) .ewut-page-header, .ewut-article__body:has(.woocommerce-form-login) > .woocommerce { width: 60%; margin-left: auto; margin-right: auto; } /* 60% of a desktop column is a comfortable form; 60% of a phone is not. At 425px the content column is 377px, so the form measured 226px - inputs barely wider than their own labels, and the error notice (which lives in the same column) wrapped "The username ... is not registered on this site" over 11 lines into a 264px-tall red block. Below the burger breakpoint the column goes full width; the centering margins stay harmless. */ @media (max-width: 1024px) { .woocommerce form.woocommerce-form-login, .ewut-article:has(.woocommerce-form-login) .ewut-page-header, .ewut-article__body:has(.woocommerce-form-login) > .woocommerce { width: 100%; } } /* Inside that centered column the form fills its width. */ .ewut-article__body:has(.woocommerce-form-login) .woocommerce form.woocommerce-form-login { width: 100%; } /* Remember-me checkbox flush to the left edge (align with the inputs); WC adds stray spacing that pushed it ~23px in. */ .woocommerce-form-login .form-row:not(.form-row-wide) { justify-content: flex-start; padding-left: 0; margin-left: 0; } .woocommerce-form-login label.woocommerce-form__label-for-checkbox { padding-left: 0; margin-left: 0; } /* "Lost your password?" - smaller than body text, left aligned. */ .woocommerce-form-login .lost_password, .woocommerce .woocommerce-LostPassword.lost_password { font-size: .85em; margin: 12px 0 0; text-align: left; } .woocommerce-form-login .lost_password a { color: var(--ewut-uny-dark); } .woocommerce-form-login .lost_password a:hover { color: var(--ewut-uny-accent); } /* Show/hide-password eye toggle inside password fields. */ .woocommerce form .show-password-input, .woocommerce-page form .show-password-input { right: 1em; opacity: .5; zoom: .75; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { border-color: var(--ewut-uny-accent); } /* NOTE: WooCommerce's select2 enhancement for country/state is DISABLED on the front end (see ewut_uny_disable_wc_country_select2 in functions.php) so those fields render as plain native first option reads in the muted placeholder tone, then switches back to dark once a real option is chosen. */ .wpcf7-form select:has(option[value=""]:checked) { color: rgba(15, 15, 15, .5); } .wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus { border-color: var(--ewut-uny-accent); } .wpcf7-form input[type=submit], .wpcf7-form button[type=submit] { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; height: 48px; padding: 0 28px; color: var(--ewut-uny-on-accent); font-family: var(--ewut-uny-font); font-size: 1em; font-weight: 500; border: none; border-radius: 8px; background-color: var(--ewut-uny-accent); cursor: pointer; transition: background-color ease .2s; } .wpcf7-form input[type=submit]:hover, .wpcf7-form button[type=submit]:hover { background-color: var(--ewut-uny-accent-hover); } .wpcf7-form .wpcf7-not-valid { border-color: #e2401c !important; } .wpcf7-not-valid-tip { font-size: .82em; color: #e2401c; } .wpcf7-form .wpcf7-spinner { margin: 0 0 0 12px; } .wpcf7 form .wpcf7-response-output { border-radius: 8px; border-width: 1px; font-size: .9em; margin: 16px 0 0; padding: 12px 16px; } /* ────────────────────────────────────────────────────────────── WooCommerce Blocks (cart / checkout / mini-cart) - block-based markup used by the modern Cart & Checkout blocks. Restyle the primary action button, quantity selector, fields and totals. ────────────────────────────────────────────────────────────── */ /* Empty-cart: WC paints a 220px masked sad-face icon via the heading's ::before. It's off-brand and oversized - remove it. */ .wc-block-cart__empty-cart__title.with-empty-cart-icon::before, .with-empty-cart-icon::before { display: none !important; } /* "Your cart is currently empty!" - frame it in the same bordered card as the archive intro block (.ewut-archive__intro): 1px border with a 4px accent top edge, 8px radius, left-aligned title (like an archive description). Mirrors /category/ and /YYYY/MM/ intro cards. */ .wp-block-woocommerce-cart .wc-block-cart__empty-cart__title, .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title { border: 1px solid var(--ewut-uny-border); border-top: 4px solid var(--ewut-uny-accent); border-radius: 8px; padding: 20px 24px !important; margin: 0 0 32px !important; text-align: left !important; font-size: 1.25em !important; font-weight: 600 !important; line-height: 1.25 !important; color: var(--ewut-uny-dark); } /* Drop the WC separator (
) between the empty-cart card and the "New in store" recommendations - the intro card carries its own border, so the extra rule reads as clutter. */ .wp-block-woocommerce-empty-cart-block .wp-block-separator { display: none !important; } /* ── WooCommerce Blocks heading scale ────────────────────────── WC block headings are unclassed

/

that inherit the theme's 44px article section heading - so "Your cart is currently empty!", "Products in cart", "New in store", "Cart totals" all render huge. Pin them to a card-sized heading. */ .wc-block-cart h2, .wc-block-cart h3, .wp-block-woocommerce-cart h2, .wp-block-woocommerce-cart h3, .wc-block-components-totals-wrapper h2, .wp-block-woocommerce-cart-cross-sells-block h2, .wc-block-cart-cross-sells h2 { font-size: 1.4em !important; font-weight: 700 !important; line-height: 1.3 !important; margin: 0 0 16px !important; color: var(--ewut-uny-dark); } /* Recommended / cross-sell product grid ("New in store") - its titles render tiny and unreadable. Bring them to the loop-card scale (16px/600 dark) and give prices/buttons sensible sizing. */ .wc-block-cart-cross-sells .wc-block-grid__product-title, .wp-block-woocommerce-cart-cross-sells-block .wc-block-grid__product-title, .wc-block-grid__product-title, .wc-block-components-product-name { /* Match the shop loop card title (16px / 600 dark). The block-grid container sets a small base font, so pin px rather than em. */ margin: 4px 0 0 !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.3; color: var(--ewut-uny-dark) !important; /* One line only - clip overflow with an ellipsis so titles of different lengths never push the card taller than its neighbours. */ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* The ellipsis needs something to clip against. Without a width limit the nowrap title stretched its own link past the card - 219px of text in a 184px card - and the overflow landed on the neighbouring product instead of being trimmed. */ max-width: 100%; } /* The link wrapping the title is the box that was being stretched, so it needs the same limit; `min-width: 0` lets it shrink inside the flex card. */ .wc-block-cart-cross-sells .wc-block-grid__product-link, .wp-block-woocommerce-cart-cross-sells-block .wc-block-grid__product-link, .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link, .wc-block-grid__product .wc-block-grid__product-link { display: block; max-width: 100%; min-width: 0; overflow: hidden; } .wc-block-grid__product .wc-block-grid__product-price, .wc-block-cart-cross-sells .wc-block-grid__product-price { /* Match the shop loop card price / blog meta (12.8px / 400 / muted). */ font-size: 12.8px !important; font-weight: 400 !important; color: var(--ewut-uny-muted) !important; } /* Cross-sell grid images - match shop cards (3:2, rounded). A fixed aspect ratio keeps every image the SAME height regardless of the column's exact content width. */ .wc-block-cart-cross-sells .wc-block-grid__product-image img, .wc-block-grid__product-image img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; } /* The cross-sell product row (ul.wc-block-grid__products) ships a 24px left padding that indents the whole row inside the empty-cart block. Zero it so the products align with the container edges. */ .wp-block-woocommerce-empty-cart-block ul.wc-block-grid__products, .wc-block-cart-cross-sells ul.wc-block-grid__products { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* WC uses transparent left/right BORDERS on each grid item as the column gutter, which indents the first card's content by 8px and centers the text. Drop the outer gutters and left-align so the first product lines up exactly under the "New in store" heading. */ .wp-block-woocommerce-empty-cart-block .wc-block-grid__products .wc-block-grid__product, .wc-block-cart-cross-sells .wc-block-grid__products .wc-block-grid__product { text-align: left; } /* WC's transparent side borders as gutters make card content widths unequal (crumbs: end cards get one 8px border, middle cards two → 193px vs 185px), which cascades into DIFFERENT image heights. Drop the border gutters entirely and space the columns with a real gap so every card - and every image - is exactly the same width/height. */ .wp-block-woocommerce-empty-cart-block ul.wc-block-grid__products, .wc-block-cart-cross-sells ul.wc-block-grid__products { gap: 20px; } .wp-block-woocommerce-empty-cart-block .wc-block-grid__products .wc-block-grid__product, .wc-block-cart-cross-sells .wc-block-grid__products .wc-block-grid__product { border-left-width: 0 !important; border-right-width: 0 !important; } /* The four-column width belongs ONLY to the widths where the row is still a flex row. Below 480px WooCommerce itself switches ul.wc-block-grid__products to `display: block` (all-products.css, `.has-4-columns` and friends), and the card carries `margin: 0 auto` from the same stylesheet. While the 25% width below was unconditional and !important, that combination made every card 70.5px wide inside a 342px column and centred it: the whole product list sat pushed half a screen to the right, with the images spilling out of their own cards. Scoping the width restores WooCommerce's one-column phone layout. */ /* Four across only from 960px. Below that the cards get narrower than their own contents: at 844px (a phone held sideways) a card was 184px while the titles measured 191-219px, so a title ran past its card and over the next one. Two columns give 388px per card at that width, which the longest title clears. */ @media (min-width: 960px) { .wp-block-woocommerce-empty-cart-block .wc-block-grid__products .wc-block-grid__product, .wc-block-cart-cross-sells .wc-block-grid__products .wc-block-grid__product { /* Keep 4 columns: account for the 3 × 20px gaps so the fourth card doesn't wrap to a new row (was 25% + gap → overflowed). */ flex: 0 0 calc((100% - 60px) / 4) !important; max-width: calc((100% - 60px) / 4) !important; } } /* Two across between the phone portrait and 960px: tablets, and a phone turned sideways. One 20px gap, hence the single subtraction. */ @media (min-width: 481px) and (max-width: 959px) { .wp-block-woocommerce-empty-cart-block .wc-block-grid__products .wc-block-grid__product, .wc-block-cart-cross-sells .wc-block-grid__products .wc-block-grid__product { flex: 0 0 calc((100% - 20px) / 2) !important; max-width: calc((100% - 20px) / 2) !important; } } /* One full-width card per row on a phone. */ @media (max-width: 480px) { .wp-block-woocommerce-empty-cart-block .wc-block-grid__products .wc-block-grid__product, .wc-block-cart-cross-sells .wc-block-grid__products .wc-block-grid__product { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } /* Cross-sell / "New in store" product grid buttons render as block buttons (.wp-block-button__link.add_to_cart_button) with a dark default bg and dark text (unreadable). Make them accent. */ .wc-block-grid__products .wp-block-button__link, .wp-block-button__link.add_to_cart_button, .wc-block-components-product-button .wp-block-button__link { background-color: var(--ewut-uny-accent) !important; color: var(--ewut-uny-on-accent) !important; border-radius: 8px !important; } .wc-block-grid__products .wp-block-button__link:hover, .wp-block-button__link.add_to_cart_button:hover, .wc-block-components-product-button .wp-block-button__link:hover { background-color: var(--ewut-uny-accent-hover) !important; } /* NOTE: WooCommerce's block stylesheets (wc-blocks.css, packages-style.css, cart.css) are enqueued AFTER this file, so plain single-class selectors here lose the cascade and the button text fell back to dark. Classes are doubled to raise specificity above them. */ .wc-block-components-button.wp-element-button, .wp-block-woocommerce-cart .wc-block-cart__submit-button, .wc-block-cart__submit-button.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button, .wc-block-checkout__actions_row .wc-block-components-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; height: auto; padding: 12px 28px; background-color: var(--ewut-uny-accent); color: var(--ewut-uny-on-accent); font-family: var(--ewut-uny-font); font-size: 1em; font-weight: 500; border: none; border-radius: 8px; box-shadow: none; transition: background-color ease .2s; cursor: pointer; } .wc-block-components-button.wp-element-button:hover, .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover, .wc-block-checkout__actions_row .wc-block-components-button:hover { background-color: var(--ewut-uny-accent-hover); color: var(--ewut-uny-on-accent); } /* Button text node inside the block button. Doubled class so it beats WC's own later-loading block styles. */ .wc-block-components-button__text, .wc-block-components-button .wc-block-components-button__text, .wc-block-cart__submit-button .wc-block-components-button__text, .wc-block-components-checkout-place-order-button .wc-block-components-button__text { color: inherit; } /* Primary block buttons keep white label text (WC's cart.css would otherwise paint it dark since it loads after this file). */ .wc-block-cart__submit-button.wc-block-cart__submit-button, .wc-block-cart__submit-button.wc-block-cart__submit-button .wc-block-components-button__text, .wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button, .wc-block-components-checkout-place-order-button.wc-block-components-checkout-place-order-button .wc-block-components-button__text { color: var(--ewut-uny-on-accent); } /* Secondary / outline block buttons (e.g. "edit", apply coupon) */ .wc-block-components-button.is-secondary, .wc-block-components-totals-coupon__button { background-color: transparent; color: var(--ewut-uny-dark); border: 2px solid var(--ewut-uny-accent); border-radius: 8px; } .wc-block-components-button.is-secondary:hover, .wc-block-components-totals-coupon__button:hover { background-color: var(--ewut-uny-accent); color: var(--ewut-uny-on-accent); } /* Quantity selector */ .wc-block-components-quantity-selector { border: 1px solid var(--ewut-uny-border); border-radius: 8px; overflow: hidden; } .wc-block-components-quantity-selector__button { color: var(--ewut-uny-dark); } /* The +/− buttons keep a visible 1px outline after click (looks like a stray border around the plus). Only show a focus ring on keyboard focus, not on mouse press. */ .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button, .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus, .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:active { outline: none !important; box-shadow: none !important; border: none !important; } .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus-visible { outline: 2px solid var(--ewut-uny-accent) !important; } /* The number field inside the stepper must NOT draw its own border - the frame is owned by .wc-block-components-quantity-selector. Our generic `.woocommerce input[type=number]` rule would otherwise paint a second box inside the frame (visible as a rectangle around the digit), also on hover/focus. Keep it borderless in every state; keyboard users still get the accent ring via :focus-visible. */ .woocommerce .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input, .woocommerce-page .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input, .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input, .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:hover, .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus, .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:active { border: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; background: transparent !important; } .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus-visible { outline: none !important; } /* Keyboard focus is shown on the stepper frame instead of the field, so the accent ring never reads as a second border inside the rounded box. */ .wc-block-components-quantity-selector:focus-within { border-color: var(--ewut-uny-accent); } /* Text inputs / selects */ .wc-block-components-text-input input, .wc-block-components-text-input input[type=text], .wc-block-components-text-input input[type=email], .wc-block-components-text-input input[type=tel], .wc-block-components-select .wc-block-components-select__container, .wc-block-components-address-form input { border: 1px solid var(--ewut-uny-border) !important; border-radius: 8px !important; font-family: var(--ewut-uny-font); color: var(--ewut-uny-dark); } .wc-block-components-text-input input:focus { border-color: var(--ewut-uny-accent) !important; box-shadow: none !important; outline: none; } /* Product titles / prices in block cart. Reference: commerce-13 cart skin - product name is dark, weight 600, body size (16px). WC Blocks renders the name as an and paints it accent/500 via its own (later-loaded) stylesheet, so we raise specificity with the cart-item wrapper to win without !important. */ .wc-block-cart-item__wrap .wc-block-components-product-name, table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name, .wc-block-components-order-summary-item__description .wc-block-components-product-name, .wc-block-components-order-summary .wc-block-components-product-name, a.wc-block-components-product-name { color: inherit; font-weight: 600 !important; font-size: 16px !important; line-height: 1.4; text-decoration: none; } .wc-block-cart-item__wrap .wc-block-components-product-name:hover, table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name:hover, a.wc-block-components-product-name:hover { color: var(--ewut-uny-accent); } .wc-block-components-product-price, .wc-block-formatted-money-amount, .wc-block-components-totals-item__value { color: var(--ewut-uny-dark); font-weight: 600; } /* Remove-link accent */ .wc-block-cart-item__remove-link { color: var(--ewut-uny-muted); } .wc-block-cart-item__remove-link:hover { color: var(--ewut-uny-accent); } /* Accent links throughout blocks */ .wc-block-components-checkout-step__description a, .wc-block-components-address-card a, .wc-block-components-totals-coupon-link { color: var(--ewut-uny-accent); } /* ────────────────────────────────────────────────────────────── WooCommerce Blocks select / combobox (checkout country, state, etc.). These are NOT native and