/* * REACH Supply native WooCommerce template compatibility. * * Some themes place the `woocommerce` class on without rendering a * nested `.woocommerce` wrapper. The primary WooCommerce stylesheet remains * deliberately scoped to that wrapper; this file applies the same approved * design language to native shop, archive, and single-product components. * * Every selector below is anchored to an explicit WooCommerce component. Do * not add bare heading, paragraph, list, input, select, textarea, or button * selectors beneath the body root: native routes also contain the site header, * footer, search, and unrelated widgets. */ /* Catalogue headings, descriptions, breadcrumbs, and controls */ body.reach-design-system.woocommerce .woocommerce-products-header__title, body.reach-design-system.woocommerce div.product .product_title, body.reach-design-system.woocommerce div.product .woocommerce-tabs :where(h2, h3), body.reach-design-system.woocommerce :where(.related.products, .upsells.products, .cross-sells) > h2 { color: var(--rs-color-ink); } body.reach-design-system.woocommerce .woocommerce-products-header__description, body.reach-design-system.woocommerce div.product .woocommerce-product-details__short-description, body.reach-design-system.woocommerce div.product .woocommerce-tabs .panel { color: var(--rs-color-ink); line-height: var(--rs-line-height-body); } body.reach-design-system.woocommerce :where(.woocommerce-result-count, .woocommerce-breadcrumb) { color: var(--rs-color-muted); font-size: var(--rs-font-size-sm); } body.reach-design-system.woocommerce .woocommerce-breadcrumb a { color: var(--rs-color-ink); text-decoration-color: var(--rs-color-gold); text-underline-offset: 3px; } body.reach-design-system.woocommerce :where( .woocommerce-ordering select, form.woocommerce-product-search input[type="search"], .widget_price_filter input[type="number"], .woocommerce-widget-layered-nav-dropdown select, div.product form.cart input.input-text, div.product form.cart input[type="number"], div.product form.cart select, div.product form.cart textarea, div.product #respond input[type="text"], div.product #respond input[type="email"], div.product #respond textarea ) { background: var(--rs-color-surface); border: var(--rs-border-strong); border-radius: var(--rs-radius-sm); box-shadow: none; box-sizing: border-box; color: var(--rs-color-ink); font: inherit; font-size: var(--rs-font-size-base); line-height: 1.4; max-width: 100%; min-height: var(--rs-control-height); padding: 0.7rem 0.85rem; transition: border-color var(--rs-transition-fast), box-shadow var(--rs-transition-fast), background-color var(--rs-transition-fast); } body.reach-design-system.woocommerce :where( form.woocommerce-product-search input[type="search"], div.product form.cart input.input-text, div.product form.cart input[type="number"], div.product form.cart textarea, div.product #respond input[type="text"], div.product #respond input[type="email"], div.product #respond textarea )::placeholder { color: var(--rs-color-subtle); opacity: 1; } body.reach-design-system.woocommerce :where( .woocommerce-ordering select, form.woocommerce-product-search input[type="search"], .widget_price_filter input[type="number"], .woocommerce-widget-layered-nav-dropdown select, div.product form.cart input.input-text, div.product form.cart input[type="number"], div.product form.cart select, div.product form.cart textarea, div.product #respond input[type="text"], div.product #respond input[type="email"], div.product #respond textarea ):focus { border-color: var(--rs-color-focus); box-shadow: var(--rs-focus-ring); outline: 0; } body.reach-design-system.woocommerce :where( .woocommerce-ordering select, form.woocommerce-product-search input[type="search"], .widget_price_filter input[type="number"], .woocommerce-widget-layered-nav-dropdown select, div.product form.cart input, div.product form.cart select, div.product form.cart textarea, div.product #respond input, div.product #respond textarea ):disabled { background: var(--rs-color-disabled); color: var(--rs-color-muted); cursor: not-allowed; } /* Buttons limited to product loops, product details, reviews, and notices */ body.reach-design-system.woocommerce ul.products li.product :where( a.button, button.button, input.button, .woocommerce-button ), body.reach-design-system.woocommerce div.product form.cart :where( button.button, input.button, .single_add_to_cart_button ), body.reach-design-system.woocommerce div.product #respond input#submit, body.reach-design-system.woocommerce :where( .woocommerce-message, .woocommerce-info, .woocommerce-error ) :where(a.button, button.button, input.button, .wc-forward) { align-items: center; appearance: none; background: var(--rs-color-ink); border: 1px solid var(--rs-color-ink); border-radius: var(--rs-radius-sm); box-shadow: none; box-sizing: border-box; color: var(--rs-color-on-ink); cursor: pointer; display: inline-flex; font: inherit; font-weight: var(--rs-font-weight-bold); justify-content: center; line-height: 1.2; min-height: var(--rs-control-height); padding: var(--rs-space-3) var(--rs-space-5); text-align: center; text-decoration: none; transition: background-color var(--rs-transition-fast), border-color var(--rs-transition-fast), box-shadow var(--rs-transition-fast), color var(--rs-transition-fast), transform var(--rs-transition-fast); } body.reach-design-system.woocommerce ul.products li.product :where( a.button, button.button, input.button, .woocommerce-button ):hover, body.reach-design-system.woocommerce div.product form.cart :where( button.button, input.button, .single_add_to_cart_button ):hover, body.reach-design-system.woocommerce div.product #respond input#submit:hover, body.reach-design-system.woocommerce :where( .woocommerce-message, .woocommerce-info, .woocommerce-error ) :where(a.button, button.button, input.button, .wc-forward):hover { background: var(--rs-color-ink-hover); border-color: var(--rs-color-ink-hover); color: var(--rs-color-on-ink); transform: translateY(-1px); } body.reach-design-system.woocommerce ul.products li.product :where(button.button, input.button):disabled, body.reach-design-system.woocommerce ul.products li.product :where(button.button, input.button).disabled, body.reach-design-system.woocommerce div.product form.cart :where(button.button, input.button):disabled, body.reach-design-system.woocommerce div.product form.cart :where(button.button, input.button).disabled { background: var(--rs-color-disabled); border-color: var(--rs-color-border); color: var(--rs-color-muted); cursor: not-allowed; opacity: 1; transform: none; } /* Notices on catalogue and product routes */ body.reach-design-system.woocommerce :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) { background: var(--rs-color-surface); border: var(--rs-border-default); border-left: 4px solid var(--rs-color-gold); border-radius: var(--rs-radius-md); box-shadow: none; box-sizing: border-box; color: var(--rs-color-ink); line-height: 1.55; list-style: none; margin: 0 0 var(--rs-space-5); padding: var(--rs-space-4) var(--rs-space-5); } body.reach-design-system.woocommerce .woocommerce-message { background: var(--rs-color-success-soft); border-left-color: var(--rs-color-success); } body.reach-design-system.woocommerce .woocommerce-error { background: var(--rs-color-error-soft); border-left-color: var(--rs-color-error); } body.reach-design-system.woocommerce :where(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { color: inherit; position: static; } /* Product and category loops */ body.reach-design-system.woocommerce ul.products { box-sizing: border-box; gap: var(--rs-space-5); } body.reach-design-system.woocommerce ul.products li.product { background: var(--rs-color-surface); border: var(--rs-border-default); border-radius: var(--rs-radius-lg); box-shadow: var(--rs-shadow-xs); box-sizing: border-box; min-width: 0; overflow: hidden; padding: var(--rs-space-4); transition: border-color var(--rs-transition-base), box-shadow var(--rs-transition-base), transform var(--rs-transition-base); } body.reach-design-system.woocommerce ul.products li.product:hover { border-color: var(--rs-color-border-strong); box-shadow: var(--rs-shadow-sm); transform: translateY(-2px); } body.reach-design-system.woocommerce ul.products li.product a { color: var(--rs-color-ink); text-decoration: none; } body.reach-design-system.woocommerce ul.products li.product a img { aspect-ratio: 1 / 1; background: var(--rs-color-surface); border-radius: var(--rs-radius-md); display: block; height: auto; margin: 0 0 var(--rs-space-3); max-width: 100%; object-fit: contain; width: 100%; } body.reach-design-system.woocommerce ul.products li.product :where( .woocommerce-loop-product__title, .woocommerce-loop-category__title ) { color: var(--rs-color-ink); font-size: var(--rs-font-size-base); font-weight: var(--rs-font-weight-semibold); line-height: 1.4; margin: 0 0 var(--rs-space-2); padding: 0; } body.reach-design-system.woocommerce ul.products li.product .woocommerce-loop-category__title .count { background: transparent; color: var(--rs-color-muted); font: inherit; } body.reach-design-system.woocommerce ul.products li.product .price { color: var(--rs-color-ink); font-size: var(--rs-font-size-lg); font-weight: var(--rs-font-weight-bold); line-height: 1.3; margin: 0 0 var(--rs-space-3); } body.reach-design-system.woocommerce ul.products li.product .price del { color: var(--rs-color-muted); opacity: 1; } body.reach-design-system.woocommerce ul.products li.product .price ins { color: var(--rs-color-ink); font-weight: inherit; text-decoration: none; } body.reach-design-system.woocommerce ul.products li.product .star-rating, body.reach-design-system.woocommerce div.product .star-rating { color: var(--rs-color-gold-hover); } body.reach-design-system.woocommerce span.onsale { background: var(--rs-color-gold); border-radius: var(--rs-radius-pill); box-shadow: none; color: var(--rs-color-on-gold); font-size: var(--rs-font-size-xs); font-weight: var(--rs-font-weight-bold); line-height: 1; margin: var(--rs-space-3); min-height: auto; min-width: auto; padding: 0.45rem 0.65rem; } body.reach-design-system.woocommerce :where(.stock, .available-on-backorder) { font-size: var(--rs-font-size-sm); font-weight: var(--rs-font-weight-semibold); } body.reach-design-system.woocommerce .stock.in-stock { color: var(--rs-color-success); } body.reach-design-system.woocommerce .stock.out-of-stock { color: var(--rs-color-error); } body.reach-design-system.woocommerce :where(.related.products, .upsells.products, .cross-sells) { margin-block: var(--rs-section-space) 0; } body.reach-design-system.woocommerce :where(.related.products, .upsells.products, .cross-sells).rs-is-empty { display: none !important; } body.reach-design-system.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; flex-wrap: wrap; gap: var(--rs-space-2); } body.reach-design-system.woocommerce nav.woocommerce-pagination ul li { border: 0; } body.reach-design-system.woocommerce nav.woocommerce-pagination ul li :where(a, span) { align-items: center; border: var(--rs-border-default); border-radius: var(--rs-radius-sm); color: var(--rs-color-ink); display: inline-flex; justify-content: center; min-height: var(--rs-touch-target-min); min-width: var(--rs-touch-target-min); padding: var(--rs-space-2); } body.reach-design-system.woocommerce nav.woocommerce-pagination ul li span.current, body.reach-design-system.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--rs-color-ink); border-color: var(--rs-color-ink); color: var(--rs-color-on-ink); } /* Single product */ body.reach-design-system.woocommerce div.product div.images img { background: var(--rs-color-surface); border-radius: var(--rs-radius-md); height: auto; max-width: 100%; object-fit: contain; } body.reach-design-system.woocommerce div.product .flex-control-thumbs li img { border: var(--rs-border-default); border-radius: var(--rs-radius-sm); box-sizing: border-box; } body.reach-design-system.woocommerce div.product .summary { color: var(--rs-color-ink); } body.reach-design-system.woocommerce div.product .product_title { font-size: var(--rs-font-size-page-title); line-height: var(--rs-line-height-tight); } body.reach-design-system.woocommerce div.product p.price, body.reach-design-system.woocommerce div.product span.price { color: var(--rs-color-ink); font-size: clamp(1.35rem, 2.5vw, 1.75rem); font-weight: var(--rs-font-weight-bold); } body.reach-design-system.woocommerce div.product :where(.price del, .product_meta) { color: var(--rs-color-muted); } body.reach-design-system.woocommerce div.product .product_meta a { color: var(--rs-color-ink); text-decoration-color: var(--rs-color-gold); text-underline-offset: 3px; } body.reach-design-system.woocommerce .quantity .qty { min-height: var(--rs-control-height); min-width: 4.5rem; padding-inline: 0.5rem; text-align: center; width: 5rem; } body.reach-design-system.woocommerce div.product form.cart { align-items: center; display: flex; flex-wrap: wrap; gap: var(--rs-space-3); } body.reach-design-system.woocommerce div.product form.cart::before, body.reach-design-system.woocommerce div.product form.cart::after { display: none; } body.reach-design-system.woocommerce div.product form.cart .variations { margin-bottom: var(--rs-space-4); width: 100%; } body.reach-design-system.woocommerce div.product form.cart .variations :where(th, td) { padding: var(--rs-space-2) 0; vertical-align: middle; } body.reach-design-system.woocommerce div.product form.cart .variations label { color: var(--rs-color-ink); font-weight: var(--rs-font-weight-semibold); } body.reach-design-system.woocommerce div.product form.cart .single_variation_wrap { max-width: 100%; min-width: 0; } body.reach-design-system.woocommerce div.product table.shop_attributes { border-collapse: collapse; border-spacing: 0; width: 100%; } body.reach-design-system.woocommerce div.product table.shop_attributes :where(th, td) { border-bottom: var(--rs-border-default); padding: var(--rs-space-3) var(--rs-space-4); text-align: left; vertical-align: top; } body.reach-design-system.woocommerce div.product table.shop_attributes th { color: var(--rs-color-ink); font-weight: var(--rs-font-weight-semibold); } body.reach-design-system.woocommerce div.product .woocommerce-tabs { margin-top: var(--rs-section-space); } body.reach-design-system.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: var(--rs-border-default); margin: 0 0 var(--rs-space-5); padding: 0; } body.reach-design-system.woocommerce div.product .woocommerce-tabs ul.tabs::before, body.reach-design-system.woocommerce div.product .woocommerce-tabs ul.tabs li::before, body.reach-design-system.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } body.reach-design-system.woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; margin: 0 var(--rs-space-4) 0 0; padding: 0; } body.reach-design-system.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--rs-color-gold); } body.reach-design-system.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--rs-color-ink); font-weight: var(--rs-font-weight-semibold); padding: var(--rs-space-3) 0; } body.reach-design-system.woocommerce div.product #respond { background: var(--rs-color-surface); border: var(--rs-border-default); border-radius: var(--rs-radius-lg); padding: var(--rs-space-5); } body.reach-design-system.woocommerce div.product #respond .comment-form > p { margin: 0 0 var(--rs-space-4); }