/*
* Mashin Irani — cart line-item redesign.
* Loads AFTER mirani-cart-skin.css (declared dependency), so equal-specificity rules here win by order.
*
* THE ROOT CAUSE, first: mirani-cart-skin.css sets `td.actions{display:flex}`. A | that is
* not display:table-cell has nothing for its colspan to bind to — the colspan is dropped and the UA wraps
* the flex container in an anonymous single-column cell. Column 1 then inflates to the coupon field's
* 216px min-content, and auto table layout pays for it by starving the thumbnail column to 34px, whose
* 16px+16px padding leaves a 2px content box (which is why 300px product images rendered 2x2). One
* declaration produced the broken actions row, the 3-line product name AND the invisible thumbnails.
*
* Every var() carries a fallback verified against mi.css :root. The design system has NO --space-7.
* RTL-native: logical properties throughout.
*/
/* ---------- 1. Restore table semantics ---------- */
/* Back to a real table-cell so colspan="6" binds again and the row spans the full width. */
body.woocommerce-cart td.actions {
display: table-cell;
vertical-align: middle;
}
/* Deterministic columns. Under `fixed`, declared widths are honoured instead of being negotiated away
by min-content pressure — the failure mode that crushed the thumbnail. */
body.woocommerce-cart table.cart {
table-layout: fixed;
width: 100%;
}
body.woocommerce-cart table.cart th.product-remove,
body.woocommerce-cart table.cart td.product-remove { width: 44px; }
body.woocommerce-cart table.cart th.product-thumbnail,
body.woocommerce-cart table.cart td.product-thumbnail { width: 88px; }
body.woocommerce-cart table.cart th.product-price,
body.woocommerce-cart table.cart td.product-price { width: 102px; }
body.woocommerce-cart table.cart th.product-quantity,
body.woocommerce-cart table.cart td.product-quantity { width: 122px; }
body.woocommerce-cart table.cart th.product-subtotal,
body.woocommerce-cart table.cart td.product-subtotal { width: 114px; }
/* product-name takes whatever is left. */
/* ---------- 2. Thumbnail ---------- */
/*
* `img{max-width:100%}` in mi.css AND in hello reset.css clamped the image to its starved cell, so the
* skin's width:64px never won. With the column fixed at 104px this is now a real 72px box; width:100%
* of a fixed track is stable, and min-width defends against any future squeeze.
*/
body.woocommerce-cart td.product-thumbnail { padding-inline: var(--space-3, 12px); }
body.woocommerce-cart td.product-thumbnail a { display: block; }
body.woocommerce-cart td.product-thumbnail img {
width: 72px;
min-width: 72px;
height: 72px;
max-width: none;
object-fit: contain;
display: block;
padding: 6px;
box-sizing: border-box;
background: var(--bg-sunken, #ece4da);
border: 1px solid var(--border, #d9cbc2);
border-radius: var(--radius-md, 8px);
}
/* ---------- 3. Product name ---------- */
body.woocommerce-cart td.product-name {
white-space: normal;
word-break: normal;
overflow-wrap: anywhere;
}
body.woocommerce-cart td.product-name a {
display: inline-block;
font-size: 1rem;
font-weight: 700;
line-height: 1.6;
color: var(--navy-900, #102134);
text-decoration: none;
}
body.woocommerce-cart td.product-name a:hover { color: var(--link, #3c507d); }
/* ---------- 4. Quantity stepper ---------- */
body.woocommerce-cart .mi-qty {
display: inline-flex;
align-items: stretch;
border: 1.5px solid var(--border, #d9cbc2);
border-radius: var(--radius-md, 8px);
background: var(--bg-elevated, #fff);
overflow: hidden;
}
body.woocommerce-cart .mi-qty .quantity { margin: 0; border: 0; background: none; }
/* Kill the spinner: the -/+ buttons are the affordance now. */
body.woocommerce-cart .mi-qty input.qty {
width: 46px;
min-width: 46px;
height: 40px;
border: 0;
border-radius: 0;
background: transparent;
text-align: center;
font-family: inherit;
font-size: .95rem;
font-weight: 700;
color: var(--navy-900, #102134);
-moz-appearance: textfield;
appearance: textfield;
}
body.woocommerce-cart .mi-qty input.qty::-webkit-outer-spin-button,
body.woocommerce-cart .mi-qty input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
body.woocommerce-cart .mi-qty input.qty:focus {
outline: 2px solid var(--link, #3c507d);
outline-offset: -2px;
}
/*
* type="button", so hello reset.css's [type="button"]{background-color:transparent} applies at (0,1,0)
* and its :hover{background-color:#0E1D3B} would wash these navy — both are overridden here at (0,3,0).
*/
body.woocommerce-cart .mi-qty .mi-qty__btn {
flex: none;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 0;
background: var(--bg-sunken, #ece4da);
color: var(--navy-900, #102134);
font-family: inherit;
font-size: 1.15rem;
font-weight: 700;
line-height: 1;
cursor: pointer;
user-select: none;
transition: background-color var(--duration-fast, 120ms);
}
body.woocommerce-cart .mi-qty .mi-qty__btn:hover:not(:disabled) {
background: var(--gold-500, #896f3d);
color: var(--ivory-50, #f5f0e9);
}
body.woocommerce-cart .mi-qty .mi-qty__btn:focus-visible {
outline: 2px solid var(--link, #3c507d);
outline-offset: -2px;
}
body.woocommerce-cart .mi-qty .mi-qty__btn:disabled {
opacity: .4;
cursor: not-allowed;
background: var(--bg-sunken, #ece4da);
color: var(--navy-900, #102134);
}
/* ---------- 5. Price + subtotal ---------- */
body.woocommerce-cart td.product-price { color: var(--text-secondary, #404751); }
body.woocommerce-cart td.product-subtotal {
font-weight: 700;
color: var(--navy-900, #102134);
}
/* ---------- 6. Remove control ---------- */
/*
* Was a bare × glyph. Turned into a real 36px target with a clear destructive hover, WITHOUT touching
* the nonce'd href or the aria-label.
*/
body.woocommerce-cart td.product-remove a.remove {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin: 0 auto;
border-radius: 50%;
border: 1px solid var(--border, #d9cbc2);
background: var(--bg-elevated, #fff);
color: var(--text-tertiary, #6e6a66);
font-size: 1.2rem;
line-height: 1;
text-decoration: none;
transition: background-color var(--duration-fast, 120ms), color var(--duration-fast, 120ms),
border-color var(--duration-fast, 120ms);
}
body.woocommerce-cart td.product-remove a.remove:hover,
body.woocommerce-cart td.product-remove a.remove:focus {
background: var(--clay-error, #b4402e);
border-color: var(--clay-error, #b4402e);
color: #fff;
}
body.woocommerce-cart td.product-remove a.remove:focus-visible {
outline: 2px solid var(--link, #3c507d);
outline-offset: 2px;
}
/* ---------- 7. Actions row (coupon + update) ---------- */
/*
* The cell must stay display:table-cell for colspan, so the two groups are laid out with inline-flex +
* float rather than flex on the cell itself. The site is dir="rtl", so float:left is the inline-end.
*/
body.woocommerce-cart td.actions { padding: var(--space-4, 16px); }
body.woocommerce-cart td.actions::after { content: ""; display: block; clear: both; }
body.woocommerce-cart td.actions .coupon {
display: inline-flex;
align-items: center;
gap: var(--space-2, 8px);
flex-wrap: wrap;
float: right;
max-width: 100%;
}
body.woocommerce-cart td.actions .coupon input#coupon_code { min-width: 200px; }
/* Make «اعمال کدتخفیف» read as a real action — the skin left it transparent-on-sand with a thin outline. */
body.woocommerce-cart td.actions button[name="apply_coupon"] {
background: var(--navy-800, #112250);
border-color: var(--navy-800, #112250);
color: var(--ivory-50, #f5f0e9);
}
body.woocommerce-cart td.actions button[name="apply_coupon"]:hover,
body.woocommerce-cart td.actions button[name="apply_coupon"]:focus {
background: var(--navy-900, #102134);
border-color: var(--navy-900, #102134);
color: var(--ivory-50, #f5f0e9);
}
body.woocommerce-cart td.actions button[name="update_cart"] { float: left; }
/*
* WooCommerce ships the update button DISABLED until a quantity changes. It used to look identical to
* the enabled state, which reads as a dead control; now the disabled state is explicit and the enabled
* one is obviously clickable.
*/
body.woocommerce-cart td.actions button[name="update_cart"]:disabled {
opacity: .45;
cursor: not-allowed;
}
body.woocommerce-cart td.actions button[name="update_cart"]:not(:disabled) {
border-color: var(--navy-800, #112250);
color: var(--navy-800, #112250);
background: var(--bg-elevated, #fff);
}
/* ---------- 8. Mobile: real cards ---------- */
/*
* Below 768px WooCommerce's own woocommerce-smallscreen-rtl.css takes over: it blocks every td, prints
* td::before{content:attr(data-title)} pseudo-labels, forces text-align:left!important, zebra-stripes the
* rows — and, at (0,3,1), HIDES .product-thumbnail outright. Each override below is deliberately more
* specific than that.
*/
@media (max-width: 768px) {
body.woocommerce-cart table.cart { table-layout: auto; }
body.woocommerce-cart table.cart tbody tr.cart_item {
display: grid;
grid-template-columns: 84px 1fr auto;
grid-template-areas:
"thumb name remove"
"thumb price price"
"thumb qty subtotal";
gap: 4px var(--space-3, 12px);
align-items: center;
padding: var(--space-4, 16px);
margin-block-end: var(--space-3, 12px);
border: 1px solid var(--border, #d9cbc2);
border-radius: var(--radius-lg, 12px);
background: var(--bg-elevated, #fff);
box-shadow: var(--shadow-e1, 0 1px 2px rgba(16, 33, 52, .06));
}
/* Beats woocommerce-smallscreen's zebra stripe on the second row. */
body.woocommerce-cart table.cart tbody tr.cart_item:nth-child(2n) td { background: transparent; }
/* (0,4,2) — out-specifies smallscreen's `.woocommerce table.cart .product-thumbnail{display:none}`. */
body.woocommerce-cart table.cart tbody tr.cart_item td.product-thumbnail {
display: block !important;
grid-area: thumb;
padding: 0;
}
body.woocommerce-cart table.cart tbody tr.cart_item td.product-thumbnail img {
width: 84px;
min-width: 84px;
height: 84px;
}
body.woocommerce-cart table.cart tbody tr.cart_item td {
border: 0;
padding: 0;
text-align: start !important;
}
body.woocommerce-cart table.cart tbody tr.cart_item td.product-name { grid-area: name; }
body.woocommerce-cart table.cart tbody tr.cart_item td.product-price { grid-area: price; }
body.woocommerce-cart table.cart tbody tr.cart_item td.product-quantity { grid-area: qty; }
body.woocommerce-cart table.cart tbody tr.cart_item td.product-subtotal {
grid-area: subtotal;
text-align: end !important;
}
body.woocommerce-cart table.cart tbody tr.cart_item td.product-remove {
grid-area: remove;
width: auto;
}
body.woocommerce-cart table.cart tbody tr.cart_item td.product-remove a.remove { margin: 0; }
/* The pseudo-labels are redundant once the card has a real visual hierarchy — except on price, where
«قیمت» distinguishes the unit price from the line subtotal. */
body.woocommerce-cart table.cart tbody tr.cart_item td::before { content: none !important; }
body.woocommerce-cart table.cart tbody tr.cart_item td.product-price::before {
content: "قیمت واحد: " !important;
float: none !important;
font-weight: 400;
color: var(--text-tertiary, #6e6a66);
}
/* Actions: stack the two groups full width instead of floating them. */
body.woocommerce-cart td.actions .coupon,
body.woocommerce-cart td.actions button[name="update_cart"] {
float: none;
width: 100%;
}
body.woocommerce-cart td.actions .coupon { display: flex; }
body.woocommerce-cart td.actions .coupon input#coupon_code { flex: 1 1 auto; min-width: 0; }
body.woocommerce-cart td.actions button[name="update_cart"] { margin-block-start: var(--space-3, 12px); }
}
@media (prefers-reduced-motion: reduce) {
body.woocommerce-cart .mi-qty .mi-qty__btn,
body.woocommerce-cart td.product-remove a.remove { transition: none; }
}
/* ---------- 9. Width budget (measured, not guessed) ---------- */
/*
* At 1440px the items column is only ~660px wide, and mirani-cart-skin.css's `tbody td{padding:16px}`
* spends 192px of that on padding alone — which is why the product name was left with 90px and wrapped
* onto three lines. Tighter gutters give the name back real room without touching the column count.
*/
body.woocommerce-cart table.cart tbody td,
body.woocommerce-cart table.cart thead th {
padding-inline: var(--space-3, 12px);
}
/* Stepper measured 151px inside a 136px cell and spilled into the subtotal. 36 + 40 + 36 + borders. */
body.woocommerce-cart .mi-qty .mi-qty__btn {
width: 36px;
height: 36px;
font-size: 1.05rem;
}
body.woocommerce-cart .mi-qty input.qty {
width: 40px;
min-width: 40px;
height: 36px;
font-size: .9rem;
}
body.woocommerce-cart td.product-thumbnail img {
width: 64px;
min-width: 64px;
height: 64px;
}
/* The name is the one column that should breathe; everything else is a fixed-width figure. */
body.woocommerce-cart td.product-name a {
font-size: .95rem;
line-height: 1.55;
}
body.woocommerce-cart td.product-price,
body.woocommerce-cart td.product-subtotal {
font-size: .9rem;
white-space: nowrap;
}
/* Mobile keeps the larger thumbnail — the card grid has the room. */
@media (max-width: 768px) {
body.woocommerce-cart table.cart tbody tr.cart_item td.product-thumbnail img {
width: 84px;
min-width: 84px;
height: 84px;
}
body.woocommerce-cart table.cart tbody td { padding-inline: 0; }
}
/* ---------- 10. Specificity corrections (measured on the live cart) ---------- */
/*
* mirani-cart-skin.css declares `body.woocommerce-cart td.product-quantity input.qty{width:68px}` — same
* specificity as the rule above, so source order alone was not enough once the input also carried its own
* 8px padding and 1.5px border. Measured 36+68+36+3 = 143px inside a 122px cell. Qualifying with the cell
* class takes this to (0,4,1) and wins outright; padding/border are zeroed because the visible frame now
* belongs to the .mi-qty wrapper.
*/
body.woocommerce-cart td.product-quantity .mi-qty input.qty {
width: 40px;
min-width: 40px;
max-width: 40px;
height: 36px;
padding: 0;
border: 0;
box-sizing: border-box;
}
/*
* The name link was inline-block, so it shrink-wrapped to its own max-content (measured 120px) inside a
* 188px cell and wrapped the title over four lines for no reason. display:block lets it use the full
* column, and the balanced wrap keeps a two-word title from leaving one orphan word on line two.
*/
body.woocommerce-cart td.product-name a {
display: block;
width: 100%;
text-wrap: balance;
}
/* Persian titles must never be broken mid-word to fit. */
body.woocommerce-cart td.product-name {
overflow-wrap: break-word;
word-break: normal;
hyphens: none;
}
/* ---------- 11. Mobile: take the table out of table layout entirely ---------- */
/*
* Measured at 390px: .woocommerce sat correctly at 10→380 (16px padding), but the form and table were
* 378px wide at x=-14 — 40px wider than the 338px content box, and shifted. Cause: the rows are grids
* while the TABLE box was still sizing itself by table layout, so it took its width from the columns
* rather than from its parent. Making the table and tbody plain blocks lets them fill the content box.
*/
@media (max-width: 768px) {
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart table.cart,
body.woocommerce-cart table.cart tbody {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
body.woocommerce-cart table.cart tbody tr.cart_item { box-sizing: border-box; }
/* The actions row is a | too — give it the same card treatment instead of a bare strip. */
body.woocommerce-cart table.cart tbody tr:not(.cart_item) { display: block; width: 100%; }
body.woocommerce-cart td.actions {
display: block;
width: 100%;
box-sizing: border-box;
border: 1px solid var(--border, #d9cbc2);
border-radius: var(--radius-lg, 12px);
background: var(--bg-elevated, #fff);
}
body.woocommerce-cart td.actions .coupon { gap: var(--space-2, 8px); }
body.woocommerce-cart td.actions .coupon button[name="apply_coupon"] { flex: none; }
}
/* ---------- 12. Grid blowout (pre-existing, not introduced here) ---------- */
/*
* Measured at 390px: .woocommerce's content box is 338px, but its resolved grid track was 378px, so the
* form, the table and the summary all rendered 378px wide starting at x=-14 — hanging past the container
* on one side. Cause: mirani-cart-skin.css declares `grid-template-columns: 1fr` (and `1fr 360px` on
* desktop). A bare `1fr` carries an automatic minimum of min-content, so a wide child — here the cart
* table — forces the track wider than its container instead of being constrained by it.
*
* minmax(0, 1fr) is the canonical fix: same flexible sizing, but a zero minimum, so the track is bounded
* by the container and the child scrolls/wraps inside it rather than overflowing.
*/
body.woocommerce-cart .woocommerce {
grid-template-columns: minmax(0, 1fr) 360px;
}
@media (max-width: 900px) {
body.woocommerce-cart .woocommerce {
grid-template-columns: minmax(0, 1fr);
}
}
/* Belt and braces: nothing in the items column may establish a min-content floor wider than the track. */
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart-collaterals {
min-width: 0;
}