per option (boilerplate 5.1) */ .dms-form.dms-form.dms-form .dms-form-input-radio.dms-form-input-radio{display:flex;flex-wrap:wrap;gap:8px} .dms-form.dms-form.dms-form .dms-form-input-radio.dms-form-input-radio > .dms-form-field-label.dms-form-field-label,.dms-form.dms-form.dms-form .dms-form-input-radio.dms-form-input-radio > .dms-form-field-error.dms-form-field-error{flex:1 0 100%} .dms-form.dms-form.dms-form .dms-form-input-radio.dms-form-input-radio > div{flex:0 0 auto} .dms-form.dms-form.dms-form .dms-form-input-radio.dms-form-input-radio > div input{position:absolute;opacity:0;width:0;height:0} .dms-form.dms-form.dms-form .dms-form-input-radio.dms-form-input-radio > div > label{display:inline-flex;align-items:center;height:38px;padding:0 14px;margin:0;border:1px solid var(--e-global-color-t02edge);border-radius:4px;background:var(--e-global-color-t02plinth);color:var(--e-global-color-text);font-size:13.5px;font-weight:600;line-height:1em;cursor:pointer;transition:background .15s,border-color .15s,color .15s} .dms-form.dms-form.dms-form .dms-form-input-radio.dms-form-input-radio > div:hover > label{border-color:var(--e-global-color-secondary)} .dms-form.dms-form.dms-form .dms-form-input-radio.dms-form-input-radio > div:has(input:checked) > label{background:var(--e-global-color-secondary);border-color:var(--e-global-color-secondary);color:var(--e-global-color-t02plinth)} .dms-form.dms-form.dms-form .dms-form-input-radio.dms-form-input-radio > div input:focus-visible + label{outline:2px solid var(--e-global-color-primary);outline-offset:2px} /* consent + checkbox */ .dms-form.dms-form.dms-form .dms-form-input-checkbox.dms-form-input-checkbox > div > label,.dms-form.dms-form.dms-form .dms-form-input-consent.dms-form-input-consent label{display:flex;gap:10px;align-items:flex-start;font-family:var(--e-global-typography-text-font-family),system-ui,sans-serif;font-size:13px;font-weight:400;line-height:1.5em;color:var(--e-global-color-t02muted);text-transform:none;letter-spacing:0} .dms-form.dms-form.dms-form input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--e-global-color-text)} /* inline error (plugin-native span) */ .dms-form.dms-form.dms-form .dms-form-field-error.dms-form-field-error{display:block;margin-top:6px;font-size:12.5px;font-weight:500;line-height:1.4em;color:var(--e-global-color-primary);letter-spacing:0;text-transform:none} .dms-form.dms-form.dms-form .dms-form-field-error.dms-form-field-error[hidden]{display:none} .dms-form.dms-form.dms-form .dms-form-field-has-error input.input.input,.dms-form.dms-form.dms-form input.input.input[aria-invalid=true],.dms-form.dms-form.dms-form textarea[aria-invalid=true]{border-color:var(--e-global-color-primary)} /* submit — scope the accent to the submit only; button.button catches every form button */ .dms-form.dms-form.dms-form button.button.button{font-family:var(--e-global-typography-text-font-family),system-ui,sans-serif;font-size:14px;font-weight:600;border-radius:4px;cursor:pointer} .dms-form.dms-form.dms-form .dms-form-submit-container.dms-form-submit-container button.button.button,.dms-form.dms-form.dms-form button.button.button[type=submit]{display:inline-flex;align-items:center;justify-content:center;width:100%;height:48px;min-height:0;padding:0 20px;border:0;background:var(--e-global-color-primary);color:var(--e-global-color-t02plinth);font-size:15px;line-height:1em;box-shadow:none;transition:background .15s} .dms-form.dms-form.dms-form .dms-form-submit-container.dms-form-submit-container button.button.button:hover,.dms-form.dms-form.dms-form button.button.button[type=submit]:hover{background:var(--e-global-color-t02signaldk);color:var(--e-global-color-t02plinth)} .dms-form.dms-form.dms-form .dms-form-submit-container.dms-form-submit-container button.button.button:focus-visible,.dms-form.dms-form.dms-form button.button.button[type=submit]:focus-visible{outline:2px solid var(--e-global-color-primary);outline-offset:2px} .dms-form.dms-form.dms-form .dms-form-submit-container.dms-form-submit-container button.button.button:disabled{opacity:.55;cursor:default} .dms-form.dms-form.dms-form .dms-form-submit-container.dms-form-submit-container{width:100%} /* alerts */ .dms-form.dms-form.dms-form .dms-form-alerts.dms-form-alerts article.message{border-radius:6px;border:1px solid var(--e-global-color-t02edge);background:var(--e-global-color-t02plinth);font-family:var(--e-global-typography-text-font-family),system-ui,sans-serif;font-size:14px} .dms-form.dms-form.dms-form .dms-form-alerts.dms-form-alerts article.message.is-success{border-color:var(--e-global-color-t02success);background:color-mix(in srgb, var(--e-global-color-t02success) 6%, var(--e-global-color-t02plinth))} .dms-form.dms-form.dms-form .dms-form-alerts.dms-form-alerts article.message.is-danger{border-color:var(--e-global-color-primary);background:color-mix(in srgb, var(--e-global-color-primary) 5%, var(--e-global-color-t02plinth))} .dms-form.dms-form.dms-form .dms-form-alerts.dms-form-alerts article.message .message-header{background:transparent;color:var(--e-global-color-text);font-weight:700;font-family:var(--e-global-typography-primary-font-family),sans-serif;letter-spacing:-.01em;border-bottom:0;padding:16px 18px 0} .dms-form.dms-form.dms-form .dms-form-alerts.dms-form-alerts article.message .message-body{border:0;padding:8px 18px 16px;color:var(--e-global-color-t02muted);line-height:1.55em} /* modal shell */ #dms-modal-container .dms-modal .dms-modal-title{font-family:var(--e-global-typography-primary-font-family),sans-serif;font-weight:700;font-size:24px;letter-spacing:-.02em;line-height:1.1em;color:var(--e-global-color-text);margin:0 0 4px} #dms-modal-container .dms-modal .dms-modal-body{font-family:var(--e-global-typography-text-font-family),system-ui,sans-serif;color:var(--e-global-color-text)} /* --- T02 SRI CARD BADGE --------------------------------------------------- On a scroller slide the badge renders OUTSIDE the Elementor document (it is a sibling of .elementor-), so widget custom_css cannot reach it. Kit only. Classes are doubled to beat the plugin's per-badge dynamic colour/size rules. */ .dms-listing-sri .dms-listing-badge.dms-listing-badge.dms-listing-badge-banner{position:absolute;top:10px;left:10px;z-index:3;display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:3px;background:var(--e-global-color-secondary);border:0;box-shadow:none;margin:0;transform:none;overflow:hidden;pointer-events:none;width:auto;max-width:calc(100% - 20px)} .dms-listing-sri .dms-listing-badge.dms-listing-badge.dms-listing-badge-banner::before,.dms-listing-sri .dms-listing-badge.dms-listing-badge.dms-listing-badge-banner::after{content:none;display:none} .dms-listing-sri .dms-listing-badge.dms-listing-badge.dms-listing-badge-banner > span{display:block;color:var(--e-global-color-t02void);font-family:var(--e-global-typography-text-font-family),system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent;transform:none;padding:0;margin:0} .dms-listing-sri .dms-listing-badge.dms-listing-badge.dms-listing-badge-angled-corner{display:none} /* ============================================================================ THEME 02 — Modern Auto Franchise · WOOCOMMERCE COMPATIBILITY PACK Optional. Every .elementor-kit-3 is scoped to WooCommerce markup or to one of the pack's own anchors. A dealer who does not sell parts deletes this block, the four Woo pages, the three library templates and the product-card loop item, and nothing else in the kit changes. Designs: Shop · Product · Cart · Checkout · Account (.dc.html), with alert / field / button shapes from States.dc.html. ============================================================================ */ /* ---- W0 · tokens ---------------------------------------------------------- */ .woocommerce-page #shop-archive, .woocommerce-page #product-single, #cart-page, #checkout-page, #account-page, .elementor-menu-cart__main{ --t02-ink:var(--e-global-color-text); --t02-ink2:var(--e-global-color-t02carbonhv); --t02-paper:var(--e-global-color-t02void); --t02-panel:var(--e-global-color-t02gallery); --t02-surface:var(--e-global-color-t02plinth); --t02-edge:var(--e-global-color-t02edge); --t02-hair:var(--e-global-color-t02gallery); --t02-muted:var(--e-global-color-t02muted); --t02-dim:var(--e-global-color-t02placeholder); --t02-red:var(--e-global-color-primary); --t02-red-h:var(--e-global-color-t02signaldk); --t02-green:var(--e-global-color-t02success); --t02-green-t:color-mix(in srgb, var(--e-global-color-t02success) 6%, var(--e-global-color-t02plinth)); --t02-red-t:color-mix(in srgb, var(--e-global-color-primary) 6%, var(--e-global-color-t02plinth)); --t02-ui:var(--e-global-typography-text-font-family),system-ui,sans-serif; --t02-display:var(--e-global-typography-primary-font-family),system-ui,sans-serif; --t02-mono:var(--e-global-typography-t02mono-font-family),ui-monospace,monospace; } .t02-chev{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6368' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center; } /* ---- W1 · breadcrumb ------------------------------------------------------ */ .woocommerce .woocommerce-breadcrumb{ font-family:var(--t02-mono);font-size:12px;letter-spacing:.06em; color:var(--t02-muted);margin:0;padding:0; } .woocommerce .woocommerce-breadcrumb a{color:var(--t02-muted);text-decoration:none;} .woocommerce .woocommerce-breadcrumb a:hover{color:var(--t02-ink);} /* ---- W2 · shop head: title left, intro right (design R3) ------------------ */ #shop-head-intro p, #shop-head-intro .elementor-widget-woocommerce-archive-description p{ font-size:15px;line-height:1.55;color:var(--t02-muted);margin:0; } #shop-head-left .elementor-heading-title{color:var(--t02-ink);} /* ---- W3 · category chips: PRO Taxonomy Filter (2026-09-24) ---------------- Colours, border, radius and padding live on the widget's own controls. The widget prints "All" after the terms; the design puts it first. */ .t02-chips .e-filter{flex-wrap:wrap;} .t02-chips .e-filter-item[data-filter="__all"]{order:-1;} .t02-chips .e-filter-item{display:inline-flex;align-items:center;white-space:nowrap;cursor:pointer;} .t02-chips .e-filter-item:focus-visible{outline:2px solid var(--e-global-color-primary);outline-offset:2px;} /* ---- W5 · the product card: Loop Item "Theme 02 — Product card" (design R6) Structure, colours and type are the loop item's own widget controls. These rules only do what no control can: the 1:1 crop, the badge overlay, the foot row pinned to the bottom, and the loop grid's pagination shape. */ .t02-card{height:100%;transition:border-color .15s;} .t02-card-media{position:relative;aspect-ratio:1/1;} .t02-card-img, .t02-card-img a{display:block;width:100%;height:100%;} .t02-card-img img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block;} .elementor-widget-heading.t02-card-badge{position:absolute;top:10px;left:10px;z-index:2;width:auto;pointer-events:none;} .t02-card-badge .elementor-heading-title{ display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:3px; background:var(--e-global-color-secondary);line-height:1; } .t02-card-badge .elementor-heading-title:empty{display:none;} .t02-card-badge a, .t02-card-cat a{color:inherit;text-decoration:none;} .t02-card-title a{color:inherit;text-decoration:none;} .t02-card-title a:hover{text-decoration:underline;text-underline-offset:3px;} .t02-card-body{flex:1 1 auto;} .t02-card-foot{margin-top:auto;} .t02-card-price .price{margin:0;font-variant-numeric:tabular-nums;} .t02-card-price .price del{font-size:.7em;font-weight:500;color:var(--e-global-color-t02placeholder);} .t02-card-price .price ins{text-decoration:none;} .t02-card-atc .elementor-add-to-cart, .t02-card-atc .e-loop-add-to-cart-form-container{width:100%;} .t02-card-atc .e-loop-add-to-cart-form{width:100%;display:flex;flex-wrap:wrap;justify-content:flex-end;margin:0;} /* Bulma (dms-frontend-framework.css) loads later and owns a bare .button at 46px — B10 */ .t02-card-atc.t02-card-atc a.button{ height:40px;min-height:40px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center; white-space:nowrap;line-height:1;margin:0; } /* added state: WooCommerce adds .added after an AJAX add; the label stays. */ /* the widget's own button colours compile to five classes in post-473.css */ .t02-card-atc.t02-card-atc a.button.added.added.added, .t02-card-atc.t02-card-atc a.button.added.added.added:hover{ background:var(--e-global-color-secondary);border-color:var(--e-global-color-secondary);color:var(--e-global-color-t02plinth); } .t02-card-atc a.button.added::after{content:"✓";margin-left:8px;font-family:inherit;} .t02-card-foot .t02-card-atc{flex:1 1 auto;} .t02-card-atc a.added_to_cart{ flex:1 1 100%;margin:10px 0 0;white-space:nowrap;text-align:right; font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px; } /* loop grid pagination — boxed shape; colours from the widget's own controls */ .t02-shop-grid .elementor-pagination{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;} .t02-shop-grid .elementor-pagination .page-numbers{ min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;margin:0; border:1px solid var(--e-global-color-t02edge);border-radius:4px;background:var(--e-global-color-t02plinth); } .t02-shop-grid .elementor-pagination .page-numbers.current{border-color:var(--e-global-color-secondary);background:var(--e-global-color-secondary);} .t02-shop-grid .e-load-more-message, .t02-shop-grid .elementor-posts-nothing-found{color:var(--e-global-color-t02muted);} /* ---- W6 · CTA panel ------------------------------------------------------- */ #shop-cta-text h2{font-family:var(--t02-display);font-weight:700;font-size:22px;letter-spacing:-.02em;margin:0;color:var(--t02-ink);} #shop-cta-text p{font-size:14.5px;color:var(--t02-muted);margin:0;line-height:1.5;} #shop-cta .elementor-widget-button .elementor-button{ background:var(--t02-ink);color:var(--e-global-color-t02plinth);border:0;border-radius:4px;height:46px; padding:0 20px;font-family:var(--t02-ui);font-size:15px;font-weight:600; display:inline-flex;align-items:center;white-space:nowrap; } #shop-cta .elementor-widget-button .elementor-button:hover{background:var(--t02-ink2);} /* ---- W7 · buttons (States.dc.html) --------------------------------------- */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce .woocommerce-Button{ font-family:var(--t02-ui);font-size:14px;font-weight:600;line-height:1; height:46px;padding:0 18px;border-radius:4px;border:1px solid var(--t02-edge); background:var(--t02-surface);color:var(--t02-ink); display:inline-flex;align-items:center;justify-content:center;gap:8px; text-decoration:none;text-transform:none;letter-spacing:0; transition:border-color .15s,background .15s,color .15s; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover{ background:var(--t02-ink);color:var(--e-global-color-t02plinth);border-color:var(--t02-ink); } .woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible{ outline:2px solid var(--t02-red);outline-offset:2px; } .woocommerce a.button.wc-forward, .woocommerce .woocommerce-message a.button{ background:var(--t02-ink);color:var(--e-global-color-t02plinth);border-color:var(--t02-ink); } .woocommerce .checkout-button, .woocommerce button.single_add_to_cart_button, .woocommerce #place_order, .woocommerce .woocommerce-form-login__submit{ background:var(--t02-red);color:var(--e-global-color-t02plinth);border:0;height:48px;padding:0 22px; border-radius:4px;font-family:var(--t02-ui);font-size:15px;font-weight:600; display:inline-flex;align-items:center;justify-content:center; transition:background .15s;text-transform:none;letter-spacing:0; } .woocommerce .checkout-button:hover, .woocommerce button.single_add_to_cart_button:hover, .woocommerce #place_order:hover, .woocommerce .woocommerce-form-login__submit:hover{ background:var(--t02-red-h);color:var(--e-global-color-t02plinth); } .woocommerce .checkout-button{width:100%;} .woocommerce .button:disabled, .woocommerce .button.disabled{ background:var(--t02-panel);color:var(--t02-dim);border-color:var(--t02-panel);cursor:not-allowed; } /* ---- W8 · fields ---------------------------------------------------------- */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce input[type=text], .woocommerce input[type=email], .woocommerce input[type=tel], .woocommerce input[type=password], .woocommerce input[type=search], .woocommerce textarea{ font-family:var(--t02-ui);font-size:15px;color:var(--t02-ink); height:46px;line-height:44px;padding:0 12px;border:1px solid var(--t02-edge); border-radius:4px;background:var(--t02-paper);box-shadow:none;width:100%; } .woocommerce textarea{height:auto;line-height:1.5;padding:12px;} .woocommerce input::placeholder, .woocommerce textarea::placeholder{color:var(--t02-dim);} .woocommerce input:focus-visible, .woocommerce select:focus-visible, .woocommerce textarea:focus-visible{outline:2px solid var(--t02-red);outline-offset:2px;} .woocommerce form .form-row.woocommerce-invalid input.input-text{border-color:var(--t02-red);} .woocommerce form .form-row.woocommerce-validated input.input-text{border-color:var(--t02-green);} .woocommerce input:disabled, .woocommerce select:disabled{ background:var(--t02-panel);border-color:var(--t02-panel);color:var(--t02-dim); } .woocommerce form .form-row label, .woocommerce-page form .form-row label{ font-family:var(--t02-ui);font-size:11px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--t02-muted);margin:0 0 6px;display:block; } .woocommerce form .form-row label .required{color:var(--t02-red);text-decoration:none;} .woocommerce form .form-row{margin:0 0 14px;padding:0;} .woocommerce .select2-container--default .select2-selection--single{ height:46px;border:1px solid var(--t02-edge);border-radius:4px;background:var(--t02-paper); } .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:44px;padding-left:12px;color:var(--t02-ink);font-size:15px; } .woocommerce input[type=checkbox], .woocommerce input[type=radio]{ width:18px;height:18px;accent-color:var(--t02-ink);margin:0 10px 0 0;vertical-align:middle; } .woocommerce #billing_postcode, .woocommerce #shipping_postcode{font-family:var(--t02-mono);} /* ---- W9 · notices → the three alert shapes (States.dc.html §04) ----------- */ .woocommerce .woocommerce-message, .woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce-page .woocommerce-message, .woocommerce-page .woocommerce-error, .woocommerce-page .woocommerce-info{ font-family:var(--t02-ui);font-size:14.5px;line-height:1.5;color:var(--t02-ink); border-radius:6px;padding:16px 18px;margin:0 0 20px;list-style:none; display:flex;gap:12px;align-items:center;flex-wrap:wrap; background-image:none;border-style:solid;border-width:1px; } .woocommerce .woocommerce-message::before, .woocommerce .woocommerce-error::before, .woocommerce .woocommerce-info::before{position:static;font-size:16px;margin:0;top:auto;left:auto;} .woocommerce .woocommerce-message{border-color:var(--t02-green);background:var(--t02-green-t);} .woocommerce .woocommerce-message::before{color:var(--t02-green);} .woocommerce .woocommerce-error{border-color:var(--t02-red);background:var(--t02-red-t);} .woocommerce .woocommerce-error::before{color:var(--t02-red);} .woocommerce .woocommerce-info{border-color:var(--t02-edge);background:var(--t02-surface);} .woocommerce .woocommerce-info::before{color:var(--t02-muted);} .woocommerce .woocommerce-error li{margin:0;padding:0;} .woocommerce .woocommerce-message .button{margin-left:auto;height:40px;padding:0 14px;font-size:13.5px;} /* ---- W10 · tables --------------------------------------------------------- */ .woocommerce table.shop_table, .woocommerce table.woocommerce-orders-table{ border:1px solid var(--t02-edge);border-radius:6px;border-collapse:separate; border-spacing:0;overflow:hidden;background:var(--t02-surface);width:100%; font-family:var(--t02-ui);font-size:14.5px;margin:0; } .woocommerce table.shop_table thead th, .woocommerce table.woocommerce-orders-table thead th{ background:var(--t02-panel);font-size:11px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--t02-muted);padding:12px 20px;text-align:left;border:0; } .woocommerce table.shop_table td, .woocommerce table.woocommerce-orders-table td{ padding:14px 20px;border:0;border-top:1px solid var(--t02-hair);vertical-align:middle; } .woocommerce table.shop_table th{border:0;} .woocommerce table.shop_table .product-subtotal, .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total{ text-align:right;font-variant-numeric:tabular-nums; } /* ---- W11 · quantity field (2026-09-24: the kit's ± steppers were JS and are retired; the native number input is the control, drawn as one bordered box) */ .woocommerce .quantity{display:inline-flex;align-items:stretch;margin:0;} .woocommerce .quantity input.qty{ width:64px;height:48px;line-height:1;margin:0; border:1px solid var(--t02-edge);border-radius:4px;background:var(--t02-surface); text-align:center;font-family:var(--t02-ui);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums; padding:0;-moz-appearance:textfield;appearance:textfield;color:var(--t02-ink); } .woocommerce .quantity input.qty::-webkit-outer-spin-button, .woocommerce .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} #cart-body .quantity input.qty{width:56px;height:40px;font-size:14px;} /* ============================================================================ W12 · SINGLE PRODUCT (Product.dc.html) ============================================================================ */ #pdp-gallery .woocommerce-product-gallery{width:100%!important;float:none;margin:0;} #pdp-gallery .woocommerce-product-gallery__wrapper{ border:1px solid var(--t02-edge);border-radius:6px;overflow:hidden;background:var(--t02-panel); } #pdp-gallery .woocommerce-product-gallery img{aspect-ratio:1/1;object-fit:cover;width:100%;height:auto;display:block;} #pdp-gallery .flex-control-thumbs{ display:grid!important;grid-template-columns:repeat(5,1fr);gap:8px;margin:10px 0 0;padding:0;list-style:none; } #pdp-gallery .flex-control-thumbs li{width:100%!important;margin:0;float:none;} #pdp-gallery .flex-control-thumbs img{ border:2px solid transparent;border-radius:4px;background:var(--t02-panel);opacity:1;aspect-ratio:1/1; } #pdp-gallery .flex-control-thumbs img.flex-active, #pdp-gallery .flex-control-thumbs img:hover{ border-color:var(--t02-red);background:var(--t02-edge); } #pdp-gallery .woocommerce-product-gallery__trigger{top:12px;right:12px;background:color-mix(in srgb, var(--e-global-color-secondary) 75%, transparent);color:var(--e-global-color-t02plinth);border-radius:3px;} /* summary column */ /* intro group: category · SKU, title, rating row (dynamic-tag headings) */ .t02-pdp-rating-link a{text-decoration:underline;text-underline-offset:3px;color:inherit;} .t02-pdp-rating-link a:hover{color:var(--t02-ink);} .t02-pdp-cat a{color:inherit;text-decoration:none;} #pdp-summary .price, #pdp-summary p.price{ font-family:var(--t02-display);font-weight:800;font-size:36px;line-height:1; letter-spacing:-.03em;color:var(--t02-ink);font-variant-numeric:tabular-nums;margin:0; } #pdp-summary .price del{font-size:.55em;font-weight:500;color:var(--t02-dim);} #pdp-summary .price ins{text-decoration:none;} #pdp-summary .woocommerce-product-details__short-description p{ font-size:15.5px;line-height:1.6;color:var(--t02-ink2);margin:0 0 10px; } #pdp-summary .woocommerce-product-details__short-description p:last-child{margin-bottom:0;} /* purchase row + assurance */ #pdp-summary form.cart{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin:0;} #pdp-summary form.cart .quantity{height:48px;margin:0;} #pdp-summary form.cart button.single_add_to_cart_button{flex:1 1 200px;} #pdp-assure .stock{font-size:14px;font-weight:600;color:var(--t02-ink);margin:0;} #pdp-assure .stock.out-of-stock{color:var(--t02-red);} #pdp-assure .stock.available-on-backorder{color:var(--t02-muted);} #pdp-assure p{font-size:14px;line-height:1.45;color:var(--t02-ink);margin:0;} /* tabs */ #pdp-tabs .woocommerce-tabs ul.tabs{ display:flex;gap:28px;padding:0;margin:0;border:0;border-bottom:1px solid var(--t02-edge); overflow-x:auto;scrollbar-width:none; } #pdp-tabs .woocommerce-tabs ul.tabs::before, #pdp-tabs .woocommerce-tabs ul.tabs::after{content:none;display:none;} #pdp-tabs .woocommerce-tabs ul.tabs li{ background:transparent;border:0;border-radius:0;margin:0;padding:0; border-bottom:2px solid transparent;margin-bottom:-1px; } #pdp-tabs .woocommerce-tabs ul.tabs li::before, #pdp-tabs .woocommerce-tabs ul.tabs li::after{content:none;display:none;} #pdp-tabs .woocommerce-tabs ul.tabs li a{ padding:0 0 14px;font-family:var(--t02-ui);font-size:14.5px;font-weight:600; color:var(--t02-muted);white-space:nowrap;text-decoration:none; } #pdp-tabs .woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--t02-red);} #pdp-tabs .woocommerce-tabs ul.tabs li.active a, #pdp-tabs .woocommerce-tabs ul.tabs li a:hover{color:var(--t02-ink);} #pdp-tabs .woocommerce-Tabs-panel{padding:24px 0 0;} #pdp-tabs .woocommerce-Tabs-panel > h2:empty{display:none;} /* description + additional information panels (native Woo tab content). Woo prints its own "Description" / "Additional information" h2 inside each panel; the tab already names it. */ #pdp-tabs .woocommerce-Tabs-panel > h2:first-child{display:none;} #pdp-tabs .woocommerce-Tabs-panel--description{font-size:16px;line-height:1.65;color:var(--t02-ink2);max-width:68ch;} #pdp-tabs .woocommerce-Tabs-panel--description p{margin:0 0 14px;font-size:16px;line-height:1.65;color:var(--t02-ink2);} #pdp-tabs table.woocommerce-product-attributes.woocommerce-product-attributes{ width:100%;max-width:720px;border-collapse:separate;border-spacing:0;table-layout:fixed;margin:0; background:var(--t02-surface);border:1px solid var(--t02-edge);border-radius:6px;overflow:hidden;font-size:14.5px; } #pdp-tabs table.woocommerce-product-attributes.woocommerce-product-attributes th, #pdp-tabs table.woocommerce-product-attributes.woocommerce-product-attributes td{ padding:14px 20px;border:0;border-top:1px solid var(--t02-hair);background:transparent;font-style:normal; } #pdp-tabs table.woocommerce-product-attributes.woocommerce-product-attributes th{width:34%;text-align:left;font-weight:400;color:var(--t02-muted);} #pdp-tabs table.woocommerce-product-attributes.woocommerce-product-attributes td{font-weight:500;color:var(--t02-ink);} #pdp-tabs table.woocommerce-product-attributes.woocommerce-product-attributes td p{margin:0;} #pdp-tabs table.woocommerce-product-attributes.woocommerce-product-attributes tr:first-child th, #pdp-tabs table.woocommerce-product-attributes.woocommerce-product-attributes tr:first-child td{border-top:0;} /* reviews */ #pdp-tabs #reviews ol.commentlist{ list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px; } #pdp-tabs #reviews ol.commentlist li{margin:0;padding:0;} #pdp-tabs #reviews .comment_container{ background:var(--t02-surface);border:1px solid var(--t02-edge);border-radius:6px; padding:20px 22px;display:flex;flex-direction:column;gap:10px; } #pdp-tabs #reviews .comment_container img.avatar{display:none;} #pdp-tabs #reviews .comment-text{margin:0;padding:0;border:0;} #pdp-tabs #reviews .woocommerce-review__author, #pdp-tabs #reviews .woocommerce-review__published-date{font-size:13px;color:var(--t02-muted);} #pdp-tabs #reviews .description p{font-size:14.5px;line-height:1.55;color:var(--t02-ink2);margin:0;max-width:none;} #pdp-tabs .star-rating{color:var(--t02-ink);} #pdp-tabs .star-rating::before{color:var(--t02-edge);} /* upsells band */ #pdp-related-inner h2{ font-family:var(--t02-display);font-weight:700;font-size:clamp(26px,3vw,36px); letter-spacing:-.02em;line-height:1.05;margin:0;color:var(--t02-ink); } /* the rail is a Loop Grid (upsells) on the same product card: the design shows category, title and price only */ .t02-related-grid .t02-card-atc, .t02-related-grid .t02-card-rating-row, .t02-related-grid .t02-card-badge{display:none;} .t02-related-grid .t02-card-foot{padding-top:8px;} /* ============================================================================ W13 · CART ============================================================================ */ #cart-body .woocommerce{width:100%;} #cart-body table.shop_table .product-thumbnail img{ width:84px;height:84px;border-radius:4px;object-fit:cover;background:var(--t02-panel); } #cart-body table.shop_table td.product-name a{ font-family:var(--t02-display);font-weight:700;font-size:16px;line-height:1.2; letter-spacing:-.01em;color:var(--t02-ink);text-decoration:none; } #cart-body table.shop_table td.product-name dl.variation{font-size:13px;color:var(--t02-muted);margin:4px 0 0;} #cart-body table.shop_table td.product-name dl.variation dt, #cart-body table.shop_table td.product-name dl.variation dd{display:inline;margin:0;font-weight:400;} #cart-body table.shop_table td.product-subtotal{ font-family:var(--t02-display);font-weight:700;font-size:18px;letter-spacing:-.01em; } #cart-body table.shop_table a.remove{font-size:0;width:auto;height:auto;color:var(--t02-muted)!important;background:none!important;} #cart-body table.shop_table a.remove::after{ content:"Remove";font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px; } #cart-body table.shop_table a.remove:hover::after{color:var(--t02-ink);} #cart-body .coupon{display:flex;gap:8px;align-items:center;} #cart-body .coupon #coupon_code{ width:180px;height:42px;line-height:40px;font-family:var(--t02-mono);font-size:14px;background:var(--t02-surface); } #cart-body .coupon button{height:42px;padding:0 14px;font-size:14px;} #cart-body .cart_totals h2{margin:0 0 14px;text-transform:none;} #cart-body .cart_totals table.shop_table{border:0;background:transparent;font-size:14.5px;} #cart-body .cart_totals table.shop_table th{ background:transparent;text-transform:none;letter-spacing:0;font-size:14.5px; font-weight:400;color:var(--t02-muted);padding:10px 0;border:0; } #cart-body .cart_totals table.shop_table td{padding:10px 0;border:0;text-align:right;font-weight:500;font-variant-numeric:tabular-nums;} #cart-body .cart_totals tr.cart-subtotal td, #cart-body .cart_totals tr.order-total td{border-top:1px solid var(--t02-hair);} #cart-body .cart_totals tr.cart-discount td{color:var(--t02-green);} #cart-body .cart_totals tr.order-total th{font-weight:600;color:var(--t02-ink);} #cart-body .cart_totals ul#shipping_method{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;} #cart-body .cart_totals ul#shipping_method li{ display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0; border:1px solid var(--t02-edge);border-radius:4px;background:var(--t02-surface);text-align:left; } #cart-body .cart_totals ul#shipping_method li label{ font-size:14px;font-weight:600;color:var(--t02-ink);display:flex; justify-content:space-between;width:100%;gap:12px;margin:0; } #cart-body .cart_totals .woocommerce-shipping-destination{font-size:12.5px;color:var(--t02-muted);line-height:1.5;} #cart-body .wc-proceed-to-checkout{padding:14px 0 0;} #cart-body .cart-empty, #cart-body .wc-empty-cart-message{ background:var(--t02-surface);border:1px dashed var(--t02-edge);border-radius:6px; padding:72px 32px;text-align:center;font-size:15px;color:var(--t02-muted);margin:0; } /* ============================================================================ W14 · CHECKOUT ============================================================================ */ #checkout-body .woocommerce{width:100%;} #checkout-body #customer_details .col-1, #checkout-body #customer_details .col-2{width:100%;float:none;} #checkout-body .woocommerce-billing-fields, #checkout-body .woocommerce-shipping-fields, #checkout-body .woocommerce-additional-fields{margin:0 0 20px;} #checkout-body .woocommerce-billing-fields > h3, #checkout-body .woocommerce-shipping-fields > h3, #checkout-body .woocommerce-additional-fields > h3, #checkout-body #order_review_heading{ font-family:var(--t02-ui);font-size:12px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--t02-ink);margin:0 0 14px; } #checkout-body .woocommerce-billing-fields__field-wrapper, #checkout-body .woocommerce-shipping-fields__field-wrapper{ display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px; } #checkout-body .form-row{margin:0;} #checkout-body .form-row-wide, #checkout-body #billing_address_1_field, #checkout-body #shipping_address_1_field, #checkout-body #billing_email_field{grid-column:1 / -1;} #checkout-body .woocommerce-checkout-review-order-table{border:0;background:transparent;font-size:14.5px;} #checkout-body .woocommerce-checkout-review-order-table thead{display:none;} #checkout-body .woocommerce-checkout-review-order-table td, #checkout-body .woocommerce-checkout-review-order-table th{ padding:10px 0;border:0;border-top:1px solid var(--t02-hair);background:transparent; text-transform:none;letter-spacing:0;font-size:14.5px; } #checkout-body .woocommerce-checkout-review-order-table tbody tr:first-child td{border-top:0;} #checkout-body .woocommerce-checkout-review-order-table th{font-weight:400;color:var(--t02-muted);} #checkout-body .woocommerce-checkout-review-order-table td{text-align:right;font-weight:500;font-variant-numeric:tabular-nums;} #checkout-body .woocommerce-checkout-review-order-table .product-name{text-align:left;font-weight:500;color:var(--t02-ink);} #checkout-body .woocommerce-checkout-review-order-table .product-quantity{ font-family:var(--t02-mono);font-size:11px;background:var(--t02-panel); border-radius:3px;padding:2px 6px;font-weight:400; } #checkout-body .woocommerce-checkout-review-order-table tr.order-total th{font-weight:600;color:var(--t02-ink);} #checkout-body ul#shipping_method{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;} #checkout-body ul#shipping_method li{ display:flex;align-items:center;gap:12px;padding:14px;margin:0; border:1px solid var(--t02-edge);border-radius:4px;background:var(--t02-surface); } #checkout-body ul#shipping_method li label{ font-size:14.5px;font-weight:600;display:flex;justify-content:space-between;width:100%;gap:12px;margin:0; } #checkout-body #payment{background:transparent;border-radius:0;} #checkout-body #payment ul.payment_methods{ border:0;padding:0;margin:0 0 14px;list-style:none;display:flex;flex-wrap:wrap;gap:8px; } #checkout-body #payment ul.payment_methods li{margin:0;padding:0;background:transparent;} #checkout-body #payment ul.payment_methods li label{ display:inline-flex;align-items:center;height:42px;padding:0 16px;border:1px solid var(--t02-edge); border-radius:4px;background:var(--t02-surface);color:var(--t02-ink);font-size:14px;font-weight:600; cursor:pointer;margin:0; } #checkout-body #payment ul.payment_methods li input[type=radio]{position:absolute;opacity:0;pointer-events:none;} #checkout-body #payment ul.payment_methods li input[type=radio]:checked + label{ background:var(--t02-ink);border-color:var(--t02-ink);color:var(--e-global-color-t02plinth); } #checkout-body #payment div.payment_box{ background:var(--t02-paper);border:1px solid var(--t02-hair);border-radius:4px; padding:14px 16px;margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--t02-ink);width:100%; } #checkout-body #payment div.payment_box::before{content:none;display:none;} #checkout-body .woocommerce-terms-and-conditions-wrapper{ font-size:13px;color:var(--t02-muted);line-height:1.5;max-width:52ch;margin:0 0 14px; } .woocommerce-order .woocommerce-thankyou-order-received{ font-family:var(--t02-display);font-weight:800;font-size:38px;letter-spacing:-.03em; line-height:1;color:var(--t02-ink);margin:0 0 20px; } .woocommerce-order ul.woocommerce-order-overview{ list-style:none;margin:0 0 24px;padding:20px;display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px; background:var(--t02-paper);border:1px solid var(--t02-hair);border-radius:6px;font-size:14.5px; } .woocommerce-order ul.woocommerce-order-overview li{ border:0;float:none;margin:0;padding:0;text-transform:none; font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--t02-muted); } .woocommerce-order ul.woocommerce-order-overview li strong{ display:block;margin:6px 0 0;font-size:14.5px;font-weight:500;letter-spacing:0; color:var(--t02-ink);font-variant-numeric:tabular-nums; } /* ============================================================================ W15 · MY ACCOUNT ============================================================================ */ #account-body .woocommerce{width:100%;display:flex;gap:40px;flex-wrap:wrap;align-items:flex-start;} #account-body .woocommerce-MyAccount-navigation{flex:0 0 240px;overflow:hidden;float:none;width:auto;margin:0;} #account-body .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;} #account-body .woocommerce-MyAccount-navigation ul li{margin:0;padding:0;} #account-body .woocommerce-MyAccount-navigation ul li a{ display:flex;justify-content:space-between;align-items:center;gap:12px; padding:14px 18px;border-left:2px solid transparent;border-bottom:1px solid var(--t02-hair); background:var(--t02-surface);font-size:14.5px;font-weight:500;color:var(--t02-ink);text-decoration:none; } #account-body .woocommerce-MyAccount-navigation ul li a:hover{background:var(--t02-paper);} #account-body .woocommerce-MyAccount-navigation ul li.is-active a{ border-left-color:var(--t02-red);background:var(--t02-paper);font-weight:600; } #account-body .woocommerce-MyAccount-content{ flex:1 1 480px;min-width:0;float:none;width:auto;margin:0; display:flex;flex-direction:column;gap:20px; } #account-body .woocommerce-MyAccount-content > p, #account-body .woocommerce-MyAccount-content .woocommerce-Address{ background:var(--t02-surface);border:1px solid var(--t02-edge);border-radius:6px; padding:22px 24px;margin:0;font-size:15px;line-height:1.55; } #account-body .woocommerce-Addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px;} #account-body .woocommerce-Address-title h2, #account-body .woocommerce-Address-title h3{ font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--t02-muted);margin:0 0 10px;font-family:var(--t02-ui); } #account-body .woocommerce-Address address{font-style:normal;font-size:15px;line-height:1.55;} #account-body form.woocommerce-EditAccountForm{ display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px; } #account-body form.woocommerce-EditAccountForm fieldset, #account-body form.woocommerce-EditAccountForm .clear, #account-body form.woocommerce-EditAccountForm p.form-row-wide, #account-body form.woocommerce-EditAccountForm > p:last-of-type{grid-column:1 / -1;} #account-body form.woocommerce-EditAccountForm fieldset{ border:0;border-top:1px solid var(--t02-hair);padding:14px 0 0;margin:0; } #account-body table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a{ font-family:var(--t02-mono);font-size:13px;color:var(--t02-ink);text-decoration:none; } #account-body table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-date{color:var(--t02-muted);} #account-body table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-status{font-size:0;} #account-body table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-status::before{ content:attr(data-status);display:inline-flex;align-items:center;height:24px;padding:0 8px; border-radius:3px;background:var(--t02-panel);color:var(--t02-ink); font-family:var(--t02-ui);font-size:12px;font-weight:600; } #account-body table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{text-align:right;} #account-body .u-columns.col2-set{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:24px;width:100%;} #account-body .u-columns.col2-set .col-1, #account-body .u-columns.col2-set .col-2{width:100%;float:none;} #account-body .u-columns h2{ font-family:var(--t02-display);font-weight:800;font-size:32px;letter-spacing:-.03em;line-height:1;margin:0 0 16px;color:var(--t02-ink); } #account-body .woocommerce-form-login .woocommerce-form-login__rememberme{ font-size:13.5px;color:var(--t02-muted);text-transform:none;letter-spacing:0;font-weight:400; } #account-body .woocommerce-form-login .woocommerce-form-login__submit{background:var(--t02-red);color:var(--e-global-color-t02plinth);border:0;} #account-body .woocommerce-form-login .woocommerce-form-login__submit:hover{background:var(--t02-red-h);} #account-body .woocommerce-LostPassword a{font-size:13.5px;font-weight:600;color:var(--t02-ink);} /* ============================================================================ W16 · HEADER: utility-strip cart + the slide-out side cart The menu-cart widget sits inside the Carbon header, so it inherits a light ink that made the white side-cart panel unreadable. ============================================================================ */ .elementor-menu-cart__toggle .elementor-button{ display:inline-flex;align-items:center;gap:6px;line-height:1;padding:0; } .elementor-menu-cart__toggle .elementor-button-text, .elementor-menu-cart__toggle .elementor-button-icon{display:inline-flex;align-items:center;line-height:1;} .elementor-menu-cart__toggle .elementor-button-icon-qty{ font-family:var(--t02-mono,var(--e-global-typography-t02mono-font-family),monospace);font-size:11px;line-height:1; display:inline-flex;align-items:center;justify-content:center; } .elementor-menu-cart__container{background:color-mix(in srgb, var(--e-global-color-t02utility) 50%, transparent);} .elementor-menu-cart__main{ background:var(--e-global-color-t02plinth);color:var(--e-global-color-text); border-left:1px solid var(--e-global-color-t02edge);padding:64px 24px 24px; font-family:var(--e-global-typography-text-font-family),system-ui,sans-serif; } .elementor-menu-cart__main a{color:var(--e-global-color-text);text-decoration:none;} .elementor-menu-cart__main a:hover{color:var(--e-global-color-primary);} .elementor-menu-cart__close-button{ position:absolute;top:16px;right:20px;left:auto;margin:0; width:32px;height:32px;display:flex;align-items:center;justify-content:center; border:1px solid var(--e-global-color-t02edge);border-radius:4px;color:var(--e-global-color-text);cursor:pointer; } .elementor-menu-cart__close-button:hover{border-color:var(--e-global-color-secondary);} .elementor-menu-cart__close-button::before, .elementor-menu-cart__close-button::after{ content:"";position:absolute;width:14px;height:2px;background:var(--e-global-color-secondary);border-radius:1px; } .elementor-menu-cart__close-button::before{transform:rotate(45deg);} .elementor-menu-cart__close-button::after{transform:rotate(-45deg);} .elementor-menu-cart__products{max-height:none;} .elementor-menu-cart__product{ display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center; padding:14px 0;border-bottom:1px solid var(--e-global-color-t02gallery);margin:0; } .elementor-menu-cart__product-image{width:64px;} .elementor-menu-cart__product-image img{ width:64px;height:64px;object-fit:cover;border-radius:4px;background:var(--e-global-color-t02gallery);display:block; } .elementor-menu-cart__product-name{min-width:0;} .elementor-menu-cart__product-name a{ font-family:var(--e-global-typography-primary-font-family),system-ui,sans-serif;font-weight:700;font-size:15px;line-height:1.2; letter-spacing:-.01em;color:var(--e-global-color-text);display:block; } .elementor-menu-cart__product-price, .elementor-menu-cart__product .quantity{ font-size:13px;color:var(--e-global-color-t02muted);font-variant-numeric:tabular-nums; } .elementor-menu-cart__product-remove, .elementor-menu-cart__product a.remove_from_cart_button{ color:var(--e-global-color-t02muted)!important;background:none!important;font-size:16px;line-height:1; } .elementor-menu-cart__product-remove:hover, .elementor-menu-cart__product a.remove_from_cart_button:hover{color:var(--e-global-color-primary)!important;} .elementor-menu-cart__subtotal{ font-family:var(--e-global-typography-primary-font-family),system-ui,sans-serif;font-weight:800;font-size:20px; letter-spacing:-.02em;color:var(--e-global-color-text);padding:18px 0;border-bottom:1px solid var(--e-global-color-t02gallery); font-variant-numeric:tabular-nums;text-align:left; } .elementor-menu-cart__subtotal strong{font-weight:800;} .elementor-menu-cart__footer-buttons{display:flex;gap:10px;padding-top:18px;flex-wrap:wrap;} .elementor-menu-cart__footer-buttons .elementor-button{ flex:1 1 120px;height:46px;border-radius:4px; font-family:var(--e-global-typography-text-font-family),system-ui,sans-serif;font-size:14px;font-weight:600; display:inline-flex;align-items:center;justify-content:center; } .elementor-menu-cart__footer-buttons .elementor-button--view-cart{ background:var(--e-global-color-t02plinth);color:var(--e-global-color-text);border:1px solid var(--e-global-color-t02edge); } .elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover{border-color:var(--e-global-color-secondary);color:var(--e-global-color-text);} .elementor-menu-cart__footer-buttons .elementor-button--checkout{ background:var(--e-global-color-primary);color:var(--e-global-color-t02plinth);border:0; } .elementor-menu-cart__footer-buttons .elementor-button--checkout:hover{background:var(--e-global-color-t02signaldk);color:var(--e-global-color-t02plinth);} .elementor-menu-cart__empty-message{color:var(--e-global-color-t02muted);font-size:15px;} /* ============================================================================ W17 · responsive ============================================================================ */ @media (max-width:1024px){ #cart-body .cart_totals, #checkout-body #order_review{position:static!important;} } @media (max-width:767px){ #shop-head, #shop-toolbar, #shop-loop, #shop-cta, #pdp-head, #pdp-hero, #pdp-tabs, #pdp-related-inner, #cart-head, #cart-body, #checkout-head, #checkout-body, #account-head, #account-body{ padding-inline:16px; } #cart-body table.shop_table td{padding:12px 14px;} #cart-body table.shop_table .product-thumbnail img{width:64px;height:64px;} #account-body .woocommerce-MyAccount-navigation{flex:1 1 100%;} #shop-cta-panel{padding:20px;} #pdp-related{padding-block:48px 56px;margin-top:64px;} .elementor-menu-cart__main{padding:64px 16px 16px;} } @media (prefers-reduced-motion:reduce){ .woocommerce *{transition:none!important;} } /* ---- W18 · mini-cart rows, upsell rail ------------------------------------ */ .elementor-menu-cart__product{display:grid;grid-template-columns:64px minmax(0,1fr) 24px;grid-template-areas:'img name rm' 'img price rm';column-gap:12px;row-gap:4px;align-items:center;} .elementor-menu-cart__product-image{grid-area:img;} .elementor-menu-cart__product-name{grid-area:name;} .elementor-menu-cart__product-price{grid-area:price;} .elementor-menu-cart__product-remove,.elementor-menu-cart__product a.remove,.elementor-menu-cart__product a.remove_from_cart_button{grid-area:rm;justify-self:end;} /* the mini-cart reuses span.quantity for "1 x £x" — it is not a stepper */ .elementor-menu-cart__product .quantity,.elementor-menu-cart__product-price .quantity{display:inline;border:0;background:none;height:auto;border-radius:0;overflow:visible;} .elementor-menu-cart__subtotal{display:flex;align-items:baseline;gap:8px;justify-content:flex-start;text-align:left;} /* utility-strip cart: same optical baseline as the phone number beside it */ .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle{display:flex;align-items:center;} .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button{display:inline-flex;align-items:center;gap:6px;height:auto;line-height:1;padding:0;} /* ---- W19 · winning against dms-frontend-framework.css (Bulma) --------------- Bulma loads AFTER post-3.css and owns a bare .button rule, so every pack button .elementor-kit-3 is restated here under one of the pack's own id anchors. */ #cart-body .woocommerce a.button, #cart-body .woocommerce button.button, #cart-body .woocommerce input.button, #checkout-body .woocommerce a.button, #checkout-body .woocommerce button.button, #checkout-body .woocommerce input.button, #account-body .woocommerce a.button, #account-body .woocommerce button.button, #account-body .woocommerce input.button, #account-body .woocommerce .woocommerce-Button, #pdp-summary .woocommerce a.button{ font-family:var(--t02-ui);font-size:14px;font-weight:600;line-height:1;height:46px;padding:0 18px; border-radius:4px;border:1px solid var(--t02-edge);background:var(--t02-surface);color:var(--t02-ink); display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none; text-transform:none;letter-spacing:0;box-shadow:none;white-space:nowrap; } #cart-body .woocommerce a.button:hover, #cart-body .woocommerce button.button:hover, #checkout-body .woocommerce button.button:hover, #account-body .woocommerce button.button:hover{ background:var(--t02-ink);color:var(--e-global-color-t02plinth);border-color:var(--t02-ink); } #cart-body .woocommerce a.button:focus, #cart-body .woocommerce button.button:focus, #checkout-body .woocommerce button.button:focus, #account-body .woocommerce button.button:focus{ border-color:var(--t02-edge);box-shadow:none;outline:none; } #cart-body .woocommerce a.button:focus-visible, #cart-body .woocommerce button.button:focus-visible, #checkout-body .woocommerce button.button:focus-visible, #account-body .woocommerce button.button:focus-visible{ outline:2px solid var(--t02-red);outline-offset:2px; } #cart-body .woocommerce a.checkout-button, #checkout-body .woocommerce button#place_order, #account-body .woocommerce button.woocommerce-form-login__submit, #pdp-summary .woocommerce button.single_add_to_cart_button{ background:var(--t02-red);color:var(--e-global-color-t02plinth);border:0;height:48px;padding:0 22px;border-radius:4px; font-family:var(--t02-ui);font-size:15px;font-weight:600;display:inline-flex;align-items:center; justify-content:center;white-space:nowrap;box-shadow:none;text-transform:none;letter-spacing:0; } #cart-body .woocommerce a.checkout-button:hover, #checkout-body .woocommerce button#place_order:hover, #account-body .woocommerce button.woocommerce-form-login__submit:hover, #pdp-summary .woocommerce button.single_add_to_cart_button:hover{ background:var(--t02-red-h);color:var(--e-global-color-t02plinth);border:0; } #cart-body .woocommerce a.checkout-button{width:100%;} #cart-body .wc-proceed-to-checkout{display:block;width:100%;} /* Bulma also owns bare input/select/table rules */ #cart-body .woocommerce input.input-text, #checkout-body .woocommerce input.input-text, #account-body .woocommerce input.input-text, #cart-body .woocommerce #coupon_code{ box-shadow:none;border:1px solid var(--t02-edge);background:var(--t02-paper);color:var(--t02-ink); } #cart-body .woocommerce #coupon_code{background:var(--t02-surface);font-family:var(--t02-mono);} /* ---- W20 · cart totals + shipping rows ------------------------------------ */ #cart-body .cart_totals table.shop_table th, #cart-body .cart_totals table.shop_table td{ font-size:14.5px;line-height:1.4; } #cart-body .cart_totals tr.order-total th{font-size:14.5px;font-weight:600;color:var(--t02-ink);} #cart-body .cart_totals tr.order-total td, #cart-body .cart_totals tr.order-total td .amount{ font-family:var(--t02-display);font-weight:800;font-size:28px;letter-spacing:-.03em;color:var(--t02-ink); } #cart-body .cart_totals ul#shipping_method{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;} #cart-body .cart_totals ul#shipping_method li{ display:flex;align-items:center;gap:10px;padding:10px 12px;margin:0; border:1px solid var(--t02-edge);border-radius:4px;background:var(--t02-surface);text-align:left; color:var(--t02-ink); } #cart-body .cart_totals ul#shipping_method li label{ display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;margin:0; font-family:var(--t02-ui);font-size:14px;font-weight:600;color:var(--t02-ink);cursor:pointer; } #cart-body .cart_totals ul#shipping_method li label .amount{font-weight:500;font-variant-numeric:tabular-nums;color:var(--t02-ink);} #cart-body .cart_totals ul#shipping_method li input.shipping_method{flex:0 0 auto;margin:0;} #cart-body .cart_totals .woocommerce-shipping-destination{font-size:12.5px;color:var(--t02-muted);line-height:1.5;margin:10px 0 0;} #cart-body .cart_totals .shipping-calculator-button{font-size:13px;color:var(--t02-ink);font-weight:600;} /* ---- W21 · Elementor's Cart widget does not nest the totals table inside .cart_totals, so the shipping and total rules are scoped to #cart-body. --- */ #cart-body ul#shipping_method{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;} #cart-body ul#shipping_method li{ display:flex;align-items:center;gap:10px;padding:10px 12px;margin:0;list-style:none; border:1px solid var(--t02-edge);border-radius:4px;background:var(--t02-surface); text-align:left;color:var(--t02-ink); } #cart-body ul#shipping_method li label{ display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;margin:0; font-family:var(--t02-ui);font-size:14px;font-weight:600;color:var(--t02-ink);cursor:pointer; } #cart-body ul#shipping_method li label .amount{font-weight:500;font-variant-numeric:tabular-nums;} #cart-body ul#shipping_method li input.shipping_method{flex:0 0 auto;margin:0;} #cart-body .woocommerce-shipping-destination{font-size:12.5px;color:var(--t02-muted);line-height:1.5;margin:10px 0 0;} #cart-body .shipping-calculator-button{font-size:13px;color:var(--t02-ink);font-weight:600;} #cart-body tr.order-total th{font-size:14.5px;font-weight:600;color:var(--t02-ink);} #cart-body tr.order-total td, #cart-body tr.order-total td .amount{ font-family:var(--t02-display);font-weight:800;font-size:28px;letter-spacing:-.03em;color:var(--t02-ink); } #cart-body tr.cart-discount td{color:var(--t02-green);} #cart-body tr.woocommerce-shipping-totals th{vertical-align:top;padding-top:16px;} /* ---- W22 · the shipping cell is right-aligned and shrink-wrapped by the widget; the designed radio rows need the full cell width, left aligned. --- */ #cart-body tr.woocommerce-shipping-totals td, #cart-body tr.shipping td{ display:block;width:100%;text-align:left; } #cart-body ul#shipping_method{width:100%;align-items:stretch;} #cart-body ul#shipping_method li{width:100%;} #cart-body ul#shipping_method li label{flex:1 1 auto;min-width:0;} #cart-body .woocommerce-shipping-destination, #cart-body .shipping-calculator-button{text-align:left;display:block;} #cart-body .shipping-calculator-form{text-align:left;margin-top:10px;} /* ---- W23 · third pass. Every rule here was written against a measured defect, not an impression. Doubled class names are used where Elementor's element-scoped CSS (post-.css, loaded after post-3.css) would win. ---- */ /* 1 · archive "View cart" row and 2 · PDP stepper moved to W5 / W11 (2026-09-24). */ /* 3 · stock line: Woo prints it above the cart form in its own gold. */ #pdp-summary .stock, #pdp-summary p.stock{font-size:14px;font-weight:600;margin:0;} #pdp-summary .stock.in-stock{color:var(--t02-green);} #pdp-summary .stock.available-on-backorder{color:var(--t02-muted);} #pdp-summary .stock.out-of-stock{color:var(--t02-red);} /* 5 · review form: a Void field on a Void page is invisible, so the form sits on a Plinth card the way the review cards above it do. */ #pdp-tabs #reviews #respond{ background:var(--t02-surface);border:1px solid var(--t02-edge);border-radius:6px; padding:24px;margin:24px 0 0; } #pdp-tabs #reviews #respond .comment-reply-title{ font-family:var(--t02-display);font-weight:700;font-size:20px;letter-spacing:-.02em; color:var(--t02-ink);display:block;margin:0 0 16px; } #pdp-tabs #reviews #respond label{ display:block;margin:0 0 6px;font-family:var(--t02-ui);font-size:11px;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--t02-muted); } #pdp-tabs #reviews #respond .comment-form-rating label{display:inline-block;margin-right:10px;} #pdp-tabs #reviews #respond p{margin:0 0 14px;} #pdp-tabs #reviews #respond textarea{ min-height:120px;background:var(--t02-paper);border:1px solid var(--t02-edge); border-radius:4px;padding:12px;font-family:var(--t02-ui);font-size:15px;color:var(--t02-ink);width:100%; } #pdp-tabs #reviews #respond input[type=text], #pdp-tabs #reviews #respond input[type=email]{ background:var(--t02-paper);border:1px solid var(--t02-edge);border-radius:4px;height:46px;width:100%; } #pdp-tabs #reviews #respond input[type=submit].submit{ background:var(--t02-ink);color:var(--e-global-color-t02plinth);border:0;height:46px;padding:0 20px;border-radius:4px; font-family:var(--t02-ui);font-size:15px;font-weight:600;cursor:pointer;box-shadow:none; } #pdp-tabs #reviews #respond input[type=submit].submit:hover{background:var(--t02-ink2);} #pdp-tabs #reviews .stars a{color:var(--t02-ink);} #pdp-tabs #reviews .comment-form-cookies-consent label{ display:inline;text-transform:none;letter-spacing:0;font-size:13px;font-weight:400; } /* 6 · side cart: the widget's icon-size control was setting the close button's own width/height, so the 1px border sat flush against the glyph. */ .elementor-menu-cart__main{position:relative;} .elementor-menu-cart__main .elementor-menu-cart__close-button.elementor-menu-cart__close-button.elementor-menu-cart__close-button{ position:absolute;top:16px;right:20px;left:auto;margin:0; width:36px;height:36px;min-width:36px;min-height:36px;padding:0; display:flex;align-items:center;justify-content:center; border:1px solid var(--e-global-color-t02edge);border-radius:4px;background:transparent; font-size:0;line-height:0;cursor:pointer;transition:border-color .15s; } .elementor-menu-cart__main .elementor-menu-cart__close-button.elementor-menu-cart__close-button.elementor-menu-cart__close-button:hover{border-color:var(--e-global-color-secondary);} .elementor-menu-cart__main .elementor-menu-cart__close-button.elementor-menu-cart__close-button.elementor-menu-cart__close-button::before, .elementor-menu-cart__main .elementor-menu-cart__close-button.elementor-menu-cart__close-button.elementor-menu-cart__close-button::after{ content:"";position:absolute;width:14px;height:2px;background:var(--e-global-color-secondary);border-radius:1px; } .elementor-menu-cart__main .elementor-menu-cart__close-button.elementor-menu-cart__close-button.elementor-menu-cart__close-button::before{transform:rotate(45deg);} .elementor-menu-cart__main .elementor-menu-cart__close-button.elementor-menu-cart__close-button.elementor-menu-cart__close-button::after{transform:rotate(-45deg);} /* 7 · side cart subtotal: the divider control draws all four sides with zero horizontal padding, so the box touched the text. One bottom rule only. */ .elementor-menu-cart__main .elementor-menu-cart__subtotal.elementor-menu-cart__subtotal{ border:0;border-bottom:1px solid var(--e-global-color-t02gallery);padding:18px 0; display:flex;align-items:baseline;gap:8px;justify-content:flex-start;text-align:left; } /* 8 · utility strip: centre the cart against the phone number beside it. */ .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__wrapper, .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_wrapper, .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle{ display:flex;align-items:center;margin:0;padding:0; } .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button{ display:inline-flex;align-items:center;gap:6px;line-height:1.6;padding:0;margin:0; } /* ---- W24 · pass 4, all measured ------------------------------------------ */ /* 1 · cart quantity (revised 2026-09-24, single field): the Cart widget's own CSS caps .input-text.qty at max-height 28px, so max-height is lifted here. Original note: the Cart widget's field styling gave the input a full 1px border and a browser-default 28px box inside the 40px stepper, top aligned and left aligned. */ #cart-body .quantity{align-items:stretch;} #cart-body .quantity input.qty.qty{ width:56px;min-width:56px;height:40px;min-height:40px;max-height:none;padding:0;margin:0;line-height:1;font-size:14px;font-weight:600; text-align:center;border-radius:4px;background:var(--e-global-color-t02plinth);box-shadow:none; border:1px solid var(--t02-edge);-moz-appearance:textfield;appearance:textfield; } /* 2 · coupon: the field was 42px and the button 46px, so they sat off-baseline. */ #cart-body .woocommerce .coupon{align-items:stretch;} #cart-body .woocommerce .coupon #coupon_code.input-text{height:42px;line-height:40px;margin:0;} #cart-body .woocommerce .coupon button.button{height:42px;padding:0 14px;font-size:14px;margin:0;} /* 3 · checkout name fields: WooCommerce floats .form-row-first / -last at 47%, which inside our grid produced 107px inputs in a 3-column track. */ #checkout-body .woocommerce form .form-row{float:none;width:auto;margin:0;padding:0;} #checkout-body .woocommerce-billing-fields__field-wrapper, #checkout-body .woocommerce-shipping-fields__field-wrapper, #checkout-body .woocommerce-additional-fields__field-wrapper{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px; } #checkout-body .form-row-wide, #checkout-body #billing_address_1_field, #checkout-body #billing_address_2_field, #checkout-body #shipping_address_1_field, #checkout-body #shipping_address_2_field, #checkout-body #billing_email_field, #checkout-body #billing_country_field, #checkout-body #shipping_country_field, #checkout-body #order_comments_field{grid-column:1 / -1;} /* 4 · select2: select2.css loads at position 37, long after post-3.css, so the country/state controls kept their defaults and the blue highlight. */ #checkout-body .select2-container--default .select2-selection--single.select2-selection--single, #cart-body .select2-container--default .select2-selection--single.select2-selection--single{ height:46px;border:1px solid var(--t02-edge);border-radius:4px; background:var(--t02-paper);outline:none; } #checkout-body .select2-container--default .select2-selection--single .select2-selection__rendered, #cart-body .select2-container--default .select2-selection--single .select2-selection__rendered{ height:44px;line-height:44px;padding:0 34px 0 12px;color:var(--t02-ink); font-family:var(--t02-ui);font-size:15px; } #checkout-body .select2-container--default .select2-selection--single .select2-selection__arrow, #cart-body .select2-container--default .select2-selection--single .select2-selection__arrow{height:44px;right:8px;} #checkout-body .select2-container--default .select2-selection--single .select2-selection__arrow b, #cart-body .select2-container--default .select2-selection--single .select2-selection__arrow b{ border-color:var(--t02-muted) transparent transparent transparent; } #checkout-body .select2-container--default.select2-container--open .select2-selection--single, #cart-body .select2-container--default.select2-container--open .select2-selection--single{border-color:var(--t02-ink);} /* the dropdown is appended to , so it cannot be scoped to a page anchor */ .select2-container--default .select2-dropdown.select2-dropdown{ border:1px solid var(--e-global-color-t02edge);border-radius:4px;background:var(--e-global-color-t02plinth); font-family:var(--e-global-typography-text-font-family),system-ui,sans-serif;font-size:15px;color:var(--e-global-color-text); box-shadow:0 12px 28px -12px color-mix(in srgb, var(--e-global-color-secondary) 25%, transparent); } .select2-container--default .select2-search--dropdown .select2-search__field.select2-search__field{ height:40px;border:1px solid var(--e-global-color-t02edge);border-radius:4px;background:var(--e-global-color-t02void);padding:0 10px; font-family:var(--e-global-typography-text-font-family),system-ui,sans-serif;font-size:14px;color:var(--e-global-color-text);outline:none; } .select2-container--default .select2-results__option{padding:10px 12px;color:var(--e-global-color-text);} .select2-container--default .select2-results__option--highlighted.select2-results__option--highlighted, .select2-container--default .select2-results__option--highlighted[aria-selected].select2-results__option--highlighted{ background:var(--e-global-color-secondary);color:var(--e-global-color-t02plinth); } .select2-container--default .select2-results__option[aria-selected=true].select2-results__option{ background:var(--e-global-color-t02gallery);color:var(--e-global-color-text); } /* 5 · checkout shipping rows: the review table's cell shrink-wraps to 164px and right-aligns, exactly as the cart's did. */ #checkout-body tr.woocommerce-shipping-totals th, #checkout-body tr.woocommerce-shipping-totals td{display:block;width:100%;text-align:left;} #checkout-body tr.woocommerce-shipping-totals th{padding:14px 0 8px;} #checkout-body tr.woocommerce-shipping-totals td{padding:0 0 14px;} #checkout-body ul#shipping_method{width:100%;align-items:stretch;} #checkout-body ul#shipping_method li{width:100%;} #checkout-body ul#shipping_method li label{flex:1 1 auto;min-width:0;} /* 6 · payment: the gateway description lives inside the

, which the segmented row shrink-wrapped to 209px. display:contents lifts the label and the panel into the same flex row so the panel can take its own full line. */ #checkout-body #payment ul.payment_methods{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;} #checkout-body #payment ul.payment_methods li{display:contents;} #checkout-body #payment ul.payment_methods li label{flex:0 0 auto;} #checkout-body #payment div.payment_box{flex:1 1 100%;width:100%;margin:6px 0 14px;} #checkout-body #payment div.payment_box p{margin:0;} #checkout-body #payment ul.payment_methods li img{max-height:24px;margin-left:8px;} /* W24.5 · block-ifying only the cells left the row shrink-wrapped at 70px in the checkout review table (tfoot); the row itself has to go block too. */ #checkout-body table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals{display:flex;flex-direction:column;width:100%;} #checkout-body table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th, #checkout-body table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td{display:block;width:100%;text-align:left;box-sizing:border-box;} #checkout-body ul#shipping_method{width:100%;display:flex;flex-direction:column;gap:8px;} #checkout-body ul#shipping_method li{width:100%;box-sizing:border-box;} /* --- T02 LISTING BUTTON ICON SLOT ---------------------------------------- dms_listing_button always emits an empty span.dms-button-icon before the label. With no icon chosen the span is 0px wide but is still a flex item, so the button's gap is spent on its left and the label sits off-centre by exactly one gap. Hide the empty slot; restore it only when a real icon class is present. Class doubled because dms-general.css enqueues after post-3.css. NB no angle brackets in this comment: Elementor's custom-CSS sanitiser drops everything from the first one onward, silently. */ .dms-listing-button .dms-button-icon.dms-button-icon{display:none} .dms-listing-button .dms-button-icon.dms-button-icon:has(i[class]:not([class=''])){display:flex} /* ---- W25 · checkout review table as a flex list ------------------------- Block-ifying individual cells kept losing to anonymous table boxes: the shipping row measured 352px wide with a 70px cell inside a 514px table. The whole review table is taken out of table layout instead, which also gives each row the designed label-left / amount-right shape. ---------- */ #checkout-body table.woocommerce-checkout-review-order-table, #checkout-body table.woocommerce-checkout-review-order-table thead, #checkout-body table.woocommerce-checkout-review-order-table tbody, #checkout-body table.woocommerce-checkout-review-order-table tfoot{ display:block;width:100%;border:0; } #checkout-body table.woocommerce-checkout-review-order-table tr{ display:flex;width:100%;align-items:baseline;gap:12px; border-top:1px solid var(--t02-hair);padding:10px 0; } #checkout-body table.woocommerce-checkout-review-order-table tbody tr:first-child{border-top:0;} #checkout-body table.woocommerce-checkout-review-order-table tr th, #checkout-body table.woocommerce-checkout-review-order-table tr td{ display:block;border:0;padding:0;background:transparent; font-size:14.5px;text-transform:none;letter-spacing:0; } #checkout-body table.woocommerce-checkout-review-order-table tr th{ flex:1 1 auto;min-width:0;text-align:left;font-weight:400;color:var(--t02-muted); } #checkout-body table.woocommerce-checkout-review-order-table tr td{ flex:0 0 auto;text-align:right;font-weight:500;color:var(--t02-ink); font-variant-numeric:tabular-nums; } #checkout-body table.woocommerce-checkout-review-order-table tr.cart_item td.product-name{ flex:1 1 auto;min-width:0;text-align:left;font-weight:500;color:var(--t02-ink); } #checkout-body table.woocommerce-checkout-review-order-table tr.order-total th{font-weight:600;color:var(--t02-ink);} #checkout-body table.woocommerce-checkout-review-order-table tr.order-total td, #checkout-body table.woocommerce-checkout-review-order-table tr.order-total td .amount{ font-family:var(--t02-display);font-weight:800;font-size:28px;letter-spacing:-.03em;color:var(--t02-ink); } /* the shipping row stacks: label, then full-width radio rows */ #checkout-body table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals{ flex-direction:column;align-items:stretch;gap:8px; } #checkout-body table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th, #checkout-body table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td{ flex:0 0 auto;width:100%;text-align:left; } #checkout-body ul#shipping_method{width:100%;display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;} #checkout-body ul#shipping_method li{ width:100%;box-sizing:border-box;display:flex;align-items:center;gap:10px; padding:12px 14px;margin:0;border:1px solid var(--t02-edge);border-radius:4px; background:var(--t02-surface); } #checkout-body ul#shipping_method li label{ flex:1 1 auto;min-width:0;display:flex;justify-content:space-between;align-items:center; gap:12px;margin:0;font-family:var(--t02-ui);font-size:14px;font-weight:600;color:var(--t02-ink);cursor:pointer; } #checkout-body ul#shipping_method li label .amount{font-weight:500;font-variant-numeric:tabular-nums;} /* ---- W26 · corrections to W25 -------------------------------------------- The shipping cell still resolved to a used width of 70px against a 514px row, so it is pinned with min-width; rows use space-between so the label/amount split does not depend on flex-grow resolution; and the review table's head is hidden again (W25 re-displayed it). ----------- */ #checkout-body table.woocommerce-checkout-review-order-table thead{display:none;} #checkout-body table.woocommerce-checkout-review-order-table tr{justify-content:space-between;} #checkout-body table.woocommerce-checkout-review-order-table tr th{flex:1 1 auto;min-width:0;} #checkout-body table.woocommerce-checkout-review-order-table tr td{flex:0 1 auto;min-width:0;} #checkout-body table.woocommerce-checkout-review-order-table tr.cart_item td.product-name{flex:1 1 auto;min-width:0;text-align:left;} #checkout-body table.woocommerce-checkout-review-order-table tr.cart_item td.product-total{flex:0 0 auto;text-align:right;white-space:nowrap;} #checkout-body table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td{ flex:1 1 100%;min-width:100%;width:100%;text-align:left; } #checkout-body table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th{ flex:1 1 100%;min-width:100%;width:100%;text-align:left; } #checkout-body ul#shipping_method{min-width:100%;} /* W27 - review table: let the product name use the row, Elementor caps it at 150px */ #checkout-body table.woocommerce-checkout-review-order-table tr.cart_item td.product-name{max-width:none;padding-right:16px;} #checkout-body table.woocommerce-checkout-review-order-table tr.cart_item td.product-name .product-quantity{white-space:nowrap;} /* ---- W28 · fifth pass ------------------------------------------------ */ /* B26 (retired 2026-09-24) — the ± steppers were kit JS and are gone. The PDP quantity is the native input, pinned here to the purchase row's 48px so the add-to-cart widget's own quantity controls cannot resize it. */ #pdp-summary .quantity.quantity{display:inline-flex;height:48px;padding:0;margin:0;border:0;background:none;} /* WooCommerce's clearfix pseudo-elements become zero-width flex items and add a gap before the field */ #pdp-summary form.cart::before, #pdp-summary form.cart::after{content:none;display:none;} /* the add-to-cart widget prints its own stock line above the form; the Product Stock widget in #pdp-assure is the designed one */ #pdp-summary .elementor-widget-woocommerce-product-add-to-cart p.stock{display:none;} #pdp-summary .quantity input.qty.qty{ width:64px;min-width:64px;height:48px;margin:0;padding:0;box-shadow:none; border:1px solid var(--t02-edge);border-radius:4px;background:var(--t02-plinth);color:var(--t02-ink); font-family:var(--t02-ui);font-size:15px;font-weight:600;line-height:1; font-variant-numeric:tabular-nums;text-align:center; } /* B27 — WooCommerce prints `.woocommerce-notices-wrapper` as a direct child of , outside any `.woocommerce` element. Body carries `woocommerce-page`, so W9's shared base rule applied but every colour rule (scoped `.woocommerce …`) missed: the add-to-cart notice rendered edge-to-edge with no ground and a 1px currentColor rule. */ body > .woocommerce-notices-wrapper{ width:100%;max-width:1400px;margin:0 auto;padding:24px 32px 0; } body > .woocommerce-notices-wrapper:empty{padding:0;} .woocommerce-page .woocommerce-message::before, .woocommerce-page .woocommerce-error::before, .woocommerce-page .woocommerce-info::before{position:static;font-size:16px;margin:0;top:auto;left:auto;} .woocommerce-page .woocommerce-message{border-color:var(--t02-green);background:var(--t02-green-t);} .woocommerce-page .woocommerce-message::before{color:var(--t02-green);} .woocommerce-page .woocommerce-error{border-color:var(--t02-red);background:var(--t02-red-t);} .woocommerce-page .woocommerce-error::before{color:var(--t02-red);} .woocommerce-page .woocommerce-info{border-color:var(--t02-edge);background:var(--t02-surface);} .woocommerce-page .woocommerce-info::before{color:var(--t02-muted);} .woocommerce-page .woocommerce-error li{margin:0;padding:0;} .woocommerce-page .woocommerce-message .button{margin-left:auto;height:40px;padding:0 14px;font-size:13.5px;} @media (max-width:767px){ body > .woocommerce-notices-wrapper{padding:16px 16px 0;} } /* ---- W29 · token scope correction ------------------------------------ */ /* B28 — W0 declares the pack's tokens on the page anchors (#shop-archive, #product-single, #cart-page, …). `.woocommerce-notices-wrapper` is a sibling of those under , so it inherits none of them: every var() in W28's notice rules resolved to nothing and the colour fell back to currentColor. Declare the notice colours the wrapper actually needs on the wrapper itself. Also corrects two var names W28 got wrong — the white and panel tokens are --t02-surface / --t02-panel, not --t02-plinth / --t02-gallery. */ body > .woocommerce-notices-wrapper{ --t02-ink:var(--e-global-color-text); --t02-muted:var(--e-global-color-t02muted); --t02-surface:var(--e-global-color-t02plinth); --t02-edge:var(--e-global-color-t02edge); --t02-red:var(--e-global-color-primary); --t02-red-t:color-mix(in srgb, var(--e-global-color-primary) 6%, var(--e-global-color-t02plinth)); --t02-green:var(--e-global-color-t02success); --t02-green-t:color-mix(in srgb, var(--e-global-color-t02success) 6%, var(--e-global-color-t02plinth)); --t02-ui:var(--e-global-typography-text-font-family),system-ui,sans-serif; } #pdp-summary .quantity input.qty.qty{background:var(--e-global-color-t02plinth);} /* ---- W30 / W31 · stepper glyph rules retired 2026-09-24 with the steppers. */ /* ---- W32 · notice focus ring ----------------------------------------- */ /* B31 — the blue ring was never a border. WooCommerce gives the notice `tabindex="-1"` and calls .focus() on it so screen readers announce it and the page scrolls to it, and the browser then paints its own focus ring (Chrome's is blue). getComputedStyle reports `outline-style: none` for a UA-painted ring, so a border/background assertion passes while the ring is plainly visible — this is the one case where the screenshot was right and the measurement was not. These are programmatic scroll targets, never keyboard-reachable (tabindex is -1), so suppressing the ring costs no keyboard affordance. Real controls keep theirs. */ [tabindex="-1"]:focus.woocommerce-message, [tabindex="-1"]:focus.woocommerce-error, [tabindex="-1"]:focus.woocommerce-info, body > .woocommerce-notices-wrapper [tabindex="-1"]:focus, .woocommerce [tabindex="-1"]:focus, .woocommerce-page .woocommerce-NoticeGroup [tabindex="-1"]:focus{ outline:none;box-shadow:none; } /* === M0 Dealer.ms modal skin (video walkaround + any dms modal) === */ .dms-modal .dms-modal__container{width:100%;max-width:min(880px,calc(100vw - 32px));padding:0;border:1px solid var(--e-global-color-t02edge);border-radius:6px;background:var(--e-global-color-t02plinth);box-shadow:0 32px 64px -24px color-mix(in srgb, var(--e-global-color-secondary) 45%, transparent);overflow:hidden} .dms-modal .dms-modal__header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;padding:16px 20px;border-bottom:1px solid var(--e-global-color-t02gallery)} .dms-modal .dms-modal__title{margin:0;font-family:var(--e-global-typography-primary-font-family),sans-serif;font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1.2;color:var(--e-global-color-text)} .dms-modal .dms-modal__close{flex:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--e-global-color-t02edge);border-radius:4px;background:var(--e-global-color-t02plinth);color:var(--e-global-color-text);font-size:18px;line-height:1;cursor:pointer;box-shadow:none;transition:border-color .15s} .dms-modal .dms-modal__close:hover{border-color:var(--e-global-color-secondary);background:var(--e-global-color-t02plinth);color:var(--e-global-color-text)} .dms-modal .dms-modal__close:focus-visible{outline:2px solid var(--e-global-color-primary);outline-offset:2px} .dms-modal .dms-modal__content{margin:0;padding:20px} .dms-modal #dms-listing-video-container{width:100%;aspect-ratio:16/9;border-radius:4px;background:var(--e-global-color-secondary);overflow:hidden} .dms-modal #dms-listing-video-container iframe{display:block;width:100%;height:100%;max-width:100%;border:0}/* End custom CSS */