/* ===== Xoffroad custom 3-tab cart/checkout ===== */

.x-checkout-page { max-width: 1200px; margin: 0 auto; padding: 10px 10px 90px; text-align: left; }

/* page title + help box */
.x-help-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; margin: 10px 0 20px; }
.x-page-title { font-size: 34px; font-weight: 700; margin: 0; }
.x-help-box { background: #fff; border-radius: 8px; padding: 14px 22px; display: flex; align-items: center; gap: 18px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.x-help-text { font-weight: 700; }
.x-help-mail { display: inline-flex; align-items: center; gap: 8px; color: #1a7bc4; }
.x-help-mail a { color: #444; text-decoration: none; }

/* tabs */
.x-tabs { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.x-tabs-header { display: flex; border-bottom: 1px solid #eee; }
/* step indicators, not links - the customer moves between steps with the pay-bar buttons.
   min-width:0 for the same reason as on .x-tab2-methods: without it the three steps refuse to shrink
   below their own text and the last one ("Doprava a platba") hangs out over the edge of the card */
.x-tab-link { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 10px; text-decoration: none; color: #666; font-weight: 700; border-bottom: 3px solid transparent; cursor: default; }
.x-tab-link .x-tab-num { width: 28px; height: 28px; border-radius: 50%; background: #8a8f98; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.x-tab-link.active { color: #B61D22; border-bottom-color: #B61D22; }
.x-tab-link.x-tab-disabled { opacity: .45; }
.x-tab-link.active .x-tab-num { background: #B61D22; }
.x-tab-pane { display: none; padding: 20px; }
.x-tab-pane.active { display: block; }
.x-tab-loading { padding: 40px; text-align: center; color: #888; }

/* cart items */
.x-cart-items { display: flex; flex-direction: column; }
.x-cart-item { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid #eee; }
.x-item-picture { flex: none; width: 90px; }
.x-item-picture img { max-width: 90px; max-height: 90px; }
.x-item-main { flex: 1 1 auto; min-width: 200px; }
.x-item-name { font-weight: 700; font-size: 16px; color: #333; text-decoration: none; display: block; margin-bottom: 6px; }
.x-item-stock { flex: none; width: 130px; }
.x-stock-in { color: #28a745; font-weight: 700; font-size: 13px; }
.x-item-qty { flex: none; display: flex; align-items: center; gap: 6px; }
.x-qty-btn { width: 36px; height: 36px; border: 1px solid #dcdfe3; border-radius: 50%; background: #fff; font-size: 18px; line-height: 1; cursor: pointer; color: #333; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; }
.x-qty-btn:hover { border-color: #1a7bc4; color: #1a7bc4; background: #f2f8fd; }
.x-qty-input { width: 46px; height: 36px; border: 1px solid #dcdfe3; border-radius: 8px; background: #fff; text-align: center; font-weight: 700; font-size: 15px; }
.x-item-price { flex: none; width: 140px; text-align: right; }
.x-unit-price { display: block; color: #999; font-size: 13px; }
.x-sub-total { display: block; font-weight: 700; font-size: 17px; color: #B61D22; }
.x-item-remove { flex: none; width: 40px; text-align: center; }
.x-remove-btn { border: none; background: transparent; color: #aaa; cursor: pointer; }
.x-remove-btn:hover { color: #B61D22; }

/* related products under a cart line */
.x-related-block { margin-top: 4px; }
.x-related-toggle { font-size: 12px; font-weight: 700; color: #666; text-decoration: underline; letter-spacing: .3px; }
.x-related-toggle .x-related-from { color: #B61D22; }
.x-related-toggle.open .x-related-arrow { display: inline-block; transform: rotate(180deg); }
.x-related-list { margin-top: 10px; border: 1px solid #eee; border-radius: 6px; padding: 6px 12px; }
.x-related-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f3f3f3; }
.x-related-item:last-child { border-bottom: none; }
.x-related-picture img { max-width: 50px; max-height: 50px; }
.x-related-info { flex: 1; }
.x-related-name { display: block; font-size: 13px; color: #333; text-decoration: none; }
.x-related-price { font-weight: 700; color: #B61D22; font-size: 13px; }
/* square for now - the rounded look comes back later, see the note above .x-paybar-back */
/* .x-related-choose is the same button, rendered as a link to the product page for a product that
   cannot be completed inline (it requires a text/date/file attribute) */
.x-related-addtocart,
.x-related-choose { padding: 6px 14px; border-radius: 0; /* was 18px */ border: none; background: #B61D22; color: #fff; cursor: pointer; font-size: 13px; text-decoration: none; display: inline-block; }
.x-related-addtocart:hover,
.x-related-choose:hover { background: #8F1619; color: #fff; }

/* inline size/colour picker revealed for products that require an option before they can be added */
/* Inline attribute pickers in the related / cross-sell quick-add lists.

   One row per attribute with the label in a fixed first column, so a product carrying several of them
   reads as a form rather than as a run-on line of controls. The values are chips: the native radio /
   checkbox stays in the DOM so the control keeps working (and stays keyboard-focusable - it is only
   moved out of sight, never display:none) while the chip beside it carries the whole appearance. */
.x-addable-attrs {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 10px; padding-top: 10px; border-top: 1px dashed #eddcdc;
}
.x-addable-attr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.x-addable-attr-label {
    flex: 0 0 auto; min-width: 92px;
    font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #777;
}
.x-addable-attr-req { color: #B61D22; }
.x-addable-attr-options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.x-addable-attr-option { display: inline-flex; margin: 0; cursor: pointer; }
/* kept in the layout but invisible - display:none would drop it out of the tab order */
.x-addable-attr-option input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.x-addable-attr-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid #ddd; border-radius: 999px; padding: 4px 12px;
    font-size: 12px; line-height: 1.4; color: #444; background: #fff; white-space: nowrap;
    transition: border-color .12s, background-color .12s, color .12s;
}
.x-addable-attr-option:hover .x-addable-attr-chip { border-color: #B61D22; color: #B61D22; }
.x-addable-attr-option input:checked + .x-addable-attr-chip {
    border-color: #B61D22; background: #B61D22; color: #fff; font-weight: 700;
}
/* the focus ring has to be drawn on the chip, the input itself is not visible */
.x-addable-attr-option input:focus + .x-addable-attr-chip { box-shadow: 0 0 0 2px rgba(182,29,34,.25); }
.x-addable-attr-swatch {
    display: inline-block; width: 14px; height: 14px; flex: 0 0 auto;
    border: 1px solid rgba(0,0,0,.2); border-radius: 50%;
}
.x-addable-attr-option input:checked + .x-addable-attr-chip .x-addable-attr-swatch { border-color: rgba(255,255,255,.7); }

select.x-addable-attr-input {
    border: 1px solid #ddd; border-radius: 999px; padding: 4px 10px;
    font-size: 12px; color: #444; background: #fff; max-width: 200px;
}
select.x-addable-attr-input:focus { border-color: #B61D22; outline: none; }

.x-addable-attr-error { font-size: 12px; color: #B61D22; font-weight: 700; }
.x-addable-attr-error:before { content: "\2716\00a0"; }

@media (max-width: 600px) {
    .x-addable-attr-label { flex: 1 0 100%; min-width: 0; }
}
.x-advantageous-goto { color: #B61D22; font-size: 12px; font-weight: 700; text-decoration: underline; }

/* delivery banner */
.x-delivery-banner { display: flex; align-items: center; gap: 12px; background: #f5f7f9; border-radius: 8px; padding: 14px 20px; margin: 18px auto; width: fit-content; color: #333; }
.x-delivery-banner svg { color: #B61D22; }
.x-delivery-banner strong { color: #B61D22; }

/* advantageous products */
.x-advantageous { margin-top: 25px; }
.x-advantageous-title { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.x-advantageous-item { display: flex; align-items: center; gap: 15px; padding: 12px 0; border-bottom: 1px solid #eee; }
/* same red pill as the related-products list, so both "add this too" lists behave and look alike */
.x-advantageous-item .x-advantageous-addtocart,
.x-advantageous-item .x-advantageous-choose { flex: none; padding: 8px 18px; border-radius: 0; border: none; background: #B61D22; color: #fff; cursor: pointer; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; display: inline-block; }
.x-advantageous-item .x-advantageous-addtocart:hover,
.x-advantageous-item .x-advantageous-choose:hover { background: #8F1619; color: #fff; }
.x-advantageous-picture img { max-width: 70px; max-height: 70px; }
.x-advantageous-info { flex: 1; }
.x-advantageous-nameline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.x-advantageous-name { font-weight: 700; color: #333; text-decoration: none; }
.x-advantageous-price { color: #B61D22; font-weight: 700; }
.x-advantageous-desc { color: #777; font-size: 13px; }

/* tab 1 footer (discount + totals) */
.x-tab1-footer { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; margin-top: 25px; flex-wrap: wrap; }

/* discount coupon. The apply/remove buttons are square like the pay-bar ones - see the note above
   .x-paybar-back for why, and change them together when the rounded design comes back. */
/* "Poznámka k objednávke" on the left, the coupon on the right. Both are .x-form-field controls, so the
   label, height (42px), border and 6px radius come from the same rules and the two line up.
   The input and the button are one joined control rather than two loose boxes with a gap; the button's
   square corners are clipped by the group's overflow:hidden. Every rule is scoped under .x-coupon-group -
   .x-form-field already styles bare inputs, and an unscoped single class loses that cascade. */
/* order-level validation errors, shown next to the pay bar so they are visible from any tab */
.x-form-errors { margin: 16px 0 0; border-radius: 6px; }

/* per-field validation. The summary box above the pay bar says what is wrong; these say where.
   .x-field-error goes on the control itself, .x-field-error-group on a whole radio list (doprava /
   platba) - ringing only the first courier would read as "that one is wrong" rather than "pick one". */
.x-field-error,
.x-form-field .x-field-error { border-color: #B61D22; box-shadow: 0 0 0 3px rgba(182,29,34,.10); }
input[type="checkbox"].x-field-error,
input[type="radio"].x-field-error { outline: 2px solid #B61D22; outline-offset: 2px; box-shadow: none; }
.x-field-error-group .x-method-item { border-color: #E39B9D; }
.x-field-error-msg { margin-top: 5px; color: #B61D22; font-size: 13px; font-weight: 700; }

.x-note-coupon-row { display: flex; align-items: flex-start; gap: 30px; margin: 18px 0; flex-wrap: wrap; }
.x-note-coupon-row .x-note-block { flex: 1 1 380px; margin: 0; max-width: none; }
.x-note-coupon-row .x-coupon-block { flex: 0 1 340px; margin: 0; }
.x-coupon-group { display: flex; align-items: stretch; height: 42px; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; background: #fff; transition: border-color .15s, box-shadow .15s; }
.x-coupon-group:focus-within { border-color: #B61D22; box-shadow: 0 0 0 3px rgba(182,29,34,.10); }
.x-coupon-group .x-coupon-icon { flex: none; display: flex; align-items: center; padding: 0 8px 0 11px; color: #b0b5bb; }
.x-coupon-group .x-coupon-icon svg { display: block; }
.x-coupon-group input.x-coupon-input { flex: 1 1 auto; min-width: 0; height: auto; margin: 0; border: none; border-radius: 0; background: none; box-shadow: none; padding: 0; font-size: 14px; color: #333; }
.x-coupon-group input.x-coupon-input:focus { outline: none; border: none; box-shadow: none; }
.x-coupon-group input.x-coupon-input::-webkit-input-placeholder { color: #9aa0a6; }
.x-coupon-group input.x-coupon-input::placeholder { color: #9aa0a6; }
.x-coupon-group button.x-coupon-apply { flex: none; margin: 0; border: none; border-radius: 0; background: #B61D22; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .2px; padding: 0 22px; cursor: pointer; transition: background .15s; }
.x-coupon-group button.x-coupon-apply:hover { background: #8F1619; }
.x-coupon-group button.x-coupon-apply:active { background: #7a1215; }

.x-coupon-msg { margin-top: 8px; font-size: 13px; }
.x-coupon-err { color: #B61D22; }
/* the applied-code strip wears the same tint as the order summary box (.x-summary-box) so the cart reads
   as one palette - a lone green block was the only green thing on the page */
.x-coupon-applied { display: flex; align-items: center; gap: 10px; margin-top: 8px; background: #fdf2f2; border-radius: 6px; padding: 9px 12px; font-size: 13px; color: #333; }
.x-coupon-applied strong { color: #B61D22; letter-spacing: .4px; }
/* icon-only, same bin as .x-remove-btn on a cart line - the colour/hover comes from that rule */
.x-coupon-applied button.x-coupon-remove { margin: 0 0 0 auto; flex: none; display: inline-flex; align-items: center; padding: 0; border-radius: 0; }
.x-coupon-applied button.x-coupon-remove svg { display: block; }

/* discount rows in the order summary - red like the rest of the box, not a lone green */
.x-summary-discount .x-summary-name,
.x-summary-discount .x-summary-price { color: #B61D22; font-weight: 700; }
.x-tab1-totals { margin-left: auto; min-width: 280px; }

/* tab 2 + 3 layout */
.x-tab2-layout, .x-tab3-layout { display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; }
/* min-width:0 is load-bearing: a flex item defaults to min-width:auto and then refuses to shrink below
   its content, so below ~500px the whole methods column pushed out through the right edge of .x-tabs */
.x-tab2-methods, .x-tab3-form { flex: 1 1 500px; min-width: 0; }
.x-tab2-summary, .x-tab3-summary { flex: 0 0 320px; }
.x-methods-title { font-size: 20px; font-weight: 700; margin: 5px 0 12px; }
.x-methods-section { margin-bottom: 25px; }
.x-method-list { list-style: none; margin: 0; padding: 0; }
.x-method-item { border: 1px solid #e3e3e3; border-radius: 8px; margin-bottom: 8px; }
/* wrap is what lets the price drop onto its own line once the row runs out of width - see .x-method-text */
.x-method-item label { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; }
.x-method-item input[type="radio"] { width: 18px; height: 18px; flex: none; }
.x-method-logo { max-height: 28px; max-width: 44px; flex: none; }
/* name + description as one shrinkable group, so the narrow screen can stack them (see the 600px block)
   instead of squeezing two independent flex siblings into one row.
   The 8em floor does the "handle it when it doesn't fit" job without a breakpoint: the text refuses to be
   squeezed thinner than that, so as soon as radio + logo + 8em + price no longer fit on one line, the
   price is the item that wraps - and being alone on its line, margin-left:auto parks it on the right.
   Below 8em there is no readable row left, only "Platba / na / dobierku" one word per line. */
.x-method-text { flex: 1 1 auto; min-width: 8em; overflow-wrap: break-word; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.x-method-name { font-weight: 700; }
.x-method-desc { color: #888; font-size: 13px; }
.x-method-fee { margin-left: auto; font-weight: 700; color: #B61D22; white-space: nowrap; }
.x-method-item input[type="radio"] { accent-color: #B61D22; }

/* priority handling upsell.
   A flex row - box in the first column, text in the second - rather than an inline checkbox followed by
   inline spans: that way a title that wraps keeps its second line beside the box instead of underneath
   it, and the description lines up with the title on its own rather than through a hard-coded indent. */
.x-priority-section { background: #fdf7e8; border: 1px solid #f0dfae; border-radius: 8px; padding: 4px; }
.x-priority-label { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; cursor: pointer; }
.x-priority-label input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: #B61D22; }
.x-priority-text { min-width: 0; }
.x-priority-title { font-weight: 700; }
.x-priority-desc { display: block; margin: 6px 0 0; color: #777; font-size: 13px; }

/* summary box (green) */
.x-summary-box { background: #fdf2f2; border-radius: 10px; padding: 22px 24px; }
.x-summary-title { color: #B61D22; font-size: 21px; font-weight: 700; margin-bottom: 15px; }
.x-summary-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; }
.x-summary-name { flex: 1; font-size: 14px; }
.x-summary-method { font-style: italic; }
.x-summary-qty { color: #888; font-size: 13px; white-space: nowrap; }
.x-summary-price { font-weight: 700; white-space: nowrap; }
.x-summary-fee { color: #B61D22; }
.x-summary-methods { border-top: 1px solid #f3caca; margin-top: 10px; padding-top: 10px; }
.x-summary-total { border-top: 1px solid #f3caca; margin-top: 10px; padding-top: 12px; display: flex; justify-content: space-between; font-size: 17px; font-weight: 700; }

/* personal data form */
.x-form-row { margin-bottom: 14px; }
.x-form-row-2 { display: flex; gap: 15px; }
.x-form-row-2 .x-form-field { flex: 1; }
.x-form-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; color: #555; }
.x-form-field input, .x-form-field select { width: 100%; height: 42px; border: 1px solid #ddd; border-radius: 6px; padding: 0 12px; font-size: 14px; box-sizing: border-box; }
/* a textarea shares the frame but not the fixed height - it has to be able to grow */
.x-form-field textarea { width: 100%; border: 1px solid #ddd; border-radius: 6px; padding: 10px 12px; font-size: 14px; font-family: inherit; box-sizing: border-box; resize: vertical; }
/* stays inline so the "čítať" link sits beside it rather than below */
.x-terms-row .x-check-toggle { display: inline-block; }
.x-terms-read { margin-left: 10px; color: #B61D22; text-decoration: underline; cursor: pointer; font-size: 13px; }

/* one definition for every tick-to-reveal row (firma / fakturačná adresa / obchodné podmienky) */
.x-check-toggle { display: block; cursor: pointer; font-weight: 700; font-size: 14px; margin: 0; }
.x-check-toggle input { width: 15px; height: 15px; margin-right: 9px; vertical-align: -2px; accent-color: #B61D22; flex: none; }
/* only drawn where the tick actually reveals something */
.x-check-row { background: #fbfbfb; border: 1px solid #eee; border-radius: 8px; padding: 14px 16px; }
/* 15px box + 9px gap: lines the revealed block up under the label text, not under the checkbox */
.x-check-fields { margin-top: 14px; padding-left: 24px; }
.x-check-fields .x-form-field { margin-bottom: 12px; }
.x-check-title { font-size: 13px; font-weight: 700; color: #555; text-transform: uppercase; margin-bottom: 10px; }
.x-check-note { color: #888; font-size: 12px; margin-bottom: 10px; }
/* The reverse-charge notice. Deliberately not grey microcopy like .x-check-note above it - it warns that
   the invoice total can differ from the one in the summary, which the customer has to actually read.
   Same warm tint as the priority-handling block, so the cart keeps one vocabulary for "note". */
.x-vat-note {
    background: #fdf7e8; border: 1px solid #f0dfae; border-radius: 6px;
    padding: 10px 12px; margin-bottom: 12px; color: #6b5a2b; font-size: 13px; line-height: 1.45;
}

/* "Poznámka k objednávke" on the cart tab - the field itself is a plain .x-form-field, so it is the
   same control as everything in "Dodacie údaje" */
.x-note-block { margin: 18px 0; max-width: 620px; }
.x-note-saved { display: inline-block; margin-top: 6px; font-size: 12px; color: #3c8f3c; }

/* optional "create an account while ordering" block */
.x-register-row { background: #fbfbfb; border: 1px solid #eee; border-radius: 8px; padding: 14px 16px; }
.x-register-note { font-weight: 700; margin-bottom: 10px; }
.x-register-hint { color: #888; font-size: 12px; margin-top: 8px; }
.x-password-rules { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.x-password-rules li { position: relative; padding-left: 16px; }
/* unmet rules stay grey with a neutral bullet - a form that greets you in red before you have typed
   anything reads as an error rather than as a checklist */
.x-password-rules li:before { content: "○"; position: absolute; left: 0; }
.x-password-rules li.x-rule-ok { color: #3c8f3c; }
.x-password-rules li.x-rule-ok:before { content: "✓"; }

/* bottom pay bar: docked at the cart end, fixed to the viewport bottom until you scroll there */
.x-paybar-dock { margin-top: 20px; }
.x-sticky-paybar { background: #ffffff; display: flex; align-items: center; gap: 20px; padding: 14px 25px; border-top: 1px solid #ececec; }
.x-sticky-paybar.x-paybar-fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; box-shadow: 0 -2px 12px rgba(0,0,0,.14); }
/* "Späť k nákupu" / "Pokračovať" are square for now. This is deliberate and temporary - the design goes
   back to a rounded pill later, so the previous radius is kept in the comment next to each rule rather
   than only in git history. The third button on the same plan is .x-related-addtocart. */
.x-paybar-back { order: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #B61D22; border-radius: 0; /* was 8px */ padding: 12px 22px; color: #B61D22; font-weight: 700; text-decoration: none; background: #fff; white-space: nowrap; }
.x-paybar-back:hover { background: #fdf2f2; color: #B61D22; }
.x-paybar-back-arrow { font-size: 12px; color: #B61D22; }
.x-paybar-total { order: 2; margin-left: auto; text-align: right; }
.x-paybar-label { display: block; color: #333; font-size: 14px; font-weight: 700; }
.x-paybar-value { display: block; color: #B61D22; font-size: 21px; font-weight: 700; }
.x-paybar-value-excltax { display: block; color: #999; font-size: 12px; margin-top: 2px; }
.x-paybar-continue { order: 3; background: #B61D22; border: none; color: #fff; font-size: 17px; font-weight: 700; padding: 14px 40px; border-radius: 0; /* was 8px */ cursor: pointer; white-space: nowrap; }
.x-paybar-continue:hover { background: #8F1619; }
.x-paybar-continue:disabled { background: #DB8E90; cursor: default; }

/* header cart button.
   NOTE: every rule here is scoped under the #topcartlink id. The theme (styles.css) styles this
   exact id/its <a> child with its own background image + line-height:45px + padding; a plain class
   selector is lower specificity than an id and loses the cascade, which was causing the transparent
   button, the thick top/bottom border artefact, and the badge number sitting outside the circle. */
#topcartlink { background: none; padding: 0; box-sizing: border-box; }

/* normal (non-scrolled) state: flat, inline with the other header links - no border/background */
#topcartlink a.x-cartbar-button {
    box-sizing: border-box; line-height: normal;
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 0;
    color: #B61D22; font-weight: 700; text-decoration: none; white-space: nowrap;
}
#topcartlink a.x-cartbar-button:hover { color: #8F1619; }
#topcartlink .x-cartbar-icon { display: inline-flex; align-items: center; }
#topcartlink .x-cartbar-icon svg { display: block; }
/* the count badge. Centering the *line box* is not enough to centre the *digits*: digits have no
   descender, so the glyphs sit in the upper part of their line box and the number ends up visibly
   above the middle of the circle. padding-top pushes the (border-box) content area down by half its
   value, which puts the digits on the circle's optical centre. */
#topcartlink .x-cartbar-qty {
    background: #B61D22; color: #fff; min-width: 18px; height: 18px; box-sizing: border-box;
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; line-height: 1; padding: 3px 3px 0;
}
#topcartlink .x-cartbar-pipe { color: #DFA9AB; font-weight: 400; }

/* sticky (scrolled) state only: compact white/red-border pill floating over the page */
#topcartlink a.x-cartbar-button.x-cartbar-stuck {
    position: fixed; top: 10px; right: 12px; z-index: 1200;
    background: #fff; border: 1px solid #B61D22; border-radius: 0; padding: 2px 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
#topcartlink a.x-cartbar-button.x-cartbar-stuck:hover { background: #fdf2f2; }

/* the flyout mini-cart dropdown is normally position:absolute relative to the header, and per
   styles.css both its visibility ("active{display:block}") AND its entire look (white background,
   shadow, inner padding on .mini-shopping-cart) only exist inside its own @media(min-width:1001px)
   block - meaning below that width it's not just invisible, it's also fully unstyled (transparent,
   no padding) once forced visible. These unconditional id-scoped rules restore the whole look at
   every width, not just the display:block toggle. */
#flyout-cart.active { display: block !important; }
#flyout-cart {
    z-index: 1150; background-color: #fff; box-shadow: 0 0 2px rgba(0,0,0,0.25);
}
#flyout-cart .mini-shopping-cart { padding: 12px; text-align: left; font-size: 12px; }
#flyout-cart .mini-shopping-cart .count { padding: 5px 0 15px; color: #444; }
#flyout-cart .mini-shopping-cart .count a { margin: 0 2px; font-weight: bold; color: #444; }
#flyout-cart .mini-shopping-cart .items { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin: 0 0 20px; }
#flyout-cart .mini-shopping-cart .item { overflow: hidden; padding: 10px 0; }
#flyout-cart .mini-shopping-cart .picture { float: left; width: 70px; text-align: center; }
#flyout-cart .mini-shopping-cart .picture a { display: block; position: relative; overflow: hidden; }
#flyout-cart .mini-shopping-cart .picture a:before { content: ""; display: block; padding-top: 100%; }
#flyout-cart .mini-shopping-cart .picture img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; }
#flyout-cart .mini-shopping-cart .picture + .product { margin: 0 0 0 80px; }
#flyout-cart .mini-shopping-cart .name { margin: 0 0 10px; font-size: 14px; }
#flyout-cart .mini-shopping-cart .name a { color: #B61D22; }
#flyout-cart .mini-shopping-cart .name a:hover { color: #8F1619; }
#flyout-cart .mini-shopping-cart .attributes { margin: 5px 0; color: #444; }
#flyout-cart .mini-shopping-cart .totals { margin: 0 0 12px; font-size: 14px; }
#flyout-cart .mini-shopping-cart .totals strong { font-size: 16px; color: #444; }
#flyout-cart .mini-shopping-cart .buttons { margin: 0 0 5px; }
#flyout-cart .mini-shopping-cart input[type="button"] { display: inline-block; border: none; background-color: #B61D22; padding: 10px 20px; font-size: 12px; color: #fff; text-transform: uppercase; cursor: pointer; }
#flyout-cart .mini-shopping-cart input[type="button"]:hover { background-color: #8F1619; }

/* when the button becomes fixed (scrolled), the dropdown must switch to fixed too so it still
   opens directly under the button instead of staying anchored to the old scroll position */
#flyout-cart.x-flyout-stuck { position: fixed !important; top: 60px; right: 12px; z-index: 1199; }

@media (max-width: 768px) {
    #topcartlink a.x-cartbar-button.x-cartbar-stuck { top: 8px; right: 8px; padding: 2px 12px; }
    #flyout-cart { position: fixed; top: 54px; left: 8px; right: 8px; width: auto; }
    #flyout-cart.x-flyout-stuck { top: 48px; right: 8px; left: 8px; width: auto; }
}

/* generic hidden-until-toggled-by-js state (replaces scattered inline style="display:none") */
.x-hidden { display: none; }

/* responsive */
@media (max-width: 768px) {
    /* remove-item icon moves next to the picture, top-right; everything else wraps below */
    .x-cart-item { flex-wrap: wrap; }
    .x-item-picture { order: 1; }
    .x-item-remove { order: 2; margin-left: auto; width: auto; }
    .x-item-main { order: 3; flex-basis: 100%; }
    .x-item-stock { order: 4; width: auto; }
    .x-item-qty { order: 5; }
    .x-item-price { order: 6; width: auto; margin-left: auto; }
    /* inline-block so the vertical padding enlarges the tap target - the label is only 12px tall */
    .x-related-toggle { display: inline-block; padding: 8px 0; }
    .x-tab2-summary, .x-tab3-summary { flex: 1 1 100%; }
    /* the summary alone was not enough - the methods column kept its 500px basis and overflowed the card */
    .x-tab2-methods, .x-tab3-form { flex: 1 1 100%; }
    .x-form-row-2 { flex-direction: column; gap: 0; }
    .x-tab-link .x-tab-name { font-size: 12px; }
    /* the fixed pay bar wraps to two rows here (price on its own line, then the two buttons), so it is
       roughly 130px tall - 100px of clearance left the last form row hidden underneath it */
    .x-checkout-page { padding-bottom: 165px; }
    /* mobile: price row on top (full width), "Späť k nákupu" + "Pokračovať" side by side below */
    .x-sticky-paybar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
    .x-paybar-total { order: 1; flex-basis: 100%; margin-left: 0; text-align: left; }
    .x-paybar-back { order: 2; flex: 1; padding: 10px 14px; font-size: 13px; }
    .x-paybar-continue { order: 3; flex: 1; padding: 12px 22px; font-size: 15px; }
}

/* phone-width shipping/payment rows. Between 600 and 768px a method still fits on one line, so this
   only kicks in where it stopped fitting: the name goes above its description and the fee sits on the
   first line rather than being pushed out of the card. */
@media (max-width: 600px) {
    /* 6px per side back to the content - at ~430px the row is fighting for every pixel */
    .x-tab-pane { padding: 14px 12px; }
    .x-method-item label { align-items: flex-start; gap: 10px; padding: 12px; }
    .x-method-item input[type="radio"] { margin-top: 2px; }
    .x-method-text { flex-direction: column; align-items: flex-start; gap: 2px; }
    .x-method-fee { align-self: flex-start; }
}

/* Very narrow phones (~360px and below, and anything zoomed). Two things stop fitting side by side here:
   the three step indicators, and the logo + name + price of a payment row. */
@media (max-width: 480px) {
    /* number above the label instead of beside it - a step is then only as wide as its longest word,
       which is what keeps all three inside the card */
    .x-tab-link { flex-direction: column; gap: 5px; padding: 12px 4px; text-align: center; }
    .x-tab-link .x-tab-num { width: 24px; height: 24px; font-size: 12px; }
    .x-tab-link .x-tab-name { font-size: 11px; line-height: 1.25; }
    /* 10px reclaimed for the name; the logo is decoration, the text is not */
    .x-method-logo { max-width: 34px; }
}