); .woocommerce on alone does not match * “.single-product .woocommerce div.product” and was a common merge pitfall. */ @media (min-width: 1280px) { .single-product .np-woocommerce { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: var(--np-space-8); padding-right: var(--np-space-8); box-sizing: border-box; } .single-product .np-woocommerce div.product { padding-left: 0; padding-right: 0; box-sizing: border-box; /* Larger main photo (700px) on a wider 1400px content rail. Summary takes the remaining ~620px. */ grid-template-columns: 700px 1fr; gap: 0 var(--np-space-4); justify-content: start; } .single-product .np-woocommerce div.product .woocommerce-product-gallery { width: 700px !important; max-width: 700px !important; --np-pdp-gallery-scale: 1; margin-left: 0 !important; margin-right: auto !important; } .single-product .np-woocommerce div.product .product_title { /* Fixed size on the locked desktop rail — never reflows on resize */ font-size: 2rem; } .single-product .np-woocommerce div.product .np-var-cards { /* Fill the summary column — fluid columns keep long variation names (e.g. "Lamborghini Huracan GT3 EVO") inside the cards. */ grid-template-columns: repeat(3, 1fr); justify-content: stretch; width: 100%; max-width: 100%; margin-left: 0; margin-right: auto; } /* Simple-product cart form fills the summary column. The horizontal qty + Add to Cart row lives inside .np-cart-action-row (a flex row), not on form.cart itself. */ .single-product .np-woocommerce div.product .summary form.cart:not(.variations_form) { max-width: none; width: 100%; } /* Variable-product form & its variation-add-to-cart wrapper also fill the summary column as vertical blocks. */ .single-product .np-woocommerce div.product .summary form.cart.variations_form, .single-product .np-woocommerce div.product .summary .woocommerce-variation-add-to-cart { max-width: none; width: 100%; } } /* Primary CTA — flat fill (no inner frame from core / theme outlines) */ .single-product .single_add_to_cart_button.button, .single-product button.single_add_to_cart_button { border: none !important; outline: none !important; box-shadow: none !important; } .single-product .single_add_to_cart_button.button:hover, .single-product button.single_add_to_cart_button:hover { box-shadow: 0 6px 20px rgba(47, 128, 237, 0.35) !important; } /* Shop Header — hidden because we render our own in woocommerce.php */ .woocommerce-products-header { display: none; } /* Shop Toolbar */ .np-shop-toolbar { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto var(--np-space-8); padding: 0 var(--np-space-8); } .np-shop-toolbar .woocommerce-result-count { font-family: var(--np-font-label); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--np-on-surface-variant); margin: 0; } .np-shop-toolbar .woocommerce-ordering select { padding: var(--np-space-2) var(--np-space-8) var(--np-space-2) var(--np-space-3); border: none; border-bottom: 1px solid var(--np-outline-variant); background-color: transparent; font-family: var(--np-font-label); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--np-on-surface); cursor: pointer; } /* Products Grid */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--np-space-8); max-width: 1400px; margin: 0 auto; padding: 0 var(--np-space-8); list-style: none; } .woocommerce ul.products li.product { margin: 0; padding: 0; width: 100%; float: none; } .woocommerce ul.products li.product .np-product-card { height: 100%; } /* -------------------------------------------------------------------------- 2. Single Product — Two-column hero layout -------------------------------------------------------------------------- */ .woocommerce div.product { display: grid; grid-template-columns: 55% 1fr; gap: 0 var(--np-space-4); max-width: 100%; padding: 0; margin: 0; } /* Gallery — left column: main image + thumbnail strip (~15% narrower than column, centered) */ .woocommerce div.product .woocommerce-product-gallery { --np-pdp-gallery-scale: 0.85; grid-column: 1; grid-row: 1; position: relative; display: flex; flex-direction: column; background: transparent; width: calc(100% * var(--np-pdp-gallery-scale, 0.85)) !important; max-width: 100%; float: none !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: auto !important; margin-right: auto !important; padding: 0; padding-bottom: var(--np-space-6); container-type: inline-size; container-name: np-pdp-gallery; } .woocommerce div.product .woocommerce-product-gallery .flex-viewport { aspect-ratio: 1 / 1; background: #fff; overflow: hidden; } /* Main image: click opens lightbox (PhotoSwipe); cursor hints zoom there */ .woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image > a { cursor: zoom-in; } .woocommerce div.product .woocommerce-product-gallery .flex-control-nav { overflow: visible; } /* Hide main Flexslider arrows (reference uses arrows only on thumbnails) */ .woocommerce div.product .woocommerce-product-gallery .flex-direction-nav { display: none !important; } .woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image, .woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image > a { display: flex !important; align-items: center; justify-content: center; aspect-ratio: 1 / 1; width: 100%; } .woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img { object-fit: contain !important; width: 100% !important; height: 100% !important; max-width: none; padding: var(--np-space-3); background: transparent; } .woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger { position: absolute; top: auto; bottom: var(--np-space-4); left: var(--np-space-4); right: auto; z-index: 3; } /* Thumbnail strip: prev | [==== 4 visible ====] | next — centered under main image */ .woocommerce div.product .woocommerce-product-gallery .np-pdp-thumbs { /* 6 visible tiles; slot = 2.75rem × 1.5 (50% larger than previous strip) */ --np-pdp-thumb-visible: 6; --np-pdp-thumb-slot: 4.125rem; --np-pdp-thumb-gap: 5px; display: flex; align-items: center; justify-content: center; gap: 2px; width: 100%; max-width: 100%; margin-top: var(--np-space-3); margin-left: auto; margin-right: auto; padding: 0; align-self: center; box-sizing: border-box; } .woocommerce div.product .woocommerce-product-gallery .np-pdp-thumbs__nav { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 1.625rem; height: 2.125rem; padding: 0; margin: 0; border: none; background: transparent; color: var(--np-on-surface-variant); cursor: pointer; transition: color 0.2s, opacity 0.2s; } .woocommerce div.product .woocommerce-product-gallery .np-pdp-thumbs__nav .material-symbols-outlined { font-size: 1.05rem; font-weight: 300; } .woocommerce div.product .woocommerce-product-gallery .np-pdp-thumbs__nav:hover:not(:disabled) { color: var(--np-on-surface); } .woocommerce div.product .woocommerce-product-gallery .np-pdp-thumbs__nav:disabled { opacity: 0.25; cursor: default; } .woocommerce div.product .woocommerce-product-gallery .np-pdp-thumbs__viewport { flex: 0 0 auto; width: min( calc( var(--np-pdp-thumb-visible, 6) * var(--np-pdp-thumb-slot, 4.125rem) + (var(--np-pdp-thumb-visible, 6) - 1) * var(--np-pdp-thumb-gap, 5px) ), calc(100% - 4rem) ); min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; container-type: inline-size; container-name: np-pdp-strip; } .woocommerce div.product .woocommerce-product-gallery .np-pdp-thumbs__viewport::-webkit-scrollbar { display: none; } .woocommerce div.product .woocommerce-product-gallery .np-pdp-thumbs__viewport .flex-control-thumbs { display: flex; flex-wrap: nowrap; gap: 5px; list-style: none; padding: 0; margin: 0; width: max-content; background: transparent; } /* Six tiles across the (fixed-width) viewport; shrink on narrow screens */ .woocommerce div.product .woocommerce-product-gallery .np-pdp-thumbs__viewport .flex-control-thumbs li { float: none !important; clear: none !important; flex: 0 0 min( calc((100cqi - 5 * var(--np-pdp-thumb-gap, 5px)) / 6), var(--np-pdp-thumb-slot, 4.125rem) ); width: min( calc((100cqi - 5 * var(--np-pdp-thumb-gap, 5px)) / 6), var(--np-pdp-thumb-slot, 4.125rem) ); height: min( calc((100cqi - 5 * var(--np-pdp-thumb-gap, 5px)) / 6), var(--np-pdp-thumb-slot, 4.125rem) ); max-width: none; opacity: 0.5; transition: opacity 0.2s, border-color 0.2s, box-shadow 0.2s; background: #fff; cursor: pointer; border: 1px solid var(--np-outline-variant); box-sizing: border-box; overflow: hidden; } @supports not (width: 1cqi) { .woocommerce div.product .woocommerce-product-gallery .np-pdp-thumbs__viewport .flex-control-thumbs li { flex: 0 0 var(--np-pdp-thumb-col, 66px); width: var(--np-pdp-thumb-col, 66px); height: var(--np-pdp-thumb-col, 66px); } } .woocommerce div.product .woocommerce-product-gallery .np-pdp-thumbs__viewport .flex-control-thumbs li img { width: 100% !important; height: 100% !important; object-fit: cover; max-height: none; max-width: none; display: block; } .woocommerce div.product .woocommerce-product-gallery .np-pdp-thumbs__viewport .flex-control-thumbs li.flex-active, .woocommerce div.product .woocommerce-product-gallery .np-pdp-thumbs__viewport .flex-control-thumbs li:hover { opacity: 1; border-color: var(--np-on-surface); box-shadow: 0 0 0 1px var(--np-on-surface); } /* Before JS wraps: same width & centering as the wrapped strip */ .woocommerce div.product .woocommerce-product-gallery > ol.flex-control-thumbs { --np-pdp-thumb-visible: 6; --np-pdp-thumb-slot: 4.125rem; --np-pdp-thumb-gap: 5px; display: flex; flex-wrap: nowrap; gap: var(--np-pdp-thumb-gap, 5px); list-style: none; padding: var(--np-space-3) 0 0; margin-left: auto; margin-right: auto; width: min( calc( var(--np-pdp-thumb-visible, 6) * var(--np-pdp-thumb-slot, 4.125rem) + (var(--np-pdp-thumb-visible, 6) - 1) * var(--np-pdp-thumb-gap, 5px) ), 100% ); max-width: 100%; box-sizing: border-box; overflow-x: auto !important; overflow-y: hidden; background: transparent; container-type: inline-size; container-name: np-pdp-strip-fallback; } .woocommerce div.product .woocommerce-product-gallery > ol.flex-control-thumbs li { float: none !important; clear: none !important; flex: 0 0 min( calc((100cqi - 5 * var(--np-pdp-thumb-gap, 5px)) / 6), var(--np-pdp-thumb-slot, 4.125rem) ); width: min( calc((100cqi - 5 * var(--np-pdp-thumb-gap, 5px)) / 6), var(--np-pdp-thumb-slot, 4.125rem) ); height: min( calc((100cqi - 5 * var(--np-pdp-thumb-gap, 5px)) / 6), var(--np-pdp-thumb-slot, 4.125rem) ); max-width: none; opacity: 0.5; border: 1px solid var(--np-outline-variant); box-sizing: border-box; overflow: hidden; } @supports not (width: 1cqi) { .woocommerce div.product .woocommerce-product-gallery > ol.flex-control-thumbs li { flex: 0 0 66px; width: 66px; height: 66px; } } .woocommerce div.product .woocommerce-product-gallery > ol.flex-control-thumbs li img { width: 100% !important; height: 100% !important; object-fit: cover; } /* SKU overlay — sit above thumbnail row */ .np-single-sku { position: absolute; bottom: calc(var(--np-pdp-thumb-col, 66px) + var(--np-space-8) + var(--np-space-3)); left: var(--np-space-6); display: flex; flex-direction: column; gap: 2px; z-index: 2; } .np-single-sku__label { font-family: var(--np-font-label); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--np-on-surface-variant); font-weight: 700; } .np-single-sku__value { font-family: var(--np-font-label); font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--np-secondary); font-weight: 600; } /* Summary — right column */ .woocommerce div.product .summary { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: flex-start; padding: var(--np-space-6) var(--np-space-8) var(--np-space-8); width: 100% !important; float: none !important; } /* Sale badge — override absolute positioning for CSS grid */ .woocommerce div.product > span.onsale { position: relative; top: auto; left: auto; right: auto; grid-column: 1; grid-row: 1; z-index: 2; align-self: start; justify-self: start; margin: var(--np-space-4); } /* Category label */ .np-single-cat { font-family: var(--np-font-label); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--np-on-surface-variant); margin-bottom: var(--np-space-4); } /* Title */ .woocommerce div.product .product_title { font-weight: 200; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: var(--np-space-3); } /* Price sale styling (used inside cart zone) */ .np-cart-zone__price del { color: var(--np-on-surface-variant); font-size: 0.875rem; } .np-cart-zone__price ins { text-decoration: none; color: var(--np-primary); } /* Hide plugin-generated "Components" boxes */ .woocommerce div.product .composite_navigation, .woocommerce div.product .woosb-wrap, .woocommerce div.product .summary > .wcspc-product-card { display: none !important; } /* Technical specs row */ .np-single-specs { display: flex; gap: var(--np-space-8); padding-top: var(--np-space-8); border-top: none; } /* Remove any stray separators below Add to Cart */ .woocommerce div.product .summary form.cart, .woocommerce div.product .summary .variations, .woocommerce div.product .summary .woocommerce-variation, .woocommerce div.product .summary .woocommerce-variation-add-to-cart { border-bottom: none !important; box-shadow: none !important; } .woocommerce div.product .summary form.cart::after, .woocommerce div.product .summary .woocommerce-variation::after, .woocommerce div.product .summary .woocommerce-variation-add-to-cart::after { display: none !important; } .np-single-spec { display: flex; flex-direction: column; gap: var(--np-space-1); } .np-single-spec__label { font-family: var(--np-font-label); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--np-on-surface-variant); font-weight: 700; } .np-single-spec__value { font-family: var(--np-font-headline); font-weight: 300; font-size: 0.875rem; letter-spacing: 0.05em; } /* After-hero sections span full width */ .woocommerce div.product > .np-single-details, .woocommerce div.product > .related, .woocommerce div.product > .up-sells { grid-column: 1 / -1; } /* Description section below hero */ .np-single-details { padding: var(--np-space-10) 0; background: var(--np-surface-container-low); } .np-single-details > .np-container { max-width: 960px; margin: 0 auto; padding: 0 var(--np-space-8); } .np-single-details h2 { font-family: var(--np-font-headline); font-size: 1.35rem; font-weight: 300; letter-spacing: 0.03em; text-transform: uppercase; color: var(--np-on-surface); margin: var(--np-space-8) 0 var(--np-space-3); padding-bottom: var(--np-space-2); border-bottom: 1px solid var(--np-outline-variant); } .np-single-details h2:first-child { margin-top: 0; } .np-single-details h3 { font-family: var(--np-font-headline); font-size: 1.1rem; font-weight: 400; color: var(--np-on-surface); margin: var(--np-space-6) 0 var(--np-space-2); } .np-single-details h4, .np-single-details h5, .np-single-details h6 { font-family: var(--np-font-headline); font-size: 0.95rem; font-weight: 500; color: var(--np-on-surface); margin: var(--np-space-4) 0 var(--np-space-1); } .np-single-details p { font-size: 0.875rem; line-height: 1.75; color: var(--np-on-surface-variant); margin: 0 0 var(--np-space-3); } .np-single-details p:last-child { margin-bottom: 0; } .np-single-details ul, .np-single-details ol { font-size: 0.875rem; line-height: 1.75; color: var(--np-on-surface-variant); margin: 0 0 var(--np-space-3); padding-left: var(--np-space-6); } .np-single-details li { margin-bottom: var(--np-space-1); } .np-single-details blockquote, .np-single-details .wp-block-quote { border-left: 3px solid var(--np-primary); margin: var(--np-space-4) 0; padding: var(--np-space-3) var(--np-space-6); background: rgba(47, 128, 237, 0.03); border-radius: 0 var(--np-radius-s, 6px) var(--np-radius-s, 6px) 0; } .np-single-details blockquote p, .np-single-details .wp-block-quote p { font-style: italic; color: var(--np-on-surface); margin: 0; } .np-single-details hr, .np-single-details .wp-block-separator { border: none; border-top: 1px solid var(--np-outline-variant); margin: var(--np-space-6) 0; } .np-single-details strong { font-weight: 600; color: var(--np-on-surface); } /* Short Description — collapse when empty */ .woocommerce div.product .woocommerce-product-details__short-description { font-size: 0.875rem; color: var(--np-on-surface-variant); line-height: 1.8; margin-bottom: 0; } .woocommerce div.product .woocommerce-product-details__short-description:empty { display: none; } /* Product meta — hidden (SKU shown on image instead) */ .woocommerce div.product .product_meta { display: none; } /* Price inline — sits next to the Add to Cart button */ .np-cart-zone__price { font-family: var(--np-font-headline); font-weight: 300; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--np-on-surface); } /* When the price renders as a range (variable products before a variation is chosen), the markup is: 306 €–325 € Show only the upper bound + hide the dash so the inline price stays compact and matches the bundle row pricing style. As soon as the user picks a variation, WooCommerce replaces the inner HTML with a single amount and these rules become no-ops. */ .np-cart-zone__price > .woocommerce-Price-amount.amount:first-of-type { display: none !important; } .np-cart-zone__price > .woocommerce-Price-amount.amount:first-of-type ~ span[aria-hidden="true"]:not(.woocommerce-Price-amount) { display: none !important; } .np-cart-zone__price > .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; } /* Variable product: outer wrapper is a vertical block. The qty + button + price row is handled internally by `.np-cart-action-row` (a flex row). */ .woocommerce div.product .woocommerce-variation-add-to-cart { display: block !important; width: 100% !important; } .woocommerce div.product .woocommerce-variation-add-to-cart .quantity { margin: 0 !important; } .woocommerce div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button { min-width: 170px; margin: 0 !important; } .woocommerce div.product .woocommerce-variation-add-to-cart .np-cart-zone__price { margin: 0 !important; } /* Stock badge — separate line below cart zone */ .np-single-stock { font-family: var(--np-font-label); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; margin-top: var(--np-space-3); } .np-single-stock--in { color: var(--np-secondary); } .np-single-stock--out { color: var(--np-error, #b00020); } /* Add to Cart form — vertical block on every product type. The row of [qty + Add-to-Cart button + price] is wrapped server-side in `.np-cart-action-row` (see np_parts_open/close_cart_action_row in inc/woocommerce.php), so children of form.cart now stack as: 1. WAPF block (full-width card under the short description) 2. .np-cart-action-row (qty + Add to Cart button + price) 3. (any tail elements like hidden inputs) This eliminates the "WAPF squished to ~290 px on the left of qty/button" bug that previous flex layouts produced on simple products. */ .woocommerce div.product form.cart { display: block; width: 100%; margin: 0; margin-top: 0; padding: 0; border: none !important; } /* The qty + button + price row itself — flex row, centered, comfortable gap. */ .woocommerce div.product form.cart .np-cart-action-row, .woocommerce div.product .woocommerce-variation-add-to-cart .np-cart-action-row { display: flex; align-items: center; justify-content: center; gap: var(--np-space-5); flex-wrap: wrap; width: 100%; margin: 0; } /* Variable / bundled product wrappers stay as block too — the variations table stacks above the action wrapper, and inside the action wrapper our .np-cart-action-row puts qty + button + price on a single centered row. */ .woocommerce div.product form.cart.variations_form, .woocommerce div.product form.cart.grouped_form, .woocommerce div.product form.cart.bundle_form { display: block; } .woocommerce div.product form.cart.variations_form .single_variation_wrap, .woocommerce div.product form.cart.variations_form .woocommerce-variation, .woocommerce div.product form.cart.variations_form .single_variation { display: block; width: 100%; } .woocommerce div.product form.cart.variations_form .woocommerce-variation-add-to-cart { margin-top: var(--np-space-5); } .woocommerce div.product form.cart::before, .woocommerce div.product form.cart::after { display: none !important; } .woocommerce div.product form.cart .quantity { margin: 0; flex: 0 0 auto; } .woocommerce div.product form.cart .single_add_to_cart_button { flex: 0 0 auto; min-width: 180px; text-align: center; } /* Hide bundled product options from summary — shown via plugin below */ .woocommerce div.product .summary .woosb-wrap, .woocommerce div.product .summary .wooco-wrap, .woocommerce div.product .summary .wcspc-product-card, .woocommerce div.product .summary .composite_navigation, .woocommerce div.product .summary .bundled_product, .woocommerce div.product .summary .woosb-products, .woocommerce div.product form.cart .woosb-products, .woocommerce div.product form.cart .wpc-bundled-items { display: none !important; } /* ========================================================================== WPC Frequently Bought Together (woo-bought-together-premium) ---------------------------------------------------------------------- The plugin's frontend.js moves .woobt-wrap into .woocommerce-variation-add-to-cart for variable products, so it ends up as a flex sibling of .quantity / button. We force the bundle wrap to take a FULL ROW so qty + Add to Cart land below it, matching the rest of the product page layout. ========================================================================== */ /* Variable products: the variation-add-to-cart wrapper is now a vertical block — its children (WAPF, .woobt-wrap, .np-cart-action-row, hidden inputs) stack vertically. The horizontal row of qty + button + price is handled internally by .np-cart-action-row above. */ .woocommerce div.product .woocommerce-variation-add-to-cart { display: block !important; width: 100% !important; } /* Bundle wrap: full-width block, sits ABOVE qty + Add to Cart. With the parent wrapper now `display: block`, no flex tricks are needed — it's just a regular block element. */ .woocommerce div.product .woobt-wrap { display: block !important; width: 100% !important; margin: var(--np-space-4) 0 var(--np-space-5) !important; padding: 0 !important; border: 0 !important; background: transparent !important; } /* When woobt sits inside the variations add-to-cart row, push qty / button / price to a fresh line below it. */ .woocommerce div.product .woocommerce-variation-add-to-cart .woobt-wrap + .quantity, .woocommerce div.product .woocommerce-variation-add-to-cart .woobt-wrap ~ .quantity { margin-top: 0 !important; } /* Bundle products list — clean vertical stack */ .woocommerce div.product .woobt-products { display: block !important; margin: 0 !important; padding: 0 !important; list-style: none !important; border: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.08)) !important; border-radius: var(--np-radius-2, 8px) !important; background: var(--np-surface-container-lowest, #ffffff) !important; overflow: hidden; } /* Each bundle row */ .woocommerce div.product .woobt-product { display: flex !important; align-items: center !important; gap: var(--np-space-4) !important; margin: 0 !important; padding: var(--np-space-4) var(--np-space-5) !important; border-bottom: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.06)) !important; background: transparent !important; } .woocommerce div.product .woobt-product:last-child { border-bottom: 0 !important; } /* Checkbox column */ .woocommerce div.product .woobt-product .woobt-choose { flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; display: flex; align-items: center; } /* Bundle item indicator — render the checkbox as a clean radio-style circle: solid purple when checked, empty outlined circle when unchecked. The plugin's own .checkmark span is hidden by frontend.css; we restyle the input itself so the look survives whatever the plugin's JS does to the element. */ .woocommerce div.product .woobt-product .woobt-checkbox { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; width: 1.125rem !important; height: 1.125rem !important; flex: 0 0 1.125rem !important; margin: 0 !important; padding: 0 !important; border: 2px solid var(--np-outline, #c0bdc6) !important; border-radius: 50% !important; background: transparent !important; cursor: pointer !important; box-shadow: none !important; transition: all 0.15s ease !important; position: relative !important; } .woocommerce div.product .woobt-product .woobt-checkbox:hover:not(:disabled) { border-color: var(--np-primary, #6750a4) !important; } .woocommerce div.product .woobt-product .woobt-checkbox:checked { border-color: var(--np-primary, #6750a4) !important; background: var(--np-primary, #6750a4) !important; box-shadow: inset 0 0 0 3px #fff !important; } .woocommerce div.product .woobt-product .woobt-checkbox:disabled { cursor: default !important; opacity: 1 !important; } /* Override the plugin's `.checkmark { display: none }` is fine — we keep it hidden because we style the directly. Don't show the checkmark. */ .woocommerce div.product .woobt-product .woobt-choose .checkmark { display: none !important; } /* The plugin renders an extra label ("BMW E36/E46…") inside .woobt-choose (for screen readers). Hide it visually — the title column already shows the product name. */ .woocommerce div.product .woobt-product .woobt-choose > label { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; } /* Thumb */ .woocommerce div.product .woobt-product .woobt-thumb { flex: 0 0 56px !important; width: 56px !important; height: 56px !important; margin: 0 !important; padding: 0 !important; border-radius: var(--np-radius-1, 6px); overflow: hidden; background: var(--np-surface-container-low, #f5f3f7); display: flex; align-items: center; justify-content: center; } .woocommerce div.product .woobt-product .woobt-thumb img, .woocommerce div.product .woobt-product .woobt-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; margin: 0 !important; } /* Title + meta column */ .woocommerce div.product .woobt-product .woobt-title { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } .woocommerce div.product .woobt-product .woobt-title-inner { font-family: var(--np-font-body) !important; font-size: 0.875rem !important; line-height: 1.35 !important; color: var(--np-on-surface, #1c1b1f) !important; white-space: normal !important; overflow-wrap: break-word !important; margin: 0 !important; padding: 0 !important; display: block !important; } .woocommerce div.product .woobt-product .woobt-title-inner a { color: inherit !important; text-decoration: none !important; } .woocommerce div.product .woobt-product .woobt-title-inner a:hover { color: var(--np-primary, #6750a4) !important; } .woocommerce div.product .woobt-product .woobt-name { font-weight: 500 !important; } .woocommerce div.product .woobt-product .woobt-this-text { font-size: 0.6875rem !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--np-on-surface-variant, #555) !important; font-weight: 600 !important; margin-right: 6px; } /* Plugin renders the "This item:" prefix as a plain wrapping the text inside .woobt-title-inner (no class). Style the first inline span there to look like a small uppercase label, matching .woobt-this-text. */ .woocommerce div.product .woobt-product-this .woobt-title-inner > span:first-child { font-weight: 500 !important; color: var(--np-on-surface, #1c1b1f) !important; margin-right: 4px !important; } .woocommerce div.product .woobt-product-this .woobt-title-inner > span:not(:first-child) { color: var(--np-on-surface, #1c1b1f) !important; } .woocommerce div.product .woobt-product .woobt-availability, .woocommerce div.product .woobt-product .woobt-variation-description { font-size: 0.75rem !important; color: var(--np-on-surface-variant, #555) !important; margin: 0 !important; } /* Quantity (compact) */ .woocommerce div.product .woobt-product .woobt-quantity { flex: 0 0 auto !important; margin: 0 !important; } .woocommerce div.product .woobt-product .woobt-qty-num { font-size: 0.8125rem !important; color: var(--np-on-surface-variant, #555) !important; margin-right: 4px; } .woocommerce div.product .woobt-product .woobt-quantity-input { display: inline-flex !important; align-items: center !important; border: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.12)) !important; border-radius: var(--np-radius-1, 6px); overflow: hidden; background: #fff; } .woocommerce div.product .woobt-product .woobt-quantity-input-minus, .woocommerce div.product .woobt-product .woobt-quantity-input-plus { width: 24px; height: 28px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; color: var(--np-on-surface-variant, #555); font-size: 0.875rem; line-height: 1; background: transparent; transition: background 0.15s ease; } .woocommerce div.product .woobt-product .woobt-quantity-input-minus:hover, .woocommerce div.product .woobt-product .woobt-quantity-input-plus:hover { background: var(--np-surface-container, #f0eef3); } .woocommerce div.product .woobt-product .woobt-qty, .woocommerce div.product .woobt-product input.woobt-qty { width: 36px !important; height: 28px !important; border: 0 !important; text-align: center !important; background: transparent !important; font-size: 0.8125rem !important; padding: 0 !important; margin: 0 !important; -moz-appearance: textfield; } .woocommerce div.product .woobt-product .woobt-qty::-webkit-outer-spin-button, .woocommerce div.product .woobt-product .woobt-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Price column (right-aligned) */ .woocommerce div.product .woobt-product .woobt-price { flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; text-align: right !important; white-space: nowrap !important; font-size: 0.875rem !important; font-weight: 500 !important; color: var(--np-on-surface, #1c1b1f) !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 2px !important; } /* Both price slots get the same primary style — whichever ends up visible (per the rules below) reads as the row's price. Real discount markup (/) emitted inside is handled separately. */ .woocommerce div.product .woobt-product .woobt-price .woobt-price-new, .woocommerce div.product .woobt-product .woobt-price .woobt-price-ori { color: var(--np-on-surface, #1c1b1f) !important; font-weight: 600 !important; font-size: 0.875rem !important; text-decoration: none !important; } /* If the plugin emits a real / sale block inside, strike the old price as expected. */ .woocommerce div.product .woobt-product .woobt-price del { opacity: 0.5; text-decoration: line-through; font-weight: 400 !important; margin-right: 4px; } /* When the woobt price renders as a price RANGE (e.g. "306.00 € – 325.00 €" for variable products), keep only the upper bound — that matches the reference design and avoids the noisy dual-price UI. The range looks like: 306.00 €–325.00 € We use :has() to detect "two amounts present" so simple products with a single .amount span (e.g. "130.00 €") aren't accidentally hidden. */ .woocommerce div.product .woobt-product .woobt-price-new:has(.woocommerce-Price-amount.amount + span + .woocommerce-Price-amount.amount) > .woocommerce-Price-amount.amount:first-of-type, .woocommerce div.product .woobt-product .woobt-price-ori:has(.woocommerce-Price-amount.amount + span + .woocommerce-Price-amount.amount) > .woocommerce-Price-amount.amount:first-of-type { display: none !important; } .woocommerce div.product .woobt-product .woobt-price-new:has(.woocommerce-Price-amount.amount + span + .woocommerce-Price-amount.amount) > span[aria-hidden="true"]:not(.woocommerce-Price-amount), .woocommerce div.product .woobt-product .woobt-price-ori:has(.woocommerce-Price-amount.amount + span + .woocommerce-Price-amount.amount) > span[aria-hidden="true"]:not(.woocommerce-Price-amount) { display: none !important; } /* Hide screen-reader-only price range descriptions (purely aural metadata) — they don't render visually but we strip them defensively to be safe. */ .woocommerce div.product .woobt-product .woobt-price .screen-reader-text { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; } /* Plugin's frontend.js sets inline `style="display:none"` on .woobt-price-new for the "this" item AND inline `style="display:block"` on .woobt-price-ori to swap which one is visible. The plain CSS rules in frontend.css default to hiding -new for the "this" item (.woobt-products .woobt-product-this .woobt-price .woobt-price-new {display:none}), so -ori shows the duplicate range instead. We FORCE -ori hidden for the "this" row (we want -new shown), and FORCE -new visible — !important on a stylesheet rule beats inline `style=""` without !important. */ .woocommerce div.product .woobt-products .woobt-product-this .woobt-price .woobt-price-ori { display: none !important; } .woocommerce div.product .woobt-products .woobt-product-this .woobt-price .woobt-price-new { display: block !important; } /* For other rows (e.g. .woobt-product-together): -new is empty, -ori has the price. Hide whichever is empty so we never render an empty container. */ .woocommerce div.product .woobt-product:not(.woobt-product-this) .woobt-price .woobt-price-new:empty, .woocommerce div.product .woobt-product:not(.woobt-product-this) .woobt-price .woobt-price-ori:empty { display: none !important; } .woocommerce div.product .woobt-product:not(.woobt-product-this) .woobt-price .woobt-price-ori:not(:empty) { display: block !important; } /* Hide the slim "before text" / "after text" plugin headers if empty */ .woocommerce div.product .woobt-wrap .woobt-text:empty, .woocommerce div.product .woobt-wrap .woobt-additional:empty, .woocommerce div.product .woobt-wrap .woobt-total:empty { display: none !important; } /* Summary block under the products list */ .woocommerce div.product .woobt-summary { margin: var(--np-space-3) 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } /* Total / additional info text */ .woocommerce div.product .woobt-summary .woobt-total, .woocommerce div.product .woobt-summary .woobt-additional { font-size: 0.8125rem !important; color: var(--np-on-surface-variant, #555) !important; margin: var(--np-space-2) 0 0 !important; padding: 0 !important; } /* Alert ("Please select a purchasable variation...") — soft warning card */ .woocommerce div.product .woobt-summary .woobt-alert, .woocommerce div.product .woobt-wrap .woobt-alert { background: var(--np-surface-container-low, #f5f3f7) !important; border-left: 3px solid var(--np-primary, #6750a4) !important; border-radius: var(--np-radius-1, 6px); padding: var(--np-space-3) var(--np-space-4) !important; margin: var(--np-space-3) 0 0 !important; font-size: 0.8125rem !important; line-height: 1.5 !important; color: var(--np-on-surface, #1c1b1f) !important; } .woocommerce div.product .woobt-summary .woobt-alert:empty, .woocommerce div.product .woobt-wrap .woobt-alert:empty { display: none !important; } /* Plugin's tooltips/hint library — keep it from breaking layout */ .woocommerce div.product .woobt-wrap [class*="hint--"] { display: inline-flex !important; } /* Mobile (<= 600px) — keep rows compact, stack price below title */ @media (max-width: 600px) { .woocommerce div.product .woobt-product { flex-wrap: wrap !important; gap: var(--np-space-3) !important; padding: var(--np-space-3) var(--np-space-4) !important; } .woocommerce div.product .woobt-product .woobt-thumb { flex: 0 0 44px !important; width: 44px !important; height: 44px !important; } .woocommerce div.product .woobt-product .woobt-title { flex: 1 1 calc(100% - 100px) !important; } .woocommerce div.product .woobt-product .woobt-price { flex: 0 0 auto !important; text-align: right !important; } .woocommerce div.product .woobt-product .woobt-quantity { flex: 1 1 100% !important; margin-left: 64px !important; } } /* End — WPC Frequently Bought Together */ /* Keep prices on a single line inside the form */ .woocommerce div.product form.cart .price, .woocommerce div.product form.cart .woocommerce-Price-amount, .woocommerce div.product form.cart .woosb-price, .woocommerce div.product form.cart .woosb-item-price, .woocommerce div.product form.cart .amount, .woocommerce div.product form.cart del, .woocommerce div.product form.cart ins { white-space: nowrap !important; display: inline !important; } .woocommerce div.product form.cart .price { white-space: nowrap !important; display: inline-flex !important; flex-wrap: nowrap !important; gap: 4px; align-items: baseline; } /* Remove stray borders inside cart zone */ .woocommerce div.product .summary form.cart, .woocommerce div.product .summary .variations, .woocommerce div.product .summary .woocommerce-variation, .woocommerce div.product .summary .woocommerce-variation-add-to-cart { border-bottom: none !important; box-shadow: none !important; } .woocommerce div.product .summary form.cart::after, .woocommerce div.product .summary .woocommerce-variation::after { display: none !important; } .woocommerce .quantity .qty { width: 4rem; text-align: center; padding: 0.875rem var(--np-space-2); border: none; border-bottom: 2px solid var(--np-outline-variant); font-family: var(--np-font-headline); font-weight: 300; font-size: 1rem; background: transparent; } .woocommerce .quantity .qty:focus { border-bottom-color: var(--np-secondary); } .single_add_to_cart_button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce .button { display: inline-block; font-family: var(--np-font-label) !important; font-size: 0.6875rem !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.25em; padding: 1.125rem 2.75rem !important; border: none !important; border-radius: 3px !important; background: var(--np-gradient-primary) !important; color: #fff !important; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); line-height: 1.4 !important; } .single_add_to_cart_button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce .button:hover { box-shadow: 0 6px 20px rgba(47, 128, 237, 0.35); transform: translateY(-2px); background: var(--np-gradient-primary) !important; color: #fff !important; } .single_add_to_cart_button:active, .woocommerce a.button:active, .woocommerce button.button:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(47, 128, 237, 0.2); } .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt { background: var(--np-gradient-primary) !important; color: #fff !important; } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #respond input#submit.alt:hover { box-shadow: var(--np-glow-primary); } /* Outlined / secondary buttons */ .woocommerce a.button:not(.alt):not(.single_add_to_cart_button):not(.checkout-button), .woocommerce button.button:not(.alt):not(.single_add_to_cart_button) { background: var(--np-surface-container-lowest) !important; color: var(--np-on-surface) !important; border-bottom: 2px solid var(--np-secondary) !important; } .woocommerce a.button:not(.alt):not(.single_add_to_cart_button):not(.checkout-button):hover, .woocommerce button.button:not(.alt):not(.single_add_to_cart_button):hover { background: rgba(208, 237, 0, 0.08) !important; box-shadow: none; transform: none; } /* Sale Badge */ .woocommerce span.onsale { position: absolute; top: var(--np-space-4); left: var(--np-space-4); right: auto; background: var(--np-gradient-primary); color: #fff; font-family: var(--np-font-label); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.4rem 0.8rem; border-radius: 0; line-height: 1; min-height: auto; min-width: auto; z-index: 2; } /* -------------------------------------------------------------------------- 3. Product Tabs (hidden — description rendered in np-single-details) -------------------------------------------------------------------------- */ .woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; display: none; } /* Attributes table */ .woocommerce table.shop_attributes { border: none; } .woocommerce table.shop_attributes tr { border-bottom: 1px solid var(--np-outline-variant); } .woocommerce table.shop_attributes th { font-family: var(--np-font-label); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--np-on-surface-variant); font-weight: 500; padding: var(--np-space-4); background: transparent; border: none; width: 35%; } .woocommerce table.shop_attributes td { font-size: 0.875rem; padding: var(--np-space-4); background: transparent; border: none; font-style: normal; } .woocommerce table.shop_attributes td p { margin: 0; } /* -------------------------------------------------------------------------- 4. Related / Cross-sell Products -------------------------------------------------------------------------- */ .woocommerce .related, .woocommerce .cross-sells, .woocommerce .up-sells { margin-top: var(--np-space-16); max-width: 1400px; margin-left: auto; margin-right: auto; padding: 0 var(--np-space-8); } .woocommerce .related > h2, .woocommerce .cross-sells > h2, .woocommerce .up-sells > h2 { font-weight: 200; font-size: 1.75rem; margin-bottom: var(--np-space-8); } /* Related products — compact 8-up grid on the locked desktop rail */ .woocommerce .related ul.products, .woocommerce .up-sells ul.products { grid-template-columns: repeat(8, 1fr); gap: var(--np-space-3); max-width: none; padding: 0; } .woocommerce .related ul.products .np-product-card__info, .woocommerce .up-sells ul.products .np-product-card__info { padding: var(--np-space-3) var(--np-space-2); } .woocommerce .related ul.products .np-product-card__title, .woocommerce .up-sells ul.products .np-product-card__title { font-size: 0.6875rem; line-height: 1.25; margin-bottom: var(--np-space-1); letter-spacing: 0.01em; } .woocommerce .related ul.products .np-product-card__price, .woocommerce .up-sells ul.products .np-product-card__price { font-size: 0.6875rem; } .woocommerce .related ul.products .np-product-card__price del, .woocommerce .up-sells ul.products .np-product-card__price del { font-size: 0.625rem; } .woocommerce .related ul.products .np-product-card__badge, .woocommerce .up-sells ul.products .np-product-card__badge { top: var(--np-space-2); left: var(--np-space-2); font-size: 0.5rem; padding: 0.2rem 0.4rem; } .woocommerce .related ul.products .np-product-card__actions, .woocommerce .up-sells ul.products .np-product-card__actions { bottom: var(--np-space-2); right: var(--np-space-2); } .woocommerce .related ul.products .np-product-card__actions .material-symbols-outlined, .woocommerce .up-sells ul.products .np-product-card__actions .material-symbols-outlined { width: 1.75rem; height: 1.75rem; font-size: 0.875rem; } /* Tablet: 4 per row */ @media (max-width: 1279px) { .woocommerce .related ul.products, .woocommerce .up-sells ul.products { grid-template-columns: repeat(4, 1fr); } } /* Phone: 2 per row */ @media (max-width: 600px) { .woocommerce .related ul.products, .woocommerce .up-sells ul.products { grid-template-columns: repeat(2, 1fr); } } /* -------------------------------------------------------------------------- 5. Cart Page -------------------------------------------------------------------------- */ .woocommerce-cart .np-woocommerce { max-width: 1400px; margin: 0 auto; padding: var(--np-space-12) var(--np-space-8) var(--np-space-24); } /* Two-column cart: items list (left) | totals card (right, sticky) */ .woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--np-space-10); align-items: start; } .woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-cart .woocommerce-cart-form { grid-column: 1; margin: 0; background: var(--np-surface-container-lowest, #fff); border: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.08)); border-radius: var(--np-radius-3, 12px); overflow: hidden; } .woocommerce-cart .cart-collaterals { grid-column: 2; width: 100%; margin: 0; padding: 0; position: sticky; top: var(--np-space-6); } /* Cart items table — clean, modern */ .woocommerce-cart table.shop_table.cart { border: none !important; border-collapse: collapse !important; width: 100% !important; margin: 0 !important; background: transparent !important; } .woocommerce-cart table.shop_table.cart thead { background: var(--np-surface-container-low, #f5f3f7) !important; border-bottom: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.08)) !important; } .woocommerce-cart table.shop_table.cart thead th { font-family: var(--np-font-label) !important; font-size: 0.6875rem !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; color: var(--np-on-surface-variant, #555) !important; font-weight: 600 !important; padding: var(--np-space-4) var(--np-space-5) !important; background: transparent !important; border: none !important; text-align: left !important; } .woocommerce-cart table.shop_table.cart thead th.product-price, .woocommerce-cart table.shop_table.cart thead th.product-quantity, .woocommerce-cart table.shop_table.cart thead th.product-subtotal { text-align: right !important; } .woocommerce-cart table.shop_table.cart tbody td { padding: var(--np-space-5) var(--np-space-5) !important; border: none !important; border-bottom: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.06)) !important; vertical-align: middle !important; font-size: 0.875rem !important; background: transparent !important; } .woocommerce-cart table.shop_table.cart tbody tr:last-child td { border-bottom: 0 !important; } .woocommerce-cart table.shop_table.cart td.product-remove { width: 40px !important; padding-right: 0 !important; } .woocommerce-cart table.shop_table.cart td.product-thumbnail { width: 100px !important; } .woocommerce-cart table.shop_table.cart td.product-thumbnail img { width: 80px !important; height: 80px !important; object-fit: cover !important; background: var(--np-surface-container-low, #f5f3f7) !important; border-radius: var(--np-radius-2, 8px); border: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.06)); } .woocommerce-cart table.shop_table.cart td.product-name a { color: var(--np-on-surface, #1c1b1f) !important; text-decoration: none !important; font-weight: 500 !important; } .woocommerce-cart table.shop_table.cart td.product-name a:hover { color: var(--np-primary, #6750a4) !important; } .woocommerce-cart table.shop_table.cart td.product-name .variation, .woocommerce-cart table.shop_table.cart td.product-name dl.variation { margin: 4px 0 0 !important; padding: 0 !important; font-size: 0.75rem !important; color: var(--np-on-surface-variant, #888) !important; } .woocommerce-cart table.shop_table.cart td.product-name .variation dt, .woocommerce-cart table.shop_table.cart td.product-name .variation dd { display: inline !important; margin: 0 4px 0 0 !important; padding: 0 !important; } .woocommerce-cart table.shop_table.cart td.product-price, .woocommerce-cart table.shop_table.cart td.product-subtotal { text-align: right !important; white-space: nowrap !important; font-weight: 500 !important; } .woocommerce-cart table.shop_table.cart td.product-subtotal { color: var(--np-on-surface, #1c1b1f) !important; font-weight: 600 !important; } .woocommerce-cart table.shop_table.cart td.product-quantity { width: 130px !important; text-align: right !important; } .woocommerce-cart table.shop_table.cart td.product-quantity .quantity { display: inline-flex !important; margin: 0 !important; } /* Remove button (×) */ .woocommerce-cart table.shop_table.cart a.remove { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 1.75rem !important; height: 1.75rem !important; color: var(--np-on-surface-variant, #888) !important; font-size: 1.125rem !important; line-height: 1 !important; border-radius: 50% !important; transition: var(--np-transition, all 0.15s ease) !important; text-decoration: none !important; } .woocommerce-cart table.shop_table.cart a.remove:hover { background: var(--np-error-container, #ffdad6) !important; color: var(--np-error, #b00020) !important; } /* Coupon + Update cart row — combined, clean */ .woocommerce-cart table.shop_table.cart .actions { padding: var(--np-space-5) var(--np-space-5) !important; background: var(--np-surface-container-low, #f8f6fa) !important; border-top: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.08)) !important; } .woocommerce-cart table.shop_table.cart .actions .coupon { display: inline-flex !important; align-items: center !important; gap: var(--np-space-3) !important; margin: 0 !important; padding: 0 !important; } .woocommerce-cart table.shop_table.cart .actions .coupon label { display: none !important; } .woocommerce-cart table.shop_table.cart .actions .coupon .input-text { min-width: 220px !important; height: 40px !important; padding: 0 var(--np-space-4) !important; border: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.12)) !important; border-radius: var(--np-radius-1, 6px) !important; background: var(--np-surface-container-lowest, #fff) !important; font-size: 0.875rem !important; margin: 0 !important; } .woocommerce-cart table.shop_table.cart .actions .coupon .button, .woocommerce-cart table.shop_table.cart .actions button[name="update_cart"] { height: 40px !important; padding: 0 var(--np-space-5) !important; font-size: 0.75rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; border-radius: var(--np-radius-1, 6px) !important; margin: 0 !important; line-height: 40px !important; white-space: nowrap !important; } .woocommerce-cart table.shop_table.cart .actions button[name="update_cart"] { background: var(--np-surface-container, #ebe8ed) !important; color: var(--np-on-surface, #1c1b1f) !important; border: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.12)) !important; float: right !important; } .woocommerce-cart table.shop_table.cart .actions button[name="update_cart"]:hover:not(:disabled) { background: var(--np-surface-container-high, #e0dde2) !important; } .woocommerce-cart table.shop_table.cart .actions button[name="update_cart"]:disabled { opacity: 0.4 !important; cursor: not-allowed !important; } /* ----------- Cart Totals (sidebar) ----------- */ .woocommerce-cart .cart_totals { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: var(--np-surface-container-lowest, #fff); border: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.08)); border-radius: var(--np-radius-3, 12px); overflow: hidden; } .woocommerce-cart .cart_totals > h2 { font-family: var(--np-font-headline) !important; font-weight: 500 !important; font-size: 1.125rem !important; margin: 0 !important; padding: var(--np-space-5) var(--np-space-6) !important; background: var(--np-surface-container-low, #f5f3f7); border-bottom: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.08)); color: var(--np-on-surface, #1c1b1f); letter-spacing: 0; text-transform: none; } .woocommerce-cart .cart_totals table.shop_table { border: none !important; margin: 0 !important; padding: 0 var(--np-space-6) !important; background: transparent !important; /* Force the to behave like a regular block container so children (TR/TD) honor display: block and full-width sizing rules below. */ display: block !important; width: 100% !important; box-sizing: border-box !important; table-layout: auto !important; } .woocommerce-cart .cart_totals table.shop_table tbody { background: transparent !important; display: block !important; width: 100% !important; } .woocommerce-cart .cart_totals table.shop_table tr { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; width: 100% !important; box-sizing: border-box !important; } .woocommerce-cart .cart_totals table.shop_table th, .woocommerce-cart .cart_totals table.shop_table td { border: none !important; border-bottom: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.06)) !important; padding: var(--np-space-4) 0 !important; background: transparent !important; vertical-align: top !important; } .woocommerce-cart .cart_totals table.shop_table tr:last-child th, .woocommerce-cart .cart_totals table.shop_table tr:last-child td { border-bottom: 0 !important; } .woocommerce-cart .cart_totals table.shop_table th { font-family: var(--np-font-label) !important; font-size: 0.6875rem !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-weight: 600 !important; color: var(--np-on-surface-variant, #555) !important; flex: 0 0 38% !important; width: 38% !important; text-align: left !important; box-sizing: border-box !important; } .woocommerce-cart .cart_totals table.shop_table td { flex: 1 1 auto !important; width: auto !important; text-align: right !important; font-size: 0.875rem !important; font-weight: 500 !important; color: var(--np-on-surface, #1c1b1f) !important; box-sizing: border-box !important; } /* Order total — emphasized */ .woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td { border-top: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.12)) !important; border-bottom: 0 !important; padding-top: var(--np-space-5) !important; padding-bottom: var(--np-space-5) !important; font-size: 1rem !important; font-weight: 700 !important; } .woocommerce-cart .cart_totals .order-total th { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--np-font-headline) !important; } .woocommerce-cart .cart_totals .order-total .amount, .woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount { font-size: 1.25rem !important; color: var(--np-on-surface, #1c1b1f) !important; } /* Shipping row spans the full width — TH on top, UL below. This gives carrier options enough room to display in one line. */ .woocommerce-cart .cart_totals table.shop_table tr.shipping { display: block !important; flex: none !important; } .woocommerce-cart .cart_totals table.shop_table tr.shipping th { display: block !important; flex: none !important; width: 100% !important; padding-bottom: var(--np-space-2) !important; } .woocommerce-cart .cart_totals table.shop_table tr.shipping td { display: block !important; flex: none !important; width: 100% !important; padding-top: 0 !important; text-align: left !important; } /* Shipping rates inside cart totals */ .woocommerce-cart .cart_totals ul#shipping_method, .woocommerce-cart .cart_totals .woocommerce-shipping-methods { list-style: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; display: block !important; box-sizing: border-box !important; } /* Shipping option = full row card. The DPD plugin emits:
name + price + tax
We turn the
into a flex row: [radio] [label-content], with carrier logo shown small at the right end. Inline styles are overridden via !important. */ .woocommerce-cart .cart_totals ul#shipping_method li, .woocommerce-cart .cart_totals .woocommerce-shipping-methods li { list-style: none !important; display: flex !important; align-items: center !important; gap: var(--np-space-3) !important; padding: var(--np-space-3) var(--np-space-4) !important; margin: 0 0 var(--np-space-2) !important; width: 100% !important; box-sizing: border-box !important; background: var(--np-surface-container-lowest, #fff) !important; border: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.1)) !important; border-radius: var(--np-radius-1, 6px) !important; transition: var(--np-transition, all 0.15s ease) !important; } .woocommerce-cart .cart_totals ul#shipping_method li:hover, .woocommerce-cart .cart_totals .woocommerce-shipping-methods li:hover { border-color: var(--np-primary, #6750a4) !important; } .woocommerce-cart .cart_totals ul#shipping_method li:has(input:checked), .woocommerce-cart .cart_totals .woocommerce-shipping-methods li:has(input:checked) { border-color: var(--np-primary, #6750a4) !important; background: var(--np-primary-container, rgba(103, 80, 164, 0.08)) !important; } .woocommerce-cart .cart_totals ul#shipping_method li input[type="radio"], .woocommerce-cart .cart_totals .woocommerce-shipping-methods li input[type="radio"] { accent-color: var(--np-primary, #6750a4) !important; width: 1rem !important; height: 1rem !important; margin: 0 !important; flex-shrink: 0 !important; order: 0 !important; } .woocommerce-cart .cart_totals ul#shipping_method li label, .woocommerce-cart .cart_totals .woocommerce-shipping-methods li label { display: flex !important; align-items: center !important; gap: var(--np-space-3) !important; margin: 0 !important; cursor: pointer !important; font-size: 0.8125rem !important; font-weight: 500 !important; color: var(--np-on-surface, #1c1b1f) !important; flex: 1 1 auto !important; min-width: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--np-font-body) !important; padding: 0 !important; order: 1 !important; } /* Plugin wraps the carrier name + price in an inline-styled div with "display:flex; justify-content:space-between". Override its inline styles. */ .woocommerce-cart .cart_totals ul#shipping_method li label > div:first-child, .woocommerce-cart .cart_totals .woocommerce-shipping-methods li label > div:first-child { display: flex !important; flex: 1 1 auto !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 6px !important; justify-content: flex-start !important; min-width: 0 !important; } /* Price chip after carrier name */ .woocommerce-cart .cart_totals ul#shipping_method li label .woocommerce-Price-amount, .woocommerce-cart .cart_totals .woocommerce-shipping-methods li label .woocommerce-Price-amount { font-weight: 600 !important; color: var(--np-on-surface, #1c1b1f) !important; white-space: nowrap !important; margin: 0 !important; display: inline-flex !important; } .woocommerce-cart .cart_totals ul#shipping_method li label .tax_label, .woocommerce-cart .cart_totals .woocommerce-shipping-methods li label .tax_label, .woocommerce-cart .cart_totals ul#shipping_method li label small, .woocommerce-cart .cart_totals .woocommerce-shipping-methods li label small { font-size: 0.6875rem !important; color: var(--np-on-surface-variant, #888) !important; font-weight: 400 !important; margin: 0 !important; white-space: nowrap !important; } /* Carrier logo (DPD plugin) — hidden, since the carrier name already includes "DPD". Removing it lets the price + tax label sit cleanly on one line in the narrow sidebar. (If you want logos back, replace `display: none` with the inline-flex block from earlier and shrink to ~24px height.) */ .woocommerce-cart .cart_totals ul#shipping_method li .dpd-carrier-icon-image-holder, .woocommerce-cart .cart_totals .woocommerce-shipping-methods li .dpd-carrier-icon-image-holder, .woocommerce-cart .cart_totals ul#shipping_method li img, .woocommerce-cart .cart_totals .woocommerce-shipping-methods li img, .woocommerce-cart .cart_totals ul#shipping_method li label img, .woocommerce-cart .cart_totals .woocommerce-shipping-methods li label img { display: none !important; } /* Plugin-injected shipping content (e.g. DPD pickup picker) — give breathing room */ .woocommerce-cart .cart_totals .shipping td > p, .woocommerce-cart .cart_totals .shipping td > div, .woocommerce-cart .cart_totals .woocommerce-shipping-calculator { margin: var(--np-space-3) 0 0 !important; font-size: 0.75rem !important; color: var(--np-on-surface-variant, #555) !important; } .woocommerce-cart .cart_totals .woocommerce-shipping-destination { font-size: 0.75rem !important; color: var(--np-on-surface-variant, #555) !important; margin: var(--np-space-2) 0 0 !important; } /* Proceed to checkout button */ .woocommerce-cart .wc-proceed-to-checkout { padding: 0 var(--np-space-6) var(--np-space-6) !important; margin: 0 !important; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: flex !important; align-items: center !important; justify-content: center !important; gap: var(--np-space-3) !important; width: 100% !important; padding: var(--np-space-4) var(--np-space-6) !important; background: var(--np-gradient-primary, linear-gradient(135deg, #6750a4, #a370f7)) !important; color: #fff !important; border: none !important; border-radius: var(--np-radius-2, 8px) !important; font-family: var(--np-font-label) !important; font-size: 0.8125rem !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: 0 2px 8px rgba(103, 80, 164, 0.2) !important; transition: var(--np-transition, all 0.2s ease) !important; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(103, 80, 164, 0.32) !important; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after { content: "→"; font-size: 1rem; } /* "Return to shop" link below sidebar */ .woocommerce-cart .return-to-shop { grid-column: 1 / -1; margin: var(--np-space-6) 0 0 !important; } .woocommerce-cart .return-to-shop a { display: inline-flex; align-items: center; gap: var(--np-space-2); color: var(--np-on-surface-variant, #555) !important; font-size: 0.8125rem !important; text-decoration: none !important; border: none !important; background: transparent !important; padding: 0 !important; } .woocommerce-cart .return-to-shop a:hover { color: var(--np-primary, #6750a4) !important; } .woocommerce-cart .return-to-shop a::before { content: "←"; } /* -------------------------------------------------------------------------- 6. Checkout Page -------------------------------------------------------------------------- */ .woocommerce-checkout .np-woocommerce { max-width: 1400px; margin: 0 auto; padding: var(--np-space-12) var(--np-space-8) var(--np-space-24); } /* Coupon notice ("Have a coupon? Click here…") */ .woocommerce-checkout .woocommerce-info { background: var(--np-surface-container-low, #f5f3f7) !important; border: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.08)) !important; border-left: 3px solid var(--np-primary, #6750a4) !important; border-radius: var(--np-radius-2, 8px) !important; padding: var(--np-space-4) var(--np-space-5) !important; color: var(--np-on-surface, #1c1b1f) !important; font-size: 0.8125rem !important; margin: 0 0 var(--np-space-6) !important; } .woocommerce-checkout .woocommerce-info::before { display: none !important; } .woocommerce-checkout .woocommerce-info a { color: var(--np-primary, #6750a4) !important; font-weight: 600 !important; text-decoration: none !important; } /* Two-column checkout layout */ .woocommerce-checkout form.checkout { display: grid !important; grid-template-columns: minmax(0, 1fr) 460px; gap: var(--np-space-10) !important; align-items: start !important; margin: 0 !important; } .woocommerce-checkout form.checkout .col2-set, .woocommerce-checkout form.checkout > .woocommerce-billing-fields, .woocommerce-checkout form.checkout > .woocommerce-shipping-fields, .woocommerce-checkout form.checkout > .woocommerce-additional-fields { grid-column: 1 !important; width: 100% !important; margin: 0 !important; } /* Right column: heading + sticky order review card. Both span ALL rows of the left column so they hug the top of the column instead of falling to the bottom. */ .woocommerce-checkout form.checkout #order_review_heading { grid-column: 2 !important; grid-row: 1 !important; margin: 0 0 var(--np-space-5) !important; padding: 0 !important; background: transparent !important; font-family: var(--np-font-headline) !important; font-weight: 500 !important; font-size: 1.125rem !important; color: var(--np-on-surface, #1c1b1f) !important; border: none !important; text-transform: none !important; letter-spacing: 0 !important; align-self: start !important; } .woocommerce-checkout form.checkout #order_review { grid-column: 2 !important; grid-row: 2 / -1 !important; align-self: start !important; background: var(--np-surface-container-lowest, #fff) !important; border: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.08)) !important; border-radius: var(--np-radius-3, 12px) !important; padding: 0 !important; overflow: hidden; position: sticky; top: var(--np-space-6); } /* Form section headings (Billing details, Additional information) */ .woocommerce-checkout form.checkout h3 { font-family: var(--np-font-headline) !important; font-weight: 500 !important; font-size: 1.125rem !important; margin: 0 0 var(--np-space-5) !important; color: var(--np-on-surface, #1c1b1f) !important; letter-spacing: 0; text-transform: none; } .woocommerce-checkout form.checkout .woocommerce-billing-fields > h3, .woocommerce-checkout form.checkout .woocommerce-shipping-fields > h3, .woocommerce-checkout form.checkout .woocommerce-additional-fields > h3 { padding-bottom: var(--np-space-3); border-bottom: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.08)); } /* Form fields — paired into two columns where possible */ .woocommerce-checkout form.checkout .form-row { margin: 0 0 var(--np-space-5) !important; padding: 0 !important; } .woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout form.checkout .woocommerce-shipping-fields__field-wrapper, .woocommerce-checkout form.checkout .woocommerce-additional-fields__field-wrapper { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 var(--np-space-5) !important; } .woocommerce-checkout form.checkout .form-row.form-row-first, .woocommerce-checkout form.checkout .form-row.form-row-last, .woocommerce-checkout form.checkout .form-row[id="billing_first_name_field"], .woocommerce-checkout form.checkout .form-row[id="billing_last_name_field"] { grid-column: span 1 !important; width: auto !important; margin: 0 0 var(--np-space-5) !important; float: none !important; } .woocommerce-checkout form.checkout .form-row.form-row-wide, .woocommerce-checkout form.checkout .form-row.notes, .woocommerce-checkout form.checkout .form-row[id*="address"], .woocommerce-checkout form.checkout .form-row[id*="email"], .woocommerce-checkout form.checkout .form-row[id*="phone"], .woocommerce-checkout form.checkout .form-row[id*="country"], .woocommerce-checkout form.checkout .form-row[id*="company"], .woocommerce-checkout form.checkout .form-row[id*="city"], .woocommerce-checkout form.checkout .form-row[id*="postcode"], .woocommerce-checkout form.checkout .form-row[id*="state"], .woocommerce-checkout form.checkout .form-row[id*="ship-to-different"], .woocommerce-checkout form.checkout .form-row[id*="order_comments"] { grid-column: 1 / -1 !important; width: 100% !important; } .woocommerce-checkout form.checkout label { display: block !important; font-family: var(--np-font-label) !important; font-size: 0.6875rem !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: var(--np-on-surface-variant, #555) !important; font-weight: 600 !important; margin: 0 0 var(--np-space-2) !important; cursor: default; } .woocommerce-checkout form.checkout label .required { color: var(--np-primary, #6750a4) !important; text-decoration: none !important; margin-left: 2px; } /* Field controls */ .woocommerce-checkout form.checkout input[type="text"], .woocommerce-checkout form.checkout input[type="email"], .woocommerce-checkout form.checkout input[type="tel"], .woocommerce-checkout form.checkout input[type="number"], .woocommerce-checkout form.checkout input[type="password"], .woocommerce-checkout form.checkout textarea, .woocommerce-checkout form.checkout select, .woocommerce-checkout form.checkout .select2-container .select2-selection--single { width: 100% !important; height: 44px !important; padding: 0 var(--np-space-4) !important; background: var(--np-surface-container-lowest, #fff) !important; border: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.12)) !important; border-radius: var(--np-radius-1, 6px) !important; font-size: 0.875rem !important; color: var(--np-on-surface, #1c1b1f) !important; line-height: 44px !important; box-shadow: none !important; transition: border-color 0.15s ease; } .woocommerce-checkout form.checkout textarea { height: auto !important; min-height: 96px !important; padding: var(--np-space-3) var(--np-space-4) !important; line-height: 1.5 !important; resize: vertical; } .woocommerce-checkout form.checkout input[type="text"]:focus, .woocommerce-checkout form.checkout input[type="email"]:focus, .woocommerce-checkout form.checkout input[type="tel"]:focus, .woocommerce-checkout form.checkout textarea:focus, .woocommerce-checkout form.checkout select:focus, .woocommerce-checkout form.checkout .select2-container--focus .select2-selection--single { outline: none !important; border-color: var(--np-primary, #6750a4) !important; box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.12) !important; } .woocommerce-checkout form.checkout .select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px !important; padding: 0 !important; color: var(--np-on-surface, #1c1b1f) !important; } .woocommerce-checkout form.checkout .select2-container .select2-selection--single .select2-selection__arrow { height: 42px !important; right: var(--np-space-3) !important; } /* Checkboxes (Ship to different, terms, company) */ .woocommerce-checkout form.checkout .woocommerce-form__label-checkbox, .woocommerce-checkout form.checkout label.checkbox { display: inline-flex !important; align-items: center !important; gap: var(--np-space-3) !important; cursor: pointer !important; font-family: var(--np-font-body) !important; font-size: 0.8125rem !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; color: var(--np-on-surface, #1c1b1f) !important; } .woocommerce-checkout form.checkout input[type="checkbox"] { width: 1.1rem !important; height: 1.1rem !important; accent-color: var(--np-primary, #6750a4) !important; margin: 0 !important; } /* Order Review (sidebar card) */ .woocommerce-checkout #order_review > h3, .woocommerce-checkout .woocommerce-checkout-review-order > h3 { margin: 0 !important; padding: var(--np-space-5) var(--np-space-6) !important; background: var(--np-surface-container-low, #f5f3f7) !important; border-bottom: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.08)) !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table { border: none !important; margin: 0 !important; padding: 0 var(--np-space-6) !important; background: transparent !important; width: 100% !important; max-width: none !important; /* Same blockification as cart totals — see comment there. */ display: block !important; box-sizing: border-box !important; table-layout: auto !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table thead, .woocommerce-checkout .woocommerce-checkout-review-order-table tbody, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot { display: block !important; width: 100% !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table thead { border-bottom: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.08)) !important; background: transparent !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tr { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; width: 100% !important; box-sizing: border-box !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table thead th:first-child, .woocommerce-checkout .woocommerce-checkout-review-order-table tbody td:first-child { flex: 1 1 auto !important; text-align: left !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table thead th:last-child, .woocommerce-checkout .woocommerce-checkout-review-order-table tbody td:last-child { flex: 0 0 auto !important; text-align: right !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table thead th { font-family: var(--np-font-label) !important; font-size: 0.625rem !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; color: var(--np-on-surface-variant, #555) !important; font-weight: 600 !important; padding: var(--np-space-4) 0 !important; background: transparent !important; border: none !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tbody td, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td { border: none !important; border-bottom: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.06)) !important; padding: var(--np-space-3) 0 !important; background: transparent !important; font-size: 0.8125rem !important; vertical-align: top !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tbody td { color: var(--np-on-surface, #1c1b1f) !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th { font-family: var(--np-font-label) !important; font-size: 0.6875rem !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-weight: 600 !important; color: var(--np-on-surface-variant, #555) !important; text-align: left !important; flex: 0 0 38% !important; width: 38% !important; box-sizing: border-box !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td { flex: 1 1 auto !important; width: auto !important; text-align: right !important; font-weight: 500 !important; box-sizing: border-box !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td { border-top: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.12)) !important; border-bottom: 0 !important; padding-top: var(--np-space-5) !important; padding-bottom: var(--np-space-5) !important; font-size: 1rem !important; font-weight: 700 !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--np-font-headline) !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount, .woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount { font-size: 1.25rem !important; color: var(--np-on-surface, #1c1b1f) !important; } /* Shipping row in checkout — span full width, TH on top, UL below */ .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping { display: block !important; flex: none !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping th { display: block !important; flex: none !important; width: 100% !important; padding-bottom: var(--np-space-2) !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping td { display: block !important; flex: none !important; width: 100% !important; padding-top: 0 !important; text-align: left !important; } /* Shipping rates inside checkout */ .woocommerce-checkout .woocommerce-checkout-review-order-table ul#shipping_method, .woocommerce-checkout .woocommerce-checkout-review-order-table .woocommerce-shipping-methods, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping ul { list-style: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; display: block !important; box-sizing: border-box !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping ul li { list-style: none !important; display: flex !important; align-items: center !important; gap: var(--np-space-3) !important; padding: var(--np-space-3) var(--np-space-4) !important; margin: 0 0 var(--np-space-2) !important; width: 100% !important; box-sizing: border-box !important; background: var(--np-surface-container-lowest, #fff) !important; border: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.1)) !important; border-radius: var(--np-radius-1, 6px) !important; transition: var(--np-transition, all 0.15s ease) !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping ul li:hover { border-color: var(--np-primary, #6750a4) !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping ul li:has(input:checked) { border-color: var(--np-primary, #6750a4) !important; background: var(--np-primary-container, rgba(103, 80, 164, 0.08)) !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping ul li input[type="radio"] { accent-color: var(--np-primary, #6750a4) !important; width: 1rem !important; height: 1rem !important; margin: 0 !important; flex-shrink: 0 !important; order: 0 !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping ul li label { display: flex !important; align-items: center !important; gap: var(--np-space-3) !important; margin: 0 !important; cursor: pointer !important; font-size: 0.8125rem !important; font-weight: 500 !important; color: var(--np-on-surface, #1c1b1f) !important; flex: 1 1 auto !important; min-width: 0 !important; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--np-font-body) !important; padding: 0 !important; order: 1 !important; } /* Override the plugin's inline-styled inner div (display:flex; space-between) */ .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping ul li label > div:first-child { display: flex !important; flex: 1 1 auto !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 6px !important; justify-content: flex-start !important; min-width: 0 !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping ul li label .woocommerce-Price-amount { font-weight: 600 !important; color: var(--np-on-surface, #1c1b1f) !important; white-space: nowrap !important; margin: 0 !important; display: inline-flex !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping ul li label .tax_label, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping ul li label small { font-size: 0.6875rem !important; color: var(--np-on-surface-variant, #888) !important; font-weight: 400 !important; margin: 0 !important; white-space: nowrap !important; } /* Hide carrier logos — the carrier name already says "DPD"; logos add clutter to the narrow checkout sidebar. */ .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping ul li .dpd-carrier-icon-image-holder, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping ul li img, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping ul li label img, .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.shipping ul li svg { display: none !important; } /* Pickup point selector (DPD plugin renders inside a row) */ .woocommerce-checkout .woocommerce-checkout-review-order-table tr.shipping td > p, .woocommerce-checkout .woocommerce-checkout-review-order-table tr.shipping td > div { margin: var(--np-space-2) 0 0 !important; font-size: 0.75rem !important; color: var(--np-on-surface-variant, #555) !important; } /* Generic pickup-point/dropdown row inside review */ .woocommerce-checkout .woocommerce-checkout-review-order-table .dpd-pickup, .woocommerce-checkout .woocommerce-checkout-review-order-table tr[class*="pickup"] { background: var(--np-surface-container-low, #f5f3f7) !important; } .woocommerce-checkout .woocommerce-checkout-review-order-table tr[class*="pickup"] th { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; color: var(--np-on-surface, #1c1b1f) !important; font-family: var(--np-font-body) !important; } /* Payment Methods */ .woocommerce-checkout .woocommerce-checkout-payment { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 var(--np-space-6) var(--np-space-6) !important; margin: 0 !important; } .woocommerce-checkout #payment { background: transparent !important; } .woocommerce-checkout #payment ul.payment_methods { list-style: none !important; padding: 0 !important; margin: var(--np-space-5) 0 0 !important; border: none !important; } .woocommerce-checkout #payment ul.payment_methods > li { padding: var(--np-space-4) !important; margin: 0 0 var(--np-space-2) !important; background: var(--np-surface-container-lowest, #fff) !important; border: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.1)) !important; border-radius: var(--np-radius-2, 8px) !important; transition: var(--np-transition, all 0.15s ease); list-style: none !important; } .woocommerce-checkout #payment ul.payment_methods > li:hover { border-color: var(--np-primary, #6750a4) !important; } .woocommerce-checkout #payment ul.payment_methods > li:has(input:checked) { border-color: var(--np-primary, #6750a4) !important; background: rgba(103, 80, 164, 0.04) !important; box-shadow: 0 0 0 1px var(--np-primary, #6750a4) inset !important; } .woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"] { accent-color: var(--np-primary, #6750a4) !important; width: 1.1rem !important; height: 1.1rem !important; margin: 0 var(--np-space-3) 0 0 !important; vertical-align: middle !important; } .woocommerce-checkout #payment ul.payment_methods > li > label { display: inline-flex !important; align-items: center !important; gap: var(--np-space-3) !important; font-family: var(--np-font-body) !important; font-weight: 500 !important; font-size: 0.875rem !important; cursor: pointer !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--np-on-surface, #1c1b1f) !important; margin: 0 !important; } .woocommerce-checkout #payment ul.payment_methods > li > label img { max-height: 22px !important; width: auto !important; margin-left: var(--np-space-3) !important; vertical-align: middle; } .woocommerce-checkout #payment .payment_box { background: transparent !important; padding: var(--np-space-3) 0 0 !important; margin: var(--np-space-3) 0 0 !important; border-top: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.08)) !important; font-size: 0.8125rem !important; color: var(--np-on-surface-variant, #555) !important; border-radius: 0 !important; } .woocommerce-checkout #payment .payment_box::before { display: none !important; } .woocommerce-checkout #payment .payment_box p { margin: 0 !important; } /* Terms & Place Order */ .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin: var(--np-space-4) 0 0 !important; } .woocommerce-checkout .form-row.validate-required.woocommerce-validated label, .woocommerce-checkout .woocommerce-form__label-checkbox.checkbox { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.8125rem !important; color: var(--np-on-surface, #1c1b1f) !important; font-weight: 500 !important; } .woocommerce-checkout #place_order { width: 100% !important; margin: var(--np-space-5) 0 0 !important; padding: var(--np-space-4) var(--np-space-6) !important; background: var(--np-gradient-primary, linear-gradient(135deg, #6750a4, #a370f7)) !important; color: #fff !important; border: none !important; border-radius: var(--np-radius-2, 8px) !important; font-family: var(--np-font-label) !important; font-size: 0.8125rem !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; box-shadow: 0 2px 8px rgba(103, 80, 164, 0.2) !important; cursor: pointer !important; transition: all 0.2s ease !important; } .woocommerce-checkout #place_order:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(103, 80, 164, 0.32) !important; } /* PayPal-injected button — match site button style */ .woocommerce-checkout .ppc-button-wrapper, .woocommerce-checkout div[id^="ppc-button"], .woocommerce-checkout .paypal-buttons { margin: var(--np-space-5) 0 0 !important; } /* Stripe Express Checkout (Apple Pay / Google Pay / Pay with Link). The PHP companion (np_parts_move_stripe_express_checkout) re-attaches the Stripe element to woocommerce_review_order_after_submit, so the wallet buttons render INSIDE .form-row.place-order, right below the Place Order button. Style them as a compact "alternative" block with a subtle "OR" separator above and a small top margin. */ .woocommerce-checkout #wc-stripe-express-checkout-element { margin: var(--np-space-5) 0 0 !important; clear: both; width: 100%; box-sizing: border-box; } .woocommerce-checkout #wc-stripe-express-checkout-button-separator { margin: var(--np-space-4) 0 0 !important; text-align: center !important; font-family: var(--np-font-label) !important; font-size: 0.6875rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--np-on-surface-variant, #888) !important; font-weight: 600 !important; position: relative; } /* Stripe injects the element with `display:none` initially and toggles it on when wallets are detected. We keep that behavior intact (don't force it visible — wallets aren't always available). */ /* Hide the order-attribution custom element — it's not user-facing UI. */ .woocommerce-checkout wc-order-attribution-inputs#wc-stripe-express-checkout__order-attribution-inputs { display: none !important; } /* Defensive: if the express element ever ends up at the TOP of the form again (e.g. plugin update changes the move logic), make sure it stretches both columns of the checkout grid instead of leaving the right side empty. */ .woocommerce-checkout form.checkout > #wc-stripe-express-checkout-element, .woocommerce-checkout form.checkout > #wc-stripe-express-checkout-button-separator, .woocommerce-checkout form.checkout > wc-order-attribution-inputs { grid-column: 1 / -1 !important; } .woocommerce-checkout .privacy-policy-text { font-size: 0.75rem !important; color: var(--np-on-surface-variant, #555) !important; line-height: 1.5 !important; margin: var(--np-space-3) 0 !important; } /* "Your order" section heading on small screens — keep visible */ .woocommerce-checkout #order_review_heading::before { display: none; } /* -------------------------------------------------------------------------- 7. My Account Page -------------------------------------------------------------------------- */ .woocommerce-account .np-woocommerce { max-width: 1400px; margin: 0 auto; padding: var(--np-space-12) var(--np-space-8) var(--np-space-24); } .woocommerce-account .woocommerce-MyAccount-navigation { width: 260px; float: left; margin-right: var(--np-space-12); } .woocommerce-account .woocommerce-MyAccount-content { overflow: hidden; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; } .woocommerce-account .woocommerce-MyAccount-navigation ul li { margin-bottom: 0; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: flex; align-items: center; gap: var(--np-space-3); padding: var(--np-space-4) var(--np-space-5); font-family: var(--np-font-label); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--np-on-surface-variant); transition: var(--np-transition); } .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: var(--np-surface-container-low); color: var(--np-on-surface); } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--np-surface-container-low); color: var(--np-on-surface); border-left: 3px solid var(--np-primary); } .np-account-icon { font-size: 1.125rem !important; } /* Orders Table */ .woocommerce-account .woocommerce-orders-table { border: none; } .woocommerce-account .woocommerce-orders-table th { background: transparent; } /* Login / Register on My Account */ .woocommerce-account .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--np-space-12); } .woocommerce-account .u-columns h2 { font-weight: 200; font-size: 1.5rem; margin-bottom: var(--np-space-6); } .woocommerce-account .u-columns .col-1 { padding-right: var(--np-space-8); border-right: 1px solid var(--np-outline-variant); } .woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register { margin: 0; padding: 0; border: none; border-radius: 0; } .woocommerce-account .woocommerce-form-login .form-row, .woocommerce-account .woocommerce-form-register .form-row { margin-bottom: var(--np-space-5); } .woocommerce form .form-row label.inline { font-family: var(--np-font-body); font-size: 0.8125rem; text-transform: none; letter-spacing: 0; } /* Order Details */ .woocommerce-account .woocommerce-order-details { margin-bottom: var(--np-space-12); } .woocommerce-account .woocommerce-order-details h2, .woocommerce-account .woocommerce-customer-details h2 { font-weight: 200; font-size: 1.5rem; margin-bottom: var(--np-space-6); } .woocommerce-account .woocommerce-customer-details address { font-family: var(--np-font-body); font-size: 0.875rem; line-height: 1.8; color: var(--np-on-surface-variant); border: none; padding: var(--np-space-6); background: var(--np-surface-container-low); } /* Order received / Thank you */ .woocommerce-order-received .woocommerce-thankyou-order-received { font-family: var(--np-font-headline); font-weight: 300; font-size: 1.25rem; color: var(--np-secondary); margin-bottom: var(--np-space-8); } .woocommerce-order-received .woocommerce-order-overview { list-style: none; padding: var(--np-space-6); background: var(--np-surface-container-low); display: flex; flex-wrap: wrap; gap: var(--np-space-8); margin-bottom: var(--np-space-8); } .woocommerce-order-received .woocommerce-order-overview li { font-family: var(--np-font-label); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--np-on-surface-variant); } .woocommerce-order-received .woocommerce-order-overview li strong { display: block; font-family: var(--np-font-headline); font-weight: 300; font-size: 1rem; color: var(--np-on-surface); margin-top: var(--np-space-2); text-transform: none; letter-spacing: 0; } /* -------------------------------------------------------------------------- 8. Notices & Messages -------------------------------------------------------------------------- */ .woocommerce-message, .woocommerce-info, .woocommerce-error { padding: var(--np-space-4) var(--np-space-6) !important; margin-bottom: var(--np-space-6) !important; border: none !important; border-left: 4px solid var(--np-secondary) !important; background: var(--np-surface-container-low) !important; font-family: var(--np-font-body); font-size: 0.875rem; color: var(--np-on-surface); list-style: none; border-radius: 0 !important; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--np-space-3); } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none !important; } .woocommerce-error { border-left-color: var(--np-error) !important; } .woocommerce-info { border-left-color: var(--np-tertiary) !important; } .woocommerce-error li { list-style: none; } /* -------------------------------------------------------------------------- 9. Star Rating -------------------------------------------------------------------------- */ .woocommerce .star-rating { color: var(--np-secondary); } .woocommerce .star-rating::before { color: var(--np-outline-variant); } /* -------------------------------------------------------------------------- 10. Variations & Variable Products -------------------------------------------------------------------------- */ .woocommerce div.product .variations { border: none !important; margin-bottom: var(--np-space-2); border-collapse: separate; } .woocommerce div.product .variations tr { display: flex; flex-direction: column; align-items: flex-start; gap: var(--np-space-2); } .woocommerce div.product .variations td, .woocommerce div.product .variations th { border: none !important; padding: 0; vertical-align: middle; display: flex; align-items: center; justify-content: center; line-height: 1; width: 100%; } .woocommerce div.product .variations .label { flex: 0 0 auto; } .woocommerce div.product .variations .label label { font-family: var(--np-font-label); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; color: var(--np-primary); white-space: nowrap; line-height: 1; margin: 0; padding: 0; } .woocommerce div.product .variations .value { flex: 1 1 auto; justify-content: flex-start; flex-wrap: wrap; } .woocommerce div.product .variations, .woocommerce div.product .variations tbody, .woocommerce div.product .variations_form { border-top: none !important; border-bottom: none !important; box-shadow: none !important; } .woocommerce div.product .variations_form::before, .woocommerce div.product .variations_form::after, .woocommerce div.product .variations::before, .woocommerce div.product .variations::after { display: none !important; } .woocommerce div.product .variations select { min-width: 200px; border: none; border-bottom: 1px solid var(--np-outline-variant); } .woocommerce div.product .woocommerce-variation-price { display: none !important; } /* Hide old specs row (now shown as Additional Features below) */ .np-single-specs { display: none !important; } /* Color Swatches */ .np-swatches { display: flex; flex-wrap: wrap; gap: var(--np-space-2); align-items: center; justify-content: flex-start; } .np-swatch { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--np-outline-variant); border-radius: 999px; background: transparent; cursor: pointer; font-family: var(--np-font-label); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; color: var(--np-on-surface); transition: border-color 0.2s, background 0.2s, color 0.2s; } .np-swatch:hover { border-color: var(--np-primary); } .np-swatch--active { border-color: var(--np-primary); background: rgba(47, 128, 237, 0.08); color: var(--np-primary); } .np-swatch__dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); flex-shrink: 0; } .np-swatch__label { line-height: 1; } /* Variation Cards (non-color attributes) */ .np-var-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--np-space-2); width: 100%; } /* Default pill: 3px transparent border so when we swap to a solid blue border on .--active there is ZERO layout shift. The visible 1 px gray edge in the rest state is drawn by an inset box-shadow instead of the actual border (Chromium + WebKit both render this reliably). */ .np-var-card { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: inherit; position: relative; display: flex; align-items: center; justify-content: center; padding: var(--np-space-2) var(--np-space-3); border: 3px solid transparent; border-radius: var(--np-radius-s, 6px); background: #ffffff; box-shadow: inset 0 0 0 1px #debecf; font-family: var(--np-font-body); font-size: 0.75rem; color: #1a1a1a; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.18s ease, transform 0.1s ease; white-space: normal; overflow-wrap: break-word; line-height: 1.3; text-align: center; min-height: 2.25rem; outline: none !important; user-select: none; } /* Hover is INTENTIONALLY very subtle so it never visually competes with the selected pill (which the customer must see at all times). Only a tiny background tint — no border change, no shadow. */ .np-var-card:hover { background: #f5f7fb; box-shadow: inset 0 0 0 1px #cdd5e0; } .np-var-card:active { transform: translateY(1px); } /* Keyboard focus ring (Tab navigation) — independent of click highlight. */ .np-var-card:focus-visible { box-shadow: inset 0 0 0 1px #2F80ED, 0 0 0 2px rgba(47, 128, 237, 0.35) !important; } /* ========================================================================== SELECTED pill — must be UNDENIABLY visible against any hover overlay, in any browser, on any device. We layer SIX independent visual cues so even if one rendering path silently fails on a given engine, the rest guarantee the customer can see which option they chose: 1. Solid 3 px BLUE border (always renders, even with appearance:none). 2. Saturated #d9eafc light-blue BACKGROUND. 3. Bold #1a5499 (deep blue) text COLOR. 4. A "✓" CHECKMARK badge in the top-right corner. 5. Soft drop SHADOW + slight upward LIFT. 6. Higher z-index so the active pill literally stacks above neighbors. Hardcoded hex colors — no var() fallbacks that could cascade-fail. The default state already reserves a 3 px border slot (transparent), so switching to solid blue here causes ZERO layout shift. ========================================================================== */ .np-var-card--active, .np-var-card.is-active, button.np-var-card--active, .single-product .np-var-card--active, .woocommerce .np-var-card--active { border: 3px solid #2F80ED !important; background: #d9eafc !important; color: #1a5499 !important; font-weight: 700 !important; box-shadow: inset 0 0 0 0 transparent, 0 6px 18px rgba(47, 128, 237, 0.32) !important; outline: none !important; z-index: 2; transform: translateY(-1px); } /* Checkmark badge in the top-right corner — extra clarity for any user even on monochrome / accessibility modes where colors might wash out. */ .np-var-card--active::after, .np-var-card.is-active::after { content: ""; position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: #2F80ED url("data:image/svg+xml;utf8,") center/10px 8px no-repeat; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); pointer-events: none; } /* Hovering OVER the active pill keeps it looking selected (slightly darker so it still feels interactive). The other-pill hover is so subtle that the active pill always reads as the dominant element on the page. */ .np-var-card--active:hover, .np-var-card.is-active:hover { border-color: #1a5499 !important; background: #c9deff !important; box-shadow: inset 0 0 0 0 transparent, 0 8px 22px rgba(47, 128, 237, 0.4) !important; transform: translateY(-2px); } /* Color-swatch buttons (e.g. "Spalva" attribute) reuse the same active pattern so users see a consistent blue highlight across attribute types. */ .np-swatch { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; -webkit-tap-highlight-color: transparent; outline: none !important; position: relative; border: 3px solid transparent; transition: background-color 0.15s, transform 0.1s, box-shadow 0.18s; } .np-swatch:focus-visible { box-shadow: inset 0 0 0 1px #2F80ED, 0 0 0 2px rgba(47, 128, 237, 0.35) !important; } .np-swatch--active, .np-swatch.is-active, button.np-swatch--active { border: 3px solid #2F80ED !important; background: #d9eafc !important; box-shadow: 0 6px 18px rgba(47, 128, 237, 0.32) !important; outline: none !important; z-index: 2; transform: translateY(-1px); } .woocommerce div.product .variations .reset_variations { display: none !important; } /* ========================================================================== Advanced Product Fields for WooCommerce (WAPF Pro) ---------------------------------------------------------------------- The plugin attaches its `
` wrapper via the `woocommerce_before_add_to_cart_button` hook. That makes .wapf a flex sibling of .quantity, .single_add_to_cart_button and .np-cart-zone__price inside `form.cart` — which on its own collapses .wapf into a narrow column on simple products. We force .wapf onto its own full-width row, present the SELECT field as a centered square card under the short description, and lay the Product/Options/Grand totals out as a clean horizontal summary above the qty + Add-to-Cart row. ========================================================================== */ /* The WAPF outer wrapper. Since form.cart is now `display: block`, the .wapf element is a plain block child and naturally takes the full width of the summary column. No flex tricks needed. */ .woocommerce div.product form.cart > .wapf, .woocommerce div.product form.cart .wapf, .woocommerce div.product .woocommerce-variation-add-to-cart > .wapf { display: block; width: 100% !important; max-width: 100% !important; margin: 0 0 var(--np-space-5) 0 !important; padding: 0 !important; background: transparent; } /* The inner card — wide enough to show every option label end-to-end (e.g. "Porsche 718 Cayman GT4 RS CS"). It spans the full container width with 100% so the SELECT field can stretch across the column. */ .woocommerce div.product form.cart .wapf .wapf-wrapper { display: block; width: 100%; max-width: 100%; margin: 0; padding: var(--np-space-5) var(--np-space-6); border: 1px solid var(--np-outline-variant, #debecf); border-radius: var(--np-radius-m, 10px); background: var(--np-surface-container-lowest, #ffffff); box-sizing: border-box; } .woocommerce div.product form.cart .wapf .wapf-field-group { margin: 0 !important; padding: 0 !important; background: transparent; border: 0; width: 100%; /* Plugin default is `display: flex; flex-wrap: wrap`. We force every field-container to span the full row so multi-field WAPF setups (e.g. SELECT + CAR MODEL) stack cleanly inside the card. */ display: block !important; } .woocommerce div.product form.cart .wapf .wapf-field-container { margin: 0 0 var(--np-space-4) 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; text-align: center; width: 100% !important; box-sizing: border-box; } .woocommerce div.product form.cart .wapf .wapf-field-container:last-child { margin-bottom: 0 !important; } /* Label ("SELECT", "MATERIAL", etc.) — small, uppercase, tracked, matching the rest of the np-parts label typography. */ .woocommerce div.product form.cart .wapf .wapf-field-label { font-family: var(--np-font-label) !important; font-size: 0.625rem !important; text-transform: uppercase !important; letter-spacing: 0.18em !important; color: var(--np-on-surface-variant, #6c6c6c) !important; font-weight: 700 !important; margin: 0 0 var(--np-space-2) !important; text-align: center !important; line-height: 1.2 !important; } .woocommerce div.product form.cart .wapf .wapf-field-label > label, .woocommerce div.product form.cart .wapf .wapf-field-label * { font: inherit !important; color: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; } .woocommerce div.product form.cart .wapf .wapf-field-input { margin: 0 !important; text-align: center; display: block; width: 100%; } /* Wide select box: stretches full wrapper width so even the longest option label ("Porsche 718 Cayman GT4 RS CS") shows in full, no truncation, no ellipsis. We zero out browser-native chrome with `appearance: none` and provide our own dropdown caret via a background SVG so Safari + Firefox + Chrome render identically. */ .woocommerce div.product form.cart .wapf .wapf-field-input select, .woocommerce div.product form.cart .wapf select { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; padding: 1rem 3rem 1rem 1.5rem !important; background-color: var(--np-surface-container-lowest, #ffffff) !important; background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 1.1rem center !important; background-size: 10px 7px !important; border: 1px solid var(--np-outline-variant, #debecf) !important; border-radius: var(--np-radius-s, 6px) !important; box-shadow: none !important; color: var(--np-on-surface, #1a1a1a) !important; font-family: var(--np-font-body) !important; font-size: 0.95rem !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-align: center !important; text-align-last: center !important; /* center selected option text in Chrome/Edge */ cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; outline: none !important; /* Intentionally NOT setting `text-overflow: ellipsis` here — with the select stretched full-width there is room for any option label, and ellipsis would mask labels in narrow browser windows. */ text-overflow: clip; overflow: hidden; white-space: nowrap; } .woocommerce div.product form.cart .wapf .wapf-field-input select:hover, .woocommerce div.product form.cart .wapf select:hover { border-color: var(--np-primary, #2F80ED) !important; } .woocommerce div.product form.cart .wapf .wapf-field-input select:focus, .woocommerce div.product form.cart .wapf select:focus { border-color: var(--np-primary, #2F80ED) !important; box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.25) !important; } /* Description / hint text under the field — kept centered + muted. */ .woocommerce div.product form.cart .wapf .wapf-field-description { text-align: center; margin-top: var(--np-space-1); font-size: 0.75rem; color: var(--np-on-surface-variant, #6c6c6c); } /* Validation error bubble — keep it centered too. */ .woocommerce div.product form.cart .wapf .wapf-validation-error { text-align: center !important; margin-top: var(--np-space-2) !important; font-size: 0.75rem !important; color: var(--np-error, #ba1a1a) !important; } /* Product totals (Product total / Options total / Grand total). Sits directly under the SELECT card as a separate full-width panel. The plugin starts it as `display:none` for variable products and toggles it on once a variation is picked, so we only style the visible form. */ .woocommerce div.product form.cart .wapf-product-totals { display: block !important; width: 100% !important; max-width: 100% !important; margin: var(--np-space-3) 0 var(--np-space-5) !important; padding: var(--np-space-4) var(--np-space-6) !important; border: 1px solid var(--np-outline-variant, #debecf) !important; border-radius: var(--np-radius-m, 10px) !important; background: var(--np-surface-container-lowest, #ffffff) !important; box-sizing: border-box; } .woocommerce div.product form.cart .wapf-product-totals .wapf--inner { display: flex !important; flex-direction: column !important; gap: var(--np-space-1) !important; width: 100% !important; } .woocommerce div.product form.cart .wapf-product-totals .wapf--inner > div { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: var(--np-space-3) !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } /* First label/value column — small uppercase label */ .woocommerce div.product form.cart .wapf-product-totals .wapf--inner > div > span:first-child { font-family: var(--np-font-label) !important; font-size: 0.625rem !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; color: var(--np-on-surface-variant, #6c6c6c) !important; font-weight: 600 !important; white-space: nowrap !important; } .woocommerce div.product form.cart .wapf-product-totals .wapf-total { font-family: var(--np-font-headline) !important; font-weight: 400 !important; font-size: 0.875rem !important; color: var(--np-on-surface, #1a1a1a) !important; white-space: nowrap !important; } /* Grand total — emphasized with a thin top divider and primary color */ .woocommerce div.product form.cart .wapf-product-totals .wapf--inner > div:has(.wapf-grand-total) { margin-top: var(--np-space-2) !important; padding-top: var(--np-space-2) !important; border-top: 1px solid var(--np-outline-variant, #debecf) !important; } .woocommerce div.product form.cart .wapf-product-totals .wapf-grand-total { font-size: 1rem !important; font-weight: 600 !important; color: var(--np-primary, #2F80ED) !important; } /* Extra polish: image/text/color-swatch field types when WAPF is configured to use them — keep them centered + capped width, matching the select. */ .woocommerce div.product form.cart .wapf .wapf-field-input input[type="text"], .woocommerce div.product form.cart .wapf .wapf-field-input input[type="number"], .woocommerce div.product form.cart .wapf .wapf-field-input input[type="email"], .woocommerce div.product form.cart .wapf .wapf-field-input textarea { width: 100% !important; max-width: 16rem !important; padding: 0.75rem 1rem !important; border: 1px solid var(--np-outline-variant, #debecf) !important; border-radius: var(--np-radius-s, 6px) !important; background: var(--np-surface-container-lowest, #ffffff) !important; font-size: 0.9rem !important; text-align: center !important; transition: border-color 0.2s, box-shadow 0.2s; } .woocommerce div.product form.cart .wapf .wapf-field-input input:focus, .woocommerce div.product form.cart .wapf .wapf-field-input textarea:focus { outline: none !important; border-color: var(--np-primary, #2F80ED) !important; box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.25) !important; } /* Mobile: drop max-widths so the select / totals card breathe edge-to-edge */ @media (max-width: 767px) { .woocommerce div.product form.cart .wapf .wapf-wrapper, .woocommerce div.product form.cart .wapf-product-totals { max-width: 100% !important; padding: var(--np-space-4) !important; } .woocommerce div.product form.cart .wapf .wapf-field-input select, .woocommerce div.product form.cart .wapf select { max-width: 100% !important; } } /* When the WAPF plugin is active, the Grand Total card already shows the live, fully-priced amount (base price + selected options). The legacy inline price next to ADD TO CART therefore duplicates / contradicts that number, so we hide it whenever a `.wapf` block is present in the same form. The :has() selector is supported in Safari 15.4+, Chrome 105+ and Firefox 121+ which covers ~96% of traffic; older browsers will simply keep showing the legacy price (graceful fallback, not broken). */ .woocommerce div.product form.cart:has(.wapf) .np-cart-zone__price, .woocommerce div.product .summary form.cart:has(.wapf) .np-cart-zone__price, .woocommerce div.product form.cart:has(.wapf-product-totals) .np-cart-zone__price { display: none !important; } /* With the price hidden, qty + ADD TO CART naturally center inside form.cart (which already has `justify-content: center`). Give the button a slightly wider min-width so it reads as the dominant CTA when the price chip is gone. */ .woocommerce div.product form.cart:has(.wapf) .single_add_to_cart_button, .woocommerce div.product form.cart:has(.wapf-product-totals) .single_add_to_cart_button { min-width: 220px; } /* ========================================================================== WAPF text-swatch pills — selected state must be visible on every browser. -------------------------------------------------------------------------- The "CAR-MODEL" pills on products that use the Advanced Product Fields plugin are NOT our `.np-var-card` buttons — they are WAPF's own markup:
...
WAPF's default stylesheet paints the checked pill dark gray (#353c4e) with white text, but only when WAPF's own JS adds the `.wapf-checked` class. In several real-world environments (combine-CSS plugins, late- loading JS, partial cache invalidations) that class never lands on the pill, so the customer cannot tell which option they picked. Three independent detectors guarantee the highlight always lands: 1. `.wapf-checked` — WAPF's own class, when its JS works. 2. `:has(input:checked)` — pure CSS, works in Chrome 105+, Edge 105+, Safari 15.4+, Firefox 121+ (>96% of traffic) without any JS. 3. `.np-wapf-active` — a class our color-swatches.js adds itself as a final belt-and-braces fallback for ancient browsers. All three selectors get the same `!important` brand-blue treatment, so whichever path the runtime takes, the customer sees the active pill. ========================================================================== */ /* Rest state — clean, neutral, never visually competing with the selection. */ .wapf-swatch--text { box-sizing: border-box !important; position: relative !important; margin: 0 8px 8px 0 !important; border: 2px solid #e1e5ec !important; border-radius: 6px !important; background: #ffffff !important; color: #1a1a1a !important; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.18s ease, transform 0.1s ease !important; } .wapf-swatch--text label { display: block !important; padding: 9px 14px !important; color: inherit !important; font-weight: 500 !important; line-height: 1.3 !important; cursor: pointer !important; } /* Hover: intentionally subtle so it never looks like a selection. */ .wapf-swatch--text:hover { border-color: #cdd5e0 !important; background: #f5f7fb !important; color: #1a1a1a !important; } /* SELECTED — six layered cues so it's impossible to miss: (1) thick blue border, (2) saturated blue fill, (3) bold deep-blue text, (4) drop shadow, (5) 1 px lift, (6) ✓ checkmark badge. */ .wapf-swatch--text.wapf-checked, .wapf-swatch--text.np-wapf-active, .wapf-swatch--text:has(input:checked) { border: 3px solid #2F80ED !important; background: #d9eafc !important; color: #1a5499 !important; box-shadow: 0 6px 18px rgba(47, 128, 237, 0.32) !important; transform: translateY(-1px); z-index: 2; } .wapf-swatch--text.wapf-checked label, .wapf-swatch--text.np-wapf-active label, .wapf-swatch--text:has(input:checked) label { color: #1a5499 !important; font-weight: 700 !important; } /* Hovering the selected pill itself: stays selected, gets a slightly stronger shadow + lift. NEVER reverts to the rest state. */ .wapf-swatch--text.wapf-checked:hover, .wapf-swatch--text.np-wapf-active:hover, .wapf-swatch--text:has(input:checked):hover { border-color: #1a5499 !important; background: #c9deff !important; color: #1a5499 !important; box-shadow: 0 8px 22px rgba(47, 128, 237, 0.4) !important; transform: translateY(-2px); } /* ✓ checkmark badge in the top-right corner of the active pill. */ .wapf-swatch--text.wapf-checked::after, .wapf-swatch--text.np-wapf-active::after, .wapf-swatch--text:has(input:checked)::after { content: ""; position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: #2F80ED url("data:image/svg+xml;utf8,") center/10px 8px no-repeat; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); pointer-events: none; z-index: 3; } /* Keyboard focus: thin blue halo so Tab navigation also reads as selected. */ .wapf-swatch--text:focus-within { box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.35) !important; outline: none !important; } /* Ensure the swatch wrapper lays out as a tidy grid on the product page. */ .wapf-field-input .wapf-swatch-wrapper { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; } .wapf-field-input .wapf-swatch-wrapper .wapf-swatch--text { margin: 0 !important; } /* Color and image swatches reuse the same active treatment for parity. */ .wapf-swatch--color.wapf-checked, .wapf-swatch--color.np-wapf-active, .wapf-swatch--color:has(input:checked) { box-shadow: 0 0 0 3px #2F80ED, 0 6px 18px rgba(47, 128, 237, 0.32) !important; transform: translateY(-1px); z-index: 2; } .wapf-swatch--image.wapf-checked, .wapf-swatch--image.np-wapf-active, .wapf-swatch--image:has(input:checked) { box-shadow: 0 0 0 3px #2F80ED, 0 6px 18px rgba(47, 128, 237, 0.32) !important; transform: translateY(-1px); z-index: 2; } .wapf-swatch--image.wapf-checked .apf-pick-box, .wapf-swatch--image.np-wapf-active .apf-pick-box, .wapf-swatch--image:has(input:checked) .apf-pick-box { border-color: #2F80ED !important; border-width: 3px !important; } /* Additional Features section */ .np-additional-features { grid-column: 1 / -1; padding: var(--np-space-12) 0; background: var(--np-surface-container-low); } .np-additional-features__title { font-family: var(--np-font-headline); font-weight: 200; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--np-space-8); } .np-specs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: var(--np-outline-variant); border: 1px solid var(--np-outline-variant); border-radius: var(--np-radius-m); overflow: hidden; } .np-specs-grid__row { display: flex; flex-direction: column; gap: var(--np-space-1); padding: var(--np-space-4) var(--np-space-5); background: var(--np-surface-container-lowest); } .np-specs-grid__label { font-family: var(--np-font-label); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; color: var(--np-on-surface-variant); } .np-specs-grid__value { font-family: var(--np-font-headline); font-weight: 300; font-size: 0.9375rem; letter-spacing: 0.02em; } /* -------------------------------------------------------------------------- 11. Reviews -------------------------------------------------------------------------- */ .woocommerce #reviews { margin-top: 0; } .woocommerce #reviews h2 { font-weight: 200; font-size: 1.5rem; margin-bottom: var(--np-space-6); } .woocommerce #reviews #comments ol.commentlist { list-style: none; padding: 0; } .woocommerce #reviews #comments ol.commentlist li { padding: var(--np-space-6) 0; border-bottom: 1px solid var(--np-outline-variant); margin: 0; } .woocommerce #reviews #comments ol.commentlist li img.avatar { width: 40px; height: 40px; border-radius: 50%; padding: 0; border: none; } .woocommerce #reviews #comments ol.commentlist li .comment-text { margin: 0 0 0 56px; border: none; border-radius: 0; padding: 0; } .woocommerce #reviews #comments ol.commentlist li .comment-text .meta { font-family: var(--np-font-label); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--np-on-surface-variant); margin-bottom: var(--np-space-3); } .woocommerce #reviews #comments ol.commentlist li .comment-text .description p { font-size: 0.875rem; line-height: 1.7; color: var(--np-on-surface-variant); } /* -------------------------------------------------------------------------- 12. Mini Cart / Widget -------------------------------------------------------------------------- */ .widget_shopping_cart .cart_list li { padding: var(--np-space-3) 0 !important; border-bottom: 1px solid var(--np-outline-variant); } .widget_shopping_cart .cart_list li a { font-family: var(--np-font-headline); font-weight: 300; font-size: 0.875rem; } .widget_shopping_cart .total { font-family: var(--np-font-label); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; padding: var(--np-space-4) 0; border-top: 2px solid var(--np-on-surface); } /* -------------------------------------------------------------------------- 13. WooCommerce Widgets (Filters) -------------------------------------------------------------------------- */ .woocommerce .widget_price_filter .ui-slider { background: var(--np-surface-container-highest); border: none; border-radius: 0; height: 4px; } .woocommerce .widget_price_filter .ui-slider .ui-slider-range { background: var(--np-gradient-primary); border-radius: 0; } .woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background: var(--np-gradient-primary); border: none; border-radius: 50%; width: 16px; height: 16px; top: -6px; cursor: grab; } .woocommerce .widget_price_filter .price_slider_amount .button { font-size: 0.625rem !important; padding: 0.5rem 1.25rem !important; } .woocommerce .widget_layered_nav ul li { padding: var(--np-space-2) 0; } .woocommerce .widget_layered_nav ul li a { font-size: 0.8125rem; color: var(--np-on-surface-variant); } .woocommerce .widget_layered_nav ul li a:hover { color: var(--np-primary); } .woocommerce .widget_layered_nav ul li .count { font-size: 0.6875rem; color: var(--np-outline); } /* -------------------------------------------------------------------------- 14. Quantity Buttons -------------------------------------------------------------------------- */ .quantity { display: inline-flex; align-items: center; gap: 0; } .np-qty-btn { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: var(--np-surface-container-low); border: none; cursor: pointer; transition: var(--np-transition); color: var(--np-on-surface); } .np-qty-btn:hover { background: var(--np-surface-container-highest); } .np-qty-btn .material-symbols-outlined { font-size: 1rem; } .quantity .qty { border-bottom: none; border-top: none; background: var(--np-surface-container-low); height: 2.5rem; width: 3rem; text-align: center; } /* -------------------------------------------------------------------------- 15. Responsive -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } } /* * Single product layout for any viewport < 1280px (mobile + tablet + small laptops). * Switches to a single-column stack so the layout never scales/grows on resize: * users on screens below the desktop rail (1280px) get a stable, consistent design, * and users at ≥ 1280px get the locked 2-column hero (see §1). */ @media (max-width: 1279px) { /* Switch off the 2-column grid entirely so children stack as blocks. (Just changing grid-template-columns isn't enough because .summary has grid-column: 2; grid-row: 1 — that auto-creates a 2nd column.) */ .woocommerce div.product { display: block; grid-template-columns: 1fr; padding: 0; } .woocommerce div.product .woocommerce-product-gallery, .woocommerce div.product .summary { grid-column: auto !important; grid-row: auto !important; } body.single-product { overflow-x: hidden; } .single-product .np-woocommerce { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } .single-product .np-woocommerce div.product { display: block; grid-template-columns: 1fr; gap: 0; padding-left: var(--np-space-4); padding-right: var(--np-space-4); } .single-product .np-woocommerce div.product .woocommerce-product-gallery { width: 100% !important; max-width: 700px !important; margin-left: auto !important; margin-right: auto !important; --np-pdp-gallery-scale: 1; } .single-product .np-woocommerce div.product .product_title { /* Lock title size below the desktop rail — no clamp/vw scaling on resize */ font-size: 1.75rem; } /* Simple-product cart row */ .single-product .np-woocommerce div.product .summary form.cart:not(.variations_form) { max-width: 34rem; margin-left: auto; margin-right: auto; justify-content: center !important; } /* Variable-product form fills the column; cart action stays compact below */ .single-product .np-woocommerce div.product .summary form.cart.variations_form { max-width: none; width: 100%; } .single-product .np-woocommerce div.product .summary .woocommerce-variation-add-to-cart { max-width: 34rem; margin-left: auto; margin-right: auto; justify-content: center !important; } .single-product .np-woocommerce div.product .np-var-cards { grid-template-columns: repeat(2, 11rem); justify-content: center; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; } .woocommerce div.product .woocommerce-product-gallery .flex-viewport { aspect-ratio: 1 / 1; } .woocommerce div.product .summary { padding: var(--np-space-8) var(--np-space-4); } .woocommerce div.product .summary form.cart { flex-direction: row; flex-wrap: wrap; } .woocommerce div.product .summary form.cart .single_add_to_cart_button { min-width: 0; flex: 1 1 60%; } .woocommerce div.product .variations tr { flex-wrap: wrap; } .np-var-cards { grid-template-columns: repeat(2, 1fr); } } /* Cart + Checkout — collapse to single column at tablet/below (avoid cramped sidebar) */ @media (max-width: 1023px) { .woocommerce-cart .woocommerce { grid-template-columns: 1fr !important; gap: var(--np-space-6) !important; } .woocommerce-cart .cart-collaterals, .woocommerce-cart .woocommerce-cart-form { grid-column: 1 !important; position: static !important; max-width: none !important; } .woocommerce-checkout form.checkout { grid-template-columns: 1fr !important; gap: var(--np-space-6) !important; } .woocommerce-checkout form.checkout #order_review_heading, .woocommerce-checkout form.checkout #order_review { grid-column: 1 !important; grid-row: auto !important; position: static !important; } } @media (max-width: 767px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--np-space-3); padding: 0 var(--np-space-4); } .np-single-details { padding: var(--np-space-6) 0; } .np-single-details > .np-container { padding: 0 var(--np-space-4); } .np-single-details h2 { font-size: 1.15rem; } .np-single-details h3 { font-size: 1rem; } .woocommerce-cart .np-woocommerce { padding: var(--np-space-8) var(--np-space-4) var(--np-space-16); } /* Cart items — collapse each row into a card on phone */ .woocommerce-cart table.shop_table.cart { display: block !important; background: transparent !important; } .woocommerce-cart table.shop_table.cart thead { display: none !important; } .woocommerce-cart table.shop_table.cart tbody, .woocommerce-cart table.shop_table.cart tbody tr.cart_item { display: block !important; width: 100% !important; } .woocommerce-cart table.shop_table.cart tbody tr.cart_item { position: relative !important; display: grid !important; grid-template-columns: 64px 1fr auto !important; grid-template-rows: auto auto !important; grid-template-areas: "thumb name remove" "thumb qty subtotal" !important; gap: var(--np-space-2) var(--np-space-4) !important; padding: var(--np-space-4) !important; border-bottom: 1px solid var(--np-outline-variant, rgba(0, 0, 0, 0.06)) !important; } .woocommerce-cart table.shop_table.cart tbody tr.cart_item:last-child { border-bottom: 0 !important; } .woocommerce-cart table.shop_table.cart tbody td { display: block !important; padding: 0 !important; border: 0 !important; width: auto !important; } .woocommerce-cart table.shop_table.cart tbody td.product-thumbnail { grid-area: thumb !important; width: 64px !important; } .woocommerce-cart table.shop_table.cart tbody td.product-thumbnail img { width: 64px !important; height: 64px !important; } .woocommerce-cart table.shop_table.cart tbody td.product-name { grid-area: name !important; } .woocommerce-cart table.shop_table.cart tbody td.product-remove { grid-area: remove !important; text-align: right !important; width: auto !important; } .woocommerce-cart table.shop_table.cart tbody td.product-quantity { grid-area: qty !important; text-align: left !important; width: auto !important; } .woocommerce-cart table.shop_table.cart tbody td.product-price { display: none !important; } .woocommerce-cart table.shop_table.cart tbody td.product-subtotal { grid-area: subtotal !important; text-align: right !important; align-self: end !important; } /* Coupon row — stack on phone */ .woocommerce-cart table.shop_table.cart .actions { display: flex !important; flex-direction: column !important; gap: var(--np-space-3) !important; } .woocommerce-cart table.shop_table.cart .actions .coupon { width: 100% !important; display: flex !important; } .woocommerce-cart table.shop_table.cart .actions .coupon .input-text { flex: 1 1 auto !important; min-width: 0 !important; } .woocommerce-cart table.shop_table.cart .actions button[name="update_cart"] { float: none !important; width: 100% !important; } .woocommerce-checkout .np-woocommerce { padding: var(--np-space-8) var(--np-space-4) var(--np-space-16); } /* Checkout form fields stack at phone */ .woocommerce-checkout form.checkout .woocommerce-billing-fields__field-wrapper, .woocommerce-checkout form.checkout .woocommerce-shipping-fields__field-wrapper, .woocommerce-checkout form.checkout .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr !important; } .woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; float: none; margin-right: 0; margin-bottom: var(--np-space-8); } .woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; overflow-x: auto; gap: 0; -webkit-overflow-scrolling: touch; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { white-space: nowrap; padding: var(--np-space-3) var(--np-space-4); font-size: 0.625rem; } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { border-left: none; border-bottom: 3px solid var(--np-primary); } .np-shop-toolbar { flex-direction: column; align-items: flex-start; gap: var(--np-space-4); padding: 0 var(--np-space-4); } .woocommerce-checkout .np-woocommerce { padding: var(--np-space-8) var(--np-space-4) var(--np-space-16); } .woocommerce-account .u-columns { grid-template-columns: 1fr; } .woocommerce-account .u-columns .col-1 { padding-right: 0; border-right: none; padding-bottom: var(--np-space-8); border-bottom: 1px solid var(--np-outline-variant); } .woocommerce-order-received .woocommerce-order-overview { flex-direction: column; gap: var(--np-space-4); } } /* -------------------------------------------------------------------------- Infinite Scroll -------------------------------------------------------------------------- */ .np-infinite-loader { display: flex; align-items: center; justify-content: center; gap: var(--np-space-4); padding: var(--np-space-10) 0; } .np-infinite-loader__spinner { width: 1.5rem; height: 1.5rem; border: 2px solid var(--np-outline-variant); border-top-color: var(--np-primary); border-radius: 50%; animation: np-spin 0.7s linear infinite; } @keyframes np-spin { to { transform: rotate(360deg); } } .np-infinite-loader__text { font-family: var(--np-font-label); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--np-on-surface-variant); } .np-scroll-sentinel { height: 1px; }