carries no colspan and CSS cannot add one.
⚠️ The previous fix set th/td to `display:block` while the table was still a real
table. A non-table-cell child of a table-row gets wrapped in an ANONYMOUS table
cell, which lands in COLUMN 1 — so `width:100%` resolved against the ~109px label
column and the methods were crushed into it, breaking "Omniva pakiautomaat"
mid-word. Same anonymous-cell trap as td.actions below; measured live 2026-08-09.
The totals table is flex now (above), so a plain block row simply stacks label
over methods at full width. Before → after: list 85px → 312px, label 105px → 57px.
Match the row by the method list it CONTAINS (:has) as well as by class, because
on this store the row's label came from a plugin and class-only selectors missed it. */
.cart_totals table tr:has(#shipping_method),
.cart_totals table tr:has(.woocommerce-shipping-methods),
.cart_totals table tr.shipping,
.cart_totals table tr.woocommerce-shipping-totals { display: block; }
/* The class-based selectors carry the same .woocommerce-cart .cart-collaterals
prefix as the block above, so they still outrank the generic th/td rule there
(0,3,3) if the :has() variants ever stop matching. */
.cart_totals table tr:has(#shipping_method) th,
.cart_totals table tr:has(.woocommerce-shipping-methods) th,
.woocommerce-cart .cart-collaterals .cart_totals table tr.shipping th,
.woocommerce-cart .cart-collaterals .cart_totals table tr.woocommerce-shipping-totals th {
margin-bottom: 6px; text-align: left;
text-transform: uppercase; letter-spacing: .03em; font-size: 12px; color: var(--slate-500);
}
.cart_totals table tr:has(#shipping_method) td,
.cart_totals table tr:has(.woocommerce-shipping-methods) td,
.woocommerce-cart .cart-collaterals .cart_totals table tr.shipping td,
.woocommerce-cart .cart-collaterals .cart_totals table tr.woocommerce-shipping-totals td { text-align: left; }
.wc-proceed-to-checkout a.checkout-button { background: var(--green) !important; color: #fff !important; border-radius: var(--radius) !important; min-height: 54px; display: flex; align-items: center; justify-content: center; font-weight: 700 !important; font-size: 16px; box-shadow: var(--shadow-green); }
.wc-proceed-to-checkout a.checkout-button:hover { background: var(--green-dark) !important; }
/* coupon / buttons */
.woocommerce .button, .woocommerce button.button, .woocommerce input.button {
background: var(--slate-dark); color: #fff; border-radius: var(--radius); min-height: 48px; padding: 0 22px; font-weight: 600; border: 0; transition: background .2s, transform .2s;
}
.woocommerce .button:hover { background: #0f172a; transform: translateY(-1px); }
.woocommerce .button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background: var(--green); }
.woocommerce .button.alt:hover { background: var(--green-dark); }
.woocommerce .button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce .woocommerce-form-login__submit:focus-visible,
.woocommerce .woocommerce-form-register__submit:focus-visible {
outline: 2px solid var(--green);
outline-offset: 2px;
}
/* Cart actions row — DESKTOP/TABLET. Three groups on one clean line:
[← Jätka ostlemist] …auto gap… [coupon input + Rakenda] [Uuenda].
The continue-shopping link (added via the woocommerce_cart_actions hook) is
pulled to the FAR LEFT with order:-1 + margin-right:auto so it anchors the row
and fills what used to be dead space; coupon + update group on the right. The
coupon input picks up the same 44px bordered/rounded treatment as the rest of
the cart. The <=768px block below overrides this to full-width stacking. */
/* ⚠️ CART OVERFLOW ON PHONES — load-bearing. Measured at a real 375px viewport.
`div.woocommerce` is a grid, and its single track was sizing to 433px inside a
339px box: a grid item's automatic minimum (min-width:auto) refuses to shrink
below the item's content, so the track — and everything in it — overflowed.
`body{overflow-x:clip}` then CUT the excess with no way to scroll to it, so the
line price sat 75px off-screen and "Mine maksma" was 57px off-screen.
Before -> after on a live 375px cart: track 433->339, table 434->339,
price right edge 450->355, button right edge 432->338, overflowing elements 0.
NB the earlier audit blamed the coupon row; measured, that row is only 171px.
Do not remove these min-width:0 declarations. */
@media (max-width: 768px) {
.woocommerce-cart .woocommerce > * { min-width: 0; }
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart table.shop_table,
.woocommerce-cart .cart-collaterals,
.woocommerce-cart .cart_totals { min-width: 0; max-width: 100%; }
/* Stacked mobile rows do not need auto column sizing, and fixed layout stops a
long product name from re-inflating the table. */
.woocommerce-cart table.shop_table { table-layout: fixed; width: 100%; }
}
/* ⚠️⚠️ NEVER give this cell a non-table display. LOAD-BEARING — measured live
2026-08-09 after the owner reported the cart "appi kui kole".
The cell is `
`. It used to be `display:flex`,
which strips its table-cell box — and a colspan is only honoured on a REAL table
cell. The browser then wraps the flex box in an ANONYMOUS table cell that lands
in COLUMN 1, so the whole coupon group (continue link + input + two buttons,
~422px of content) was measured as the minimum width of the tiny remove-× column.
Fallout, all measured at 1450px: remove column 429px instead of 48px, thumbnail
column starved to 38px (image 14px), product names crushed to 152px, and the
table 995px wide inside a 995px track only because it had already eaten the
whole row — at 1280px it overflowed its grid track by 157px.
Fix: stay a table-cell (colspan works → cell spans all six columns, 993px) and
arrange the three groups with floats, which a table-cell contains on its own.
Floats, not flex, because flex here is exactly what broke it.
Source order is coupon → update → continue, so the continue link can only reach
the far left if the other two are floated out of the line first; verified
geometry: Jätka 43→216, Uuenda 425→602, kupong 614→1000. */
.woocommerce-cart table.cart td.actions {
display: table-cell; text-align: left; padding: 18px;
}
.woocommerce-cart table.cart td.actions::after { content: ""; display: block; clear: both; }
.woocommerce-cart table.cart td.actions .ostu-continue-shopping {
float: left; margin: 0;
background: #fff !important; color: var(--slate) !important;
border: 1px solid var(--border) !important; border-radius: var(--radius) !important;
min-height: 48px; padding: 0 18px; font-weight: 600; box-shadow: none !important;
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.woocommerce-cart table.cart td.actions .ostu-continue-shopping:hover {
border-color: var(--green) !important; color: var(--green) !important;
background: var(--muted) !important; transform: none;
}
/* "Uuenda korv" (update cart) button — WooCommerce renders it grey + disabled
(aria-disabled) until a qty changes, which read as unreadable grey-on-grey.
Make it a clean, legible secondary button in both states. */
.woocommerce-cart table.cart td.actions .button[name="update_cart"],
.woocommerce-cart table.cart .button[name="update_cart"],
.woocommerce button[name="update_cart"] {
background: #fff !important; color: var(--slate-dark) !important;
border: 1px solid var(--border) !important; border-radius: var(--radius) !important;
font-weight: 600; min-height: 48px; padding: 0 20px; opacity: 1 !important; box-shadow: none !important;
white-space: nowrap;
}
/* Update + coupon sit together at the far RIGHT; the continue link anchors the left. */
.woocommerce-cart table.cart td.actions .button[name="update_cart"] { float: right; margin: 0 12px 0 0; }
.woocommerce button[name="update_cart"]:not([disabled]):not([aria-disabled="true"]):hover {
border-color: var(--green) !important; color: var(--green) !important; background: var(--muted) !important;
}
.woocommerce button[name="update_cart"][disabled],
.woocommerce button[name="update_cart"][aria-disabled="true"] {
color: var(--slate-500) !important; background: var(--muted) !important; cursor: default;
}
/* Coupon group: input + "Rakenda" stay side by side ALWAYS (flex-wrap:nowrap).
Floated right (the cell is a table-cell, not a flex row — see above), so it needs
a real width instead of a flex basis; on a narrow desktop it simply wraps to its
own line rather than squeezing the input. */
.woocommerce-cart table.cart td.actions .coupon {
float: right; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0;
width: 380px; max-width: 45%; min-width: 0;
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
height: 48px; min-height: 48px; flex: 1 1 auto; width: auto; min-width: 0; max-width: 100%;
border: 1px solid var(--border); border-radius: var(--radius);
padding: 0 14px; font: inherit; background: #fff; color: var(--slate-dark);
}
.woocommerce-cart table.cart td.actions .coupon .input-text:focus {
outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green);
}
.woocommerce-cart table.cart td.actions .coupon .button,
.woocommerce-cart table.cart td.actions button[name="apply_coupon"] {
background: #fff !important; color: var(--slate-dark) !important;
border: 1px solid var(--border) !important; border-radius: var(--radius) !important;
min-height: 48px; padding: 0 20px; font-weight: 600; box-shadow: none !important;
flex: 0 0 auto; white-space: nowrap;
}
.woocommerce-cart table.cart td.actions .coupon .button:hover,
.woocommerce-cart table.cart td.actions button[name="apply_coupon"]:hover {
border-color: var(--green) !important; color: var(--green) !important; background: var(--muted) !important; transform: none;
}
/* ---- Empty cart. Raw WooCommerce put a grey notice with its OWN blue icon
(#1e85be, a colour that exists nowhere else in this shop) above a dark grey
button. Every visitor who just clicks the cart icon lands here, so it gets a
real designed state: theme cart icon, a heading, one line, and WooCommerce's
own return button promoted to the green primary — no second CTA stacked on it. */
.woocommerce-cart .ostu-cart-empty {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 10px; padding: 44px 22px 6px;
}
.woocommerce-cart .ostu-cart-empty__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 84px; height: 84px; border-radius: 50%;
background: var(--muted); color: var(--green);
}
.woocommerce-cart .ostu-cart-empty__icon svg { width: 40px; height: 40px; }
.woocommerce-cart .ostu-cart-empty__title { font-size: clamp(20px, 3vw, 26px); margin: 0; }
.woocommerce-cart .ostu-cart-empty__lead {
margin: 0; color: var(--slate-500); max-width: 46ch; line-height: 1.6;
}
/* The default notice is now redundant next to the heading above it — keep it for
screen readers (it carries role="status") but take it out of the visual flow. */
.woocommerce-cart .cart-empty.woocommerce-info {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.woocommerce-cart .return-to-shop { text-align: center; margin: 22px 0 60px; }
.woocommerce-cart .return-to-shop .button {
background: var(--green) !important; color: #fff !important;
min-height: 52px; display: inline-flex; align-items: center; justify-content: center;
padding: 0 30px; font-weight: 700; border-radius: var(--radius);
box-shadow: var(--shadow-green);
}
.woocommerce-cart .return-to-shop .button:hover { background: var(--green-dark) !important; }
/* ==========================================================================
Checkout
========================================================================== */
/* Back to the cart. The checkout had no link to the cart anywhere in , so a
shopper who wanted to change a quantity had to use the browser back button. */
.ostu-edit-cart {
display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
margin: -4px 0 10px; color: var(--slate-500); font-size: 14px; font-weight: 600;
text-decoration: none;
}
.ostu-edit-cart:hover { color: var(--green); text-decoration: underline; }
.woocommerce-checkout .col2-set, .woocommerce-checkout #customer_details { width: 100%; min-width: 0; }
/* Desktop: billing (1fr) on the left, order review + payment on the right. The
owner reported the payment column felt "kõik nii kokku surutud" (squished) —
the Montonio bank grid was cramped in a 440px column. Widen the right column
to ~500px and open the column gap so the payment area breathes.
Stacks to one column under 900px. */
@media (min-width: 900px) {
.woocommerce-checkout form.checkout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(480px, 520px);
grid-template-rows: auto 1fr; /* row 2 stretches → sticky has travel room */
gap: 14px 48px;
align-items: start;
}
/* Billing spans both rows of the left column; review heading + panel fill the
right column. The 1fr second row lets the panel stick as billing scrolls. */
.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / 3; min-width: 0; }
.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0; }
.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; align-self: start; }
}
@media (min-width: 900px) and (min-height: 980px) {
.woocommerce-checkout #order_review { position: sticky; top: 96px; }
}
/* Roomier layout on wide screens so the bank/parcel grid never feels packed. */
@media (min-width: 1180px) {
.woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr) 520px; gap: 16px 56px; }
}
.woocommerce-checkout #order_review_heading { font-size: 20px; color: var(--slate-dark); margin: 0 0 14px; }
/* Customer details: billing + (optional) shipping stack in their own blocks so
"Saada teisele aadressile?" and "Märkused tellimuse kohta" never overlap. */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { float: none; width: 100%; max-width: none; padding: 0; }
.woocommerce-checkout #customer_details .col-2 { margin-top: 8px; }
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields { display: block; width: 100%; clear: both; margin-bottom: 18px; }
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 { font-size: 18px; margin: 0 0 14px; color: var(--slate-dark); }
/* "Saada teisele aadressile?" toggle owns its own line above the notes block. */
.woocommerce-shipping-fields h3#ship-to-different-address {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 12px;
clear: both;
}
.woocommerce-shipping-fields h3#ship-to-different-address label { font-size: 18px; font-weight: 700; margin: 0; }
.woocommerce-shipping-fields h3#ship-to-different-address input { width: auto; min-height: 0; margin: 0; }
/* Form rows: label above input with breathing room; no overlap when fields
wrap. Core uses .form-row-first / .form-row-last floats — make them a clean
2-column grid that collapses on narrow screens. */
.woocommerce form .form-row { display: flex; flex-direction: column; margin: 0 0 16px; padding: 0; }
.woocommerce form .form-row label { display: block; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper { display: block; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; float: none; margin-right: 0; }
@media (min-width: 560px) {
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 16px;
}
/* Full-width rows span both columns; name pairs share the two columns. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-wide,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row-wide { grid-column: 1 / -1; }
}
/* Order-review panel (sticky positioning is set in the >=900px grid rule above,
so it never sticks while stacked on mobile). Generous padding keeps the
totals + payment grid from feeling compressed. */
.woocommerce-checkout #order_review { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 26px 28px; box-shadow: var(--shadow-card); }
@media (min-width: 900px) { .woocommerce-checkout #order_review { padding: 28px 30px 30px; } }
.woocommerce form .form-row label { font-weight: 600; color: var(--slate); margin-bottom: 6px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .select2-container .select2-selection {
border: 1px solid var(--border) !important; border-radius: var(--radius) !important; min-height: 48px; padding: 12px 14px; font: inherit; background: #fff; width: 100%;
}
/* The rule above uses `border: … !important`, which also beats WooCommerce's own
`.form-row.woocommerce-invalid input.input-text { border-color: var(--wc-red) }`
(core ships that WITHOUT !important). So a field the shopper failed to fill in
looked exactly like a field they had filled in correctly. Checkout scrolls to the
FIRST error, so that one gets found — but the second and third, and every error on
the login and registration forms, were invisible.
Added at matching weight rather than removing the !important above, which exists
to hold the field shape against plugin CSS. Nothing here touches the payment area. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-container .select2-selection {
border-color: var(--danger) !important;
}
.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated textarea,
.woocommerce form .form-row.woocommerce-validated select {
border-color: var(--green) !important;
}
.woocommerce form .form-row .select2-container .select2-selection--single { display:flex; align-items:center; }
.woocommerce form .form-row .select2-selection__rendered { line-height:1.4; padding:0; color:var(--slate-dark); }
.woocommerce form .form-row .select2-selection__arrow { top:0; bottom:0; height:auto; right:8px; display:flex; align-items:center; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row .select2-container--focus .select2-selection,
.woocommerce form .form-row .select2-container--open .select2-selection { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green) !important; }
/* Order-review table — tidy rows, totals stand out. */
.woocommerce-checkout #order_review .shop_table { border: 0; border-radius: 0; box-shadow: none; background: transparent; margin: 0; overflow: visible; }
.woocommerce-checkout #order_review .shop_table th,
.woocommerce-checkout #order_review .shop_table td {
padding: 12px 0; border-top: 1px solid var(--border); background: transparent;
text-transform: none; letter-spacing: 0; font-size: 14px; vertical-align: top;
}
.woocommerce-checkout #order_review .shop_table thead th { color: var(--slate-500); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; border-top: 0; padding-top: 0; }
.woocommerce-checkout #order_review .cart_item td.product-name { color: var(--slate); font-weight: 600; }
.woocommerce-checkout #order_review .cart_item td.product-total { text-align: right; color: var(--slate-dark); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.woocommerce-checkout #order_review .product-quantity { color: var(--slate-500); font-weight: 600; }
.woocommerce-checkout #order_review tfoot th { color: var(--slate-600); font-weight: 600; text-align: left; }
.woocommerce-checkout #order_review tfoot td { text-align: right; color: var(--slate-dark); font-variant-numeric: tabular-nums; }
.woocommerce-checkout #order_review tfoot .order-total th,
.woocommerce-checkout #order_review tfoot .order-total td { font-size: 17px; font-weight: 700; color: var(--slate-dark); }
/* Checkout shipping methods (Omniva / DPD / Tasuta transport) — was: pushed to the RIGHT
of the totals column (inherits tfoot text-align:right) with the carrier logo wrapping
BELOW the label, which looked unbalanced. Stack the label above the methods at FULL
width and give each carrier a clean, LEFT-aligned selectable CARD row (radio + logo +
name on the left, price right) — matching the payment rows below for one consistent,
premium checkout. Matched by both the WC class AND :has(#shipping_method) so a
plugin-renamed shipping row is still caught. */
.woocommerce-checkout #order_review tr.woocommerce-shipping-totals th,
.woocommerce-checkout #order_review tr:has(#shipping_method) th {
display: block; width: 100%; text-align: left; padding: 4px 0 8px; color: var(--slate-600); font-weight: 600;
}
.woocommerce-checkout #order_review tr.woocommerce-shipping-totals td,
.woocommerce-checkout #order_review tr:has(#shipping_method) td {
display: block; width: 100%; text-align: left; padding: 0 0 6px;
}
.woocommerce-checkout #order_review ul#shipping_method li {
gap: 10px; padding: 12px 14px; margin: 0 0 8px;
background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.woocommerce-checkout #order_review ul#shipping_method li:last-child { margin-bottom: 0; }
.woocommerce-checkout #order_review ul#shipping_method li label { flex: 1 1 auto; align-items: center; gap: 10px; }
.woocommerce-checkout #order_review ul#shipping_method li label .amount { margin-left: auto; white-space: nowrap; }
.woocommerce-checkout #order_review ul#shipping_method img { max-height: 24px; flex: 0 0 auto; }
.woocommerce-checkout #order_review ul#shipping_method li:has(input:checked) {
border-color: var(--green); background: rgba(5, 150, 105, .04); box-shadow: 0 0 0 2px rgba(5, 150, 105, .22);
}
/* Payment methods — radio + label rows, Montonio logos sit inline and tidy.
Roomy padding + clear gaps so the bank/parcel picker never feels squished. */
.woocommerce-checkout #payment,
.woocommerce-checkout .payment_methods { border: 0; padding: 0; margin: 22px 0 0; background: transparent; list-style: none; }
.woocommerce-checkout .wc_payment_method { display:flex; flex-wrap:wrap; align-items:center; column-gap:12px; row-gap:10px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; margin-bottom:12px; list-style:none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.woocommerce-checkout .wc_payment_method:last-child { margin-bottom: 0; }
.woocommerce-checkout .wc_payment_method:hover { border-color: rgba(5, 150, 105, .4); box-shadow: 0 4px 14px -8px rgba(15, 23, 42, .25); }
.woocommerce-checkout .wc_payment_method > label { flex:1 1 auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0; font-weight:600; color:var(--slate-dark); cursor:pointer; }
.woocommerce-checkout .wc_payment_method > input[type="radio"] { flex: 0 0 auto; width: auto; min-height: 0; margin: 0; accent-color: var(--green); }
.woocommerce-checkout .wc_payment_method label img { max-height:26px; width:auto; vertical-align:middle; margin-left:auto; flex:0 0 auto; }
/* Checked = clean green ring + faint green wash so the active method is obvious. */
.woocommerce-checkout .wc_payment_method:has(input:checked) { border-color: var(--green); background: rgba(5, 150, 105, .04); box-shadow: 0 0 0 2px rgba(5, 150, 105, .25); }
#place_order { background: var(--green) !important; min-height: 54px; width: 100%; margin-top: 18px; font-size: 16px !important; font-weight: 700 !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-green); }
#place_order:hover { background: var(--green-dark) !important; }
/* payment box — Montonio bank/parcel picker renders here; keep it un-clipped
(no overflow / transform / clip — those break the Montonio iframe layout). */
.woocommerce-checkout .payment_box { background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin: 8px 0 4px; font-size: 14px; color: var(--slate); }
.woocommerce-checkout .payment_box p:last-child { margin-bottom: 0; }
/* checkout coupon / login panels */
.woocommerce-checkout .checkout_coupon, .woocommerce-checkout .woocommerce-form-login { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-card); margin-bottom: 20px; }
/* thank-you / order received */
.woocommerce-thankyou-order-received { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); color: var(--slate-dark); margin-bottom: 20px; }
.woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin: 0 0 28px; padding: 20px 24px; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.woocommerce-order-overview li { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--slate-500); border: 0; padding: 0; }
.woocommerce-order-overview li strong { font-family: var(--font-display); font-size: 18px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--slate-dark); }
/* ==========================================================================
Account
========================================================================== */
/* WooCommerce functional pages (cart/checkout/account) render full-width via
page.php .woo-page — no 760px prose measure, no bullet lists bleeding in. */
.woo-page { max-width: none; width: 100%; }
.woo-page__content { width: 100%; }
/* Account layout. Target BOTH the body class AND the account markup directly
via :has() — because WooCommerce only adds the .woocommerce-account body class
when is_account_page() is true, which can resolve false for a static account
page, leaving the grid unmatched (nav + content then stacked/squeezed). */
/* DASHBOARD only (it contains the account nav). MUST require the nav, otherwise
the logged-OUT login/register .woocommerce (which has NO nav) also matched and
got squeezed into the 260px column — the broken cramped login form. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation),
.woocommerce:has(> .woocommerce-MyAccount-navigation) {
display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start;
}
@media (min-width: 900px) {
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation),
.woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: 260px 1fr; }
}
/* Robust fallback WITHOUT :has() — same fix pattern as the product gallery. The
dashboard is the only account view shown to a LOGGED-IN user (the login/register page
is logged-out), so `.logged-in` distinguishes it from the login page without :has().
On browsers lacking :has() (and when the :has() structure quirk above misses), the
dashboard then still gets the tidy top-aligned 2-column layout (nav left, content
right) instead of a misaligned stack. The theme force-adds the woocommerce-account
body class, so this matches even when is_account_page() resolves false. */
.woocommerce-account.logged-in .woocommerce {
display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start;
}
@media (min-width: 900px) {
.woocommerce-account.logged-in .woocommerce { grid-template-columns: 260px 1fr; }
}
/* THE alignment fix (v1.2.25). The [woocommerce_my_account] shortcode emits an
(almost always EMPTY)
as the FIRST direct
child of .woocommerce, BEFORE the nav + content — confirmed on the LIVE site:
class="woocommerce">. As a grid item
that empty wrapper stole cell (row1,col1 = 260px), shoving the nav into col2 and
dropping the content table down to row2 — so the left menu never lined up with the
right table. align-items:start could NOT fix it: the defect is cell ASSIGNMENT, not
in-cell alignment (nav + content ended up in different rows). Fix: drop the empty
wrapper out of the grid flow; if notices DO appear (non-empty), let them span the
full width as their own top row so nav + content stay aligned. */
.woocommerce-account .woocommerce-notices-wrapper:empty { display: none; }
@media (min-width: 900px) {
.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper,
.woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper {
grid-column: 1 / -1;
}
}
/* Logged-OUT login + register page. CRITICAL: on this store WooCommerce renders
the wrapper as
with NO #customer_login id, so
the old #customer_login selector never matched — the two forms fell back to WC's
~47% floats and staggered DIAGONALLY (login up-right, register down-left).
Target the live markup (.u-columns.col2-set) and scope with
:has(.woocommerce-form-register) so the checkout's own .col2-set is never
touched. #customer_login kept as a fallback for stores that do emit the id.
Result: two equal cards, side by side, tops on the SAME level (≥768px). */
.woocommerce .u-columns.col2-set:has(.woocommerce-form-register),
.woocommerce-account #customer_login.u-columns,
.woocommerce #customer_login.u-columns {
display: grid; grid-template-columns: 1fr; gap: 22px; max-width: 940px; margin-inline: auto;
}
@media (min-width: 768px) {
.woocommerce .u-columns.col2-set:has(.woocommerce-form-register),
.woocommerce-account #customer_login.u-columns,
.woocommerce #customer_login.u-columns { grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
}
/* Two premium cards. Neutralise WC's col2-set floats / percentage widths. */
.u-columns.col2-set:has(.woocommerce-form-register) > .col-1,
.u-columns.col2-set:has(.woocommerce-form-register) > .col-2,
.u-columns.col2-set:has(.woocommerce-form-register) > .u-column1,
.u-columns.col2-set:has(.woocommerce-form-register) > .u-column2,
#customer_login .u-column1, #customer_login .u-column2 {
width: auto !important; float: none !important; margin: 0 !important;
background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: 28px; box-shadow: var(--shadow-card);
}
.u-columns.col2-set:has(.woocommerce-form-register) h2,
#customer_login h2 { font-size: 22px; margin: 0 0 18px; color: var(--slate-dark); }
.u-columns.col2-set:has(.woocommerce-form-register) .woocommerce-form-login__rememberme,
.u-columns.col2-set:has(.woocommerce-form-register) .woocommerce-form-register__rememberme,
#customer_login .woocommerce-form-login__rememberme,
#customer_login .woocommerce-form-register__rememberme { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 14px; }
.u-columns.col2-set:has(.woocommerce-form-register) .woocommerce-privacy-policy-text p,
#customer_login .woocommerce-privacy-policy-text p { font-size: 13px; color: var(--slate-500); line-height: 1.5; }
.u-columns.col2-set:has(.woocommerce-form-register) .woocommerce-form-login__submit,
.u-columns.col2-set:has(.woocommerce-form-register) .woocommerce-form-register__submit,
#customer_login .woocommerce-form-login__submit,
#customer_login .woocommerce-form-register__submit {
display: block; width: 100%; min-height: 50px; margin-top: 4px;
font-size: 15px; font-weight: 700;
}
/* The register card carries a Google reCAPTCHA widget (.g-recaptcha → a fixed
304px iframe) plus a Mailchimp newsletter row. The 304px iframe is WIDER than
the inner width of the card on a 375px phone, so it pushed the page into
horizontal scroll. Never let it exceed the card; on phones scale the whole
304px badge down so it sits flush inside the card. (transform here is on the
OUTER login widget — NOT inside #payment .payment_box, so Montonio is untouched.) */
.u-columns.col2-set:has(.woocommerce-form-register) .g-recaptcha,
.u-columns.col2-set:has(.woocommerce-form-register) .woocommerce-form-row--recaptcha,
.u-columns.col2-set:has(.woocommerce-form-register) form > div[style*="recaptcha"],
#customer_login .g-recaptcha,
#customer_login .woocommerce-form-row--recaptcha,
#customer_login form > div[style*="recaptcha"] { max-width: 100%; overflow: hidden; margin: 0 0 14px; }
.u-columns.col2-set:has(.woocommerce-form-register) .g-recaptcha,
#customer_login .g-recaptcha { transform-origin: 0 0; }
@media (min-width: 768px) and (max-width: 820px) {
.u-columns.col2-set:has(.woocommerce-form-register) .g-recaptcha,
#customer_login .g-recaptcha { transform: scale(.92); height: 71px; }
.u-columns.col2-set:has(.woocommerce-form-register) .g-recaptcha > div,
#customer_login .g-recaptcha > div { width: 304px !important; }
}
@media (max-width: 480px) {
.u-columns.col2-set:has(.woocommerce-form-register) .g-recaptcha,
#customer_login .g-recaptcha { transform: scale(.92); height: 71px; }
.u-columns.col2-set:has(.woocommerce-form-register) .g-recaptcha > div,
#customer_login .g-recaptcha > div { width: 304px !important; }
}
@media (max-width: 400px) {
.u-columns.col2-set:has(.woocommerce-form-register) .g-recaptcha,
#customer_login .g-recaptcha { transform: scale(.86); height: 67px; }
}
@media (max-width: 360px) {
.u-columns.col2-set:has(.woocommerce-form-register) .g-recaptcha,
#customer_login .g-recaptcha { transform: scale(.74); height: 58px; }
}
/* Kill WooCommerce core's default 30% / 68% widths + floats so the nav + content
fill their grid cells instead of collapsing into narrow stacked columns. */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content { width: auto !important; float: none !important; margin: 0 !important; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px; box-shadow: var(--shadow-card); }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; border-radius: 10px; font-weight: 600; color: var(--slate); text-decoration: none; }
.woocommerce-MyAccount-navigation li a:hover { background: var(--muted); color: var(--green); }
.woocommerce-MyAccount-navigation li.is-active a {
background: rgba(5,150,105,.10); color: var(--green-dark);
font-weight: 700; box-shadow: inset 3px 0 0 var(--green);
}
/* account content panel */
.woocommerce-MyAccount-content { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-card); }
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button) {
color: var(--green); font-weight: 600; text-decoration: underline;
text-underline-offset: 2px;
}
.woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):hover {
color: var(--green-dark);
}
/* address cards */
.woocommerce-Addresses { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 8px; }
@media (min-width: 600px) { .woocommerce-Addresses { grid-template-columns: repeat(2, 1fr); } }
.woocommerce-Addresses .woocommerce-Address { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.woocommerce-Addresses .woocommerce-Address-title { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.woocommerce-Addresses .woocommerce-Address-title h3 { font-size: 16px; margin: 0; }
.woocommerce-Addresses .woocommerce-Address address { color: var(--slate-600); font-style: normal; line-height: 1.7; }
/* orders + downloads tables (My Account). Both ship core's .shop_table +
.shop_table_responsive classes; give them the same rounded, bordered surface
as the cart so they read as premium cards, not raw tables. */
.woocommerce-MyAccount-content .shop_table,
.woocommerce-orders-table,
.woocommerce-table--order-downloads {
border: 1px solid var(--border); border-radius: var(--radius-lg);
border-collapse: separate; border-spacing: 0; overflow: hidden; width: 100%; background: #fff;
}
.woocommerce-orders-table th,
.woocommerce-table--order-downloads th { background: var(--muted); color: var(--slate-dark); font-weight: 700; padding: 14px 16px; text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.woocommerce-orders-table td,
.woocommerce-table--order-downloads td { padding: 16px; border-top: 1px solid var(--border); vertical-align: middle; color: var(--slate); }
.woocommerce-orders-table .woocommerce-orders-table__cell-order-status { font-weight: 600; color: var(--slate-dark); }
/* The per-row action buttons (Vaata / Lae alla) sit inline on desktop; keep them
compact and wrapping so a row with two buttons never overflows the cell. */
.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions,
.woocommerce-table--order-downloads td.download-actions { white-space: nowrap; }
.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-table--order-downloads td.download-actions .button {
display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; margin: 2px 0 2px 6px;
}
/* MOBILE (≤768px): core stacks these responsive tables (display:block rows, td
carries a data-title label via ::before). Mirror the cart's card treatment so
each order/download becomes a tidy card with the value right-aligned against
its label — instead of the unstyled left-jammed stack core leaves behind. */
@media (max-width: 768px) {
.woocommerce-MyAccount-content table.shop_table_responsive { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.woocommerce-MyAccount-content table.shop_table_responsive thead { display: none; }
.woocommerce-MyAccount-content table.shop_table_responsive tr {
display: block; border: 1px solid var(--border); border-radius: var(--radius);
margin-bottom: 12px; padding: 4px 0; background: #fff; box-shadow: var(--shadow-card);
}
.woocommerce-MyAccount-content table.shop_table_responsive td {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
text-align: right; border-top: 0; border-bottom: 1px solid var(--border); padding: 11px 14px;
}
.woocommerce-MyAccount-content table.shop_table_responsive tr td:last-child { border-bottom: 0; }
.woocommerce-MyAccount-content table.shop_table_responsive td::before {
color: var(--slate-dark); font-weight: 700; font-size: 12px; text-transform: uppercase;
letter-spacing: .04em; text-align: left; flex: 0 0 auto; margin-right: 8px;
}
/* The actions cell holds full-width buttons — let them fill the row, not crowd. */
.woocommerce-MyAccount-content table.shop_table_responsive td.woocommerce-orders-table__cell-order-actions,
.woocommerce-MyAccount-content table.shop_table_responsive td.download-actions { justify-content: flex-end; }
.woocommerce-MyAccount-content table.shop_table_responsive td.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-MyAccount-content table.shop_table_responsive td.download-actions .button { min-height: 40px; }
}
/* ==========================================================================
Notices
========================================================================== */
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-radius: var(--radius); border-top: 0; padding: 14px 18px 14px 44px; }
.woocommerce-message { background: rgba(5,150,105,.08); border-left: 4px solid var(--green); color: var(--green-dark); }
.woocommerce-info { background: var(--muted); border-left: 4px solid var(--slate); }
/* WooCommerce draws its notice glyphs in its own blue #1e85be — a colour that
appears nowhere else in this shop, so it read as a stain on these grey bars. */
.woocommerce-message::before { color: var(--green); }
.woocommerce-info::before { color: var(--slate); }
.woocommerce-error::before { color: var(--danger); }
.woocommerce-error { background: #fef2f2; border-left: 4px solid var(--danger); color: var(--danger-dark); }
/* star rating colour */
/* Rating stars — CONTRAST, measured not eyeballed. #f59e0b on the white card is
2.15:1 where WCAG 1.4.11 wants 3:1 for graphics, and core's empty track #cfc8d8
sits at 1.63:1 — so filled against empty was 1.32:1 and the score was unreadable
at a glance, on the one element that exists to be read at a glance.
#b45309 = 4.58:1, and the darker empty track brings the filled/empty difference
to a genuine step. Tokenised so the two stylesheets cannot drift. */
:root { --rating: #b45309; --rating-empty: #64748b; }
.star-rating span::before, .woocommerce p.stars a::before { color: var(--rating); }
.woocommerce .star-rating::before { color: var(--rating-empty); }
/* ==========================================================================
MOBILE — full beauty pass (TOP PRIORITY)
Owner: "kõik peab mobiilis ilus olema!!!" Phones (~375px) and tablets.
Every WooCommerce surface refined for narrow widths: shop grid, breadcrumb,
single product, cart, checkout. Goals: 2-col readable grid, badges never
clipped, side-by-side compare/quick-view, full-width tappable CTAs (>=44px),
clean stacking, no horizontal scroll. Desktop rules above are untouched —
these are max-width overrides only.
========================================================================== */
@media (max-width: 768px) {
/* ---- Global guard: nothing overflows the viewport horizontally ---- */
.woocommerce, .woocommerce-page { max-width: 100%; overflow-x: clip; }
/* ---- Breadcrumb pill: wraps onto multiple lines gracefully ---- */
.woocommerce-breadcrumb {
display: flex; width: 100%; box-sizing: border-box;
padding: 8px 14px; margin-bottom: 16px; font-size: 12.5px; line-height: 1.6;
}
/* ---- Shop header / toolbar: stack the result count above the ordering ---- */
.woocommerce-products-header { margin-bottom: 18px; }
.woocommerce-result-count { font-size: 13px; }
.woocommerce-ordering { width: 100%; }
.woocommerce-ordering select, .woocommerce select.orderby { width: 100%; }
/* ---- Product grid: 2 readable columns with comfortable gap ---- */
.woocommerce ul.products, ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.product-card__body { padding: 12px; gap: 6px; }
/* Title scales down a hair but keeps the 2-line clamp + reserved height. */
.product-card__title,
.product-card__body .woocommerce-loop-product__title,
.product-card .woocommerce-loop-product__title { font-size: 13.5px; min-height: 36px; }
/* Price stays clearly visible (slightly smaller so it never wraps awkwardly). */
.product-card .price { font-size: 19px; }
/* Badges ("Soodus" / "Otsas") inset a touch tighter so they never clip the
smaller card corner. */
.onsale, .woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.product-card .onsale, .product-card span.onsale { top: 10px !important; right: 10px !important; font-size: 10px; padding: 3px 9px; }
.ostu-loop-badges { top: 10px; left: 10px; gap: 5px; }
.ostu-loop-badges .ostu-badge, .product-card .ostu-badge { font-size: 10px; padding: 3px 9px; }
/* "Lisa korvi" full-width and 44px+ tappable. */
.product-card__actions .button,
.product-card__actions a.add_to_cart_button,
.product-card a.add_to_cart_button { min-height: 44px; font-size: 13.5px; }
/* Compare + Quick-view stay SIDE BY SIDE and tappable (no stacking). */
.product-card__tools { gap: 6px; }
.product-card__tools .ostu-qv-trigger,
.product-card__tools .ostu-cmp-btn--card,
.product-card__tools > button,
.product-card__tools > a { min-height: 44px; height: 44px; font-size: 11.5px; }
/* ---- Single product: gallery first, then summary, full-width, roomy ---- */
/* (The base grid is already 1-column mobile-first; reinforce order + spacing.) */
.single-product div.product { gap: 24px; }
/* NO CSS `order` here, on purpose. On the 1-column mobile grid the SOURCE
order is already correct (gallery → summary → tabs → bundle → upsells →
related → recently-viewed). Setting `order` on only SOME children made the
unordered extras (Soovitame / Sinu sirvimine / upsells = default order 0)
jump ABOVE the gallery + summary — the bug the owner saw. So we only unstick
the gallery and let the natural source order win. */
.single-product .woocommerce-product-gallery { position: static !important; top: auto !important; }
/* Contain ONLY the outer gallery. Do NOT cap .__wrapper — when FlexSlider builds,
that becomes the "ul.slides" and FlexSlider sets its width to N×100% to
lay the slides side by side. A max-width:100% + overflow:hidden on it CLIPS slides
2..N, which is exactly why the gallery worked on DESKTOP (no such cap there) but
broke on MOBILE: slides squished, thumbnails overlapping the main image, and
tapping a thumbnail showed a blank frame. The image itself is already capped to
width:100% below, so the outer container alone prevents any horizontal escape. */
.single-product .woocommerce-product-gallery { max-width: 100%; overflow: hidden; }
.single-product .woocommerce-product-gallery__image img { width: 100%; max-width: 100%; height: auto; max-height: 380px; object-fit: contain; padding: 16px; }
/* Thumbnail strip slightly smaller on phones so the row reads as thumbnails. */
.single-product .flex-control-thumbs li,
.single-product .flex-control-thumbs img { width: 58px; height: 58px; }
/* Title scales down sensibly. */
.single-product .product_title { font-size: clamp(24px, 7vw, 30px); }
.single-product .price { font-size: 27px; }
.single-product .price del { font-size: 18px; }
/* Add-to-cart row: qty + button must not overflow. The button grows to fill
the remaining width; qty stays a fixed comfortable stepper. Covers BOTH the
simple-product form and the variable-product variation row. */
.single-product form.cart:not(.variations_form):not(.grouped_form),
.single-product form.cart .woocommerce-variation-add-to-cart { gap: 10px; margin: 20px 0; flex-wrap: wrap; }
.single-product form.cart.variations_form,
.single-product form.cart.grouped_form { margin: 20px 0; }
.single-product .quantity { flex: 0 0 auto; }
.single-product .quantity input.qty { width: 72px; height: 52px; font-size: 16px; }
.single-product form.cart .button,
.single-product .single_add_to_cart_button { flex: 1 1 140px; min-height: 52px; padding: 0 18px; font-size: 15px; }
/* Trust row wraps to a clean 2-up. */
.product-trust { gap: 10px 16px; margin-top: 18px; padding-top: 16px; }
.product-trust li { font-size: 12.5px; }
/* Tabs: a horizontal scroll strip so the pills never break the layout. */
.woocommerce-tabs ul.tabs {
flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
padding-bottom: 12px; margin-bottom: 18px; gap: 6px;
scrollbar-width: none;
}
.woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
.woocommerce-tabs ul.tabs li { flex: 0 0 auto; }
.woocommerce-tabs ul.tabs li a { padding: 9px 16px; font-size: 14px; }
.woocommerce-tabs .panel h2 { font-size: 19px; }
.related.products > h2, .upsells.products > h2 { font-size: 20px; }
/* ---- Cart: stacked rows read cleanly, totals full-width, CTA tappable ---- */
.woocommerce-cart .woocommerce { gap: 22px; }
/* WooCommerce stacks .shop_table rows on mobile (responsive table). Make each
row a tidy card and right-align the data values against their labels. */
.woocommerce-cart table.shop_table { border-radius: var(--radius); }
.woocommerce-cart table.shop_table tr {
display: block; border: 1px solid var(--border); border-radius: var(--radius);
margin-bottom: 12px; padding: 4px 0; background: #fff;
}
.woocommerce-cart table.shop_table thead { display: none; }
.woocommerce-cart table.shop_table td {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
text-align: right; border-top: 0; border-bottom: 1px solid var(--border); padding: 11px 14px;
}
.woocommerce-cart table.shop_table tr td:last-child { border-bottom: 0; }
/* PHONE CART CARD — picture back, and on the same line as the name.
WooCommerce's own woocommerce-smallscreen.css hides the cart thumbnail outright
(`.woocommerce table.cart .product-thumbnail{display:none}`, 0,2,2), so a phone
shopper saw only names and numbers and had to trust their memory of what they
had picked. Beaten here at (0,3,1), without leaning on the .woocommerce-cart
body class, which this store does not always carry.
The row becomes a small card: [picture][name][×] on the first line, then price,
quantity and line total full width underneath. Measured at 375px: picture
34→94, name 98→303, × 303→355, nothing past the container, no side scroll. */
table.cart tr.cart_item { display: flex; flex-wrap: wrap; align-items: center; }
table.cart .cart_item .product-thumbnail {
display: block; order: 1; flex: 0 0 auto; width: 78px;
padding: 11px 0 11px 14px; border-bottom: 0;
}
table.cart .cart_item .product-thumbnail::before { display: none; }
/* Same specificity as the desktop rule above — it now has to beat WC core's
`.woocommerce-cart table.cart img{width:32px}` (0,2,2), so a 2-class selector
here would no longer win and the phone would inherit the 76px desktop size. */
table.cart .cart_item .product-thumbnail img { width: 60px; height: 60px; max-width: 60px; }
table.cart .cart_item .product-name {
order: 2; flex: 1 1 0; min-width: 0;
text-align: left; justify-content: flex-start; border-bottom: 0;
}
table.cart .cart_item .product-name::before { display: none; }
table.cart .cart_item .product-remove { order: 3; flex: 0 0 auto; padding-right: 14px; border-bottom: 0; }
table.cart .cart_item .product-remove::before { display: none; }
table.cart .cart_item .product-price,
table.cart .cart_item .product-quantity,
table.cart .cart_item .product-subtotal { order: 4; flex: 1 1 100%; }
table.cart .cart_item .product-price { border-top: 1px solid var(--border); }
.cart .quantity input.qty { width: 64px; height: 44px; }
/* Coupon / update row: full-width stacked. The coupon field + "Rakenda"
button share one line; "Uuenda korv" goes full-width underneath.
The desktop row is a floated table-cell, so every float MUST be cleared here —
a leftover `float:right` plus `width:100%` would push the update button past
the screen edge, which is exactly the overflow this cart was just fixed for. */
.woocommerce-cart table.cart td.actions { display: block; text-align: left; padding: 14px; }
.woocommerce-cart table.cart td.actions .ostu-continue-shopping { float: none; display: flex; width: 100%; justify-content: center; margin: 0 0 10px; }
.woocommerce-cart table.cart td.actions .coupon { float: none; display: flex; gap: 8px; margin: 0 0 10px; width: auto; max-width: none; }
.woocommerce-cart table.cart td.actions .coupon .input-text { flex: 1 1 auto; width: auto; min-width: 0; }
.woocommerce-cart table.cart td.actions .button[name="update_cart"] { float: none; width: 100%; margin: 0; }
.woocommerce-cart table.cart td.actions .coupon .button { flex: 0 0 auto; width: auto; }
.cart_totals { padding: 18px; }
.wc-proceed-to-checkout a.checkout-button { width: 100%; }
/* ---- Checkout: single column, payment area full-width, nothing squished --- */
.woocommerce-checkout #order_review,
.woocommerce-checkout #customer_details { width: 100%; min-width: 0; }
.woocommerce-checkout #order_review { padding: 18px 16px 20px; }
/* Order-review table stays a proper table on checkout (it's compact), but keep
it from overflowing. */
.woocommerce-checkout #order_review .shop_table { width: 100%; }
.woocommerce-checkout #order_review table { table-layout: fixed; }
.woocommerce-checkout #order_review .cart_item td.product-name { word-break: break-word; }
/* Payment methods: full-width rows, logos wrap under the label if needed. */
.woocommerce-checkout .wc_payment_method { padding: 14px; }
.woocommerce-checkout .wc_payment_method label img { max-height: 22px; }
#place_order { width: 100%; }
/* Form fields full-width single column (the >=560px 2-col grid is desktop). */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; }
}
/* ---- Small phones (~375px and below): final squeeze-proofing ---- */
@media (max-width: 480px) {
/* Grid gap + card padding tighten so 2 columns stay comfortable at 375px. */
.woocommerce ul.products, ul.products { gap: 10px; }
.product-card__body { padding: 11px; }
.product-card .price { font-size: 18px; }
/* On the very narrowest screens the compare/quick-view labels can crowd — keep
them side-by-side but allow the text to shrink; icons stay legible. */
.product-card__tools .ostu-qv-trigger,
.product-card__tools .ostu-cmp-btn--card,
.product-card__tools > button,
.product-card__tools > a { font-size: 11px; padding: 0 6px; gap: 4px; }
/* Never shrink the icon, so the two pills always read as clean, equal,
tappable chips. (Label ellipsis is set in the base tools block.) */
.product-card__tools .ostu-qv-trigger__icon,
.product-card__tools .ostu-cmp-btn__icon { flex: none; }
/* Single product: qty + add-to-cart share ONE row. With flex:1 1 100% the
button could never sit beside the 68px stepper, so the layout was always
row 1 = a small number box with ~265px of dead space, row 2 = the CTA.
1 1 auto + min-width:0 lets them share a 343px row and still wrap if a
translation makes the label very long. */
.single-product .quantity input.qty { width: 68px; }
.single-product form.cart .button,
.single-product .single_add_to_cart_button { flex: 1 1 auto; min-width: 0; }
/* Breadcrumb: smaller, still a neat pill. */
.woocommerce-breadcrumb { font-size: 12px; padding: 7px 12px; }
/* Checkout review padding a touch tighter. */
.woocommerce-checkout #order_review { padding: 16px 14px 18px; }
}
/* ---- Tightest phones (<=400px): icon-only Võrdle / Kiirvaade chips ----
On a ~160px-wide card the two ghost pills are too narrow for both an icon and
a full Estonian word. Rather than ellipsis-clip "Kiirvaade" (which reads as a
bug), drop to clean ICON-ONLY chips: each pill keeps its 40px tap target and
the two stay side-by-side, while the accessible name is preserved by the
button's aria-label / title (set in compare.php + quick-view.php). */
@media (max-width: 400px) {
.product-card__tools .ostu-qv-trigger__label,
.product-card__tools .ostu-cmp-btn__label { display: none; }
.product-card__tools .ostu-qv-trigger,
.product-card__tools .ostu-cmp-btn--card,
.product-card__tools > button,
.product-card__tools > a { gap: 0; padding: 0; }
.product-card__tools .ostu-qv-trigger__icon svg,
.product-card__tools .ostu-cmp-btn__icon svg { width: 17px; height: 17px; }
}
/* Why an account is worth making — printed on woocommerce_register_form_start.
The card used to be a bare form with no reason to fill it in. */
.ostu-register-why {
list-style: none; margin: 0 0 18px; padding: 14px 16px;
background: var(--muted); border-radius: var(--radius);
display: flex; flex-direction: column; gap: 7px;
color: var(--slate-600); font-size: 14px; line-height: 1.5;
}
.ostu-register-why li { position: relative; padding-left: 24px; }
.ostu-register-why li::before {
content: ""; position: absolute; left: 4px; top: .42em;
width: 8px; height: 8px; border-radius: 50%; background: var(--green);
}
/* ==========================================================================
CHECKOUT ORDER SUMMARY — the anonymous-cell trap again (CLAUDE.md Trap 11)
The shipping row's th/td were given `display:block; width:100%` while the
summary was still a real table, so both were wrapped in anonymous table cells
that land in COLUMN 1 — `width:100%` then resolved against that column, not the
panel, and the Omniva/DPD cards came out roughly half the width they should be.
Exactly what v1.2.63 fixed in the cart, in the other money-path table.
Fix is the same: take the WHOLE table off table display, so no anonymous cell
can be generated, and lay the rows out with flex. Never half of it.
Scope note: every selector below is inside the ORDER SUMMARY table only. The
payment area keeps its own decorative block further up this file, untouched —
check 6a in tools/check-theme.sh is what enforces that, and it counts literal
selector mentions, so do not name them here either.
========================================================================== */
.woocommerce-checkout #order_review table.shop_table,
.woocommerce-checkout #order_review table.shop_table thead,
.woocommerce-checkout #order_review table.shop_table tbody,
.woocommerce-checkout #order_review table.shop_table tfoot { display: block; width: 100%; }
.woocommerce-checkout #order_review table.shop_table tr {
display: flex; flex-wrap: wrap; align-items: baseline;
justify-content: space-between; gap: 4px 12px;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td { display: block; width: auto; }
/* The shipping row stacks instead: its label sits above a full-width list of
carrier cards. Now that the table is not a table, this is just a block row. */
.woocommerce-checkout #order_review table.shop_table tr.woocommerce-shipping-totals,
.woocommerce-checkout #order_review table.shop_table tr:has(#shipping_method) { display: block; }
/* Montonio's pickup-point row inherited tfoot's right alignment while every other
label on the panel is left-aligned, so the one control the shopper must actually
operate was the odd one out. (It is a plain