/* ============================================================ Freaura — CART (WooCommerce restyle) Wireframe: page header → 2-column (item cards left, sticky Order Summary right). Restyles Woo's cart table + totals; qty update / remove / checkout stay functional. ============================================================ */ /* safety net: the coupon-error notice (or any future overflow) must never force page-level horizontal scroll on the cart. */ body.woocommerce-cart { overflow-x: hidden; } .woocommerce-cart .site-content { background: var(--cream); } /* hide the default "Cart" entry title (we render our own page header) */ .woocommerce-cart .entry-title, .woocommerce-cart .ast-archive-description { display: none; } /* Astra caps .ast-container at 1240px, so the cart never reaches the wireframe's 1400px. Break the cart's container out to full width and let the inner .woocommerce grid own the 1400px max-width + centering. */ .woocommerce-cart #content .ast-container { max-width: 100%; padding-left: 0; padding-right: 0; } /* #1 — Astra gives #primary a 60px top margin; remove it so the page heading sits tight under the header menu (wireframe has no extra gap there). */ .woocommerce-cart #primary, .woocommerce-cart #main.site-main, .woocommerce-cart .content-area.primary { padding-top: 0 !important; margin-top: 0 !important; } /* The .woocommerce wrapper holds: page-header, notices, cart form, totals. Header + notices span BOTH columns; only the form (left) + totals (right) form the 2-column cart. Top padding removed so the header (which carries its own bottom divider) sits tight under the nav, then the cart grid follows. */ .woocommerce-cart .woocommerce { display: grid; grid-template-columns: 2fr 1fr; gap: 0 80px; max-width: 1400px; margin: 0 auto; padding: 0 50px 100px; align-items: start; } /* #1 — page-header spacing matches the shared .frx-page-header (About page): 56px above the breadcrumb, 72px below the title (divider). The 5rem bottom margin creates the gap to the products/summary section below. */ .woocommerce-cart .frx-cart-header { grid-column: 1 / -1; margin: 0 0 5rem; padding: 56px 50px 72px; } .woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; } /* gap is now on the header's margin-bottom, so the sections start flush */ .woocommerce-cart form.woocommerce-cart-form, .woocommerce-cart .cart-collaterals { margin-top: 0; } .woocommerce-cart form.woocommerce-cart-form { grid-column: 1; } .woocommerce-cart .cart-collaterals { grid-column: 2; width: 100%; margin: 0; float: none; } .woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; } /* ---- item table → card rows ---- */ .woocommerce-cart table.shop_table { border: none; margin: 0; background: none; } .woocommerce-cart table.shop_table thead { display: none; } /* wireframe has no column headers */ .woocommerce-cart table.shop_table tr.cart_item { display: grid; grid-template-columns: 140px 1fr auto; gap: 30px; padding: 30px 0; border-bottom: 0.5px solid var(--line); align-items: center; } .woocommerce-cart table.shop_table tr.cart_item td { border: none; padding: 0; background: none; } /* #3 — image cell: wireframe .cart-item-img (140px wide, 3:4 aspect, image fills & covers, cream-deep bg). Force the img to fill the cell regardless of Astra's default width constraints. */ .woocommerce-cart td.product-thumbnail { grid-column: 1; width: 140px; aspect-ratio: 3/4; overflow: hidden; background: var(--cream-deep); } .woocommerce-cart td.product-thumbnail a { display: block; width: 100%; height: 100%; } .woocommerce-cart td.product-thumbnail img, .woocommerce-js .woocommerce-cart td.product-thumbnail img { display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; min-width: 100%; aspect-ratio: 3/4; object-fit: cover; } /* remove — wireframe renders a "Remove" text link next to the qty stepper. Place the remove cell in the info area (same grid cell as name/qty), and swap Woo's "×" glyph for the word "Remove" (underlined, uppercase). */ .woocommerce-cart td.product-remove { grid-area: info; align-self: end; justify-self: start; width: auto !important; min-width: 0; /* #3 — sit ~20px after the ~102px qty stepper (wireframe .cart-item-actions gap:20px), instead of the previous 134px. */ margin-top: 20px; margin-left: 122px; z-index: 2; } .woocommerce-cart td.product-remove a.remove { /* hide the × text glyph reliably: zero-size + transparent + no shadow, so only our ::after "Remove" label shows */ font-size: 0 !important; color: transparent !important; text-shadow: none !important; text-decoration: none; line-height: 36px; display: inline-block; width: auto !important; height: auto !important; background: none !important; border: none !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; white-space: nowrap; } /* kill Astra's circular ::before ring around the × */ .woocommerce-cart td.product-remove a.remove::before { content: none !important; border: none !important; border-radius: 0 !important; background: none !important; display: none !important; } .woocommerce-cart td.product-remove a.remove::after { content: 'Remove'; font-size: 11px; font-family: var(--font-sans); letter-spacing: 0.24em; text-transform: uppercase; text-decoration: underline; color: var(--ink); font-weight: 500; /* #3 — darker + slightly bolder */ white-space: nowrap; } .woocommerce-cart td.product-remove a.remove:hover::after { color: var(--burgundy, #7a2e2e); } /* name + meta cell */ .woocommerce-cart td.product-name { font-family: var(--font-display); font-size: 22px; color: var(--ink); line-height: 1.2; } .woocommerce-cart td.product-name a { color: var(--ink); text-decoration: none; } .woocommerce-cart td.product-name a:hover { color: var(--brass); } /* #4 — collection word accent: italic emerald (wireframe .cart-item-name .it) */ .woocommerce-cart td.product-name .it { font-style: italic; color: var(--emerald); } /* #5 — meta line "Color · Size X · Fabric" (wireframe .cart-item-meta: serif italic 14px). Our filter outputs one row with an empty
. */ .woocommerce-cart td.product-name .variation, .woocommerce-cart td.product-name dl.variation { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--ink-soft); margin: 6px 0 0; } /* hide the "Details:" label (all dt variants) — show only the value */ .woocommerce-cart td.product-name .variation dt, .woocommerce-cart td.product-name dl.variation dt, .woocommerce-cart td.product-name .variation .variation-Details:first-child { display: none !important; } .woocommerce-cart td.product-name .variation dd, .woocommerce-cart td.product-name .variation dd p { display: inline; margin: 0; padding: 0; font-weight: 400; font-family: var(--font-serif); font-style: italic; } /* price column hidden (shown in subtotal on the right) */ .woocommerce-cart td.product-price { display: none; } /* quantity stepper */ .woocommerce-cart td.product-quantity { justify-self: start; } .woocommerce-cart td.product-quantity .quantity { display: inline-flex; align-items: center; border: 0.5px solid var(--line); background: transparent; } /* wireframe cart .qty: button 32x36 (14px), input 30px (12px) — compact. #6 — force the number to sit centred (kill Astra's default input padding). */ .woocommerce-cart td.product-quantity .quantity input.qty { width: 34px; height: 36px; background: transparent; border: none; text-align: center !important; padding: 0 !important; margin: 0 !important; font-family: var(--font-sans); font-size: 12px; color: var(--ink); outline: none; -moz-appearance: textfield; line-height: 36px; box-sizing: border-box; } .woocommerce-cart td.product-quantity .quantity input.qty::-webkit-outer-spin-button, .woocommerce-cart td.product-quantity .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Astra styles .minus/.plus as bordered buttons — that inner border, combined with the .quantity wrapper border, produced the "two overlapped boxes". Strip the button borders/background so only the single wrapper border remains, and make them fill the 36px height. */ .woocommerce-cart td.product-quantity .quantity button, .woocommerce-cart td.product-quantity .quantity .qty-btn, .woocommerce-cart td.product-quantity .quantity a.minus, .woocommerce-cart td.product-quantity .quantity a.plus { width: 32px !important; height: 36px !important; min-height: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; cursor: pointer; color: var(--ink) !important; font-size: 14px; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; margin: 0 !important; line-height: 1; text-decoration: none; } .woocommerce-cart td.product-quantity .quantity a.minus:hover, .woocommerce-cart td.product-quantity .quantity a.plus:hover, .woocommerce-cart td.product-quantity .quantity button:hover { color: var(--brass) !important; background: transparent !important; } /* #7 — subtotal (price): wireframe .cart-item-price is Inter 16px with NO weight → inherits body 300 (light). WooCommerce forces bold, so override. */ .woocommerce-cart td.product-subtotal, .woocommerce-cart td.product-subtotal .amount, .woocommerce-cart td.product-subtotal bdi, .woocommerce-js .woocommerce-cart td.product-subtotal .amount { font-family: var(--font-sans) !important; font-size: 16px !important; font-weight: 300 !important; font-style: normal; color: var(--ink); text-align: right; letter-spacing: 0.02em; } .woocommerce-cart td.product-subtotal { grid-column: 3; } /* place quantity + remove under the name: use a flex row by re-ordering cells. Since grid places td in DOM order (remove, thumb, name, price, qty, subtotal), we explicitly position the key cells. */ .woocommerce-cart tr.cart_item { grid-template-areas: "thumb info subtotal"; } .woocommerce-cart td.product-thumbnail { grid-area: thumb; } .woocommerce-cart td.product-name { grid-area: info; } .woocommerce-cart td.product-subtotal { grid-area: subtotal; align-self: center; } .woocommerce-cart td.product-quantity { grid-area: info; align-self: end; margin-top: 14px; } /* #8 — coupon + update row aligned to the START of the product table (no left indent). The actions cell spans the grid, its contents start at column 1. */ .woocommerce-cart .cart_item + tr td.actions, .woocommerce-cart table.shop_table td.actions { display: flex; flex-wrap: wrap; row-gap: 12px; gap: 14px; align-items: center; padding: 24px 0 0; border: none; grid-column: 1 / -1; justify-content: flex-start; width: 100%; margin: 0; text-align: left; } .woocommerce-cart td.actions .coupon { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0 !important; padding: 0; flex: 0 0 auto; float: none !important; } .woocommerce-cart td.actions .coupon input#coupon_code { background: transparent; border: none; border-bottom: 0.5px solid var(--line); border-radius: 0; padding: 12px 0; font-family: var(--font-sans); font-size: 13px; color: var(--ink); outline: none; width: 180px; margin: 0; } /* Coupon error notice (shown when an invalid code is submitted) — WooCommerce injects a

INSIDE the .coupon flex row, which squeezed the input + button out of alignment. ONLY when that notice is present, let the coupon wrap so the notice drops onto its own full-width line below the input + button. Scoping to :has() keeps the normal (no-error) desktop/tablet row on ONE line, so the Update Cart button stays aligned. */ .woocommerce-cart td.actions .coupon .coupon-error-notice { order: 99; flex: 1 1 100%; width: 100%; margin: 8px 0 0; padding: 0; font-family: var(--font-sans); font-size: 12px; line-height: 1.4; color: var(--burgundy, #7a2e2e); text-align: left; } /* Coupon (Apply) + Update Cart buttons: identical size/height. */ .woocommerce-cart td.actions .button, .woocommerce-cart td.actions button { background: transparent; border: 0.5px solid var(--ink); color: var(--ink); font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; border-radius: 0; padding: 14px 32px; min-width: 180px; cursor: pointer; transition: all 0.3s; white-space: nowrap; box-sizing: border-box; /* use inline-flex + fixed min-height so BOTH action buttons (Apply Coupon and Update Cart) are guaranteed the exact same height at every breakpoint — Astra's base .button line-height was bleeding in at tablet widths (768px) and making Update Cart taller than Apply Coupon. */ display: inline-flex; align-items: center; justify-content: center; min-height: 44px; line-height: 1; /* letter-spacing adds trailing space after the last letter, which shifts the centred label right; text-indent re-centres it. */ text-indent: 0.3em; /* Never let flex-shrink compress a button below its text width. Without this, any width where the row's content (coupon + both buttons) is slightly too wide for the left column — which can happen at ANY desktop width just above 1024px, not only the 922–1024px tablet band — would shrink/squeeze the buttons instead of wrapping, and the overflow would render UNDER the sticky Order Summary card (hidden, not just clipped). Paired with flex-wrap:wrap on .actions above: if a button doesn't fit on the current line it now wraps to its own line instead of overflowing. */ flex-shrink: 0; } /* #4 — push the Update Cart button to the far RIGHT of the actions row (WooCommerce sets a small margin-left, so override with !important) and pin its padding to match the Apply Coupon button. */ .woocommerce-cart td.actions button[name="update_cart"], .woocommerce-cart td.actions .button[name="update_cart"] { margin-left: auto !important; margin-right: 0 !important; padding: 14px 32px; /* When an invalid-coupon error shows, .coupon grows taller (input+button row + the error line below). .actions uses align-items:center, so Update Cart — a flex sibling of .coupon, not a child of it — was vertical-centering across that TALLER box and dropping to a floating mid-height position instead of staying level with Apply Coupon. Pin it to the top of the row so it always lines up with Apply Coupon regardless of the coupon block's height. */ align-self: flex-start; } .woocommerce-cart td.actions .button:hover, .woocommerce-cart td.actions button:hover { background: var(--ink); color: var(--cream); } /* ---- Order Summary card (cart totals) — wireframe .cart-summary ---- */ .woocommerce-cart .cart-collaterals .cart_totals, .woocommerce-cart .cart_totals { background: var(--ivory) !important; padding: 40px !important; border: 0.5px solid var(--line); position: sticky; top: 100px; width: 100%; } /* hide Woo's default "Cart totals" h2 — we inject our own styled heading */ .woocommerce-cart .cart_totals h2 { display: none; } /* #10 — Order Summary heading: Playfair italic 28px, HEAVIER weight (600). #5 — LEFT-aligned (wireframe .cart-summary h3). */ .woocommerce-cart .frx-cart-summary-title { font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 28px; margin: 0 0 28px; padding-bottom: 22px; border-bottom: 0.5px solid var(--line); text-transform: none; color: var(--ink); line-height: 1.1; text-align: left; } .woocommerce-cart .frx-cart-summary-title .frx-accent { color: var(--emerald); font-style: italic; font-weight: 600; } /* #6 + #7 — summary rows: Inter (wireframe --sans) 13px, LEFT label / RIGHT value, and NO underline/border on any row (kill Astra's default row borders). */ .woocommerce-cart .cart_totals table, .woocommerce-cart .cart_totals table tr, .woocommerce-cart .cart_totals table tbody, .woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td { border: none !important; margin: 0; background: none; } .woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td { padding: 10px 0; font-family: var(--font-sans) !important; font-size: 15px; color: var(--ink-soft); font-weight: 400; text-align: left; } .woocommerce-cart .cart_totals table td { text-align: right; color: var(--ink); } /* #7 — force Inter (wireframe --sans) on EVERY nested element inside the summary table (shipping method labels/list, "Calculate shipping" link, shipping destination note, and the shipping-calculator form fields), so none inherit a serif. The Total row keeps Playfair (overridden below). */ .woocommerce-cart .cart_totals .shop_table th, .woocommerce-cart .cart_totals .shop_table td, .woocommerce-cart .cart_totals .shop_table label, .woocommerce-cart .cart_totals .shop_table a, .woocommerce-cart .cart_totals .shop_table li, .woocommerce-cart .cart_totals .shop_table p, .woocommerce-cart .cart_totals .shop_table span, .woocommerce-cart .cart_totals .shop_table input, .woocommerce-cart .cart_totals .shop_table select, .woocommerce-cart .cart_totals .shop_table .woocommerce-shipping-methods, .woocommerce-cart .cart_totals .shop_table .woocommerce-shipping-destination { font-family: var(--font-sans) !important; } .woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td { font-family: var(--font-display) !important; font-size: 22px; color: var(--ink); padding-top: 22px; } /* divider above Total: put the border on the ROW (flex container) not the th/td, otherwise the 16px column-gap between the cells splits the line into two segments. One border on the tr = one continuous line. */ .woocommerce-cart .cart_totals .order-total { border-top: 0.5px solid var(--line) !important; margin-top: 16px; } .woocommerce-cart .cart_totals .order-total .amount { font-family: var(--font-display) !important; } /* ---- Shipping calculator form (Calculate shipping → Country/County/City/ Postcode + Update) — FULL WIDTH at every breakpoint. Woo nests this form inside a table cell, so it was confined to a narrow sub-column. Break it out to span the whole summary card and style the fields to the brand (underline inputs, like the coupon/contact fields). Applies desktop + tablet + mobile. */ .woocommerce-cart .cart_totals .shipping-calculator-form { display: block; width: 100%; margin: 12px 0 0; } /* the calculator's parent form/cell must not confine it — force full width so the fields span the whole summary card (was capped at the shipping ). */ .woocommerce-cart .cart_totals form.woocommerce-shipping-calculator { display: block; width: 100%; } /* ---- Totals table → block layout at ALL widths ---- The summary is just label/value pairs. Rendering it as a real confined the shipping row's cell (holding the calculator) to ~half the card, so the fields were never full width at desktop. Convert the table to block flow: each row is a flex line (label left / value right); the shipping row stacks its label above full-width content. This lets the calculator span the full card at every resolution and keeps the other rows looking identical. */ .woocommerce-cart .cart_totals table.shop_table, .woocommerce-cart .cart_totals table.shop_table tbody { display: block; width: 100%; } .woocommerce-cart .cart_totals table.shop_table tr { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%; } .woocommerce-cart .cart_totals table.shop_table tr > th { flex: 0 0 auto; text-align: left; white-space: nowrap; } .woocommerce-cart .cart_totals table.shop_table tr > td { flex: 1 1 auto; text-align: right; } /* Shipment row — keep the SAME parallel layout as every other summary row (label left, content right), matching the existing site. The "Shipment" label stays in the left column; the shipping-methods block (Free shipping / Next Day radios, address, Change address) sits in the right column beside it. Radios still stack vertically WITHIN that right column. This is the default flex row behaviour — we only need to right-align the td content and let the radio list stack. Applies at all breakpoints. */ .woocommerce-cart .cart_totals tr.shipping > th, .woocommerce-cart .cart_totals tr.woocommerce-shipping-totals > th { flex: 0 0 auto; text-align: left; white-space: nowrap; align-self: start; } .woocommerce-cart .cart_totals tr.shipping > td, .woocommerce-cart .cart_totals tr.woocommerce-shipping-totals > td { flex: 1 1 auto; text-align: right; min-width: 0; } /* shipping methods list — matches the existing site: each option on a SINGLE row (radio + label, no wrapping), block sits in the right column. Option text is 12px so "Next Day Delivery: £4.72" fits one line in the narrow column. */ .woocommerce-cart .cart_totals ul#shipping_method, .woocommerce-cart .cart_totals ul.woocommerce-shipping-methods { margin: 0; padding: 0; list-style: none; text-align: right; } .woocommerce-cart .cart_totals ul#shipping_method li, .woocommerce-cart .cart_totals ul.woocommerce-shipping-methods li { margin: 0 0 6px; text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 0; white-space: nowrap; } .woocommerce-cart .cart_totals ul#shipping_method li label, .woocommerce-cart .cart_totals ul.woocommerce-shipping-methods li label { font-size: 12px; white-space: nowrap; margin: 0; padding: 0; line-height: 1.3; order: 2; /* label AFTER the radio regardless of DOM order */ /* reset an inherited negative text-indent that was pulling the label text ~22px to the left, over the top of the radio button (visual overlap). */ text-indent: 0 !important; } /* also neutralise text-indent on the whole shipping methods list + its rows so nothing inherits the negative indent. */ .woocommerce-cart .cart_totals ul#shipping_method, .woocommerce-cart .cart_totals ul.woocommerce-shipping-methods, .woocommerce-cart .cart_totals ul#shipping_method li, .woocommerce-cart .cart_totals ul.woocommerce-shipping-methods li { text-indent: 0; } /* radio: fixed size + explicit right margin (not just flex gap) so it can never visually collide with the label text. order:1 keeps it before the label. */ .woocommerce-cart .cart_totals ul#shipping_method li input[type="radio"], .woocommerce-cart .cart_totals ul.woocommerce-shipping-methods li input[type="radio"] { flex: 0 0 auto; width: 14px; height: 14px; margin: 0 8px 0 0 !important; position: static; order: 1; vertical-align: middle; } /* the "will be updated…" note + destination line: right-aligned to match the options block above them. */ .woocommerce-cart .cart_totals tr.shipping td .woocommerce-shipping-destination, .woocommerce-cart .cart_totals tr.shipping td p { text-align: right; } /* Calculate shipping / Change address toggle — right-aligned UNDER the options, as on the existing site. */ .woocommerce-cart .cart_totals tr.shipping td .shipping-calculator, .woocommerce-cart .cart_totals tr.shipping td > .shipping-calculator > a { text-align: right; } /* Calculate-shipping form (Country / County / Town / Postcode) is a full address form — it can't work inside the ~120px right column. Break it out to span the FULL card-content width by pulling it back under the "Shipment" label column. The label is white-space:nowrap "Shipment" (~92px) + the 16px row gap, so a -108px left offset lands it flush with the card's left content edge; the width adds those 108px back so it also reaches the right edge. */ .woocommerce-cart .cart_totals tr.shipping td .woocommerce-shipping-calculator, .woocommerce-cart .cart_totals tr.shipping td .shipping-calculator { margin-left: -109px; width: calc(100% + 109px); max-width: calc(100% + 109px); box-sizing: border-box; } /* the toggle link ("Calculate shipping" / "Change address") stays right-aligned under the options; only the EXPANDED form fields break to full-width, left- aligned so the address inputs read normally. */ .woocommerce-cart .cart_totals tr.shipping td .shipping-calculator > a { margin-left: 0; display: block; text-align: right; } .woocommerce-cart .cart_totals tr.shipping td .shipping-calculator-form { text-align: left; } .woocommerce-cart .cart_totals tr.shipping td .shipping-calculator-form .form-row, .woocommerce-cart .cart_totals tr.shipping td .shipping-calculator-form label { text-align: left; } .woocommerce-cart .shipping-calculator-form .form-row { display: block; width: 100%; float: none; clear: both; margin: 0 0 16px; padding: 0; } .woocommerce-cart .shipping-calculator-form .form-row label { display: block; font-family: var(--font-sans) !important; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; } .woocommerce-cart .shipping-calculator-form .form-row .optional, .woocommerce-cart .shipping-calculator-form .form-row .required { letter-spacing: 0; } /* text inputs + native select → full width, brand underline style */ .woocommerce-cart .shipping-calculator-form input.input-text, .woocommerce-cart .shipping-calculator-form select { width: 100%; max-width: 100%; box-sizing: border-box; background: transparent; border: none; border-bottom: 0.5px solid var(--line); border-radius: 0; padding: 10px 0; margin: 0; font-family: var(--font-sans) !important; font-size: 14px; color: var(--ink); outline: none; box-shadow: none; } .woocommerce-cart .shipping-calculator-form input.input-text:focus, .woocommerce-cart .shipping-calculator-form select:focus { border-color: var(--brass); } /* Select2 (styled country dropdown) → full width too */ .woocommerce-cart .shipping-calculator-form .select2-container { width: 100% !important; } .woocommerce-cart .shipping-calculator-form .select2-container .select2-selection--single { height: auto; background: transparent; border: none; border-bottom: 0.5px solid var(--line); border-radius: 0; padding: 10px 0; } .woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__rendered { padding: 0; line-height: 1.4; font-family: var(--font-sans); font-size: 14px; color: var(--ink); } .woocommerce-cart .shipping-calculator-form .select2-container .select2-selection__arrow { top: 50%; transform: translateY(-50%); } /* Update button — full width, matches the card's action buttons */ .woocommerce-cart .shipping-calculator-form p:last-of-type, .woocommerce-cart .shipping-calculator-form button[name="calc_shipping"] { width: 100%; margin: 4px 0 0; } .woocommerce-cart .shipping-calculator-form button[name="calc_shipping"] { display: block; width: 100%; box-sizing: border-box; background: transparent; border: 0.5px solid var(--ink); color: var(--ink); font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; border-radius: 0; padding: 14px 20px; cursor: pointer; transition: all 0.3s; } .woocommerce-cart .shipping-calculator-form button[name="calc_shipping"]:hover { background: var(--ink); color: var(--cream); } /* checkout button = wireframe .btn (with → arrow) */ .woocommerce-cart .wc-proceed-to-checkout { padding: 24px 0 0; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--midnight); color: var(--cream); font-family: var(--font-sans); font-size: 11px; line-height: 1; letter-spacing: 0.28em; text-transform: uppercase; border-radius: 0; padding: 18px 24px; text-decoration: none; transition: background 0.4s; border: 0.5px solid var(--midnight); white-space: nowrap; } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after { content: '\2192'; font-size: 16px; line-height: 1; transition: transform 0.5s cubic-bezier(.2,.7,.2,1); } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--emerald); border-color: var(--emerald); } .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover::after { transform: translateX(6px); } /* #12 + #8 — "Continue Shopping →" link (wireframe .btn-link): centered, DARK bottom-border underline, with a LONGER underline (extra horizontal padding so the line extends past the text). */ .woocommerce-cart .frx-continue-shopping { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px auto 0; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 0 24px 8px; border-bottom: 0.5px solid var(--ink); transition: color 0.3s, border-color 0.3s, gap 0.4s; /* #8 — underline stretches the full width of the summary card */ width: 100%; width: -webkit-fill-available; width: stretch; box-sizing: border-box; } .woocommerce-cart .frx-continue-shopping:hover { color: var(--brass); border-color: var(--brass); gap: 12px; } /* #5 — the Order Summary title + rows stay LEFT-aligned; only the injected continue-shopping link + promo are centered (they sit after the totals). */ .woocommerce-cart .frx-continue-shopping, .woocommerce-cart .frx-cart-promo { text-align: center; } .woocommerce-cart .cart_totals .wc-proceed-to-checkout { text-align: center; } /* signature-box promo (wireframe .cart-promo) — injected element */ .woocommerce-cart .frx-cart-promo { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--brass); text-align: center; margin: 18px 0 0; padding-top: 18px; border-top: 0.5px dashed var(--line-light, rgba(0,0,0,0.08)); } /* empty cart state */ .woocommerce-cart .cart-empty { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--ink-soft); } .woocommerce-cart .wc-empty-cart-message + .return-to-shop .button { display: inline-flex; background: var(--midnight); color: var(--cream); font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; border-radius: 0; padding: 18px 44px; text-decoration: none; } /* Responsive */ /* ============================================================ RESPONSIVE — tablet / mobile (wireframe: .cart → single column, summary un-sticks, tighter padding). Desktop layout untouched. ============================================================ */ /* Tablet — narrower 2-column, tighter gap + side padding. */ @media (max-width: 1024px) { .woocommerce-cart .woocommerce { padding: 0 30px 80px; } /* trimmed padding-bottom (was 60px) so the title divider sits closer to the products across the whole tablet range. */ .woocommerce-cart .frx-cart-header { padding: 48px 30px 28px; } .woocommerce-cart .woocommerce { grid-template-columns: 1.7fr 1fr; gap: 0 40px; } } /* Tablet band 922–1024px — 2-column layout is active but WooCommerce's smallscreen mode is OFF (it's ≤921), so the desktop coupon/update row keeps its fixed 180px input + 180px-min buttons. Inside the narrowed 1.7fr left column that overflowed → horizontal scroll (white strip on the right). Let the coupon input flex and shrink the button min-width so the actions row fits. */ @media (min-width: 922px) and (max-width: 1024px) { /* flex-wrap on .actions + flex-shrink:0 on the buttons are now base rules (apply at every width, not just this band) — see the shared comments above. This band only needs the EXTRA narrowing: let the coupon input shrink so the row has a better chance of fitting on one line at all. */ .woocommerce-cart td.actions .coupon { flex: 1 1 auto; min-width: 0; } .woocommerce-cart td.actions .coupon input#coupon_code { width: auto; flex: 1 1 auto; min-width: 0; } .woocommerce-cart td.actions .button, .woocommerce-cart td.actions button { min-width: 0; padding: 14px 20px; } /* safety: nothing in the cart may exceed its column */ .woocommerce-cart form.woocommerce-cart-form, .woocommerce-cart table.shop_table, .woocommerce-cart table.shop_table tr.cart_item { max-width: 100%; box-sizing: border-box; } } /* Mobile / small tablet (≤921px) — stack into one column AND apply the full stacked item-card layout. NOTE: WooCommerce's smallscreen grid stylesheet is loaded with media="max-width:921px", so its responsive-table quirks (text-align:right on cells, hidden
labels, re-shown per-unit price) affect this ENTIRE range — the item-card + summary-label fixes must live here, not only ≤600px, or the 600–921px band renders with Woo's broken defaults. */ @media (max-width: 921px) { /* WooCommerce's responsive-table mode adds "Product:" / "Subtotal:" pseudo labels (::before from data-title) on mobile — hide them; our grid layout already lays the cells out cleanly. */ .woocommerce-cart table.shop_table_responsive tr td::before, .woocommerce-cart table.shop_table tr.cart_item td::before { display: none !important; content: none !important; } /* stack form + summary into one column, tighter header gap. header margin-bottom removed (redundant with the grid row-gap) and padding-bottom trimmed so the title divider sits closer to the products. */ .woocommerce-cart .frx-cart-header { padding: 40px 24px 20px; margin-bottom: 0; } .woocommerce-cart .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0 24px 70px; } .woocommerce-cart form.woocommerce-cart-form, .woocommerce-cart .cart-collaterals { grid-column: 1; margin-top: 0; } /* summary drops its sticky position when stacked */ .woocommerce-cart .cart-collaterals .cart_totals, .woocommerce-cart .cart_totals { position: static; top: auto; } /* keep the form/table from exceeding the viewport (no horizontal scroll) */ .woocommerce-cart form.woocommerce-cart-form, .woocommerce-cart table.shop_table, .woocommerce-cart table.shop_table tbody, .woocommerce-cart table.shop_table tr.cart_item { width: 100%; max-width: 100%; box-sizing: border-box; } /* ITEM ROW — taller image (left) with all text fitted beside it: name / meta / price stacked, then qty + Remove parallel on one row. */ .woocommerce-cart table.shop_table tr.cart_item { grid-template-columns: 130px minmax(0, 1fr); gap: 2px 24px; padding: 24px 0; grid-template-areas: "thumb name" "thumb meta" "thumb price" "thumb actions"; align-items: start; } .woocommerce-cart td.product-thumbnail { width: 130px; height: 173px; aspect-ratio: auto; grid-area: thumb; grid-row: 1 / -1; align-self: start; } /* hide the duplicate per-unit price cell Woo re-shows in responsive mode */ .woocommerce-cart table.shop_table_responsive tr td.product-price { display: none !important; } /* NAME — wraps cleanly, sits in its own row */ .woocommerce-cart td.product-name { grid-area: name; grid-column: 2; font-size: 20px; align-self: start; margin-bottom: 0; overflow-wrap: anywhere; word-break: break-word; } .woocommerce-cart td.product-name .variation, .woocommerce-cart td.product-name dl.variation { margin-top: 4px !important; } /* LEFT-align every cell (beat Woo's `text-align:right!important`, spec 0,2,3 — match it with 0,3,3 via the extra .shop_table_responsive class). */ .woocommerce-cart table.shop_table_responsive tr td.product-name, .woocommerce-cart table.shop_table_responsive tr td.product-name a, .woocommerce-cart table.shop_table_responsive tr td.product-name .variation, .woocommerce-cart table.shop_table_responsive tr td.product-name dl.variation, .woocommerce-cart table.shop_table_responsive tr td.product-subtotal, .woocommerce-cart table.shop_table_responsive tr td.product-quantity { text-align: left !important; } /* PRICE / subtotal — close under the meta line */ .woocommerce-cart td.product-subtotal { grid-area: price; grid-column: 2; justify-self: start; align-self: start; margin: 8px 0 0; } .woocommerce-cart td.product-subtotal, .woocommerce-cart td.product-subtotal .amount, .woocommerce-cart td.product-subtotal bdi { font-size: 16px !important; } /* QTY + REMOVE — parallel on one row, sitting BESIDE each other (qty then a short gap then Remove), not flung to opposite column edges. Both share the "actions" area; Remove starts after the ~100px qty stepper. */ .woocommerce-cart td.product-quantity { grid-area: actions; grid-column: 2; justify-self: start; align-self: center; margin: 14px 0 0; } .woocommerce-cart td.product-remove { grid-area: actions; grid-column: 2; justify-self: start; align-self: center; margin: 14px 0 0 118px !important; } /* coupon + update row — keep the desktop single-row behaviour: coupon input + Apply Coupon on the left, Update Cart pushed to the right (PARALLEL, not stacked full-width). The input flexes to fill remaining space; buttons keep their natural width. Wraps only if there's truly no room. */ .woocommerce-cart .cart_item + tr td.actions, .woocommerce-cart table.shop_table td.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: flex-start; } .woocommerce-cart td.actions .coupon { display: flex; flex: 1 1 auto; flex-wrap: nowrap; gap: 14px; align-items: center; width: auto; min-width: 0; } .woocommerce-cart td.actions .coupon input#coupon_code { flex: 1 1 auto; width: auto; min-width: 0; } .woocommerce-cart td.actions .coupon .button, .woocommerce-cart td.actions .coupon button { flex: 0 0 auto; width: auto; min-width: 0; white-space: nowrap; } .woocommerce-cart td.actions button[name="update_cart"], .woocommerce-cart td.actions .button[name="update_cart"] { margin-left: auto !important; margin-right: 0 !important; width: auto; min-width: 0; white-space: nowrap; } /* ORDER SUMMARY — restore the labels Woo hides, lay out label-left / value-right on one line. */ .woocommerce-cart .cart-collaterals .cart_totals, .woocommerce-cart .cart_totals { padding: 36px 32px !important; } .woocommerce-cart .cart_totals table.shop_table_responsive tbody th, .woocommerce-cart .cart_totals table tbody th { display: table-cell !important; } .woocommerce-cart .cart_totals table tr { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%; } .woocommerce-cart .cart_totals table tr th { text-align: left; flex: 0 0 auto; white-space: nowrap; } .woocommerce-cart .cart_totals table tr td { text-align: right !important; flex: 1 1 auto; } /* Shipment row stays PARALLEL like the other summary rows (label left, methods right) — do NOT wrap the to a full-width row below the label. The right column holds the radios (stacked within it) + address + change. */ .woocommerce-cart .cart_totals table tr.shipping { flex-wrap: nowrap; } .woocommerce-cart .cart_totals table tr.shipping td { flex: 1 1 auto; width: auto; text-align: right; } } /* Phones (≤600px) — inherit the ≤921px stacked layout; just scale down the image, fonts and padding for small screens. */ @media (max-width: 600px) { /* tighten the space between the page-title/header and the product list: the header's padding-bottom + margin-bottom + the grid row-gap were stacking to ~84px. Trim the padding-bottom, drop the redundant margin-bottom (the grid gap already spaces it), and shrink the grid gap. */ .woocommerce-cart .frx-cart-header { padding: 32px 20px 16px; margin-bottom: 0; } .woocommerce-cart .woocommerce { padding: 0 20px 60px; gap: 16px; } /* Shipment options at narrow widths: shrink the option label + the "Shipment" label a touch so "Next Day Delivery: £4.72" stays on a SINGLE row beside the label without overflowing the summary card (needs ~277px at 14px; the card is only ~232px wide at 320px). Tighter row gap frees a few more px. */ .woocommerce-cart .cart_totals tr.shipping > th { font-size: 12px; } .woocommerce-cart .cart_totals tr.shipping { gap: 10px; } .woocommerce-cart .cart_totals ul.woocommerce-shipping-methods li label, .woocommerce-cart .cart_totals ul#shipping_method li label { font-size: 11px; } .woocommerce-cart .cart_totals tr.shipping td .woocommerce-shipping-destination { font-size: 11px; } /* full-width break-out: the label column measures ~109px (92px label + 16px gap), so pull the calculator back 109px to reach the card's left edge and add it to the width so it also reaches the right edge. */ .woocommerce-cart .cart_totals tr.shipping td .woocommerce-shipping-calculator, .woocommerce-cart .cart_totals tr.shipping td .shipping-calculator { margin-left: -109px; width: calc(100% + 109px); max-width: calc(100% + 109px); } .woocommerce-cart table.shop_table tr.cart_item { grid-template-columns: 110px minmax(0, 1fr); gap: 2px 18px; } .woocommerce-cart td.product-thumbnail { width: 110px; height: 147px; } .woocommerce-cart td.product-name { font-size: 18px; } .woocommerce-cart td.product-subtotal, .woocommerce-cart td.product-subtotal .amount, .woocommerce-cart td.product-subtotal bdi { font-size: 15px !important; } /* match the base rule's specificity (.cart-collaterals .cart_totals) so the reduced mobile padding actually wins — otherwise the 40px base padding overrides this on phones and the summary card stays cramped. */ .woocommerce-cart .cart-collaterals .cart_totals, .woocommerce-cart .cart_totals { padding: 32px 24px !important; } /* Proceed to Checkout — give the label breathing room from the button edges and dial back the letter-spacing so it isn't crammed on small screens. */ .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { padding: 18px 28px; letter-spacing: 0.2em; } /* Continue Shopping — keep it on a SINGLE line on mobile (was wrapping to two lines). Tighter letter-spacing + no-wrap; trim side padding so the label plus arrow fit within the card width. */ .woocommerce-cart .frx-continue-shopping { white-space: nowrap; letter-spacing: 0.2em; padding: 0 8px 8px; } } /* Small phones (≤600px) — the coupon input + Apply Coupon can't fit on one row, which squeezed the button so its "APPLY COUPON" label overflowed outside it (visible from ~475px down). Stack them: input full-width on top, Apply full-width below, then Update Cart full-width. Gives every button room for its text. (Raised from ≤420px so the whole small-phone band stacks cleanly.) */ @media (max-width: 600px) { .woocommerce-cart .cart_item + tr td.actions, .woocommerce-cart table.shop_table td.actions { flex-direction: column; align-items: stretch; } /* stack input + Apply button vertically; use a ROW-only gap so the flex column-gap doesn't subtract 14px from the wrapped button's width (that made Apply Coupon ~14px narrower than Update Cart). */ .woocommerce-cart td.actions .coupon { flex: 1 1 100%; width: 100%; flex-wrap: wrap; gap: 14px 0; } .woocommerce-cart td.actions .coupon input#coupon_code { flex: 1 1 100%; width: 100%; margin: 0 !important; } /* Apply Coupon: full-width and flush to the row edges so it matches the Update Cart button exactly (WooCommerce also adds a stray 5px left margin). */ .woocommerce-cart td.actions .coupon .button, .woocommerce-cart td.actions .coupon button { flex: 1 1 100%; width: 100%; margin: 0 !important; } .woocommerce-cart td.actions button[name="update_cart"], .woocommerce-cart td.actions .button[name="update_cart"] { margin-left: 0 !important; width: 100%; } /* invalid-coupon error notice: own full-width line below the button */ .woocommerce-cart td.actions .coupon { flex-wrap: wrap; } .woocommerce-cart td.actions .coupon .coupon-error-notice { flex: 1 1 100%; width: 100%; } /* item row: slightly smaller image on the tightest screens */ .woocommerce-cart table.shop_table tr.cart_item { grid-template-columns: 96px minmax(0, 1fr); gap: 2px 14px; } .woocommerce-cart td.product-thumbnail { width: 96px; height: 128px; } /* tighten the gap between the price and the qty stepper */ .woocommerce-cart td.product-subtotal { margin-top: 4px !important; } .woocommerce-cart td.product-quantity { margin-top: 2px !important; grid-area: actions; align-self: start; } /* Remove link: on the narrowest phones the info column can't hold the qty stepper AND a 108px-offset "Remove" beside it — the label ran off the right edge. Give the actions area two stacked rows so Remove sits on its OWN line directly under the qty stepper and always stays inside the layout. */ .woocommerce-cart table.shop_table tr.cart_item { grid-template-areas: "thumb name" "thumb meta" "thumb price" "thumb qty" "thumb remove"; } .woocommerce-cart td.product-quantity { grid-area: qty; } .woocommerce-cart td.product-remove { grid-area: remove; margin: 8px 0 0 0 !important; justify-self: start !important; align-self: start !important; } } /* Cart mobile overflow fix — the stacked .woocommerce grid used a single `1fr` track, which resolves to `minmax(auto, 1fr)`: the `auto` minimum grew to the cart TABLE's min-content (~357px) and forced the whole column (header, form, table) wider than a 320px viewport → horizontal scroll. Using `minmax(0,1fr)` (below, in the ≤921px block) lets the track shrink to the viewport and the table wraps inside it — matching how the About page title stays in-bounds. */ /* invalid-coupon input: red underline (placed last + high specificity so it beats Astra's base input border-bottom shorthand). */ .woocommerce-cart td.actions .coupon input#coupon_code.has-error, .woocommerce-cart td.actions .coupon input.input-text.has-error { border-bottom: 0.5px solid var(--burgundy, #7a2e2e) !important; }