/* ==========================================================================
checkout-redesign.css — e-spotrebice.sk multi-step checkout (2026)
Scoped to body#order-opc. Modernizes the Zelarg OPC v2.3.10 presentation
layer WITHOUT touching the module's order/AJAX backend. Step IDs
(#opc_step-1..4) + #opc_goto* + form field names are preserved.
Style system aligned with category-redesign (navy/orange, Inter).
========================================================================== */
body#order-opc {
--navy:#003a78; --navy-d:#0a2a4c; --orange:#F57C00; --orange-d:#E65100;
--ink:#1e2a38; --muted:#6b7a8d; --line:#e3e9f0; --bg:#eef2f7; --green:#16a34a;
background:#f4f7fb;
/* disable browser scroll-anchoring: when a tall step is hidden and a different-height
step is shown, the browser would shift the scroll position to "follow" content. We
want the page to stay exactly put on step changes — only the active step + content
change, no perceived movement. */
overflow-anchor:none;
}
body#order-opc * { overflow-anchor:none; }
/* ---- kill legacy checkout chrome we replace ---- */
body#order-opc #order_step, /* old 5-step chevron bar */
body#order-opc .summary-top,
body#order-opc #cart_title,
body#order-opc h1#cart_title { display:none !important; }
/* focused funnel: hide the global fixed mobile bottom nav so it can't overlap the
checkout form / compete with the step CTA (Alza/Nay-style minimal checkout chrome) */
body#order-opc .es-bottom-nav { display:none !important; }
/* keep center column full width inside theme */
body#order-opc #center_column { float:none; width:auto; padding:0; }
body#order-opc #opc-checkout-container.es-co { max-width:1280px; margin:0 auto; padding:0 16px 40px; }
/* ====================== PROGRESS BAR (3 steps) ====================== */
.es-coprog { background:#fff; border:1px solid var(--line); border-radius:14px;
margin:18px 0 14px; } /* inside the padded container → aligns with the cards below */
.es-coprog-in { display:flex; align-items:center; justify-content:center; height:58px; gap:0; }
.es-pstep { display:flex; align-items:center; gap:10px; font:700 14px/1 'Inter',sans-serif; color:#aeb8c4; }
.es-pstep .n { width:28px; height:28px; border-radius:50%; border:2px solid #cfd8e3;
display:grid; place-items:center; font:800 13px/1 'Inter',sans-serif; color:#aeb8c4; background:#fff; transition:.25s; }
.es-pstep.done { color:var(--navy-d); } .es-pstep.done .n { background:var(--green); border-color:var(--green); color:#fff; }
.es-pstep.active { color:var(--navy-d); } .es-pstep.active .n { background:var(--navy); border-color:var(--navy); color:#fff; }
/* steps already reached are clickable to jump back/revisit */
.es-pstep--nav { cursor:pointer; }
.es-pstep--nav:hover { color:var(--navy); }
.es-pstep--nav:hover .n { border-color:var(--navy); }
.es-pline { width:70px; height:2px; background:#dde5ee; margin:0 14px; }
/* mobile sticky action bar (Nay-style: back + continue at top) — hidden on desktop */
.es-mbar { display:none; }
/* ====================== GRID LAYOUT ====================== */
.co-grid { display:grid; grid-template-columns:1fr 340px; gap:22px; align-items:start; }
.co-main { display:flex; flex-direction:column; gap:16px; min-width:0; }
/* card wrapper for each step block */
body#order-opc #opc_step-1,
body#order-opc #opc_step-2,
body#order-opc #opc_step-3,
body#order-opc #opc_step-4 {
background:#fff; border:1px solid var(--line); border-radius:14px;
padding:20px 22px; box-shadow:0 6px 24px rgba(10,42,76,.05);
}
.es-sec-h { display:flex; align-items:center; justify-content:space-between; margin:0 0 14px; }
.es-sec-h .t { font:800 18px/1.2 'Inter Tight','Inter',sans-serif; color:var(--navy-d); }
/* ====================== STEP 1 — CART ====================== */
/* turn the legacy table into modern flex rows */
body#order-opc #order-detail-content,
body#order-opc #cart_summary,
body#order-opc #cart_summary tbody,
body#order-opc #cart_summary tfoot { display:block; width:100%; border:0; }
body#order-opc #cart_summary thead { display:none; }
body#order-opc #cart_summary tr.cart_item { display:flex; align-items:center; gap:14px;
padding:14px 0; border-bottom:1px solid var(--line); }
body#order-opc #cart_summary tr.cart_item td { display:block; border:0; padding:0; background:none; }
body#order-opc #cart_summary td.cart_product { flex:0 0 76px; width:76px; overflow:hidden; }
body#order-opc #cart_summary td.cart_product img { width:76px !important; height:76px !important; object-fit:contain;
border:1px solid var(--line); border-radius:10px; background:#fff; padding:4px;
font-size:0; color:transparent; } /* font-size:0 hides broken-image alt text on localhost; real img shows on prod */
body#order-opc #cart_summary td.cart_description { flex:1 1 auto; min-width:0; padding-right:16px; text-align:left !important; }
body#order-opc #cart_summary td.cart_description * { text-align:left !important; }
body#order-opc #cart_summary td.cart_description .product-name { margin:0; }
body#order-opc #cart_summary td.cart_description .product-name a { font:700 15.5px/1.3 'Inter',sans-serif; color:var(--navy-d); }
body#order-opc #cart_summary td.cart_description small { color:var(--muted); font:500 12.5px/1.4 'Inter',sans-serif; }
/* availability line — pulled from real product stock (quantity_available / available_later).
Colors copied 1:1 from PDP (product.css #availability_statut): available = green, not orderable = red.
PDP has NO orange tier — "Do X prac. dní" / "Na objednávku" are all green. */
body#order-opc .es-avail { display:inline-flex; align-items:center; gap:8px; margin-top:7px;
font:700 13.5px/1.3 'Inter',sans-serif; }
body#order-opc .es-avail::before { content:""; width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
/* tiers (shared scheme via Product::getStockInfo): in/soon=green, later=orange, order/out=red */
body#order-opc .es-avail.in, body#order-opc .es-avail.soon { color:#047857; }
body#order-opc .es-avail.in::before, body#order-opc .es-avail.soon::before { background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.18); }
body#order-opc .es-avail.later { color:#b45309; }
body#order-opc .es-avail.later::before { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.18); }
body#order-opc .es-avail.order, body#order-opc .es-avail.out { color:#b91c1c; }
body#order-opc .es-avail.order::before, body#order-opc .es-avail.out::before { background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.18); }
body#order-opc #cart_summary td.cart_ref { display:none !important; }
/* unit price column — keep current price, de-clutter */
body#order-opc #cart_summary td.cart_unit { flex:0 0 auto; text-align:right; }
body#order-opc #cart_summary td.cart_unit .price li { list-style:none; }
body#order-opc #cart_summary td.cart_unit .price .price-percent-reduction,
body#order-opc #cart_summary td.cart_unit .price .old-price { display:none; } /* line total carries the price */
body#order-opc #cart_summary tr.cart_item td.cart_unit { display:none !important; } /* hide unit col; total col shows price */
/* qty stepper -> modern pill (flex, +/− centered both axes) */
body#order-opc #cart_summary td.cart_quantity { flex:0 0 120px; width:120px; }
body#order-opc .cart_quantity_button { display:flex !important; align-items:stretch !important; float:none !important;
width:120px !important; min-width:120px; height:42px !important; border:1.5px solid #d3dde8; border-radius:10px;
overflow:hidden; background:#fff; }
body#order-opc .cart_quantity_input { order:2; flex:1 1 auto; width:auto !important; height:auto !important;
align-self:stretch; border:0 !important; border-left:1.5px solid #eef2f7 !important; border-right:1.5px solid #eef2f7 !important;
text-align:center; font:700 15px/1 'Inter',sans-serif !important; color:var(--navy-d) !important; background:#fff !important;
padding:0 !important; margin:0 !important; box-shadow:none !important; }
body#order-opc a.cart_quantity_down { order:1; }
body#order-opc a.cart_quantity_up { order:3; }
body#order-opc a.cart_quantity_up, body#order-opc a.cart_quantity_down,
body#order-opc #cart_summary div.cart_quantity_button a.cart_quantity_up,
body#order-opc #cart_summary div.cart_quantity_button a.cart_quantity_down {
flex:0 0 38px; width:38px !important; height:auto !important; align-self:stretch;
background:#f7f9fc !important; background-image:none !important;
display:flex !important; align-items:center !important; justify-content:center !important;
padding:0 !important; line-height:1 !important; cursor:pointer; text-decoration:none;
transform:none !important; position:static !important; top:auto !important; }
/* base-custom.css rotates these 90° AND pushes them down with position:relative;top:10px
→ undo both (the "−" was vertical and the glyphs sat at the bottom of the cell) */
/* keep the glyph on the cross-axis centre (base theme bottom-aligns the pseudo) */
body#order-opc #cart_summary div.cart_quantity_button a.cart_quantity_up::after,
body#order-opc #cart_summary div.cart_quantity_button a.cart_quantity_down::after {
align-self:center !important; vertical-align:middle !important; position:static !important; top:auto !important; bottom:auto !important; }
body#order-opc a.cart_quantity_up:hover, body#order-opc a.cart_quantity_down:hover { background:#eef2f7 !important; }
body#order-opc #cart_summary a.cart_quantity_up::after,
body#order-opc a.cart_quantity_up::after { content:"+" !important; }
body#order-opc #cart_summary a.cart_quantity_down::after,
body#order-opc a.cart_quantity_down::after { content:"\2212" !important; }
/* high specificity + reset any inherited icon-font / rotation / indent from the module so the
+/− render as plain horizontal glyphs, perfectly centered in the flex button */
body#order-opc #cart_summary a.cart_quantity_up::after,
body#order-opc #cart_summary a.cart_quantity_down::after,
body#order-opc a.cart_quantity_up::after, body#order-opc a.cart_quantity_down::after {
font-family:'Inter',Arial,Helvetica,sans-serif !important; font-weight:600 !important; font-size:19px !important;
line-height:1 !important; color:var(--navy) !important; display:block !important;
transform:none !important; writing-mode:horizontal-tb !important; text-indent:0 !important;
width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; background:none !important; }
/* line total + delete */
body#order-opc #cart_summary td.cart_total { flex:0 0 auto; text-align:right; min-width:104px;
display:flex !important; align-items:center; justify-content:flex-end; gap:12px; }
body#order-opc #cart_summary td.cart_total .price { font:800 17px/1 'Inter Tight','Inter',sans-serif; color:var(--navy-d); }
body#order-opc a.cart_quantity_delete { width:30px; height:30px; border-radius:8px; background:#f4f7fb;
display:inline-grid; place-items:center; position:relative; opacity:.7; }
body#order-opc a.cart_quantity_delete::after { content:"\00d7"; font:600 18px/1 'Inter',sans-serif; color:#d04545; }
body#order-opc a.cart_quantity_delete:hover { opacity:1; background:#fdeaea; }
/* last added product banner -> hide (redundant in checkout) */
body#order-opc .cart_last_product { display:none; }
/* ---- totals tfoot: hide B2B breakdown; summary shows in aside ---- */
body#order-opc #cart_summary tfoot tr.summary-line { display:none !important; } /* totals live in aside; .orig final row is force-shown by module → !important */
body#order-opc #cart_summary tfoot tr.cart_voucher_block { display:block; border:0; }
body#order-opc #cart_summary tfoot td#cart_voucher { display:block; padding:0; border:0; }
body#order-opc #tfoot_static_underlay { display:none; }
/* ---- coupon: collapsed link that expands ---- */
body#order-opc #cart_voucher h4 { display:none; } /* remove "Vouchers" heading */
body#order-opc .es-coupon-toggle { display:inline-flex; align-items:center; gap:7px; margin-top:16px;
font:600 13.5px/1 'Inter',sans-serif; color:var(--navy); cursor:pointer; }
body#order-opc .es-coupon-toggle::before { content:"+"; font-weight:800; }
body#order-opc .es-coupon-toggle.open::before { content:"\2212"; }
body#order-opc #cart_voucher #voucher { display:none; max-width:420px; margin-top:12px; }
body#order-opc #cart_voucher #voucher.open { display:block; }
body#order-opc #cart_voucher #voucher fieldset { border:0; padding:0; display:flex; gap:10px; }
body#order-opc #cart_voucher input.discount_name { flex:1; height:44px; border:1.5px solid #d3dde8;
border-radius:10px; padding:0 13px; font:500 14px/1 'Inter',sans-serif; }
body#order-opc #cart_voucher input[type=submit].button { height:44px; padding:0 18px; border:1.5px solid var(--navy);
background:#fff; color:var(--navy); border-radius:10px; font:700 14px/1 'Inter',sans-serif; cursor:pointer; }
body#order-opc #cart_voucher input[type=submit].button:hover { background:var(--navy); color:#fff; }
body#order-opc #cart_voucher .title_offers { display:none; }
body#order-opc #cart_voucher #display_cart_vouchers { margin-top:10px; font:500 12.5px/1.5 'Inter',sans-serif; color:var(--muted); }
/* applied discount rows */
body#order-opc tr.cart_discount { display:flex !important; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--line); }
body#order-opc tr.cart_discount td { display:block; border:0; padding:0; }
body#order-opc tr.cart_discount .cart_discount_delete { display:none; }
/* ====================== SUMMARY ASIDE ====================== */
.co-aside { position:sticky; top:14px; display:flex; flex-direction:column; gap:14px; }
.es-sum { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:0 6px 24px rgba(10,42,76,.05); }
.es-sum h3 { font:800 12px/1 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
.es-sum .row { display:flex; justify-content:space-between; align-items:center; font:500 14px/1.8 'Inter',sans-serif; color:var(--ink); margin-left:0; margin-right:0; }
/* Bootstrap .row adds clearfix ::before/::after pseudo-elements that, inside a flexbox,
become flex items and push the label+amount toward the center. Remove them so the label
sits hard-left and the amount hard-right. */
body#order-opc .es-sum .row::before, body#order-opc .es-sum .row::after { content:none; display:none; }
body#order-opc .es-sum .row > span:first-child { text-align:left; }
body#order-opc .es-sum .row > span:last-child, body#order-opc .es-sum .row > b { text-align:right; margin-left:auto; }
.es-sum .row.free b { color:var(--green); font-weight:700; }
.es-sum .row.total { margin-top:11px; padding-top:12px; border-top:1px solid var(--line);
font:800 19px/1 'Inter Tight','Inter',sans-serif; color:var(--navy-d); }
.es-sum .row.total small { font:500 11px/1 'Inter',sans-serif; color:var(--muted); }
/* mini product recap inside the summary (Alza-style) — desktop only, steps 2/3 (JS toggles .show) */
body#order-opc .es-sum-items { display:none; flex-direction:column; gap:11px; margin:0 0 14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
body#order-opc .es-sum-items.show { display:flex; }
body#order-opc .es-sum-item { display:flex; align-items:center; gap:11px; }
body#order-opc .es-sum-item img { width:42px; height:42px; flex:0 0 42px; object-fit:contain; border:1px solid var(--line); border-radius:8px; background:#fff; padding:2px; }
body#order-opc .es-sum-item-name { flex:1 1 auto; min-width:0; font:600 12px/1.35 'Inter',sans-serif; color:var(--ink);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
body#order-opc .es-sum-item-price { flex:0 0 auto; font:700 12.5px/1.2 'Inter',sans-serif; color:var(--ink); white-space:nowrap; }
@media (max-width:880px){ body#order-opc .es-sum-items, body#order-opc .es-sum-items.show { display:none !important; } }
.es-trust { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px;
display:flex; flex-direction:column; gap:11px; }
.es-trust .ti { display:flex; align-items:center; gap:10px; font:600 12.5px/1.25 'Inter',sans-serif; color:var(--ink); }
.es-trust .ti svg { width:18px; height:18px; flex:0 0 18px; color:var(--green); }
.es-trust .ti small { color:var(--muted); font-weight:400; }
/* ---- DESKTOP sticky sidebar CTA (Alza/BrainMax): primary action stays next to the total ----
Lives in the already-sticky .co-aside (JS-injected under .es-sum). Mobile/tablet keep the
fixed bottom bar (#es-mbot) instead. */
body#order-opc .es-side-cta { display:flex; flex-direction:column; gap:8px; }
body#order-opc .es-side-fwd {
width:100%; height:50px; border:0; border-radius:13px; cursor:pointer;
background:var(--orange); color:#fff; font:800 15px/1 'Inter',sans-serif;
box-shadow:0 6px 16px rgba(245,124,0,.28); transition:background .15s; }
body#order-opc .es-side-fwd:hover { background:var(--orange-d); }
body#order-opc .es-side-back {
background:none; border:0; cursor:pointer; padding:5px; align-self:center;
color:var(--muted); font:600 13px 'Inter',sans-serif; }
body#order-opc .es-side-back:hover { color:var(--navy); }
@media (max-width:880px){ body#order-opc .es-side-cta { display:none !important; } }
/* on desktop the sidebar CTA is the single primary action → hide the in-content step buttons
(forwardOne/backOne still click these hidden controls) */
@media (min-width:881px){
body#order-opc .es-actions,
body#order-opc #opc_goto1,
body#order-opc #opc_goto3,
body#order-opc #opc_goto2_back,
body#order-opc .confirm_button_div { display:none !important; }
}
/* ====================== ACTIONS / BUTTONS ====================== */
.es-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:4px; }
/* primary "continue" buttons (module ids) */
body#order-opc #opc_goto2, body#order-opc #opc_goto3, body#order-opc #opc_goto4,
body#order-opc .es-cta {
float:none !important; height:52px; border:0; border-radius:12px; background:var(--orange) !important;
color:#fff !important; font:800 16px/1 'Inter',sans-serif !important; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 26px; }
body#order-opc #opc_goto2:hover, body#order-opc #opc_goto3:hover, body#order-opc #opc_goto4:hover { background:var(--orange-d) !important; }
/* back / ghost buttons */
body#order-opc #opc_goto1, body#order-opc #opc_goto2_back, body#order-opc #opc_goto3_back,
body#order-opc .es-back {
float:none !important; background:none !important; border:0 !important; color:var(--muted) !important;
font:600 14px/1 'Inter',sans-serif !important; cursor:pointer; padding:10px 6px; }
body#order-opc #opc_goto1:hover, body#order-opc #opc_goto2_back:hover, body#order-opc #opc_goto3_back:hover { color:var(--navy) !important; }
/* the step-1 continue button sits in its own actions row */
body#order-opc #opc_step-1 #opc_goto2 { margin-top:4px; }
/* step-2 nav row (wrapped by JS): Späť left, Pokračovať right, below payments */
body#order-opc .es-actions--s2 { margin-top:20px; }
/* ====================== EMPTY CART ====================== */
body#order-opc .es-empty { background:#fff; border:1px solid var(--line); border-radius:14px;
padding:48px 24px; text-align:center; max-width:560px; margin:24px auto; }
body#order-opc .es-empty h2 { font:800 22px/1.3 'Inter Tight','Inter',sans-serif; color:var(--navy-d); margin:0 0 8px; }
body#order-opc .es-empty a { color:var(--orange); font-weight:700; }
/* ====================== STEP 2 — SHIPPING (grouped cards) ====================== */
/* full-width single column (carrier cards, then payment) instead of the module 2-col */
body#order-opc #opc_step-2 .step-2-container { display:block; }
body#order-opc #opc_step-2 .step-2-container > .col-xs-12 { width:100%; max-width:none; float:none; padding:0; }
/* hide the raw module carrier table — radios stay in DOM (we proxy onto them) */
body#order-opc #carrierTable { display:none !important; }
body#order-opc #es-ship { display:flex; flex-direction:column; gap:8px; margin:0 0 12px; }
body#order-opc .es-ship-h, body#order-opc .es-pay-h {
font:800 13px/1.2 'Inter',sans-serif; letter-spacing:.04em; text-transform:uppercase;
color:var(--muted); margin:2px 0 4px; }
body#order-opc .es-ship-card { position:relative; border:1.5px solid var(--line); border-radius:14px;
background:#fff; transition:border-color .15s, box-shadow .15s, background .15s; overflow:visible; }
/* raise the card while its "i" tooltip is open so the tooltip isn't covered by the next card */
body#order-opc .es-ship-card:hover, body#order-opc .es-ship-card:focus-within { z-index:30; }
body#order-opc .es-ship-card.sel { border-color:var(--navy); border-width:2px; background:#f6f9fd; box-shadow:0 4px 18px rgba(0,58,120,.08); }
body#order-opc .es-ship-card.sel .es-ship-click { padding:8px 12px; } /* compensate +0.5px border so content doesn't shift */
body#order-opc .es-ship-radio { position:absolute; opacity:0; pointer-events:none; }
body#order-opc .es-ship-click { display:flex; align-items:center; gap:11px; padding:9px 13px; cursor:pointer; }
/* selection tick on the LEFT (order:-1), consistent with the payment radios */
body#order-opc .es-ship-click::after { content:""; order:-1; flex:0 0 20px; width:20px; height:20px; margin-right:2px;
border:2px solid #cfd8e3; border-radius:50%; box-sizing:border-box; transition:all .15s; }
/* selected = radio-style dot (navy ring + navy centre dot) — consistent with the payment radios */
body#order-opc .es-ship-card.sel .es-ship-click::after { border-color:var(--navy);
background:radial-gradient(circle at center, var(--navy) 0 5px, #fff 5.5px); }
body#order-opc .es-ship-ic { flex:0 0 34px; display:flex; align-items:center; justify-content:center; }
body#order-opc .es-ship-ic svg { display:block; }
body#order-opc .es-ship-ic .es-ic-line { width:22px; height:22px; color:#7a8aa0; transition:color .15s; }
body#order-opc .es-ship-card.sel .es-ship-ic .es-ic-line { color:var(--navy); }
body#order-opc .es-ship-ic .es-ic-dhl { width:36px; height:auto; }
body#order-opc .es-ship-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
body#order-opc .es-ship-title { display:flex; align-items:center; gap:6px; font:700 13.5px/1.25 'Inter',sans-serif; color:var(--ink); }
body#order-opc .es-ship-sub { font:500 11px/1.35 'Inter',sans-serif; color:var(--muted); }
body#order-opc .es-ship-price { flex:0 0 auto; font:800 14px/1 'Inter',sans-serif; color:var(--ink); white-space:nowrap; }
body#order-opc .es-ship-price.free { color:var(--green); }
/* addon checkbox row */
/* checkbox left-aligned with the carrier TITLE text above it. Title x = click padding-left 13
+ radio 20 + radio margin 2 + gap 11 + icon 34 + gap 11 = 91px. Price stays right-aligned
with the carrier price (padding-right 13 = same as .es-ship-click). */
body#order-opc .es-ship-addon { display:flex; align-items:center; gap:10px; margin:0;
padding:7px 13px 8px 91px; border-top:1px dashed var(--line); cursor:pointer; }
@media (max-width:560px){
/* phones: shorter indent (under the icon, ~46px) so the long add-on label keeps enough width */
body#order-opc .es-ship-addon { padding-left:46px; }
}
body#order-opc .es-ship-addonbox { width:18px; height:18px; flex:0 0 18px; accent-color:var(--orange); cursor:pointer; margin:0; }
body#order-opc .es-ship-addon-txt { flex:1 1 auto; font:600 13px/1.35 'Inter',sans-serif; color:var(--ink); }
body#order-opc .es-ship-addon-txt small { display:block; font-weight:400; color:var(--muted); font-size:11.5px; }
body#order-opc .es-ship-addon-price { flex:0 0 auto; font:800 13.5px/1 'Inter',sans-serif; color:var(--orange); white-space:nowrap; }
/* module's own carrier heading hidden — we render our own ("Vyberte spôsob doručenia") */
body#order-opc #choose_delivery { display:none !important; }
/* kill the module's loading overlays/spinners — carrier changes are now instant (no re-render) */
body#order-opc .opc-overlay,
body#order-opc #opc_delivery_methods-overlay,
body#order-opc #opc_payment_methods-overlay { display:none !important; }
/* "Odvoz starého spotrebiča" (return-old service) as a clean addon card under the carriers */
body#order-opc #return_old { margin:12px 0 0; }
body#order-opc #return_old hr { display:none; }
body#order-opc #return_old > label { display:flex; align-items:center; gap:11px; margin:0; cursor:pointer;
border:1.5px solid var(--line); border-radius:14px; background:#fff; padding:13px 16px;
font:600 13.5px/1.3 'Inter',sans-serif; color:var(--ink); }
body#order-opc #return_old input[type=checkbox] { width:18px; height:18px; flex:0 0 18px; accent-color:var(--orange); margin:0; cursor:pointer; }
body#order-opc #return_old .price { margin-left:auto; font:800 14px/1 'Inter',sans-serif; color:var(--orange); white-space:nowrap; }
/* the module's base CSS puts `padding:0 5px` on these wrappers → return-old + payment cards sat
~5px right of our carrier cards. Zero it so all three sections share the same left edge. */
body#order-opc #opc_delivery_methods, body#order-opc #opc_payment_methods,
body#order-opc .order_carrier_content { padding-left:0 !important; padding-right:0 !important; }
/* "i" info tooltip (carriers + payments) */
body#order-opc .es-i { position:relative; flex:0 0 16px; width:16px; height:16px; display:inline-flex;
align-items:center; justify-content:center; border:1.5px solid #c2cdda; border-radius:50%;
color:#8593a4; font:700 10px/1 'Inter',sans-serif; cursor:help; font-style:normal; user-select:none; }
body#order-opc .es-i:hover { border-color:var(--navy); color:var(--navy); }
body#order-opc .es-i .es-tip { position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%);
width:248px; max-width:72vw; background:var(--navy-d,#022b54); color:#fff; padding:10px 12px; border-radius:10px;
font:500 11.5px/1.5 'Inter',sans-serif; text-align:left; letter-spacing:0; text-transform:none;
box-shadow:0 10px 30px rgba(2,27,54,.28); opacity:0; visibility:hidden; transition:opacity .15s; z-index:80; pointer-events:none; }
body#order-opc .es-i .es-tip::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
border:6px solid transparent; border-top-color:var(--navy-d,#022b54); }
/* show on hover; on keyboard focus only (:focus-visible) — a mouse CLICK must NOT leave the
tooltip stuck open (the old :focus did exactly that → "first one freezes"). Split into two
rules so an unsupported :focus-visible can't invalidate the hover rule. */
body#order-opc .es-i:hover .es-tip { opacity:1; visibility:visible; }
body#order-opc .es-i:focus-visible .es-tip { opacity:1; visibility:visible; }
/* ====================== STEP 2 — PAYMENT (card list) ====================== */
/* drop the module's outer bordered