/* ========================================================================== Jouman — WooCommerce Consumes tokens from tokens.css only. No hardcoded colour, size or breakpoint. Logical properties throughout: the sheet is direction-agnostic and needs no rtl.css. WooCommerce core CSS stays enqueued; everything here is a targeted adjustment. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Shell -------------------------------------------------------------------------- */ /* * .jm-woo is a SCOPING class only. * * It is applied to on every commerce screen so this sheet's component * selectors also match on cart, checkout and account — those are ordinary * pages, not WooCommerce templates, so the wrapper div never renders there. * * It must therefore carry NO geometry. When it did, inherited * max-inline-size: var(--jm-container) plus auto margins, which centred and * inset the whole document and stopped the header and footer spanning the * full viewport width. * * Width for the shop wrapper comes from .jm-container (already on that div), * and vertical rhythm from .jm-main. */ .jm-woo { color: var(--jm-color-ink); } .jm-woo a { color: inherit; } .jm-woo :focus-visible { outline: 2px solid var(--jm-color-accent); outline-offset: 2px; } /* -------------------------------------------------------------------------- 2. Breadcrumb -------------------------------------------------------------------------- */ .jm-breadcrumb { margin-block-end: var(--jm-space-5); color: var(--jm-color-muted); font-size: var(--jm-fs-sm); line-height: var(--jm-lh-body); } .jm-breadcrumb a { color: var(--jm-color-ink-2); text-decoration: none; border-block-end: 1px solid transparent; } .jm-breadcrumb a:hover, .jm-breadcrumb a:focus-visible { border-block-end-color: var(--jm-color-line); } .jm-breadcrumb__sep { margin-inline: var(--jm-space-2); color: var(--jm-color-line); } /* -------------------------------------------------------------------------- 3. Notices -------------------------------------------------------------------------- */ .woocommerce-notices-wrapper:empty { display: none; } .jm-woo .woocommerce-message, .jm-woo .woocommerce-info, .jm-woo .woocommerce-error { margin: 0 0 var(--jm-space-5); padding: var(--jm-space-4) var(--jm-space-5); border: 1px solid var(--jm-color-line); border-inline-start: 3px solid var(--jm-color-olive); border-radius: var(--jm-radius); background-color: var(--jm-color-surface); color: var(--jm-color-ink); font-size: var(--jm-fs-sm); line-height: var(--jm-lh-body); list-style: none; } .jm-woo .woocommerce-error { border-inline-start-color: var(--jm-color-sale); } .jm-woo .woocommerce-message::before, .jm-woo .woocommerce-info::before, .jm-woo .woocommerce-error::before { content: none; } .jm-woo .woocommerce-message .button, .jm-woo .woocommerce-info .button { float: none; margin-inline-start: var(--jm-space-4); } /* -------------------------------------------------------------------------- 4. Shop header, ordering, filter drawer -------------------------------------------------------------------------- */ .woocommerce-products-header { margin-block-end: var(--jm-space-6); } .woocommerce-products-header__title { margin: 0 0 var(--jm-space-3); font-family: var(--jm-font-head); font-size: var(--jm-fs-2xl); font-weight: var(--jm-fw-semi); line-height: var(--jm-lh-head); } .term-description { max-inline-size: var(--jm-container-narrow); color: var(--jm-color-ink-2); line-height: var(--jm-lh-body); } .jm-woo .woocommerce-result-count, .jm-woo .woocommerce-ordering { margin-block-end: var(--jm-space-5); float: none; color: var(--jm-color-muted); font-size: var(--jm-fs-sm); } .jm-woo .woocommerce-ordering select { padding: var(--jm-space-2) var(--jm-space-3); border: 1px solid var(--jm-color-line); border-radius: var(--jm-radius); background-color: var(--jm-color-surface); color: var(--jm-color-ink); font-family: inherit; font-size: var(--jm-fs-sm); } .jm-shop-toolbar { display: flex; flex-wrap: wrap; gap: var(--jm-space-3); align-items: center; justify-content: space-between; padding-block: var(--jm-space-3); border-block-end: 1px solid var(--jm-color-line-soft); margin-block-end: var(--jm-space-5); } /* Filter drawer — .is-open is toggled by assets/js/filters.js */ .jm-filters__toggle { display: inline-flex; align-items: center; gap: var(--jm-space-2); padding: var(--jm-space-2) var(--jm-space-4); border: 1px solid var(--jm-color-line); border-radius: var(--jm-radius); background-color: var(--jm-color-surface); color: var(--jm-color-ink); font-family: inherit; font-size: var(--jm-fs-sm); cursor: pointer; } .jm-filters__toggle:hover { border-color: var(--jm-color-ink-2); } .jm-filters__drawer { display: none; padding: var(--jm-space-5); border: 1px solid var(--jm-color-line); border-radius: var(--jm-radius); background-color: var(--jm-color-surface); margin-block-end: var(--jm-space-6); } .jm-filters__drawer.is-open { display: block; } /* No-JS: the drawer stays open until filters.js marks the block as enhanced. */ .jm-filters:not(.is-enhanced) .jm-filters__drawer { display: block; } .jm-filters:not(.is-enhanced) .jm-filters__toggle { display: none; } /* -------------------------------------------------------------------------- 5. Product grid + card -------------------------------------------------------------------------- */ .jm-woo ul.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jm-space-5) var(--jm-space-4); margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .jm-woo ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jm-space-6) var(--jm-space-5); } } @media (min-width: 1024px) { .jm-woo ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* WooCommerce's layout sheet floats and percentage-widths every .product. Same specificity as core, but this sheet is enqueued after it, so the reset wins. */ .jm-woo ul.products li.product { inline-size: auto; max-inline-size: none; margin: 0; padding: 0; float: none; clear: none; text-align: start; } .jm-woo ul.products li.product::before, .jm-woo ul.products li.product::after { content: none; } .jm-product-card { position: relative; display: flex; flex-direction: column; gap: var(--jm-space-3); background-color: transparent; } .jm-product-card > a { display: flex; flex-direction: column; gap: var(--jm-space-3); color: inherit; text-decoration: none; } /* --- media -------------------------------------------------------------- */ .jm-product-card__media { position: relative; } .jm-product-card__frame { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--jm-radius); background-color: var(--jm-color-surface-2); } .jm-product-card__image { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: opacity var(--jm-transition), transform var(--jm-transition); } .jm-product-card__frame.has-swap .jm-product-card__image--alt { position: absolute; inset: 0; opacity: 0; } .jm-product-card__frame.has-swap:hover .jm-product-card__image--alt, .jm-product-card > a:focus-visible .jm-product-card__frame.has-swap .jm-product-card__image--alt { opacity: 1; } .jm-product-card:hover .jm-product-card__frame:not(.has-swap) .jm-product-card__image { transform: scale(1.03); } /* --- badges ------------------------------------------------------------- */ .jm-badges { position: absolute; inset-block-start: var(--jm-space-3); inset-inline-start: var(--jm-space-3); z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--jm-space-1); pointer-events: none; } .jm-badge { display: inline-block; padding: var(--jm-space-1) var(--jm-space-3); border-radius: var(--jm-radius); font-size: var(--jm-fs-xs); font-weight: var(--jm-fw-semi); line-height: var(--jm-lh-tight); } /* !important is unavoidable here: core styles .onsale as an absolutely positioned pink circle with min-width/min-height and its own placement, at a specificity this flat tag cannot beat without a much uglier selector chain. Scoped to our own badge class only. */ .jm-woo .jm-badge--sale { position: static !important; inset: auto !important; min-inline-size: 0 !important; min-block-size: 0 !important; border-radius: var(--jm-radius) !important; margin: 0 !important; padding: var(--jm-space-1) var(--jm-space-3) !important; background-color: var(--jm-color-sale) !important; color: var(--jm-color-on-accent) !important; font-size: var(--jm-fs-xs) !important; font-weight: var(--jm-fw-semi) !important; line-height: var(--jm-lh-tight) !important; } .jm-badge--oos { background-color: var(--jm-color-oos); color: var(--jm-color-on-accent); } .jm-badges--single { inset-block-start: var(--jm-space-4); inset-inline-start: var(--jm-space-4); } /* --- body --------------------------------------------------------------- */ .jm-product-card__body { display: flex; flex-direction: column; gap: var(--jm-space-1); } .jm-woo ul.products li.product .woocommerce-loop-product__title { margin: 0; padding: 0; font-family: var(--jm-font-head); font-size: var(--jm-fs-base); font-weight: var(--jm-fw-medium); line-height: var(--jm-lh-head); color: var(--jm-color-ink); } .jm-woo ul.products li.product .price { margin: 0; color: var(--jm-color-accent); font-size: var(--jm-fs-sm); font-weight: var(--jm-fw-semi); font-variant-numeric: tabular-nums; } .jm-woo .price del { margin-inline-end: var(--jm-space-2); color: var(--jm-color-muted); font-weight: var(--jm-fw-regular); opacity: 1; } .jm-woo .price ins { background: none; text-decoration: none; } .jm-woo ul.products li.product .star-rating { margin: 0; font-size: var(--jm-fs-xs); color: var(--jm-color-gold); } .jm-product-card__actions { margin-block-start: var(--jm-space-1); } .jm-woo ul.products li.product .button { display: inline-block; margin: 0; padding: 0; background: none; border: 0; border-block-end: 1px solid var(--jm-color-line); border-radius: 0; color: var(--jm-color-ink-2); font-size: var(--jm-fs-sm); font-weight: var(--jm-fw-medium); line-height: var(--jm-lh-tight); } .jm-woo ul.products li.product .button:hover { border-block-end-color: var(--jm-color-accent); color: var(--jm-color-accent); background: none; } .jm-woo ul.products li.product .button.loading, .jm-woo ul.products li.product .button.added { opacity: 0.7; } .jm-woo ul.products li.product .added_to_cart { display: inline-block; margin-inline-start: var(--jm-space-3); color: var(--jm-color-accent); font-size: var(--jm-fs-sm); } /* -------------------------------------------------------------------------- 6. Pagination -------------------------------------------------------------------------- */ .jm-woo .woocommerce-pagination { margin-block-start: var(--jm-space-7); text-align: center; } .jm-woo .woocommerce-pagination ul.page-numbers { display: inline-flex; flex-wrap: wrap; gap: var(--jm-space-2); border: 0; padding: 0; margin: 0; } .jm-woo .woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; overflow: visible; } .jm-woo .woocommerce-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 2.5rem; min-block-size: 2.5rem; padding-inline: var(--jm-space-2); border: 1px solid var(--jm-color-line); border-radius: var(--jm-radius); background-color: var(--jm-color-surface); color: var(--jm-color-ink-2); font-size: var(--jm-fs-sm); font-variant-numeric: tabular-nums; text-decoration: none; } .jm-woo .woocommerce-pagination .page-numbers.current { border-color: var(--jm-color-accent); background-color: var(--jm-color-accent); color: var(--jm-color-on-accent); } /* -------------------------------------------------------------------------- 7. Single product layout -------------------------------------------------------------------------- */ .jm-woo div.product { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--jm-space-6); } @media (min-width: 1024px) { .jm-woo div.product { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: var(--jm-space-8); align-items: start; } .jm-woo div.product .woocommerce-product-gallery { grid-column: 1; position: sticky; inset-block-start: var(--jm-space-5); } .jm-woo div.product .summary { grid-column: 2; } .jm-woo div.product .woocommerce-tabs, .jm-woo div.product .related, .jm-woo div.product .upsells { grid-column: 1 / -1; } } /* Core floats the gallery and the summary at ~48% each. */ .jm-woo div.product .woocommerce-product-gallery, .jm-woo div.product .summary { inline-size: auto; margin: 0; float: none; } .jm-woo div.product .summary { display: flex; flex-direction: column; gap: var(--jm-space-4); } .jm-woo .product_title { margin: 0; font-family: var(--jm-font-head); font-size: var(--jm-fs-xl); font-weight: var(--jm-fw-semi); line-height: var(--jm-lh-head); } @media (min-width: 768px) { .jm-woo .product_title { font-size: var(--jm-fs-2xl); } } .jm-woo div.product .summary > .price { margin: 0; color: var(--jm-color-accent); font-size: var(--jm-fs-lg); font-weight: var(--jm-fw-semi); font-variant-numeric: tabular-nums; } .jm-woo .woocommerce-product-details__short-description { color: var(--jm-color-ink-2); line-height: var(--jm-lh-body); } .jm-woo .woocommerce-product-details__short-description p:last-child { margin-block-end: 0; } .jm-woo .stock.in-stock { color: var(--jm-color-instock); font-size: var(--jm-fs-sm); } .jm-woo .stock.out-of-stock { color: var(--jm-color-sale); font-size: var(--jm-fs-sm); } .jm-woo .product_meta { padding-block-start: var(--jm-space-4); border-block-start: 1px solid var(--jm-color-line-soft); color: var(--jm-color-muted); font-size: var(--jm-fs-sm); line-height: var(--jm-lh-body); } .jm-woo .product_meta > span { display: block; } /* -------------------------------------------------------------------------- 8. Gallery -------------------------------------------------------------------------- */ .jm-gallery { position: relative; } .jm-gallery .woocommerce-product-gallery__wrapper { margin: 0; } .jm-gallery .woocommerce-product-gallery__image { border-radius: var(--jm-radius); overflow: hidden; background-color: var(--jm-color-surface-2); } .jm-gallery .woocommerce-product-gallery__image img { inline-size: 100%; block-size: auto; display: block; } .jm-gallery .woocommerce-product-gallery__trigger { inset-block-start: var(--jm-space-3); inset-inline-end: var(--jm-space-3); z-index: 3; border-radius: var(--jm-radius-pill); background-color: var(--jm-color-surface); color: var(--jm-color-ink); box-shadow: var(--jm-shadow-sm); } /* Thumbnail strip — Woo's flexslider control list, plus the theme's own fallback list. A 4-6 image set fills one row at md and up, two rows below it. */ .jm-gallery .flex-control-thumbs, .jm-gallery__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--jm-space-2); margin: var(--jm-space-3) 0 0; padding: 0; list-style: none; } @media (min-width: 768px) { .jm-gallery .flex-control-thumbs, .jm-gallery__thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .jm-gallery .flex-control-thumbs li, .jm-gallery__thumbs li { inline-size: auto; margin: 0; float: none; list-style: none; } .jm-gallery .flex-control-thumbs img, .jm-gallery__thumb img { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: var(--jm-radius); border: 1px solid transparent; opacity: 0.7; cursor: pointer; transition: opacity var(--jm-transition), border-color var(--jm-transition); } .jm-gallery .flex-control-thumbs img.flex-active, .jm-gallery .flex-control-thumbs img:hover, .jm-gallery__thumb[aria-current="true"] img, .jm-gallery__thumb:hover img { opacity: 1; border-color: var(--jm-color-ink-2); } .jm-gallery__thumb { display: block; padding: 0; border: 0; background: none; cursor: pointer; } /* -------------------------------------------------------------------------- 9. Variations / swatches -------------------------------------------------------------------------- */ .jm-woo .variations { inline-size: 100%; margin: 0; border: 0; border-collapse: collapse; } .jm-woo .variations tbody, .jm-woo .variations tr, .jm-woo .variations th, .jm-woo .variations td { display: block; inline-size: auto; padding: 0; border: 0; text-align: start; } .jm-woo .variations tr + tr { margin-block-start: var(--jm-space-4); } .jm-woo .variations th.label { margin-block-end: var(--jm-space-2); color: var(--jm-color-ink-2); font-size: var(--jm-fs-sm); font-weight: var(--jm-fw-semi); } .jm-woo .variations select { inline-size: 100%; max-inline-size: 20rem; padding: var(--jm-space-3); border: 1px solid var(--jm-color-line); border-radius: var(--jm-radius); background-color: var(--jm-color-surface); color: var(--jm-color-ink); font-family: inherit; font-size: var(--jm-fs-base); } .jm-woo .reset_variations { display: inline-block; margin-block-start: var(--jm-space-2); color: var(--jm-color-muted); font-size: var(--jm-fs-sm); } /* Optional swatch list, used when a plugin or a future template supplies one. Works for pa_color today and for a size attribute added later without any change. */ .jm-swatches { display: flex; flex-wrap: wrap; gap: var(--jm-space-2); margin: 0; padding: 0; list-style: none; } .jm-swatch { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 2.75rem; min-block-size: 2.75rem; padding-inline: var(--jm-space-3); border: 1px solid var(--jm-color-line); border-radius: var(--jm-radius); background-color: var(--jm-color-surface); color: var(--jm-color-ink); font-size: var(--jm-fs-sm); cursor: pointer; } .jm-swatch[aria-pressed="true"], .jm-swatch.is-selected { border-color: var(--jm-color-accent); box-shadow: inset 0 0 0 1px var(--jm-color-accent); } .jm-swatch[aria-disabled="true"] { color: var(--jm-color-oos); cursor: not-allowed; text-decoration: line-through; } .jm-swatch--color { padding: 0; min-inline-size: 2rem; min-block-size: 2rem; border-radius: var(--jm-radius-pill); } .jm-woo .woocommerce-variation-price { margin-block: var(--jm-space-3); color: var(--jm-color-accent); font-weight: var(--jm-fw-semi); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 10. Quantity stepper -------------------------------------------------------------------------- */ .jm-quantity { display: inline-flex; align-items: stretch; overflow: hidden; border: 1px solid var(--jm-color-line); border-radius: var(--jm-radius); background-color: var(--jm-color-surface); } .jm-quantity.hidden { display: none; } .jm-woo .jm-quantity__input, .jm-woo .jm-quantity input.qty { inline-size: 4.5rem; min-block-size: 2.75rem; padding: var(--jm-space-2); border: 0; background: none; color: var(--jm-color-ink); font-family: inherit; font-size: var(--jm-fs-base); font-variant-numeric: tabular-nums; text-align: center; } /* Slot for +/- controls injected on woocommerce_before/after_quantity_input_field. */ .jm-quantity__button { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 2.75rem; padding: 0; border: 0; border-inline-end: 1px solid var(--jm-color-line); background-color: var(--jm-color-surface-2); color: var(--jm-color-ink); cursor: pointer; } .jm-quantity__button:last-child { border-inline-end: 0; border-inline-start: 1px solid var(--jm-color-line); } /* -------------------------------------------------------------------------- 11. Buttons -------------------------------------------------------------------------- */ .jm-woo .single_add_to_cart_button, .jm-woo .checkout-button, .jm-woo button[name="woocommerce_checkout_place_order"], .jm-woo .button.alt { display: inline-flex; align-items: center; justify-content: center; gap: var(--jm-space-2); min-block-size: 2.75rem; padding: var(--jm-space-3) var(--jm-space-6); border: 1px solid var(--jm-color-accent); border-radius: var(--jm-radius); background-color: var(--jm-color-accent); color: var(--jm-color-on-accent); font-family: inherit; font-size: var(--jm-fs-base); font-weight: var(--jm-fw-semi); line-height: var(--jm-lh-tight); text-decoration: none; cursor: pointer; transition: background-color var(--jm-transition), border-color var(--jm-transition); } .jm-woo .single_add_to_cart_button:hover, .jm-woo .checkout-button:hover, .jm-woo button[name="woocommerce_checkout_place_order"]:hover, .jm-woo .button.alt:hover { background-color: var(--jm-color-accent-hover); border-color: var(--jm-color-accent-hover); color: var(--jm-color-on-accent); } .jm-woo .single_add_to_cart_button:disabled, .jm-woo .single_add_to_cart_button.disabled { background-color: var(--jm-color-oos); border-color: var(--jm-color-oos); cursor: not-allowed; } .jm-woo form.cart { display: flex; flex-wrap: wrap; gap: var(--jm-space-3); align-items: center; margin: 0; } .jm-woo form.cart .single_add_to_cart_button { flex: 1 1 12rem; } .jm-woo form.variations_form.cart { display: block; } .jm-woo .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: var(--jm-space-3); align-items: center; } /* -------------------------------------------------------------------------- 12. Coverage & fit spec -------------------------------------------------------------------------- */ .jm-coverage-spec { padding-block: var(--jm-space-4); border-block: 1px solid var(--jm-color-line-soft); } .jm-coverage-spec__title { margin: 0 0 var(--jm-space-3); font-family: var(--jm-font-head); font-size: var(--jm-fs-md); font-weight: var(--jm-fw-semi); line-height: var(--jm-lh-head); } .jm-coverage-spec__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--jm-space-2); margin: 0; } @media (min-width: 480px) { .jm-coverage-spec__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--jm-space-3) var(--jm-space-5); } } .jm-coverage-spec__row { display: flex; flex-wrap: wrap; gap: var(--jm-space-2); align-items: baseline; justify-content: space-between; padding-block-end: var(--jm-space-2); border-block-end: 1px dotted var(--jm-color-line); } .jm-coverage-spec__label { margin: 0; color: var(--jm-color-muted); font-size: var(--jm-fs-sm); } .jm-coverage-spec__value { margin: 0; color: var(--jm-color-ink); font-size: var(--jm-fs-sm); font-weight: var(--jm-fw-medium); text-align: end; } .jm-coverage-spec__row--length .jm-coverage-spec__value { font-variant-numeric: tabular-nums; } .jm-coverage-spec__opacity { display: inline-flex; align-items: center; gap: var(--jm-space-2); } .jm-coverage-spec__segment { inline-size: var(--jm-space-5); block-size: var(--jm-space-2); border-radius: var(--jm-radius); background-color: var(--jm-color-surface-2); box-shadow: inset 0 0 0 1px var(--jm-color-line); } .jm-coverage-spec__segment.is-on { background-color: var(--jm-color-olive); box-shadow: none; } .jm-coverage-spec__opacity-word { color: var(--jm-color-ink-2); font-weight: var(--jm-fw-regular); } /* -------------------------------------------------------------------------- 13. Delivery estimate + WhatsApp ask -------------------------------------------------------------------------- */ .jm-delivery { padding: var(--jm-space-4); border: 1px solid var(--jm-color-line-soft); border-radius: var(--jm-radius); background-color: var(--jm-color-surface); } .jm-delivery__title { margin: 0 0 var(--jm-space-2); font-family: var(--jm-font-head); font-size: var(--jm-fs-sm); font-weight: var(--jm-fw-semi); } .jm-delivery__list { display: grid; gap: var(--jm-space-1); margin: 0; padding: 0; list-style: none; } .jm-delivery__item { display: flex; flex-wrap: wrap; gap: var(--jm-space-2); justify-content: space-between; font-size: var(--jm-fs-sm); line-height: var(--jm-lh-body); } .jm-delivery__area { color: var(--jm-color-muted); } .jm-delivery__value { color: var(--jm-color-ink); text-align: end; } .jm-ask { margin: 0; } .jm-ask__link { display: inline-flex; align-items: center; gap: var(--jm-space-2); min-block-size: 2.75rem; color: var(--jm-color-olive); font-size: var(--jm-fs-sm); font-weight: var(--jm-fw-medium); text-decoration: none; border-block-end: 1px solid transparent; } .jm-ask__link:hover, .jm-ask__link:focus-visible { border-block-end-color: var(--jm-color-olive); } /* -------------------------------------------------------------------------- 14. Tabs, reviews, related -------------------------------------------------------------------------- */ .jm-woo .woocommerce-tabs { margin-block-start: var(--jm-space-7); } .jm-woo .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: var(--jm-space-5); margin: 0 0 var(--jm-space-5); padding: 0 0 var(--jm-space-2); border-block-end: 1px solid var(--jm-color-line); list-style: none; } .jm-woo .woocommerce-tabs ul.tabs::before, .jm-woo .woocommerce-tabs ul.tabs li::before, .jm-woo .woocommerce-tabs ul.tabs li::after { content: none; } .jm-woo .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; } .jm-woo .woocommerce-tabs ul.tabs li a { display: inline-block; padding: 0 0 var(--jm-space-2); border-block-end: 2px solid transparent; color: var(--jm-color-muted); font-size: var(--jm-fs-sm); font-weight: var(--jm-fw-medium); text-decoration: none; } .jm-woo .woocommerce-tabs ul.tabs li.active a { color: var(--jm-color-ink); border-block-end-color: var(--jm-color-accent); } .jm-woo .woocommerce-Tabs-panel { color: var(--jm-color-ink-2); line-height: var(--jm-lh-body); max-inline-size: var(--jm-container-narrow); } .jm-woo .woocommerce-Tabs-panel h2 { font-family: var(--jm-font-head); font-size: var(--jm-fs-md); font-weight: var(--jm-fw-semi); } .jm-woo .shop_attributes th { color: var(--jm-color-muted); font-weight: var(--jm-fw-medium); text-align: start; } .jm-woo .related > h2, .jm-woo .upsells > h2 { margin: 0 0 var(--jm-space-5); font-family: var(--jm-font-head); font-size: var(--jm-fs-lg); font-weight: var(--jm-fw-semi); } .jm-woo .related, .jm-woo .upsells { margin-block-start: var(--jm-space-8); padding-block-start: var(--jm-space-6); border-block-start: 1px solid var(--jm-color-line-soft); } /* -------------------------------------------------------------------------- 15. Cart -------------------------------------------------------------------------- */ .jm-woo .shop_table { inline-size: 100%; border: 1px solid var(--jm-color-line); border-radius: var(--jm-radius); border-collapse: collapse; background-color: var(--jm-color-surface); } .jm-woo .shop_table th { padding: var(--jm-space-3) var(--jm-space-4); background-color: var(--jm-color-surface-2); color: var(--jm-color-ink-2); font-size: var(--jm-fs-sm); font-weight: var(--jm-fw-semi); text-align: start; } .jm-woo .shop_table td { padding: var(--jm-space-4); border-block-start: 1px solid var(--jm-color-line-soft); font-size: var(--jm-fs-sm); vertical-align: middle; } .jm-woo .shop_table .product-thumbnail img { inline-size: 4.5rem; block-size: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--jm-radius); display: block; } .jm-woo .shop_table .product-name a { color: var(--jm-color-ink); font-weight: var(--jm-fw-medium); text-decoration: none; } .jm-woo .shop_table .product-price, .jm-woo .shop_table .product-subtotal, .jm-woo .shop_table .amount { font-variant-numeric: tabular-nums; } .jm-woo .shop_table .product-remove a.remove { display: inline-flex; align-items: center; justify-content: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--jm-radius-pill); color: var(--jm-color-muted); font-size: var(--jm-fs-md); text-decoration: none; } .jm-woo .shop_table .product-remove a.remove:hover { background-color: var(--jm-color-accent-soft); color: var(--jm-color-sale); } /* Under md the cart table becomes a stack of cards. Core cart.php already emits a data-title on every cell, so the row labels need no template override. */ @media (max-width: 767.98px) { .jm-woo .woocommerce-cart-form .shop_table, .jm-woo .woocommerce-cart-form .shop_table tbody, .jm-woo .woocommerce-cart-form .shop_table tr, .jm-woo .woocommerce-cart-form .shop_table td { display: block; inline-size: 100%; } .jm-woo .woocommerce-cart-form .shop_table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .jm-woo .woocommerce-cart-form .shop_table { border: 0; background: none; } .jm-woo .woocommerce-cart-form .shop_table tr.cart_item { position: relative; margin-block-end: var(--jm-space-4); padding: var(--jm-space-4); border: 1px solid var(--jm-color-line); border-radius: var(--jm-radius); background-color: var(--jm-color-surface); } .jm-woo .woocommerce-cart-form .shop_table tr.cart_item td { display: flex; align-items: center; justify-content: space-between; gap: var(--jm-space-3); padding: var(--jm-space-2) 0; border: 0; } .jm-woo .woocommerce-cart-form .shop_table tr.cart_item td::before { content: attr(data-title); color: var(--jm-color-muted); font-size: var(--jm-fs-xs); } .jm-woo .woocommerce-cart-form .shop_table tr.cart_item td.product-thumbnail::before, .jm-woo .woocommerce-cart-form .shop_table tr.cart_item td.product-remove::before { content: none; } .jm-woo .woocommerce-cart-form .shop_table tr.cart_item td.product-remove { position: absolute; inset-block-start: var(--jm-space-2); inset-inline-end: var(--jm-space-2); inline-size: auto; padding: 0; } .jm-woo .woocommerce-cart-form .shop_table tr:not(.cart_item) td { padding-inline: 0; } } .jm-woo .cart-collaterals, .jm-woo .cart_totals { inline-size: 100%; float: none; } .jm-woo .cart_totals { margin-block-start: var(--jm-space-6); padding: var(--jm-space-5); border: 1px solid var(--jm-color-line); border-radius: var(--jm-radius); background-color: var(--jm-color-surface); } @media (min-width: 768px) { .jm-woo .cart_totals { max-inline-size: 26rem; margin-inline-start: auto; } } .jm-woo .cart_totals h2 { margin: 0 0 var(--jm-space-4); font-family: var(--jm-font-head); font-size: var(--jm-fs-md); font-weight: var(--jm-fw-semi); } .jm-woo .cart_totals .shop_table { border: 0; background: none; } .jm-woo .cart_totals .shop_table th, .jm-woo .cart_totals .shop_table td { padding: var(--jm-space-2) 0; background: none; } .jm-woo .wc-proceed-to-checkout { padding: var(--jm-space-4) 0 0; } .jm-woo .wc-proceed-to-checkout .checkout-button { inline-size: 100%; } .jm-woo .coupon { display: flex; flex-wrap: wrap; gap: var(--jm-space-2); align-items: center; } .jm-woo .coupon input[type="text"] { flex: 1 1 10rem; } /* -------------------------------------------------------------------------- 16. Forms, checkout, account -------------------------------------------------------------------------- */ .jm-woo input[type="text"], .jm-woo input[type="email"], .jm-woo input[type="tel"], .jm-woo input[type="password"], .jm-woo input[type="search"], .jm-woo input[type="number"], .jm-woo textarea, .jm-woo select { inline-size: 100%; min-block-size: 2.75rem; padding: var(--jm-space-3); border: 1px solid var(--jm-color-line); border-radius: var(--jm-radius); background-color: var(--jm-color-surface); color: var(--jm-color-ink); font-family: inherit; font-size: var(--jm-fs-base); line-height: var(--jm-lh-body); } .jm-woo input:focus-visible, .jm-woo textarea:focus-visible, .jm-woo select:focus-visible { border-color: var(--jm-color-accent); } .jm-woo .form-row { display: block; margin: 0 0 var(--jm-space-4); padding: 0; inline-size: 100%; float: none; } .jm-woo .form-row label { display: block; margin-block-end: var(--jm-space-2); color: var(--jm-color-ink-2); font-size: var(--jm-fs-sm); font-weight: var(--jm-fw-medium); } .jm-woo .required { color: var(--jm-color-sale); text-decoration: none; } .jm-woo .woocommerce-invalid input, .jm-woo .woocommerce-invalid select { border-color: var(--jm-color-sale); } .jm-woo .woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--jm-space-6); } @media (min-width: 1024px) { .jm-woo .woocommerce-checkout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--jm-space-8); align-items: start; } .jm-woo #customer_details { grid-column: 1; } .jm-woo #order_review_heading, .jm-woo #order_review { grid-column: 2; } } .jm-woo #customer_details .col-1, .jm-woo #customer_details .col-2 { inline-size: 100%; float: none; margin: 0; } .jm-woo #customer_details .col-2:not(:empty) { margin-block-start: var(--jm-space-5); } .jm-woo #order_review_heading { margin: 0 0 var(--jm-space-4); font-family: var(--jm-font-head); font-size: var(--jm-fs-md); font-weight: var(--jm-fw-semi); } .jm-woo #order_review { padding: var(--jm-space-5); border: 1px solid var(--jm-color-line); border-radius: var(--jm-radius); background-color: var(--jm-color-surface); } .jm-woo #order_review .shop_table { border: 0; background: none; } .jm-woo #payment { border-radius: var(--jm-radius); background-color: var(--jm-color-surface-2); } .jm-woo #payment ul.payment_methods { padding: var(--jm-space-4); border-block-end: 1px solid var(--jm-color-line); list-style: none; } .jm-woo #payment ul.payment_methods li { margin: 0; line-height: var(--jm-lh-body); } .jm-woo #payment div.payment_box { margin-block-start: var(--jm-space-3); padding: var(--jm-space-3) var(--jm-space-4); border-radius: var(--jm-radius); background-color: var(--jm-color-surface); color: var(--jm-color-ink-2); font-size: var(--jm-fs-sm); } .jm-woo #payment div.payment_box::before { content: none; } .jm-woo #payment div.form-row.place-order { padding: var(--jm-space-4); } .jm-checkout-note { display: flex; align-items: center; gap: var(--jm-space-2); margin: 0 0 var(--jm-space-4); padding: var(--jm-space-3) var(--jm-space-4); border-inline-start: 3px solid var(--jm-color-olive); border-radius: var(--jm-radius); background-color: var(--jm-color-olive-soft); color: var(--jm-color-ink); font-size: var(--jm-fs-sm); line-height: var(--jm-lh-body); } .jm-checkout-note .jm-icon { flex: none; color: var(--jm-color-olive); } /* --- account ------------------------------------------------------------ */ .woocommerce-account .jm-woo > .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--jm-space-6); } @media (min-width: 768px) { .woocommerce-account .jm-woo > .woocommerce { grid-template-columns: 15rem minmax(0, 1fr); column-gap: var(--jm-space-7); align-items: start; } } .jm-woo .woocommerce-MyAccount-navigation, .jm-woo .woocommerce-MyAccount-content { inline-size: 100%; float: none; } .jm-woo .woocommerce-MyAccount-content { line-height: var(--jm-lh-body); } .jm-woo .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--jm-color-line); border-radius: var(--jm-radius); background-color: var(--jm-color-surface); overflow: hidden; } .jm-woo .woocommerce-MyAccount-navigation li + li { border-block-start: 1px solid var(--jm-color-line-soft); } .jm-woo .woocommerce-MyAccount-navigation li a { display: block; padding: var(--jm-space-3) var(--jm-space-4); color: var(--jm-color-ink-2); font-size: var(--jm-fs-sm); text-decoration: none; } .jm-woo .woocommerce-MyAccount-navigation li.is-active a { background-color: var(--jm-color-accent-soft); color: var(--jm-color-accent); font-weight: var(--jm-fw-semi); } /* -------------------------------------------------------------------------- 17. Motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .jm-woo *, .jm-woo *::before, .jm-woo *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .jm-product-card:hover .jm-product-card__image { transform: none; } } /* ========================================================================== Cascade corrections (2026-08-29) ========================================================================== */ /* 1. WooCommerce adds clearfix pseudo-elements to ul.products: .woocommerce ul.products::before/::after { content:" "; display:table } In a grid container those pseudo-elements become GRID ITEMS and each consumes a cell, which pushed the first product out of column 1 and left ragged rows. The theme previously reset the pseudo-elements on li.product only, not on the list itself. */ .jm-woo ul.products::before, .jm-woo ul.products::after { content: none; display: none; } /* 2. Primary button colour. Core uses .woocommerce a.button.alt (0,3,1); the theme's .jm-woo .button.alt is (0,3,0), so WooCommerce's purple won on every cart and checkout button. Matching the element part of core's selector restores the brand accent. */ .jm-woo a.button.alt, .jm-woo button.button.alt, .jm-woo input.button.alt, .jm-woo #respond input#submit.alt, .jm-woo #place_order, .jm-woo .checkout-button.button { background-color: var(--jm-color-accent); border: 1px solid var(--jm-color-accent); color: var(--jm-color-on-accent); } .jm-woo a.button.alt:hover, .jm-woo button.button.alt:hover, .jm-woo input.button.alt:hover, .jm-woo #respond input#submit.alt:hover, .jm-woo #place_order:hover, .jm-woo .checkout-button.button:hover { background-color: var(--jm-color-accent-hover); border-color: var(--jm-color-accent-hover); color: var(--jm-color-on-accent); } /* 3. Checkout column placement. With only grid-column set, auto-placement put #order_review_heading in row 1 beside the (tall) customer details block and #order_review in row 2, leaving a large empty gap above the order summary. Pin the rows instead. */ @media (min-width: 1024px) { .jm-woo #customer_details { grid-column: 1; grid-row: 1 / span 2; } .jm-woo #order_review_heading { grid-column: 2; grid-row: 1; align-self: start; } .jm-woo #order_review { grid-column: 2; grid-row: 2; align-self: start; } }