takes the cell out of the table
formatting context and collapses every column width with it. Floating the
two groups inside the cell keeps them on one line and keeps the table a
table — `overflow:hidden` contains them so nothing rides up over the last
item row the way a negative margin did. */
overflow: hidden;
}
.woocommerce-cart table.shop_table.cart td.actions .coupon {
display: flex;
gap: 10px;
align-items: center;
float: left;
padding: 0;
border: 0;
margin: 0;
}
.woocommerce-cart table.shop_table.cart td.actions .coupon label { display: none; }
.woocommerce-cart table.shop_table.cart td.actions .coupon input.input-text {
flex: 0 0 200px;
width: 200px;
min-width: 0;
height: 42px;
margin: 0;
}
.woocommerce-cart table.shop_table.cart td.actions .coupon button { flex: 0 0 auto; }
.woocommerce-cart table.shop_table.cart td.actions > button[name="update_cart"],
.woocommerce-cart table.shop_table.cart td.actions > input[name="update_cart"] {
float: right;
margin: 0;
}
/* Totals panel — one surface with its title inside, matching the checkout
summary so the two pages read the same way. */
.woocommerce-cart .cart-collaterals .cart_totals {
width: auto;
float: none;
background: var(--ewc-surface-2);
border-radius: var(--ewc-r-card);
padding: 26px 20px 20px;
}
.woocommerce-cart .cart_totals > h2,
.woocommerce-cart .cart-collaterals h2 {
font-family: 'Avenir LT', sans-serif;
font-size: 18px;
line-height: 24px;
font-weight: 700;
letter-spacing: normal;
text-transform: none;
color: var(--ewc-title);
margin: 0 0 6px;
}
.woocommerce-cart .cart_totals table.shop_table {
background: transparent;
border: 0;
border-radius: 0;
border-collapse: separate;
border-spacing: 0;
margin: 0 0 18px;
width: 100%;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
border: 0;
border-top: 1px solid var(--ewc-rule);
padding: 13px 0;
font-size: 15px;
line-height: 21px;
color: var(--ewc-body);
background: transparent;
}
.woocommerce-cart .cart_totals table.shop_table tr:first-child th,
.woocommerce-cart .cart_totals table.shop_table tr:first-child td { border-top: 0; }
.woocommerce-cart .cart_totals table.shop_table th { font-weight: 700; color: var(--ewc-title); width: 46%; }
.woocommerce-cart .cart_totals table.shop_table td { text-align: right; }
.woocommerce-cart .cart_totals tr.order-total th { font-size: 15px; }
.woocommerce-cart .cart_totals tr.order-total td,
.woocommerce-cart .cart_totals tr.order-total td strong {
font-size: 22px;
line-height: 28px;
font-weight: 700;
color: var(--ewc-title);
}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
/* This sits in the ~145px value column of the totals table, where Woo's
full formatted address broke into three ragged lines. It only restates the
address the shopper just entered, so hide the sentence and keep the
"Change address" link, which is the part that does something. */
display: none;
}
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td { text-align: right; }
.woocommerce-cart .cart_totals a.shipping-calculator-button {
display: inline-block;
margin-top: 6px;
font-size: 13px;
}
.woocommerce-cart .cart_totals form.woocommerce-shipping-calculator { margin: 0; }
/* the calculator form, once opened, needs the full panel width */
.woocommerce-cart .cart_totals .shipping-calculator-form { text-align: left; margin-top: 10px; }
.woocommerce-cart .cart_totals .shipping-calculator-form .form-row { margin: 0 0 8px; }
.woocommerce-cart .cart_totals ul#shipping_method li { margin: 0 0 4px; font-size: 14px; }
.woocommerce-cart .cart_totals a.shipping-calculator-button { color: var(--ewc-red); font-weight: 700; font-size: 13px; }
.woocommerce-cart .wc-proceed-to-checkout { padding: 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
display: block;
width: 100%;
text-align: center;
font-size: 15px;
padding: 15px 22px;
margin: 0;
background: var(--ewc-red-a11y);
border-color: var(--ewc-red-a11y);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
background: var(--ewc-red-dim);
border-color: var(--ewc-red-dim);
}
/* Empty cart */
.woocommerce-cart .cart-empty.woocommerce-info {
display: block;
text-align: center;
border: 1px solid var(--ewc-rule);
border-left-width: 1px;
padding: 46px 24px 44px;
margin: 0 0 22px;
font-size: 16px;
}
.woocommerce-cart .return-to-shop { text-align: center; margin: 0 0 30px; }
.woocommerce-cart .return-to-shop a.button { display: inline-block; }
/* ── Checkout ────────────────────────────────────────────────────────
Customer details on a white card, the order summary in a sticky panel
on the right — the same split as the cart. */
.woocommerce-checkout form.checkout.woocommerce-checkout {
display: grid;
grid-template-columns: minmax(0, 1fr) 327px;
/* The heading needs its own row (two items in one area would stack), but the
billing card has to span both rows — otherwise the summary heading sits a
whole row above "Billing details" and the two columns start on different
lines, which is exactly how it read before. */
grid-template-areas:
"notices notices"
"details reviewhead"
"details review";
grid-template-rows: auto auto 1fr;
gap: 0 var(--ewc-gutter);
align-items: start;
}
.woocommerce-checkout form.checkout #customer_details { grid-area: details; width: auto; float: none; }
.woocommerce-checkout form.checkout #order_review_heading { grid-area: reviewhead; }
.woocommerce-checkout form.checkout #order_review { grid-area: review; }
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { grid-area: notices; }
/* the two internal columns stack inside the narrower left card */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { float: none; width: auto; }
.woocommerce-checkout #customer_details {
background: var(--ewc-surface);
border-radius: var(--ewc-r-card);
box-shadow: var(--ewc-shadow);
padding: 26px 28px 28px;
}
.woocommerce-checkout #customer_details .col-2 {
margin-top: 26px;
padding-top: 24px;
border-top: 1px solid var(--ewc-rule);
}
.woocommerce-checkout .woocommerce-shipping-fields h3#ship-to-different-address {
font-size: 15px;
line-height: 22px;
font-weight: 700;
margin: 0 0 4px;
}
.woocommerce-checkout .woocommerce-shipping-fields h3#ship-to-different-address label {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 15px;
line-height: 22px;
font-weight: 700;
letter-spacing: normal;
text-transform: none;
color: var(--ewc-title);
margin: 0;
cursor: pointer;
}
.woocommerce-checkout .woocommerce-shipping-fields input#ship-to-different-address-checkbox {
width: 17px;
height: 17px;
margin: 0;
accent-color: var(--ewc-red);
}
.woocommerce-checkout .woocommerce-shipping-fields .shipping_address { margin-top: 18px; }
/* Woo stacks the shipping toggle and the order-notes block with no gap */
.woocommerce-checkout .woocommerce-additional-fields { margin-top: 20px; }
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
font-family: 'Avenir LT', sans-serif;
font-size: 18px;
line-height: 24px;
font-weight: 700;
letter-spacing: normal;
text-transform: none;
color: var(--ewc-title);
margin: 0 0 20px;
}
/* two fields per row where Woo marks them as halves */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 16px;
}
.woocommerce-checkout p.form-row {
margin: 0;
padding: 0;
grid-column: span 2;
float: none !important;
width: auto !important;
}
.woocommerce-checkout p.form-row.form-row-first,
.woocommerce-checkout p.form-row.form-row-last { grid-column: span 1; }
.woocommerce-checkout .form-row label,
.woocommerce form .form-row label {
display: block;
font-size: 12px;
line-height: 16px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ewc-body);
margin: 0 0 6px;
}
.woocommerce form .form-row .required,
.woocommerce form .form-row abbr.required {
color: var(--ewc-red);
border: 0;
text-decoration: none;
}
/* Order review panel */
/* Heading and panel are adjacent rows with no row gap, so styling the heading
with the panel's fill and a rounded top makes them one surface — the summary
then reads like the billing card, with its title inside it. */
.woocommerce-checkout #order_review_heading {
font-family: 'Avenir LT', sans-serif;
font-size: 18px;
line-height: 24px;
font-weight: 700;
letter-spacing: normal;
text-transform: none;
color: var(--ewc-title);
background: var(--ewc-surface-2);
margin: 0;
padding: 26px 20px 0;
border-radius: var(--ewc-r-card) var(--ewc-r-card) 0 0;
}
.woocommerce-checkout #order_review {
background: var(--ewc-surface-2);
border-radius: 0 0 var(--ewc-r-card) var(--ewc-r-card);
padding: 18px 20px 20px;
}
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table {
background: transparent;
border: 0 !important; /* Woo draws a 1px top border that read as a stray hairline */
border-top: 0;
border-collapse: separate;
border-spacing: 0;
margin: 0 0 16px;
width: 100%;
}
.woocommerce-checkout table.shop_table thead th {
background: transparent;
border: 0;
border-bottom: 1px solid var(--ewc-rule);
color: var(--ewc-body);
font-size: 12px;
line-height: 16px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
padding: 14px 0 10px;
}
.woocommerce-checkout table.shop_table tbody td,
.woocommerce-checkout table.shop_table tbody th,
.woocommerce-checkout table.shop_table tfoot td,
.woocommerce-checkout table.shop_table tfoot th {
background: transparent;
border: 0;
border-top: 1px solid var(--ewc-rule);
padding: 12px 0;
font-size: 14.5px;
line-height: 21px;
color: var(--ewc-body);
}
.woocommerce-checkout table.shop_table tbody tr:first-child td,
.woocommerce-checkout table.shop_table tbody tr:first-child th { border-top: 0; }
.woocommerce-checkout table.shop_table td.product-name { color: var(--ewc-title); font-weight: 700; padding-right: 12px; }
.woocommerce-checkout table.shop_table .product-quantity { font-weight: 400; color: var(--ewc-body); }
.woocommerce-checkout table.shop_table td.product-total,
.woocommerce-checkout table.shop_table th { text-align: right; }
.woocommerce-checkout table.shop_table th { font-weight: 700; color: var(--ewc-title); text-align: left; }
.woocommerce-checkout table.shop_table tfoot tr.order-total td,
.woocommerce-checkout table.shop_table tfoot tr.order-total strong {
font-size: 22px;
line-height: 28px;
font-weight: 700;
color: var(--ewc-title);
}
.woocommerce-checkout ul#shipping_method { margin: 0; padding: 0; list-style: none; text-align: right; }
.woocommerce-checkout ul#shipping_method li { margin: 0 0 4px; font-size: 14px; }
/* Payment box */
.woocommerce-checkout #payment {
/* directly on the panel — a white card here nested a third surface inside
the grey panel, which in turn held a grey description box */
background: transparent;
border: 0;
border-top: 1px solid var(--ewc-rule);
border-radius: 0;
padding: 4px 0 0;
margin-top: 4px;
}
.woocommerce-checkout #payment ul.wc_payment_methods {
border: 0;
padding: 0;
margin: 0;
list-style: none;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method {
border-bottom: 1px solid var(--ewc-rule);
padding: 14px 0;
margin: 0;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method:last-child { border-bottom: 0; }
.woocommerce-checkout #payment ul.wc_payment_methods label {
display: inline-block;
font-size: 15px;
line-height: 21px;
font-weight: 700;
letter-spacing: normal;
text-transform: none;
color: var(--ewc-title);
margin: 0;
cursor: pointer;
}
.woocommerce-checkout #payment ul.wc_payment_methods input[type="radio"] { accent-color: var(--ewc-red); margin-right: 8px; }
.woocommerce-checkout #payment div.payment_box {
background: #FFFFFF;
border: 1px solid var(--ewc-rule);
border-radius: var(--ewc-r-ctl);
color: var(--ewc-body);
font-size: 14px;
line-height: 21px;
margin: 12px 0 4px;
padding: 14px 16px;
}
.woocommerce-checkout #payment div.payment_box::before { content: none; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text p,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
font-size: 13px;
line-height: 20px;
color: var(--ewc-body);
}
.woocommerce-checkout #payment .form-row.place-order { padding: 16px 0 0; margin: 0; }
.woocommerce-checkout #place_order {
display: block;
width: 100%;
float: none;
font-size: 16px;
line-height: 20px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
padding: 16px 22px;
background: var(--ewc-red-a11y);
border-color: var(--ewc-red-a11y);
}
.woocommerce-checkout #place_order:hover { background: var(--ewc-red-dim); border-color: var(--ewc-red-dim); }
/* the coupon toggle above the form */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 18px; }
.woocommerce-checkout form.checkout_coupon {
background: var(--ewc-surface);
border: 1px solid var(--ewc-rule);
border-radius: var(--ewc-r-card);
padding: 20px 22px;
margin: 0 0 22px;
}
.woocommerce-checkout form.checkout_coupon .form-row { display: inline-block; width: auto; margin-right: 10px; }
.woocommerce-checkout form.checkout_coupon .input-text { width: 220px; }
/* ── Order received / view order ─────────────────────────────────────
The confirmation page and the account's "view order" page print Woo's
order details table straight onto the black page — there is no light
card under it, so the checkout rules above (same `shop_table` class)
painted its totals --ewc-body slate on black.
Rather than only repainting the text, this is the one dark surface in
the commerce set: a raised near-black card, the running costs as a
muted label / white value list, and the order total last in Eware Red.
The row order and the `ew-order-*` classes come from the two template
overrides in woocommerce/order/. The checkout review table is
untouched — it has no `order_details` class and stays on its grey
panel. */
.woocommerce .woocommerce-order-details {
--ewd-card: #121212; /* the card, one step off the #000 page */
--ewd-line: #262626; /* every rule and the card's own border */
--ewd-chip: #202020; /* the quantity chip */
--ewd-label: #9A9A9A; /* summary labels — 6.7:1 on the card */
--ewd-dim: #8A8A8A; /* column heads and the item subtitle — 5.4:1 */
margin: 0 0 34px;
}
.woocommerce .woocommerce-order-details__title { margin: 0 0 18px; }
.woocommerce table.shop_table.order_details {
background: var(--ewd-card);
border: 1px solid var(--ewd-line);
border-radius: 14px;
border-collapse: separate;
border-spacing: 0;
table-layout: auto;
width: 100%;
margin: 0;
color: #FFFFFF;
}
/* Column heads */
.woocommerce table.shop_table.order_details thead th {
background: transparent;
border: 0;
border-bottom: 1px solid var(--ewd-line);
color: var(--ewd-dim);
font-size: 11px;
line-height: 14px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
padding: 20px 26px 14px;
text-align: left;
white-space: nowrap;
}
.woocommerce table.shop_table.order_details thead th.product-total { text-align: right; }
/* ── The line item ───────────────────────────────────────────────── */
.woocommerce table.shop_table.order_details tbody td {
background: transparent;
border: 0;
border-bottom: 1px solid var(--ewd-line);
color: #FFFFFF;
padding: 18px 26px;
vertical-align: top;
}
.woocommerce table.shop_table.order_details tbody td.product-name { font-weight: 400; }
/* the flex row lives on a wrapper, not the cell — a `display:flex`
drops out of the table's own layout and takes the column widths with it */
.woocommerce table.shop_table.order_details .ew-item {
display: flex;
align-items: flex-start;
gap: 12px;
}
/* Quantity chip: the count reads ahead of the name instead of trailing it. */
.woocommerce table.shop_table.order_details .ew-qty {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 22px;
padding: 0 8px;
margin-top: 1px;
border-radius: 5px;
background: var(--ewd-chip);
color: var(--ewc-red);
font-size: 11px;
line-height: 1;
font-weight: 700;
letter-spacing: .03em;
}
.woocommerce table.shop_table.order_details .ew-item-text { min-width: 0; }
.woocommerce table.shop_table.order_details .ew-item-title {
display: block;
color: #FFFFFF;
font-size: 14.5px;
line-height: 20px;
font-weight: 700;
text-decoration: none;
/* supplier part numbers arrive as long unbroken strings */
overflow-wrap: anywhere;
}
.woocommerce table.shop_table.order_details a.ew-item-title:hover,
.woocommerce table.shop_table.order_details a.ew-item-title:focus-visible { color: var(--ewc-red); }
.woocommerce table.shop_table.order_details .ew-item-sub {
display: block;
margin-top: 4px;
color: var(--ewd-dim);
font-size: 12.5px;
line-height: 18px;
font-weight: 400;
overflow-wrap: anywhere;
}
.woocommerce table.shop_table.order_details tbody td.product-total {
text-align: right;
font-size: 15px;
line-height: 20px;
font-weight: 700;
white-space: nowrap;
}
/* ── Summary rows ────────────────────────────────────────────────── */
.woocommerce table.shop_table.order_details tfoot th,
.woocommerce table.shop_table.order_details tfoot td {
background: transparent;
border: 0;
font-size: 13.5px;
line-height: 20px;
padding: 9px 26px;
}
.woocommerce table.shop_table.order_details tfoot tr.ew-order-line th {
color: var(--ewd-label);
font-weight: 400;
text-align: left;
}
.woocommerce table.shop_table.order_details tfoot tr.ew-order-line td {
color: #FFFFFF;
font-weight: 600;
text-align: right;
}
.woocommerce table.shop_table.order_details tfoot tr.ew-order-line:first-child th,
.woocommerce table.shop_table.order_details tfoot tr.ew-order-line:first-child td { padding-top: 20px; }
.woocommerce table.shop_table.order_details tfoot tr.ew-order-line:last-child th,
.woocommerce table.shop_table.order_details tfoot tr.ew-order-line:last-child td { padding-bottom: 18px; }
/* the customer's note is prose, not a figure */
.woocommerce table.shop_table.order_details tfoot tr.ew-order-note td { font-weight: 400; text-align: left; }
/* ── Total ───────────────────────────────────────────────────────── */
.woocommerce table.shop_table.order_details tfoot tr.ew-order-total th,
.woocommerce table.shop_table.order_details tfoot tr.ew-order-total td {
border-top: 1px solid var(--ewd-line);
padding: 20px 26px 22px;
vertical-align: middle;
}
.woocommerce table.shop_table.order_details tfoot tr.ew-order-total th {
color: #FFFFFF;
font-size: 16px;
line-height: 24px;
font-weight: 700;
letter-spacing: .01em;
text-align: left;
}
.woocommerce table.shop_table.order_details tfoot tr.ew-order-total td {
color: var(--ewc-red);
font-size: 22px;
line-height: 26px;
font-weight: 700;
text-align: right;
white-space: nowrap;
}
/* ── Actions ─────────────────────────────────────────────────────── */
.woocommerce table.shop_table.order_details tfoot tr.ew-order-actions th,
.woocommerce table.shop_table.order_details tfoot tr.ew-order-actions td {
border-top: 1px solid var(--ewd-line);
padding: 16px 26px 18px;
}
.woocommerce table.shop_table.order_details tfoot tr.ew-order-actions th {
color: var(--ewd-label);
font-weight: 400;
text-align: left;
}
.woocommerce table.shop_table.order_details tfoot tr.ew-order-actions td { text-align: right; }
/* Phone: the 26px gutter and the 22px total no longer fit beside a long
product name, and the price column needs room not to wrap mid-figure. */
@media (max-width: 600px) {
.woocommerce table.shop_table.order_details thead th,
.woocommerce table.shop_table.order_details tbody td,
.woocommerce table.shop_table.order_details tfoot th,
.woocommerce table.shop_table.order_details tfoot td { padding-left: 16px; padding-right: 16px; }
.woocommerce table.shop_table.order_details tfoot tr.ew-order-total th,
.woocommerce table.shop_table.order_details tfoot tr.ew-order-total td { padding: 18px 16px 20px; }
.woocommerce table.shop_table.order_details tfoot tr.ew-order-total td { font-size: 19px; line-height: 24px; }
.woocommerce table.shop_table.order_details .ew-item { gap: 10px; }
.woocommerce table.shop_table.order_details .ew-item-title { font-size: 14px; }
}
/* ── Single product ──────────────────────────────────────────────────
The one commerce surface that inverts. Shop, cart and checkout keep the
white working card; the PDP is a dark panel on the dark shell, per the
2026-09 design. The product photo stays on white inside it — the supplier
feed ships cut-outs shot on white, and a dark stage puts a hard grey box
around every one of them.
Tokens are local to this block rather than added to the :root set, because
nothing else on the site uses them and the white-surface tokens above are
still what the related-product tiles below the panel read. */
.single-product div.product {
--ewp-well: #0D1013; /* inset: qty field, odd spec rows */
--ewp-card: #161B22; /* the panel itself, and even spec rows */
--ewp-line: #21262D; /* panel border, dividers, stage edge */
--ewp-ctl: #30363D; /* form control border, one step up from --ewp-line */
--ewp-ink: #FFFFFF;
--ewp-body: #C9D1D9;
--ewp-muted: #8B949E; /* 5.62:1 on the panel — the floor for small text */
/* Red-on-dark was settled against the #000 shell, where --ewc-red #E13A44
measures 4.83:1. The panel is #161B22, not black, and the same red drops
to 4.03:1 there — fine for the price, which is 28px bold and judged as
large text at a 3:1 floor, but under AA for anything set small. The
category link is 13px, so it gets a red lifted to 4.76:1 instead.
Measured 2026-09-11; the mockup's own #B91C1C is 2.40:1 and was not
usable for either. */
--ewp-red-sm: #EE4B55;
display: grid;
grid-template-columns: 380px minmax(0, 1fr);
gap: 32px;
align-items: start;
background: var(--ewp-card);
border: 1.5px solid var(--ewp-line);
border-radius: var(--ewc-r-card);
box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
padding: 30px;
}
/* ── Image stage ─────────────────────────────────────────────────────
The stage is a white card on the dark panel and the thumbnails sit below
it on the panel's own ground, not inside the card with it. The photos are
white-background cut-outs, so the stage stays white while everything
around it is dark.
The white card is painted by a ::before rather than by the gallery's own
background, because the gallery keeps its padding: FlexSlider measures
this element to size every slide, so dropping the padding to let the
thumbnails run full width would re-measure the stage too. The ::before is
a grid item in the stage's row, pulled back out over the padding by a
negative margin — the card lands on the gallery's border box, the photo
keeps its 18px of white, and the strip below claws the same 18px back. */
.single-product div.product .woocommerce-product-gallery {
width: auto !important;
float: none;
margin: 0;
background: none;
border: 0;
padding: 18px;
}
.single-product div.product .woocommerce-product-gallery::before {
content: "";
grid-area: 1 / 1;
margin: -18px;
background: #FFFFFF;
border: 1px solid var(--ewp-line);
border-radius: 8px;
}
.single-product div.product .woocommerce-product-gallery img { border-radius: 4px; }
/* Woo's zoom trigger is a white disc with a black magnifier drawn in its own
::before / ::after. Only the colours change here — the glyph is positioned
against Woo's 36px box, so the disc keeps that size — and all of it has to
be written at Woo's own `div.images` weight or none of it lands. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
top: 14px;
right: 14px;
background: var(--ewp-card);
border: 1px solid var(--ewp-ctl);
box-shadow: none;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before { border-color: var(--ewp-body); }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after { background: var(--ewp-body); }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover { border-color: var(--ewc-red); }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover::before { border-color: var(--ewp-ink); }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover::after { background: var(--ewp-ink); }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:focus-visible {
outline: 2px solid var(--ewc-red);
outline-offset: 2px;
}
/* ── Gallery slider ──────────────────────────────────────────────────
The stage and the thumbnail strip are siblings of the gallery, so a
one-column grid gives each its own row — and gives the ::before above a
row to be the stage's white card in, rather than a box whose height
somebody has to measure. */
.single-product div.product .woocommerce-product-gallery {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.single-product div.product .woocommerce-product-gallery > .flex-viewport,
.single-product div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
grid-area: 1 / 1;
}
.woocommerce div.product div.images .flex-control-thumbs { grid-area: 2 / 1; }
/* Woo floats the thumbs four to a row at 25% each, so a fifth image drops to
a row of its own and the strip grows 86px taller. One row that scrolls
instead: no orphan, and two products with different image counts put their
Add to cart button at the same height. The tiles are a fixed 72px rather
than a 1fr share of the row: a two-image product gave each thumb half the
width of the stage, so one component read as two different ones depending
on how many photos the supplier shipped. 72px clears the 24px touch-target
floor and stays under the 100px source, so the tile never resamples above
1× density.
Woo ships these twice — a bare `.flex-control-thumbs` and a
`.woocommerce div.product div.images` copy — and it is the long one that
wins, so the strip and its items have to be written at that weight or the
overflow, margin and width below are silently dropped.
The gaps are the reference's, carried across as ratios of the stage width
rather than as its raw pixels: 10/340 between thumbs and 18/340 between
the stage and the strip. On the 380px stage that is 11px and 20px; the
same ratios against the 338px phone stage are further down.
The top margin has to clear the card first. The strip's row starts at the
photo's bottom edge, but the white card carries on 18px past it — the
padding the ::before reclaims — so a bare 20px margin leaves 2px of
daylight under the card and the thumbnails look stuck to it. */
.woocommerce div.product div.images .flex-control-thumbs {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 72px;
justify-content: start;
gap: 11px;
margin: calc(18px + 20px - 4px) -18px -4px;
padding: 4px;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: thin;
scrollbar-color: var(--ewc-border) transparent;
}
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; float: none; }
/* Woo dims the inactive thumbs to .5 and leaves it there. On the dark panel
that dimming turns a white cut-out to mud, so the tiles stay white at full
strength and the frame carries the state on its own.
The tile wears the stage card's frame — 1px var(--ewp-line), 8px radius,
white ground — so the strip and the card above it read as one component
rather than two that happen to sit together.
State rides an outline rather than a heavier border: an outline is painted
outside the box and takes no layout, so the selected tile measures exactly
what its neighbours do and nothing reflows on click. It starts transparent
so the colour has something to transition from. The 2px ring at 2px offset
reaches 4px past the tile, which is why the strip above carries 4px of
padding — the gallery clips its overflow, so a ring on the first tile is
cut off without it. */
.woocommerce div.product div.images .flex-control-thumbs li img {
box-sizing: border-box;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: contain;
background: #FFFFFF;
border: 1px solid var(--ewp-line);
border-radius: 8px;
opacity: 1;
outline: 2px solid transparent;
outline-offset: 2px;
transition: outline-color .15s ease;
}
.woocommerce div.product div.images .flex-control-thumbs li img:hover { outline-color: var(--ewc-red-dim); }
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
opacity: 1;
outline-color: var(--ewc-red);
}
@media (prefers-reduced-motion: reduce) {
.woocommerce div.product div.images .flex-control-thumbs li img { transition: none; }
}
/* ── Summary column ──────────────────────────────────────────────────── */
.single-product div.product .summary.entry-summary { float: none; width: auto; margin: 0; }
.single-product div.product h1.product_title {
color: var(--ewp-ink);
font-size: 24px;
line-height: 32px;
font-weight: 800;
margin: 0 0 12px;
}
/* The price is set in the heading ink rather than a red: on #161B22 white
measures 14.5:1 against the red's 4.5:1, and it keeps the red for the one
thing that should pull the eye on this column — the Add to cart button.
The highlight bullet dots still use --ewc-red. */
.single-product div.product p.price,
.single-product div.product span.price {
font-size: 28px;
line-height: 34px;
font-weight: 800;
color: var(--ewp-ink);
margin: 0 0 18px;
}
/* ── Highlight bullets ───────────────────────────────────────────────
ew_pdp_short_description_bullets() splits the feed's "A · B · C" short
description into this list; the paragraph fallback is styled too, for the
products whose short description carries no separator. */
.single-product div.product .woocommerce-product-details__short-description { margin: 0 0 22px; }
.single-product div.product .woocommerce-product-details__short-description p {
color: var(--ewp-body);
font-size: 15px;
line-height: 24px;
margin: 0 0 8px;
}
.single-product div.product ul.ew-pdp-highlights {
list-style: none;
margin: 0;
padding: 0;
}
.single-product div.product ul.ew-pdp-highlights li {
position: relative;
color: var(--ewp-body);
font-size: 15px;
line-height: 22px;
padding: 0 0 0 18px;
margin: 0 0 10px;
}
.single-product div.product ul.ew-pdp-highlights li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ewc-red);
}
/* ── Buy row ─────────────────────────────────────────────────────────── */
.single-product div.product form.cart {
display: flex;
gap: 14px;
align-items: stretch;
margin: 0 0 24px;
}
/* Woo clearfixes the form with ::before/::after carrying `content: " "`. In a
flex container those stop being a clearfix and become flex items — the
leading one rendered a 14px space that pushed the qty field out of line with
the title and the bullets above it. */
.single-product div.product form.cart::before,
.single-product div.product form.cart::after { content: none; }
.single-product div.product form.cart .quantity { margin: 0; }
.single-product div.product form.cart .quantity input.qty {
width: 74px;
height: 46px;
background: var(--ewp-well);
border: 1px solid var(--ewp-ctl);
border-radius: var(--ewc-r-ctl);
color: var(--ewp-ink);
font-size: 15px;
font-weight: 700;
text-align: center;
padding: 0 6px;
}
.single-product div.product form.cart .quantity input.qty:focus {
border-color: var(--ewc-red);
outline: 2px solid transparent; /* the border carries focus; keep a target for forced-colors */
}
.single-product div.product form.cart button.single_add_to_cart_button {
min-width: 230px;
height: 46px;
padding: 0 28px;
background: var(--ewc-red-a11y);
border: 1px solid var(--ewc-red-a11y);
border-radius: var(--ewc-r-ctl);
color: #FFFFFF;
font-size: 15px;
font-weight: 800;
line-height: 44px;
}
.single-product div.product form.cart button.single_add_to_cart_button:hover,
.single-product div.product form.cart button.single_add_to_cart_button:focus {
background: var(--ewc-red-dim);
border-color: var(--ewc-red-dim);
}
/* ── SKU / category meta ─────────────────────────────────────────────
One row, not Woo's stacked spans. The spec table below deliberately starts
at Manufacturer # so the SKU is not printed twice. */
.single-product div.product .product_meta {
display: flex;
flex-wrap: wrap;
gap: 8px 34px;
font-size: 12px;
line-height: 18px;
color: var(--ewp-muted);
border-top: 1px solid var(--ewp-line);
padding-top: 18px;
margin: 0;
}
.single-product div.product .product_meta > span {
display: inline-block;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.single-product div.product .product_meta .sku,
.single-product div.product .product_meta a {
font-weight: 400;
letter-spacing: normal;
text-transform: none;
font-size: 13px;
}
.single-product div.product .product_meta .sku { color: var(--ewp-body); }
/* The category is a link, so it keeps the underline on hover to stay
recognisable as one now that colour no longer distinguishes it. */
.single-product div.product .product_meta a {
color: var(--ewp-ink);
text-decoration: none;
}
.single-product div.product .product_meta a:hover,
.single-product div.product .product_meta a:focus-visible {
color: var(--ewp-ink);
text-decoration: underline;
}
/* ── Flat sections (replaces the tab strip) ──────────────────────────
ew_pdp_description() and ew_pdp_specs() print these in place of
woocommerce_output_product_data_tabs(), which is removed in functions.php.
Both span the panel's full width under the two columns. */
.single-product div.product .ew-pdp-section {
grid-column: 1 / -1;
border-top: 1.5px solid var(--ewp-line);
margin: 8px 0 0;
padding: 26px 0 0;
}
.single-product div.product .ew-pdp-section + .ew-pdp-section { margin-top: 26px; }
.single-product div.product .ew-pdp-section > h2 {
font-family: 'Avenir LT', sans-serif;
font-size: 15px;
line-height: 20px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ewp-ink);
margin: 0 0 16px;
}
.single-product div.product .ew-pdp-desc p,
.single-product div.product .ew-pdp-desc li,
.single-product div.product .ew-pdp-qa p,
.single-product div.product .ew-pdp-qa li {
color: var(--ewp-body);
font-size: 15px;
line-height: 25px;
}
.single-product div.product .ew-pdp-desc p,
.single-product div.product .ew-pdp-qa p { margin: 0 0 14px; }
.single-product div.product .ew-pdp-desc > *:last-child,
.single-product div.product .ew-pdp-qa > *:last-child { margin-bottom: 0; }
/* Each FAQ entry is one
: the question in , the answer after a
. The question takes the brighter heading ink so the pairs stay legible
as pairs down a long list — without it 20-odd questions and answers read as
one grey wall. */
.single-product div.product .ew-pdp-qa p strong {
color: var(--ewp-ink);
font-weight: 700;
}
/* ── Spec table ──────────────────────────────────────────────────────
Zebra by row, the mockup's two ground tones: the odd rows sit *into* the
panel, the even rows sit flush with it. A definition list, not a table —
there is one value per label and no column header to carry. */
.single-product div.product .ew-pdp-specs dl {
margin: 0;
display: grid;
grid-template-columns: 230px minmax(0, 1fr);
}
.single-product div.product .ew-pdp-specs dt,
.single-product div.product .ew-pdp-specs dd {
margin: 0;
padding: 11px 20px;
font-size: 13px;
line-height: 20px;
}
.single-product div.product .ew-pdp-specs dt {
color: var(--ewp-muted);
font-weight: 600;
border-radius: 4px 0 0 4px;
}
.single-product div.product .ew-pdp-specs dd {
color: var(--ewp-ink);
border-radius: 0 4px 4px 0;
overflow-wrap: anywhere;
}
.single-product div.product .ew-pdp-specs .ew-row-odd { background: var(--ewp-well); }
/* ── Related products ────────────────────────────────────────────────
The section is grid-column 1 / -1 inside the panel, so its heading takes
the panel's dark ground — measured rgb(16,16,16) on the tiles themselves,
which are already the dark shop-grid card and need no change here. */
.single-product section.related.products,
.single-product section.up-sells {
grid-column: 1 / -1;
background: none;
padding: 0;
box-shadow: none;
}
.single-product section.related > h2,
.single-product section.up-sells > h2 {
font-family: 'Avenir LT', sans-serif;
font-size: 15px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ewp-ink);
margin: 40px 0 18px;
}
/* ── Header actions (magnifier + mini-cart) ──────────────────────────
Both buttons are flex children of the header row, injected after the
contact block by ew_head_actions_html(). They used to be two separately
pinned position:fixed boxes; the row's parts now measure 1289px against
what was a 1020px content column, so pinning them to the viewport's
right edge left the whole header reading 203px off-centre at 1440.
Wrapping them also removes the collision where a non-empty cart total
grew leftward under the magnifier — the space between them is a flex
gap now, not a `right` offset derived from an empty cart's width.
Below 1100 the compact bar pins them again, on its own rules. */
.ew-head-actions {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
align-self: center;
}
.ew-cart-trigger {
display: flex;
align-items: center;
gap: 9px;
background: none;
border: 0;
padding: 0 4px;
cursor: pointer;
color: #FFFFFF;
font-family: 'Avenir LT', sans-serif;
}
.ew-cart-trigger__icon { position: relative; display: block; width: 26px; height: 26px; }
.ew-cart-trigger__icon svg { width: 26px; height: 26px; display: block; }
.ew-cart-trigger:hover { background-color: transparent ; color: #96272d!important;}
.ew-cart-trigger__count {
position: absolute;
top: -6px;
right: -8px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--ewc-red-a11y);
color: #FFFFFF;
font-size: 11px;
line-height: 18px;
font-weight: 700;
text-align: center;
box-sizing: border-box;
}
.ew-cart-trigger__count[hidden] { display: none; }
/* The trigger's `:hover` colour is `!important` and this is a bare span, so
the running total inherited it and tinted red on hover. Pinned white: the
hover affordance is the icon, and no price on the site reads red. */
.ew-cart-trigger__total {
font-size: 13px;
font-weight: 700;
letter-spacing: .01em;
color: #FFFFFF !important;
}
.ew-cart-scrim {
position: fixed;
inset: 0;
/* the theme's floating "Quick Quote" fab sits at 9999, so the drawer stack
has to clear it or the fab lands on top of the Checkout button */
z-index: 10000;
background: rgba(1, 3, 41, .58);
opacity: 0;
visibility: hidden;
transition: opacity .22s ease, visibility .22s ease;
}
.ew-cart-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 10001;
width: 380px;
max-width: 92vw;
background: #FFFFFF;
box-shadow: -14px 0 40px rgba(0, 0, 0, .42);
transform: translateX(100%);
transition: transform .26s cubic-bezier(.22, .61, .36, 1);
display: flex;
flex-direction: column;
font-family: 'Avenir LT', sans-serif;
}
.ew-cart-open .ew-cart-scrim { opacity: 1; visibility: visible; }
.ew-cart-open .ew-cart-drawer { transform: translateX(0); }
body.ew-cart-open { overflow: hidden; }
/* and get the fab out of the way while the drawer is open */
body.ew-cart-open .ew-quote-fab { opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.ew-cart-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 22px;
border-bottom: 1px solid #E2E8F0;
}
/* the extra class outranks the theme's global dark-page h2 colour */
.ew-cart-drawer .ew-cart-drawer__title {
font-family: 'Avenir LT', sans-serif;
font-size: 14px;
line-height: 20px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: #0F172A;
margin: 0;
padding: 0;
}
.ew-cart-drawer__close {
background: none;
border: 0;
font-size: 26px;
line-height: 1;
color: #94A3B8;
cursor: pointer;
padding: 0 2px;
}
.ew-cart-drawer__close:hover { background-color: transparent !important; color: #96272d!important;}
/* woocommerce_mini_cart() emits the item list, the total and the buttons as
three siblings, so the "footer" is styled in place rather than wrapped:
the list takes the slack and the last two blocks bleed to the edges. */
.ew-cart-drawer__body {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
padding: 6px 22px 0;
}
.ew-cart-drawer__body > ul.cart_list { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.ew-cart-drawer__body > p.woocommerce-mini-cart__empty-message { flex: 1 1 auto; }
/* Woo's mini-cart markup, restyled */
.ew-cart-drawer ul.woocommerce-mini-cart,
.ew-cart-drawer ul.cart_list {
list-style: none;
margin: 0;
padding: 0;
}
/* Woo nests the thumbnail inside the product link, so the row can't be a grid
over (image, name, quantity). Pin the image and pad the row around it. */
.ew-cart-drawer ul.cart_list li {
display: block;
position: relative;
padding: 16px 26px 16px 70px;
margin: 0;
border-bottom: 1px solid #E2E8F0;
min-height: 56px;
}
.ew-cart-drawer ul.cart_list li img {
position: absolute;
left: 0;
top: 16px;
width: 56px !important;
height: 56px !important;
object-fit: contain;
float: none !important;
margin: 0 !important;
border-radius: 6px;
background: #FFFFFF;
}
.ew-cart-drawer ul.cart_list li a:not(.remove) {
color: #0F172A;
font-size: 14.5px;
line-height: 20px;
font-weight: 700;
text-decoration: none;
padding: 0;
display: block;
}
.ew-cart-drawer ul.cart_list li a:not(.remove):hover { color: #E13A44; }
.ew-cart-drawer ul.cart_list li .quantity {
display: block;
font-size: 13px;
line-height: 19px;
color: #334155;
font-weight: 400;
}
.ew-cart-drawer ul.cart_list li .quantity .amount { font-weight: 700; color: #0F172A; }
.ew-cart-drawer ul.cart_list li a.remove {
position: absolute;
top: 16px;
right: 0;
left: auto;
width: 22px;
height: 22px;
display: grid;
place-items: center;
border-radius: 999px;
color: #94A3B8 !important;
font-size: 17px;
background: transparent;
}
.ew-cart-drawer ul.cart_list li a.remove:hover { background: rgba(225, 58, 68, .12); color: #C22F38 !important; }
.ew-cart-drawer p.woocommerce-mini-cart__empty-message {
color: #334155;
font-size: 15px;
text-align: center;
padding: 44px 0;
margin: 0;
}
.ew-cart-drawer .woocommerce-mini-cart__total {
display: flex;
align-items: baseline;
justify-content: space-between;
border: 0;
border-top: 1px solid #E2E8F0;
background: #EBF0F5;
margin: 0 -22px;
padding: 17px 22px 13px;
font-size: 14px;
color: #334155;
flex: 0 0 auto;
}
.ew-cart-drawer .woocommerce-mini-cart__total strong {
font-size: 13px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: #0F172A;
}
.ew-cart-drawer .woocommerce-mini-cart__total .amount {
font-size: 21px;
font-weight: 700;
color: var(--ewc-title);
}
.ew-cart-drawer .woocommerce-mini-cart__buttons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
background: #EBF0F5;
margin: 0 -22px;
padding: 0 22px 22px;
flex: 0 0 auto;
}
.ew-cart-drawer .woocommerce-mini-cart__buttons a.button {
display: block;
width: 100%;
text-align: center;
font-size: 13.5px;
padding: 12px 10px;
margin: 0;
box-sizing: border-box;
background: transparent;
border: 1px solid #CBD5E1;
color: #0F172A;
border-radius: 6px;
font-weight: 700;
text-decoration: none;
}
.ew-cart-drawer .woocommerce-mini-cart__buttons a.button:hover {
background: #0F172A;
border-color: #0F172A;
color: #FFFFFF;
}
.ew-cart-drawer .woocommerce-mini-cart__buttons a.checkout {
background: var(--ewc-red-a11y);
border-color: var(--ewc-red-a11y);
color: #FFFFFF;
}
.ew-cart-drawer .woocommerce-mini-cart__buttons a.checkout:hover { background: #C22F38; border-color: #C22F38; }
/* ── Account pages inherit the same card + control treatment ─────── */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
display: block;
padding: 11px 0;
color: var(--ewc-muted);
font-size: 15px;
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid var(--ewc-graphite);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--ewc-red); }
.woocommerce-account .woocommerce-MyAccount-content { color: var(--ewc-muted); }
.woocommerce-account form.login,
.woocommerce-account form.register {
background: var(--ewc-surface);
border: 0;
border-radius: var(--ewc-r-card);
box-shadow: var(--ewc-shadow);
padding: 26px 28px;
max-width: 460px;
margin: 0 auto;
}
.woocommerce-account form.login label,
.woocommerce-account form.register label { color: var(--ewc-body); }
.woocommerce-account form.login .woocommerce-form-login__rememberme span { text-transform: none; letter-spacing: normal; font-weight: 400; }
/* ── Responsive ──────────────────────────────────────────────────────
The 983px band and the two-column splits are desktop geometry; below
that everything collapses to a single column. */
@media (max-width: 1060px) {
.woocommerce main.site-main,
.woocommerce-page main.site-main { max-width: none; padding: 28px 24px 72px; }
.woocommerce-cart .woocommerce:has(form.woocommerce-cart-form) { grid-template-columns: minmax(0, 1fr); }
.woocommerce-cart form.woocommerce-cart-form,
.woocommerce-cart .cart-collaterals { grid-column: 1; }
/* Every named area has to appear in the collapsed template: an item whose
grid-area names an area the template doesn't define gets auto-placed into
implicit tracks, which quietly rebuilt a multi-column grid at phone size. */
.woocommerce-checkout form.checkout.woocommerce-checkout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
grid-template-areas:
"notices"
"details"
"reviewhead"
"review";
grid-template-rows: auto;
gap: 0;
}
.woocommerce-checkout form.checkout #order_review_heading { margin-top: 24px; }
.woocommerce-checkout form.checkout #order_review_heading { margin: 24px 0 12px; }
.single-product div.product { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 22px; }
/* Stacked, the stage would run the full column width and blow the photo up
past its 500px source; cap it and centre it instead. */
.single-product div.product .woocommerce-product-gallery { max-width: 420px; margin-inline: auto; }
/* The tile keeps its 72px here rather than stepping down. A smaller tile
was measured first and bought nothing: the phone strip carries 330px of
content at 412px wide and 278px at 360px, which takes four tiles and
then three at 72px — exactly what it takes at 64px. All a step-down did
was make the same strip look like a different one on a phone. Only the
gap and the top margin tighten, on the ratios the stage uses. */
.woocommerce div.product div.images .flex-control-thumbs {
gap: 10px;
margin: calc(18px + 18px - 4px) -18px -4px;
}
}
/* four across only holds while the band is full width; step down before the
cards get too narrow to carry a thumbnail and a wrapped category name */
@media (max-width: 1180px) {
.woocommerce ul.products,
.woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
.woocommerce ul.products,
.woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ew-cart-trigger__total { display: none; }
}
@media (max-width: 767px) {
.woocommerce main.site-main,
.woocommerce-page main.site-main { padding: 22px 18px 60px; }
/* PDP at phone width. The 230px label track leaves ~100px for a value like
"GSA2104-820-105", so the spec rows stack: label above value, one zebra
band spanning both. The buy row stacks for the same reason — a 230px
button beside a 74px field does not fit a 354px content box. */
.single-product div.product { padding: 18px; }
.single-product div.product h1.product_title { font-size: 21px; line-height: 28px; }
.single-product div.product p.price,
.single-product div.product span.price { font-size: 25px; line-height: 31px; }
.single-product div.product form.cart { flex-wrap: wrap; }
.single-product div.product form.cart .quantity input.qty { width: 100%; }
.single-product div.product form.cart .quantity { flex: 0 0 74px; }
.single-product div.product form.cart button.single_add_to_cart_button {
flex: 1 1 auto;
min-width: 0;
padding: 0 16px;
}
.single-product div.product .ew-pdp-specs dl { grid-template-columns: minmax(0, 1fr); }
.single-product div.product .ew-pdp-specs dt {
padding: 10px 14px 0;
border-radius: 4px 4px 0 0;
}
.single-product div.product .ew-pdp-specs dd {
padding: 2px 14px 10px;
border-radius: 0 0 4px 4px;
}
.woocommerce h1.woocommerce-products-header__title,
.woocommerce-page .page-header h1.entry-title { font-size: 21px; line-height: 29px; }
.woocommerce p.woocommerce-result-count { line-height: 22px; margin-bottom: 10px; }
.woocommerce form.woocommerce-ordering { float: none; display: block; }
.woocommerce form.woocommerce-ordering select { width: 100%; }
/* The field wrapper keeps its two even columns at phone size — a pair of
~141px name fields is comfortable, and collapsing to one column while the
other rows still span two only manufactures a content-sized implicit
column, which is what made the columns uneven. */
.woocommerce-checkout #customer_details { padding: 20px; }
/* the cart table stops being a table and becomes stacked rows — the desktop
column widths and table-layout:fixed have to go with it, or the fixed
tracks push the subtotal past the right edge */
.woocommerce-cart table.shop_table.cart { table-layout: auto; }
.woocommerce-cart table.shop_table.cart td.product-remove,
.woocommerce-cart table.shop_table.cart td.product-thumbnail,
.woocommerce-cart table.shop_table.cart td.product-price,
.woocommerce-cart table.shop_table.cart td.product-quantity,
.woocommerce-cart table.shop_table.cart td.product-subtotal {
width: auto;
padding-left: 0;
padding-right: 0;
}
.woocommerce-cart table.shop_table.cart thead { display: none; }
.woocommerce-cart table.shop_table.cart,
.woocommerce-cart table.shop_table.cart tbody,
.woocommerce-cart table.shop_table.cart tr { display: block; width: 100%; }
.woocommerce-cart table.shop_table.cart tr.cart_item {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) auto;
gap: 4px 14px;
padding: 16px;
border-top: 1px solid var(--ewc-rule);
position: relative;
}
.woocommerce-cart table.shop_table.cart tbody tr:first-child { border-top: 0; }
.woocommerce-cart table.shop_table.cart tr.cart_item td { border: 0; padding: 0; }
.woocommerce-cart td.product-thumbnail { grid-row: span 3; width: auto; }
.woocommerce-cart td.product-name { grid-column: 2 / 4; padding-right: 26px !important; }
.woocommerce-cart td.product-price { grid-column: 2; }
.woocommerce-cart td.product-quantity { grid-column: 2; width: auto; }
.woocommerce-cart td.product-subtotal { grid-column: 3; align-self: end; text-align: right; }
.woocommerce-cart td.product-remove { position: absolute; top: 12px; right: 10px; width: auto; }
.woocommerce-cart table.shop_table.cart td.actions { display: block; }
.woocommerce-cart table.shop_table.cart td.actions .coupon { flex-wrap: wrap; }
.woocommerce-cart table.shop_table.cart td.actions .coupon input.input-text { width: 100%; }
.woocommerce-cart table.shop_table.cart td.actions > button[name="update_cart"] { float: none; margin: 12px 0 0; width: 100%; }
.woocommerce-cart td.product-price::before { content: "Price "; color: #94A3B8; }
.woocommerce-cart td.product-subtotal::before { content: "Subtotal "; color: #94A3B8; font-weight: 400; }
}
@media (max-width: 560px) {
/* Two up, with the row gutter kept wide and the column gutter tightened:
the pair has to fit inside a 324px band on a 360px screen, and 12px
leaves each card 156px, which is the narrowest the amber CTA reads at. */
.woocommerce ul.products,
.woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
.ew-cart-drawer { width: 100%; }
}
/* ── Responsive repairs ──────────────────────────────────────────────
Two Woo defaults that overflow a phone viewport. */
/* The pagination is a nowrap row of page links, and the cables category
runs to three figures of pages, so it reached ~490px on a 360px screen. */
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce nav.woocommerce-pagination ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
max-width: 100%;
border: 0;
padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
/* Woo's zoom overlay is the full-resolution file laid over the gallery —
2048px wide here. It has to be clipped by the frame or it widens the
whole page on small screens. */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .woocommerce-product-gallery__wrapper,
.single-product div.product .woocommerce-product-gallery__image { overflow: hidden; }
/* Product copy comes from the supplier feed and contains long unbroken part
numbers; one description heading measured 347px of content in a 264px
column. `anywhere` (not `break-word`) is what reduces min-content width. */
.woocommerce div.product .ew-pdp-section,
.woocommerce div.product .ew-pdp-section *,
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-product-details__short-description *,
.woocommerce div.product .product_title { overflow-wrap: anywhere; }
/* ── Product search ──────────────────────────────────────────────────
The magnifier is the first child of .ew-head-actions, ahead of the cart.
------------------------------------------------------------------ */
.ew-search-trigger {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 0;
padding: 0;
color: #FFFFFF;
cursor: pointer;
transition: color .16s ease;
}
.ew-search-trigger svg { width: 23px; height: 23px; display: block; }
/* reset.css paints every bare