. * * WHAT THE PLUGIN'S OWN CSS DOES (montonio-for-woocommerce 9.2.2, * assets/css/montonio-style.css — fetched and read): * .montonio-bank-payments-form .montonio-bank-items{ * display:flex; flex-direction:row; flex-wrap:wrap; gap:15px } * .montonio-bank-payments-form .montonio-bank-items .montonio-bank-item{ * width:100px; height:100px; … } * .montonio-bank-payments-form .montonio-bank-items .montonio-bank-item--hidden{ * display:none !important } * #montonio-payments-description.montonio-bank-items .montonio-bank-item-img, * #payment #montonio-payments-description.montonio-bank-items .montonio-bank-item-img{ * max-width:100%; max-height:26px; display:block; … } * i.e. the plugin ALREADY wraps and already caps the logo. When that stylesheet * loads there is no overflow at all; the container is 320px, the row wraps. * * The rules below are therefore a CONTAINMENT GUARANTEE, not a fight with the * plugin: they restate wrapping + a sane logo box at a specificity that survives * the legacy inline woodmart CSS, and add an overflow-x:auto scroll container as * a last resort so the bank row can never widen the document. They also clear the * one legacy rule that really does force a floor on the payment box: * div#payment{ flex:1 1 360px; min-width:320px; … } (legacy inline block) * which pins #payment to 320px minimum inside a ~298px column at a 390 viewport. * `.woocommerce-checkout #payment` (0,1,1,0) outranks `div#payment` (0,1,0,1), * so no !important is needed to beat it. -------------------------------------*/ .woocommerce-checkout #payment, .woocommerce-checkout .woocommerce-checkout-payment{ min-width:0; max-width:100%; } .woocommerce-checkout #payment .payment_box, .woocommerce-checkout #payment .montonio-bank-payments-form{ max-width:100%; min-width:0; } /* Last-resort containment: if any future/legacy rule stops the row wrapping, the overflow is absorbed by this element's own scroll box instead of the document. */ .woocommerce-checkout #payment .montonio-bank-payments-form{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* Wrapping row. (0,1,2,0) beats the plugin's (0,0,2,0) and the legacy inline `.montonio-bank-item` block rules, without !important. */ .woocommerce-checkout #payment .montonio-bank-items{ display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; max-width:100%; } .woocommerce-checkout #payment .montonio-bank-items .montonio-bank-item{ flex:0 0 auto; max-width:100%; box-sizing:border-box; } /* Logo box. The plugin's own `#payment #montonio-payments-description… ` selector carries two IDs and therefore still wins on max-width/max-height — which is exactly what we want (100% / 26px). We only add the width/height:auto the plugin does not set, so an unstyled intrinsic size (some logos are 2000px wide) can never be used. `object-fit:contain` keeps aspect ratio inside the cap. */ .woocommerce-checkout #payment .montonio-bank-items .montonio-bank-item-img{ width:auto; height:auto; max-width:100%; max-height:26px; object-fit:contain; display:block; } /* Checkout form controls must never re-drive a grid/flex track wider than its box (an 's intrinsic width is ~385px, well over a 298px mobile column). */ .woocommerce-checkout .ckform input, .woocommerce-checkout .ckform textarea, .woocommerce-checkout .ckform select, .woocommerce-checkout .csum input, .woocommerce-checkout form .form-row input.input-text, .woocommerce-checkout form .form-row textarea, .woocommerce-checkout form .form-row select, .woocommerce-checkout .select2-container{ max-width:100%; min-width:0; } /* --------------------------------------------------------------------------- * DEFECT D2 (P1) — cart table has 6 columns and does not collapse. * * FINDING (important, and it changes what this fix is FOR): WooCommerce's own * woocommerce-smallscreen.css already stacks `table.shop_table_responsive` below * 768px (thead hidden, tr/td display:block, td::before = attr(data-title)). * With every stylesheet actually loading, the live cart measures 0px of * horizontal overflow at 390. The 94px THEAD overflow that was reported is what * happens when woocommerce-smallscreen.css is absent. * * This block is still correct on its own merits, for two independent reasons: * 1. The theme pins fixed column widths above (34+78+82+82+92 = 368px with * `table-layout:fixed`). In a ~298px mobile column that alone overflows the * moment Woo's smallscreen CSS is not in the cascade. Those widths are * released here. * 2. The approved design specifies row CARDS, not Woo's plain stacked list. * CSS-only — the cart template is untouched (that is separate, larger work). * * Woo's smallscreen rules are same-specificity and load EARLIER than this file, * so we win ties; `table.cart.shop_table_responsive` is used where an explicit * margin is wanted. The single `!important` below (text-align) is required * because woocommerce-smallscreen.css writes `text-align:right!important` on * every td — that is the ONLY place it uses !important in this area. ---------*/ @media (max-width:560px){ .woocommerce-cart table.cart{ display:block; width:100%; table-layout:auto; border:0; background:transparent; border-radius:0; overflow:visible; } .woocommerce-cart table.cart thead{display:none} .woocommerce-cart table.cart tbody{display:block;width:100%} /* one row = one card */ .woocommerce-cart table.cart.shop_table_responsive tbody tr.cart_item{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; column-gap:12px; row-gap:4px; align-items:center; width:100%; margin:0 0 10px; padding:12px; background:var(--wht); border:1px solid var(--bor); border-radius:16px; } /* Woo tints every 2nd row; inside cards that reads as a bug. */ .woocommerce-cart table.cart.shop_table_responsive tbody tr:nth-child(2n) td{ background-color:transparent; } .woocommerce-cart table.cart td{ display:block; width:auto; border-top:0; padding:0; text-align:left !important; /* beats woocommerce-smallscreen's !important */ } .woocommerce-cart table.cart td.product-thumbnail{grid-column:1;grid-row:1 / span 3} .woocommerce-cart table.cart td.product-name {grid-column:2;grid-row:1;font-weight:600;line-height:1.3} .woocommerce-cart table.cart td.product-remove {grid-column:3;grid-row:1;text-align:right !important} .woocommerce-cart table.cart td.product-price {grid-column:2;grid-row:2;font-size:13px;color:var(--soft)} .woocommerce-cart table.cart td.product-quantity{grid-column:2;grid-row:3} .woocommerce-cart table.cart td.product-subtotal{grid-column:3;grid-row:3;text-align:right !important;font-weight:800} /* Woo prints "Cena: " etc. from data-title; keep it, but as a small inline label rather than a floated block, and never on the two label-less cells. */ .woocommerce-cart table.cart td::before{ float:none; display:inline; font-weight:600; color:var(--soft); font-size:12px; } .woocommerce-cart table.cart td.product-name::before, .woocommerce-cart table.cart td.product-subtotal::before, .woocommerce-cart table.cart td.product-thumbnail::before, .woocommerce-cart table.cart td.product-remove::before, .woocommerce-cart table.cart td.actions::before{display:none} /* thumbnails already pinned to 64px above; keep the cell from claiming 78px */ .woocommerce-cart table.cart td.product-thumbnail{width:64px} /* the coupon / update row is a full-width strip, not a card */ .woocommerce-cart table.cart tbody tr:has(td.actions){ display:block; width:100%; margin:0; padding:0; border:0; background:transparent; } .woocommerce-cart table.cart td.actions{ display:block; width:100%; padding:0; } .woocommerce-cart table.cart td.actions .coupon{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; } .woocommerce-cart table.cart td.actions .coupon .input-text{ flex:1 1 140px; min-width:0; width:auto; } .woocommerce-cart table.cart td.actions .button{width:100%} .woocommerce-cart table.cart td.actions .coupon .button{width:auto;flex:0 0 auto} /* release the desktop fixed-column widths so nothing sets a 368px floor */ .woocommerce-cart table.cart th.product-remove, .woocommerce-cart table.cart td.product-remove, .woocommerce-cart table.cart th.product-price, .woocommerce-cart table.cart td.product-price, .woocommerce-cart table.cart th.product-quantity, .woocommerce-cart table.cart td.product-quantity, .woocommerce-cart table.cart th.product-subtotal, .woocommerce-cart table.cart td.product-subtotal{ width:auto; } /* the totals card is a plain 2-col table; keep it inside its box */ .woocommerce-cart .cart_totals table.shop_table{width:100%;table-layout:fixed} .woocommerce-cart .cart_totals table.shop_table th, .woocommerce-cart .cart_totals table.shop_table td{word-break:break-word} } /* DEFECT D4b (P1, follow-up) — the reset added to the collapse query above did NOT take effect: `.woocommerce .cart-collaterals{grid-column:2}` appears LATER in this file at the same (0,2,0) specificity, and a media query adds none, so the later rule won and the summary column kept forcing an IMPLICIT second grid track. MEASURED at 390px: table.cart rendered 187px wide (47px of document overflow with the legacy inline CSS suppressed) instead of filling the row. Restated here with (0,3,0) so it wins on specificity as well as order. */ @media (max-width:980px){ .woocommerce-cart .woocommerce .cart-collaterals{grid-column:1;width:100%} .woocommerce-cart .woocommerce form.woocommerce-cart-form{grid-column:1;min-width:0} } /* =========================================================================== MINI-CART DRAWER INTERIOR (iss-20260829-05, 2026-08-29) --------------------------------------------------------------------------- header.php renders `

` and fills it with woocommerce_mini_cart(). design.css styles the DRAWER (.mini, .mini-h, .mini-f) but nothing styled its CONTENTS — that job was being done, by accident, by 68 `.cart-widget-side ...` rules inside the woodmart-era "Simple Custom CSS and JS" blocks. inc/legacy-suppression.php now stops those blocks reaching this theme, so the interior is restyled here deliberately. Deliberately NOT a port of those 68 rules. About half of them target woodmart markup this theme never emits (.wd-scroll-content, .wd-heading, .wd-cross-icon, .custom-sale-div) and the rest carry the OLD brand's type and colour. Carrying them forward is exactly the coupling we are removing. These are written against this theme's own tokens instead. ========================================================================= */ .mini .widget_shopping_cart_content { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; } .mini ul.woocommerce-mini-cart { list-style:none; margin:0; padding:0; overflow-y:auto; flex:1 1 auto; min-height:0; } /* WooCommerce nests the INSIDE the product , with the title as a sibling TEXT NODE of that image -- not as separate children of the

. So the ANCHOR carries the two-column layout; treating the

as the grid put the thumbnail above the title instead of beside it. */ .mini ul.woocommerce-mini-cart li.mini_cart_item { position:relative; display:block; margin:0; padding:10px 44px 10px 0; border-bottom:1px solid #E9DCCB; } .mini ul.woocommerce-mini-cart li.mini_cart_item::after { content:none; } /* Woo clearfix */ .mini ul.woocommerce-mini-cart li.mini_cart_item > a:not(.remove) { display:grid; grid-template-columns:56px minmax(0,1fr); gap:10px; align-items:center; text-decoration:none; color:#503A32; font-size:14px; font-weight:700; line-height:1.35; } .mini ul.woocommerce-mini-cart li.mini_cart_item img { width:56px; height:56px; object-fit:cover; border-radius:12px; margin:0; float:none; } /* sits under the title, aligned to the text column (56px thumb + 10px gap) */ .mini ul.woocommerce-mini-cart li.mini_cart_item .quantity { display:block; margin-top:6px; padding-left:66px; font-size:13px; color:#8A7265; } /* Woo prints the remove link FIRST in source order; pin it top-right instead of letting it lead the row. 44x44 = the minimum touch target. */ .mini ul.woocommerce-mini-cart li.mini_cart_item a.remove_from_cart_button { position:absolute; top:6px; right:0; display:flex; align-items:center; justify-content:center; width:44px; height:44px; font-size:18px; line-height:1; text-decoration:none; color:#8A7265; background:none; border-radius:999px; } .mini ul.woocommerce-mini-cart li.mini_cart_item a.remove_from_cart_button:hover { color:#C96A4F; background:#F3EAE0; } .mini .woocommerce-mini-cart__total { display:flex; justify-content:space-between; align-items:baseline; margin:12px 0 0; padding-top:12px; border-top:1px solid #E9DCCB; font-size:17px; font-weight:800; color:#503A32; } .mini .woocommerce-mini-cart__total strong { font-weight:700; } .mini .woocommerce-mini-cart__buttons { display:flex; flex-direction:column; gap:9px; margin:12px 0 0; } .mini .woocommerce-mini-cart__buttons a.button { display:block; width:100%; text-align:center; box-sizing:border-box; padding:13px 18px; border-radius:999px; font-size:14px; font-weight:800; text-decoration:none; border:1.5px solid #503A32; background:transparent; color:#503A32; } .mini .woocommerce-mini-cart__buttons a.button.checkout { background:#E8927C; border-color:#E8927C; color:#fff; order:-1; /* primary action first */ } .mini .woocommerce-mini-cart__buttons a.button.checkout:hover { background:#C96A4F; border-color:#C96A4F; } .mini .woocommerce-mini-cart__empty-message { margin:18px 0; padding:22px 16px; text-align:center; color:#8A7265; font-size:14px; border:1px dashed #E9DCCB; border-radius:16px; } /* --------------------------------------------------------------------------- * Checkout proto-parity pass (2026-08-31) — deltas measured in a real browser * against ryytas-prototipas.html #pg-checkout at 1440px. * ------------------------------------------------------------------------- */ /* DEFECT: design.css carries a bare element rule `input{...;width:100%}`. Inside a * .ropt card `.ropt input{width:auto}` cancels it, but WooCommerce's payment list * rows are

, not .ropt — so every gateway radio was * stretched to the full card width and pushed onto its own line, which is what made * step 3 render as a naked radio floating above each label. Pin every checkout radio. */ .ryytas-checkout input[type="radio"], .woocommerce-checkout .ckform input[type="radio"] { width:18px !important; height:18px !important; min-width:18px; max-width:18px; flex:0 0 auto; margin:0 2px 0 0; padding:0 !important; border:0 !important; border-radius:50%; background:none !important; accent-color:var(--ac); } /* Gateway meta (proto .soft) sits right-aligned on the card, like .ropt b. */ .ryytas-checkout #payment ul.payment_methods li.wc_payment_method > label .soft { margin-left:auto; font-weight:500; } /* Proto shows text meta, never card-logo strips. */ .ryytas-checkout #payment ul.payment_methods li.wc_payment_method > label img { display:none; } /* Step 1: the .ryytas-ship wrapper broke .ckform's 11px gap between shipping cards. */ .ryytas-checkout .ryytas-ship { display:flex; flex-direction:column; gap:11px; } /* Step 1: pickup-point picker moves under the shipping cards (proto stopped filling it (187px inside a 317px row). Restore block rows for the * contact fields (the terms row keeps its own inline layout via its wrapper). */ .ryytas-checkout #customer_details p.form-row.validate-required { display:block; } .ryytas-checkout #customer_details p.form-row:has(input[type="checkbox"]) { display:flex; } .ryytas-checkout #customer_details .form-row input, .ryytas-checkout #customer_details .form-row textarea, .ryytas-checkout #customer_details .form-row select { width:100% !important; } .ryytas-checkout #customer_details .form-row input[type="checkbox"] { width:18px !important; } /* Step-3 order bump (proto .bump). A generic `label{display:block}` rule flattened * the card, so restore the prototype's row layout inside the checkout. */ .ryytas-checkout .bump { display:flex !important; align-items:center; gap:12px; margin:8px 0 0; border:1.5px dashed var(--ac) !important; border-radius:14px; background:#E8927C0D; padding:12px 14px; cursor:pointer; } .ryytas-checkout .bump img { width:48px !important; height:48px !important; border-radius:9px; object-fit:cover; flex:0 0 auto; } .ryytas-checkout .bump .binfo { flex:1; display:flex; flex-direction:column; gap:1px; } .ryytas-checkout .bump.bump-on { background:#E8927C1F; } /* ---- Cross-sell row + cart summary (prototype parity, 2026-08-31) --------- */ /* Prototype .xsell row: dashed card, 64px thumb left, copy centre, CTA right. * The row is a

(it POSTs the tier contract), which defaults to block. */ .xsell { margin-top:14px; } .xsell .lbl { display:block; margin-bottom:8px; } .xsell .xrow { display:flex; align-items:center; gap:12px; margin:0; background:var(--oat); border:1.5px dashed var(--bor); border-radius:14px; padding:10px 12px; } .xsell .xrow img { width:56px !important; height:56px !important; border-radius:10px; object-fit:cover; flex:0 0 auto; } .xsell .xinfo { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; } .xsell .xinfo b { font-size:14px; } .xsell .xinfo span { font-size:12.5px; color:var(--soft); } .xsell .xrow .btn { flex:0 0 auto; } /* The coupon now lives in the summary (proto .nlrow); hide Woo's in-table one. */ .woocommerce-cart .woocommerce-cart-form .actions .coupon { display:none; } .woocommerce-cart .cart_totals .nlrow { display:flex; gap:8px; align-items:center; margin:10px 0; } .woocommerce-cart .cart_totals .nlrow input { flex:1 1 auto; min-width:0; margin:0; } .woocommerce-cart .cart_totals .nlrow .btn { flex:0 0 auto; white-space:nowrap; } /* Mini-cart drawer: prototype order — progress, lines, cross-sell, totals, CTAs. */ .mini .prog { margin:12px 0; } .mini .xsell { margin:12px 0; } .mini .btn-big { width:100%; margin-top:8px; text-align:center; } /* Mini-cart line meta (Plāns / Iepakojumi) — Woo renders it as a

/