/* slevir-fsgap-2.css v2 (2026-11-12) – www.slevir.cz, cart only (/kosik/).
   What: styles + CLS reservation for the "Doplňte a máte dopravu zdarma" box (#sx-fg, slevir-fsgap-2.js), placed directly
   under the free-shipping box #sx-fs (checkout-ux-8 Module A) and above the delivery-price line #sx-shiphint (Module E).
   Why: the cart shows how much is missing to free shipping; this box offers 1–3 items that close the gap in one click
   (v2: also pricier items from the cart's own categories for bigger gaps).
   CLS: #sx-fg has a FIXED outer height (150 px, margins 0) whatever it contains: 1, 2 or 3 cards, skeleton (loading),
     fallback ("Do dopravy zdarma zbývá X Kč" + "Vybrat z nejprodávanějších") or the empty state.
     The Záhlaví snippet (fsgap-head-snippet-2.html, <= 300 chars) adds html.sx-fg-r before first paint on /kosik/ for every
     cart with 0 < cartInfo.leftToFreeShipping.priceLeft (not killed). While html.sx-fg-r is set and #sx-fg is not (yet)
     right after #sx-fs, the 150 px are held as extra space under #sx-fs (stage 1: before #sx-fs exists, on the cart table via
     prepaint-4's --sx-rf - #sx-fs is inserted by checkout-ux on DOMContentLoaded, so this only matters if a paint happens
     before that; stage 2: #sx-fs without #sx-shiphint; stage 3: #sx-fs + #sx-shiphint). No reservation at all with
     html.sx-fs-none or without the cart table (empty cart). When #sx-fg is inserted, #sx-fs gets its normal 16 px back in
     the same task, so nothing moves. Margin maths with #sx-shiphint (margin-top -6/-4 px): before 166 + (-6) = 160,
     after 16 + 150 + (-6) = 160.
     Release: slevir-fsgap-2.js removes html.sx-fg-r only for guards the head cannot see (service-only cart, non-CZK/cs,
     non-CZ country, #sx-fs missing) and, as a safety, 8 s after start when html.sx-fg-on (box rendered) was never set.
     It never releases because no product qualifies - the box shows the fallback instead.
   Prepaint-4 gives #sx-fs margin-bottom 73/75 px (+5 s animation) whenever #sx-shiphint is not its next sibling - with #sx-fg in
     between that must not apply, hence the !important 16 px (beats the animation too).
   Kill switch: ?fsgap=off / sessionStorage slvFgOff / window.SLV_FSGAP_OFF -> the snippet never sets html.sx-fg-r and the JS
     never inserts #sx-fg, so none of these rules match.
   Version history: v2 2026-11-12 pricier/category candidates for bigger gaps (skeleton + fallback states) |
     v1 2026-11-12 first version. */

/* ---------- reservation (html.sx-fg-r, set by the Záhlaví snippet) ---------- */
/* stage 1: #sx-fs not inserted yet -> prepaint-4 values (157/162 with shiphint, 100/103 without) + 150 */
html.sx-fg-r:not(.sx-fs-none):not(.sx-sh-none) .in-kosik .cart-table:not(:has(~ #sx-fs)){--sx-rf:307px}
@media (min-width:768px){html.sx-fg-r:not(.sx-fs-none):not(.sx-sh-none) .in-kosik .cart-table:not(:has(~ #sx-fs)){--sx-rf:312px}}
html.sx-fg-r.sx-sh-none:not(.sx-fs-none) .in-kosik .cart-table:not(:has(~ #sx-fs)){--sx-rf:250px}
@media (min-width:768px){html.sx-fg-r.sx-sh-none:not(.sx-fs-none) .in-kosik .cart-table:not(:has(~ #sx-fs)){--sx-rf:253px}}
/* stage 3: #sx-fs (+ #sx-shiphint) present, #sx-fg not yet -> 16 + 150 */
html.sx-fg-r .in-kosik #sx-fs:not(:has(+ #sx-fg)){margin-bottom:166px}
/* stage 2: #sx-fs present, #sx-shiphint still expected -> prepaint-4's 73/75 + 150 */
html.sx-fg-r:not(.sx-sh-none) .in-kosik #sx-fs:not(:has(+ #sx-shiphint)):not(:has(+ #sx-fg)){margin-bottom:223px}
@media (min-width:768px){html.sx-fg-r:not(.sx-sh-none) .in-kosik #sx-fs:not(:has(+ #sx-shiphint)):not(:has(+ #sx-fg)){margin-bottom:225px}}
/* row in place: #sx-fs keeps its own 16 px (also when prepaint-4's "no #sx-shiphint next" rule would apply) */
.in-kosik #sx-fs:has(+ #sx-fg){margin-bottom:16px!important}

/* ---------- the row ---------- */
#sx-fg{box-sizing:border-box;height:150px;margin:0 12px;padding:0 0 16px;overflow:hidden;font-family:inherit;color:#24292d}
#sx-fg.sx-fg--empty>*{visibility:hidden}
#sx-fg .sx-fg__h{box-sizing:border-box;height:20px;margin:0 0 6px;padding:0 2px;font-size:14px;line-height:20px;font-weight:700;color:#16813e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sx-fg .sx-fg__row{display:flex;flex-wrap:nowrap;gap:8px;height:108px;margin:0;padding:0;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
#sx-fg .sx-fg__row::-webkit-scrollbar{display:none}
#sx-fg .sx-fg__c{box-sizing:border-box;flex:0 0 150px;width:150px;height:108px;margin:0;padding:9px 8px;display:grid;
  grid-template-columns:48px minmax(0,1fr);grid-template-rows:48px 32px;column-gap:8px;row-gap:8px;
  border:1px solid #cfe3d2;border-radius:9px;background:#f7fbf8;scroll-snap-align:start}
#sx-fg .sx-fg__img{display:block;width:48px;height:48px;border-radius:6px;overflow:hidden;background:#fff}
#sx-fg .sx-fg__img img{display:block;width:48px;height:48px;object-fit:contain}
#sx-fg .sx-fg__t{min-width:0;height:48px;display:flex;flex-direction:column;justify-content:space-between}
#sx-fg .sx-fg__n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:32px;
  font-size:12.5px;line-height:16px;color:#24292d;text-decoration:none;word-break:break-word}
#sx-fg .sx-fg__n:hover{text-decoration:underline}
#sx-fg .sx-fg__p{display:block;height:16px;font-size:13px;line-height:16px;font-weight:700;color:#24292d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sx-fg .sx-fg__u{font-weight:400;color:#65717c}
#sx-fg .sx-fg__b{grid-column:1 / -1;position:relative;box-sizing:border-box;height:32px;width:100%;margin:0;padding:0 8px;
  border:0;border-radius:6px;background:#15803D;color:#fff;font:inherit;font-size:13.5px;line-height:32px;font-weight:600;
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-appearance:none;appearance:none}
#sx-fg .sx-fg__b:hover{background:#116a32}
#sx-fg .sx-fg__b:focus-visible{outline:2px solid #15803D;outline-offset:2px}
#sx-fg .sx-fg__b[disabled]{cursor:default;opacity:.75}
#sx-fg .sx-fg__b.sx-fg__b--busy{color:transparent;opacity:1}
#sx-fg .sx-fg__b.sx-fg__b--busy:after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  box-sizing:border-box;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:sxFgSpin .7s linear infinite}
@keyframes sxFgSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#sx-fg .sx-fg__b.sx-fg__b--busy:after{animation-duration:2s}}
/* desktop: 3 cards side by side, each one third of the row (1 or 2 cards keep the same width, left-aligned) */
@media (min-width:768px){
  #sx-fg .sx-fg__row{overflow:hidden}
  #sx-fg .sx-fg__c{flex:0 0 calc((100% - 16px) / 3);width:calc((100% - 16px) / 3)}
  #sx-fg .sx-fg__n{font-size:13.5px}
}

/* ---------- v2: loading skeleton (same card box, grey blocks) ---------- */
#sx-fg .sx-fg__c--sk{border-color:#e3ece5;background:#f7faf8}
#sx-fg .sx-fg__c--sk .sx-fg__img,#sx-fg .sx-fg__c--sk .sx-fg__t i,#sx-fg .sx-fg__c--sk .sx-fg__b{display:block;background:#e6eee8;border-radius:6px;
  animation:sxFgPulse 1.4s ease-in-out infinite}
#sx-fg .sx-fg__c--sk .sx-fg__t{justify-content:flex-start;gap:8px}
#sx-fg .sx-fg__c--sk .sx-fg__t i{height:11px;width:100%}
#sx-fg .sx-fg__c--sk .sx-fg__t i+i{width:55%}
#sx-fg .sx-fg__c--sk .sx-fg__b{cursor:default}
@keyframes sxFgPulse{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){#sx-fg .sx-fg__c--sk .sx-fg__img,#sx-fg .sx-fg__c--sk .sx-fg__t i,#sx-fg .sx-fg__c--sk .sx-fg__b{animation:none}}

/* ---------- v2: fallback (nothing qualifies) - one quiet panel of the card-row height ---------- */
#sx-fg .sx-fg__fb{box-sizing:border-box;height:108px;margin:0;padding:12px 14px;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:10px;border:1px solid #cfe3d2;border-radius:9px;background:#f7fbf8;overflow:hidden}
#sx-fg .sx-fg__fbt{margin:0;font-size:14px;line-height:20px;color:#24292d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#sx-fg .sx-fg__fbt b{font-weight:700;color:#16813e}
#sx-fg .sx-fg__fbl{display:inline-block;box-sizing:border-box;height:32px;max-width:100%;padding:0 14px;border-radius:6px;background:#15803D;
  color:#fff!important;font-size:13.5px;line-height:32px;font-weight:600;text-decoration:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sx-fg .sx-fg__fbl:hover{background:#116a32}
#sx-fg .sx-fg__fbl:focus-visible{outline:2px solid #15803D;outline-offset:2px}
@media (min-width:768px){#sx-fg .sx-fg__fb{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}}