/* ============================================================
   skinspecialist.cz / bioby.cz — ss-cart-5.css — v5
   PRODUCTION CSS for Shoptet /kosik/ page

   APPROACH: CSS-only re-skin Shoptet's native DOM + 2 nove sekce
   injectnute JS-em jako siblings (ss-cart-1.js):
     - .ss-cart-freeship-bar (mezi step indicator a item list)
     - .ss-cart-crosssell (pod item list, nad cart-summary)
   Styling existujicich nativnich Shoptet elementu:
     - ol.cart-header.step-0 (step indicator)
     - table.cart-table (item rows)
     - .cart-summary > .extras-wrapper (darky a slevy)
     - .sidebar-in-cart (right column)
     - .next-step.next-step--cart (bottom CTA row)

   DETECTION:
     - body.in-kosik (verified)

   ----------------------------------------------------------------
   CHANGELOG v4 → v5 (2026-05-26 — responsive audit fix):
     [FIX-CRIT] Mobile horizontal scroll bug. Cart .col-md-4 mela
                grid-column: 2 pevne, ale @media ≤900px collapse na
                grid-template-columns: 1fr — sidebar pak placed do
                invisible column 2 mimo viewport (docScrollWidth=457
                pri 375 viewport, 1177 pri 1024). Fix: reset
                grid-column na auto v mobile @media.
     [FIX] Pridana @media (max-width: 1024px) — collapsuje grid
           dríve (sidebar 380px nestaci pri 1024).

   CHANGELOG v3 → v4 (2026-05-25 evening):
     [NEW] .ss-cart-freeship-bar editorial progress bar pro free
           shipping motivation. Cream bg + sage fill + italic Rigane
           copy. 3 states: below / met / hidden.
     [NEW] .ss-cart-crosssell 4-card "Casto kupovano spolu" grid
           pod itemy. Matchuje BASELINE card pattern (10px radius,
           image 6px aspect 3/4, hover lift -3px + scale 1.03).
     [NOTE] Vyzaduje ss-cart-1.js v Zapati pro inject.

   DEPLOY:
     1. Upload ss-cart-4.css + ss-cart-1.js do /user/documents/upload/
     2. V Zahlavi HTML kody update odkazu:
        <link rel="stylesheet" href="/user/documents/upload/ss-cart-4.css?v=4">
     3. V Zapati HTML kody pridat:
        <script src="/user/documents/upload/ss-cart-1.js?v=1"></script>
     4. Rollback: vrat zpet na ss-cart-3.css?v=3 + odstran JS reference
   ============================================================ */

/* Kill native chrome on cart page */
body.in-kosik .breadcrumbs-wrapper {
  display: none !important;
}
body.in-kosik {
  background: var(--ss-canvas, #F2EBDB) !important;
}


/* ============================================================
   PAGE CONTAINER
   ============================================================ */
body.in-kosik #content-wrapper,
body.in-kosik .content-inner {
  background: var(--ss-canvas, #F2EBDB) !important;
}

body.in-kosik #content.content {
  /* v1.1: width sjednoceno s headerem (1500px) */
  max-width: 1500px;
  margin: 0 auto;
  padding: 24px 32px 60px;
}


/* ============================================================
   CART WRAPPER + ROW LAYOUT
   ============================================================ */
body.in-kosik #cart-wrapper {
  background: transparent;
  padding: 0;
}
body.in-kosik #cart-wrapper .cart-inner {
  padding: 0;
}
body.in-kosik #cart-wrapper .row.cart-row {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
  margin: 0;
}
/* v1.1 FIX: Shoptet ma .col-md-4.sidebar-in-cart PRVNI v DOM order,
   .col-md-8 (s items) DRUHY. Bootstrap default to flipne pres float
   nebo order, ale s grid layoutem se auto-place jde podle DOM order.
   Explicit grid-column placement to opravi nezavisle na DOM. */
body.in-kosik #cart-wrapper .col-md-8 {
  grid-column: 1; /* LEFT (wide) — items + step indicator */
  width: 100%;
  max-width: 100%;
  padding: 0;
  flex: 1 1 auto;
}
body.in-kosik #cart-wrapper .col-md-4 {
  grid-column: 2; /* RIGHT (380px) — sidebar */
  width: 100%;
  max-width: 100%;
  padding: 0;
  flex: 1 1 auto;
}


/* ============================================================
   STEP INDICATOR — ol.cart-header
   ============================================================ */
body.in-kosik .cart-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  list-style: none !important; /* v1.1: kill Shoptet's default decimal numbering on <ol> */
  list-style-type: none !important;
  padding: 28px 16px 24px;
  margin: 0 -32px 32px;
  background: var(--ss-paper, #FAF5E8);
  border-bottom: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  counter-reset: step;
}
/* Force list-item display off — Shoptet might still render bullets */
body.in-kosik .cart-header .step {
  list-style: none !important;
}
body.in-kosik .cart-header .step::marker {
  display: none;
  content: '';
}
/* v1.1 FIX: Shoptet has span::before { content: counter(steps) } INSIDE each
   step that renders a SEPARATE step number before the label. Kills duplicate. */
body.in-kosik .cart-header .step span::before,
body.in-kosik .cart-header .step strong::before,
body.in-kosik .cart-header .step a::before {
  content: none !important;
  display: none !important;
}
body.in-kosik .cart-header .step {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
  font-family: var(--ss-sans, sans-serif);
  font-size: 12.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  counter-increment: step;
}
body.in-kosik .cart-header .step::before {
  content: counter(step);
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 11.5px;
  background: var(--ss-white, #FFFFFF);
  color: var(--ss-muted, rgba(15, 15, 15, .62));
  letter-spacing: 0;
  flex-shrink: 0;
}
body.in-kosik .cart-header .step + .step::after {
  content: '';
  position: absolute;
  left: -18px;
  width: 18px; height: 1px;
  background: var(--ss-border, rgba(15, 15, 15, .10));
}
body.in-kosik .cart-header .step.active {
  color: var(--ss-black, #0F0F0F);
}
body.in-kosik .cart-header .step.active::before {
  background: var(--ss-sage, #6B8B85);
  color: var(--ss-white, #FFFFFF);
  border-color: var(--ss-sage, #6B8B85);
}
body.in-kosik .cart-header .step.completed::before {
  content: '✓';
  background: var(--ss-sage-deep, #5A7E78);
  color: var(--ss-white, #FFFFFF);
  border-color: var(--ss-sage-deep, #5A7E78);
}
body.in-kosik .cart-header .step strong,
body.in-kosik .cart-header .step a {
  font-weight: inherit !important;
  color: inherit;
  text-decoration: none;
}
body.in-kosik .cart-header .step a:hover {
  color: var(--ss-sage-deep, #5A7E78);
}
/* v2 FIX: Shoptet default da na .step.active strong border-bottom:1px solid
   #1076b7 (modry --color-primary). Prebarvit na tmavou. */
body.in-kosik .cart-header .step.active strong,
body.in-kosik .cart-header .step.active a,
body.in-kosik .cart-header .step.completed strong,
body.in-kosik .cart-header .step.completed a {
  border-bottom-color: var(--ss-black, #0F0F0F) !important;
}
/* v3 FIX: hover state na .step a — Shoptet default border-bottom modry. */
body.in-kosik .cart-header .step a,
body.in-kosik .cart-header .step a:hover,
body.in-kosik .cart-header .step a:focus,
body.in-kosik .cart-header .step a:active {
  border-bottom-color: var(--ss-sage-deep, #5A7E78) !important;
}


/* ============================================================
   H1 — replace screen-reader-only with visible heading
   ============================================================ */
body.in-kosik #content h1.sr-only {
  position: static !important;
  width: auto !important; height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-weight: 300;
  font-size: clamp(36px, 3.8vw, 48px);
  letter-spacing: -.025em;
  line-height: 1;
  margin: 0 0 32px;
  color: var(--ss-black, #0F0F0F);
}


/* ============================================================
   CART TABLE — items
   ============================================================ */
body.in-kosik .cart-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
}
body.in-kosik .cart-table thead { display: none; }

body.in-kosik .cart-table tr.removeable {
  display: grid;
  /* v1.1: 4 cols (was 5) — unit price column odstranena, jen total se zobrazuje */
  grid-template-columns: 88px 1fr auto auto;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
}
body.in-kosik .cart-table tr.removeable:first-child {
  padding-top: 0;
}
body.in-kosik .cart-table tr.removeable td {
  padding: 0;
  border: 0;
  background: transparent;
  vertical-align: middle;
}
body.in-kosik .cart-table .p-label { display: none; }

/* Image */
body.in-kosik .cart-table .cart-p-image {
  width: 88px;
}
body.in-kosik .cart-table .cart-p-image a {
  display: block;
  width: 88px; height: 88px;
  border-radius: 4px;
  background: var(--ss-canvas, #F2EBDB);
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  overflow: hidden;
}
body.in-kosik .cart-table .cart-p-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Name */
body.in-kosik .cart-table .p-name {
  min-width: 0;
}
body.in-kosik .cart-table .p-name .main-link {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ss-black, #0F0F0F) !important;
  text-decoration: none !important;
  display: block;
  /* v2 FIX: Shoptet default forcuje uppercase, vypnut. */
  text-transform: none !important;
}
body.in-kosik .cart-table .p-name .main-link:hover {
  color: var(--ss-sage-deep, #5A7E78) !important;
}

/* Availability — hide (přesunout to do názvu pokud chceš) */
body.in-kosik .cart-table .p-availability {
  display: none;
}

/* Quantity */
body.in-kosik .cart-table .p-quantity .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  border-radius: 4px;
  background: var(--ss-white, #FFFFFF);
  position: relative;
}
body.in-kosik .cart-table .p-quantity .amount {
  width: 36px;
  text-align: center;
  font-family: var(--ss-sans, sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--ss-black, #0F0F0F);
  border: 0;
  border-left: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  border-right: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  background: transparent;
  padding: 7px 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
body.in-kosik .cart-table .p-quantity .amount::-webkit-inner-spin-button,
body.in-kosik .cart-table .p-quantity .amount::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.in-kosik .cart-table .p-quantity .increase,
body.in-kosik .cart-table .p-quantity .decrease {
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  font-size: 16px;
  color: var(--ss-black, #0F0F0F);
  cursor: pointer;
  order: 0; /* original order */
}
body.in-kosik .cart-table .p-quantity .decrease { order: -1; }
body.in-kosik .cart-table .p-quantity .increase { order: 1; }
body.in-kosik .cart-table .p-quantity .increase:hover,
body.in-kosik .cart-table .p-quantity .decrease:hover {
  background: var(--ss-canvas, #F2EBDB);
}

/* v1.1: Unit price cell HIDDEN — duplikace s total při qty=1, matoucí.
   Total v .p-total ukazuje skutečnou cenu (= unit × qty). */
body.in-kosik .cart-table .p-price {
  display: none !important;
}

body.in-kosik .cart-table .p-total {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-weight: 300;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--ss-black, #0F0F0F);
  white-space: nowrap;
  position: relative;
}
body.in-kosik .cart-table .p-total .price-final {
  font-weight: 300 !important;
  color: var(--ss-black, #0F0F0F) !important;
}

/* Remove button — style as small × icon */
body.in-kosik .cart-table .remove-item {
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  border-radius: 4px;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  margin-left: 16px;
  vertical-align: middle;
  font-size: 0;
  position: relative;
}
body.in-kosik .cart-table .remove-item::before {
  content: '×';
  font-size: 24px;
  line-height: 1;
  font-family: var(--ss-sans, sans-serif);
  font-weight: 300;
}
body.in-kosik .cart-table .remove-item:hover {
  background: var(--ss-canvas, #F2EBDB);
  color: var(--ss-black, #0F0F0F);
}


/* ============================================================
   CART SUMMARY (Dárky a slevy) — within left column
   ============================================================ */
body.in-kosik .cart-summary {
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--ss-cream, #E8DDC8);
  border-radius: 4px;
}
body.in-kosik .cart-summary .h4 {
  font-family: var(--ss-sans, sans-serif);
  font-size: 10.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ss-sage-deep, #5A7E78);
  font-weight: 600;
  margin: 0 0 12px;
}
body.in-kosik .cart-summary .extras-wrapper {
  display: grid;
  gap: 10px;
}
body.in-kosik .cart-summary .extras-col:empty {
  display: none;
}
body.in-kosik .cart-summary .extra {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ss-black, #0F0F0F);
  line-height: 1.4;
}
body.in-kosik .cart-summary .extra strong {
  color: var(--ss-sage-deep, #5A7E78);
  font-weight: 400;
}


/* ============================================================
   SIDEBAR — VARIANT B "Editorial cards"
   Right column (.col-md-4.sidebar-in-cart) ma 2 karty:
     1. Help card (.checkout-box-wrapper) — white, portrait avatar + Tamara
     2. Summary card (.summary-wrapper) — cream, italic Celkem + sage CTA
   ============================================================ */
body.in-kosik .sidebar-in-cart {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* HELP CARD — .checkout-box-wrapper */
body.in-kosik .sidebar-in-cart .cart-content.checkout-box-wrapper {
  background: var(--ss-white, #FFFFFF);
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  border-radius: 4px;
  padding: 24px;
  margin: 0;
}
body.in-kosik .sidebar-in-cart .checkout-box-wrapper .h4 {
  font-family: var(--ss-sans, sans-serif);
  font-size: 10.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ss-sage-deep, #5A7E78);
  font-weight: 600;
  margin: 0 0 14px;
}

/* Reset Shoptet's .box wrapper inside */
body.in-kosik .sidebar-in-cart .checkout-box-wrapper .box {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Portrait contact-box */
body.in-kosik .sidebar-in-cart .contact-box {
  display: flex !important;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
}
body.in-kosik .sidebar-in-cart .contact-box img {
  width: 52px; height: 52px;
  border-radius: 50% !important;
  object-fit: cover;
  flex-shrink: 0;
  border: 0 !important;
}
body.in-kosik .sidebar-in-cart .contact-box strong {
  display: block !important;
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: 18px !important;
  letter-spacing: -.01em !important;
  color: var(--ss-black, #0F0F0F) !important;
  margin-bottom: 4px !important;
  text-transform: none !important;
}
body.in-kosik .sidebar-in-cart .contact-box ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.in-kosik .sidebar-in-cart .contact-box ul li {
  list-style: none !important;
  padding: 0;
  margin: 0;
}
body.in-kosik .sidebar-in-cart .contact-box ul a {
  color: var(--ss-terracotta-deep, #7E6248) !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor;
  font-family: var(--ss-sans, sans-serif) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  padding-bottom: 1px;
}


/* ============================================================
   SUMMARY CARD — .summary-wrapper (cream, italic, sage CTA)
   ============================================================ */
body.in-kosik .sidebar-in-cart .cart-content.summary-wrapper {
  background: var(--ss-cream, #E8DDC8);
  border: 0;
  border-radius: 4px;
  padding: 28px 24px 24px;
  margin: 0;
  position: relative;
}
/* Inject italic "Souhrn objednávky" heading via pseudo */
body.in-kosik .sidebar-in-cart .summary-wrapper::before {
  content: 'Souhrn objednávky.';
  display: block;
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-weight: 300;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--ss-black, #0F0F0F);
  margin: 0 0 18px;
}
/* Inner .box reset */
body.in-kosik .sidebar-in-cart .summary-wrapper .box {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Price wrapper — Celkem + cena, editorial style with dashed divider */
body.in-kosik .sidebar-in-cart .summary-wrapper .price-wrapper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin: 0 0 20px !important;
  padding-top: 18px !important;
  border-top: 1px dashed rgba(15, 15, 15, .20);
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-weight: 300;
  font-size: 26px;
  letter-spacing: -.015em;
}
body.in-kosik .sidebar-in-cart .summary-wrapper .price-label {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 18px !important;
  color: var(--ss-muted, rgba(15, 15, 15, .62)) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.in-kosik .sidebar-in-cart .summary-wrapper .price {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif) !important;
  font-weight: 300 !important;
  font-size: 26px !important;
  letter-spacing: -.015em !important;
  color: var(--ss-black, #0F0F0F) !important;
}

/* Next step buttons inside summary */
body.in-kosik .sidebar-in-cart .summary-wrapper .next-step {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
/* Primary CTA — Pokračovat sage
   v2: zmenseno font 12 → 11px, padding 16 → 14px, letter-spacing .25 → .2
   v4: snizeno padding 14 → 10px (per user feedback "zbytecne vysoke") */
body.in-kosik .next-step .next-step-forward,
body.in-kosik .next-step #continue-order-button {
  padding: 10px 14px !important;
  background: var(--ss-sage, #6B8B85) !important;
  color: var(--ss-white, #FFFFFF) !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .25s cubic-bezier(.4, 0, .2, 1);
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
}
body.in-kosik .next-step .next-step-forward:hover,
body.in-kosik .next-step #continue-order-button:hover {
  background: var(--ss-sage-deep, #5A7E78) !important;
}
body.in-kosik .next-step .order-button-text { color: inherit !important; }
/* Back link — ghost */
body.in-kosik .next-step .next-step-back,
body.in-kosik .next-step .continue-shopping {
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 13px !important;
  color: var(--ss-muted, rgba(15, 15, 15, .62)) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 8px 0 !important;
  text-align: center !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  width: 100% !important;
}
body.in-kosik .next-step .next-step-back:hover {
  color: var(--ss-black, #0F0F0F) !important;
}
body.in-kosik .next-step .next-step-back::before {
  content: '← ';
}


/* ============================================================
   FREE SHIPPING BAR — .ss-cart-freeship-bar
   Injected by ss-cart-1.js as sibling between .cart-header
   (step indicator) and .cart-table (item list).
   States via data-state attribute: below | met | hidden.
   ============================================================ */
body.in-kosik .ss-cart-freeship-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 24px;
  margin: 0 0 28px;
  background: var(--ss-cream, #E8DDC8);
  border-radius: 4px;
  border: 1px solid rgba(15, 15, 15, .04);
}
body.in-kosik .ss-cart-freeship-bar[data-state="hidden"] {
  display: none;
}
body.in-kosik .ss-cart-freeship-bar[data-state="met"] {
  background: rgba(107, 139, 133, .14);
  border-color: rgba(107, 139, 133, .22);
}

body.in-kosik .ss-cart-freeship-bar__copy {
  margin: 0;
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-weight: 300;
  font-style: italic;
  font-size: 18px;
  letter-spacing: -.015em;
  color: var(--ss-black, #0F0F0F);
  line-height: 1.3;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
body.in-kosik .ss-cart-freeship-bar__copy strong {
  font-weight: 400;
  color: var(--ss-sage-deep, #5A7E78);
  font-style: italic;
}
body.in-kosik .ss-cart-freeship-bar[data-state="met"] .ss-cart-freeship-bar__copy {
  color: var(--ss-sage-deep, #5A7E78);
}
body.in-kosik .ss-cart-freeship-bar__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 18px;
  font-weight: 400;
  color: var(--ss-terracotta, #9A7A5F);
  line-height: 1;
}

body.in-kosik .ss-cart-freeship-bar__track {
  height: 4px;
  background: var(--ss-cream-deep, #DCCFB6);
  border-radius: 999px;
  overflow: hidden;
}
body.in-kosik .ss-cart-freeship-bar__fill {
  height: 100%;
  width: 0;
  background: var(--ss-sage, #6B8B85);
  border-radius: 999px;
  transition: width .5s cubic-bezier(.4, 0, .2, 1),
              background-color .35s cubic-bezier(.4, 0, .2, 1);
}
body.in-kosik .ss-cart-freeship-bar[data-state="met"] .ss-cart-freeship-bar__fill {
  width: 100% !important;
  background: var(--ss-sage-deep, #5A7E78);
}

@media (prefers-reduced-motion: reduce) {
  body.in-kosik .ss-cart-freeship-bar__fill {
    transition: none;
  }
}


/* ============================================================
   CROSS-SELL GRID — .ss-cart-crosssell
   Injected by ss-cart-1.js as sibling between .cart-table
   (item list) and .cart-summary (extras-wrapper Darky a slevy).
   4-card grid matching BASELINE card pattern (curated/PDP routine).
   ============================================================ */
body.in-kosik .ss-cart-crosssell {
  margin: 36px 0 28px;
}
body.in-kosik .ss-cart-crosssell[data-state="hidden"] {
  display: none;
}

body.in-kosik .ss-cart-crosssell__head {
  margin: 0 0 18px;
}
body.in-kosik .ss-cart-crosssell__eyebrow {
  display: block;
  font-family: var(--ss-sans, sans-serif);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ss-sage-deep, #5A7E78);
  margin: 0 0 6px;
}
body.in-kosik .ss-cart-crosssell__title {
  margin: 0;
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-weight: 300;
  font-style: italic;
  font-size: 26px;
  letter-spacing: -.02em;
  color: var(--ss-black, #0F0F0F);
  line-height: 1.15;
}

body.in-kosik .ss-cart-crosssell__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

body.in-kosik .ss-cart-crosssell__card {
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: #FAF6EE;
  border: 1px solid rgba(15, 15, 15, .06);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(15, 15, 15, .04);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1),
              box-shadow .35s cubic-bezier(.4, 0, .2, 1),
              border-color .35s cubic-bezier(.4, 0, .2, 1),
              background .35s cubic-bezier(.4, 0, .2, 1);
  position: relative;
}
body.in-kosik .ss-cart-crosssell__card:hover {
  transform: translateY(-3px);
  background: #FFFFFF;
  border-color: rgba(15, 15, 15, .12);
  box-shadow: 0 14px 36px rgba(15, 15, 15, .08);
}

body.in-kosik .ss-cart-crosssell__media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--ss-cream, #E8DDC8);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}
body.in-kosik .ss-cart-crosssell__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
body.in-kosik .ss-cart-crosssell__card:hover .ss-cart-crosssell__media img {
  transform: scale(1.03);
}

body.in-kosik .ss-cart-crosssell__name {
  font-family: var(--ss-sans, sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ss-black, #0F0F0F);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 53px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(15, 15, 15, .06);
}
body.in-kosik .ss-cart-crosssell__name:hover {
  color: var(--ss-sage-deep, #5A7E78);
}

body.in-kosik .ss-cart-crosssell__price {
  font-family: var(--ss-sans, sans-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ss-black, #0F0F0F);
  margin: 0 0 10px;
}

body.in-kosik .ss-cart-crosssell__add {
  appearance: none;
  border: 0;
  background: var(--ss-terracotta, #9A7A5F);
  color: var(--ss-white, #FFFFFF);
  font-family: var(--ss-sans, sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 10px 14px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background .25s cubic-bezier(.4, 0, .2, 1);
  margin-top: auto;
}
body.in-kosik .ss-cart-crosssell__add:hover {
  background: var(--ss-terracotta-deep, #7E6248);
}
body.in-kosik .ss-cart-crosssell__add[data-added="1"] {
  background: var(--ss-sage, #6B8B85);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body.in-kosik .ss-cart-crosssell__card,
  body.in-kosik .ss-cart-crosssell__media img,
  body.in-kosik .ss-cart-crosssell__add {
    transition: none;
  }
  body.in-kosik .ss-cart-crosssell__card:hover {
    transform: none;
  }
  body.in-kosik .ss-cart-crosssell__card:hover .ss-cart-crosssell__media img {
    transform: none;
  }
}


/* ============================================================
   RESPONSIVE — collapse sidebar pri tablet a mobile
   v5: collapse uz pri 1024px (sidebar 380px nestaci pri 1024 viewport),
       + reset grid-column na auto aby items nezustaly v invisible col 2
   ============================================================ */
@media (max-width: 1024px) {
  body.in-kosik #cart-wrapper .row.cart-row {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  body.in-kosik #cart-wrapper .col-md-8,
  body.in-kosik #cart-wrapper .col-md-4 {
    grid-column: auto !important;  /* v5: reset, jinak col-md-4 zustane v invisible column 2 */
  }
  body.in-kosik .sidebar-in-cart { position: static; }
}

@media (max-width: 900px) {
  body.in-kosik #content.content { padding: 16px 16px 40px; }
  body.in-kosik .cart-header {
    padding: 20px 12px 18px;
    margin: 0 -16px 24px;
    gap: 10px;
  }
  body.in-kosik .cart-header .step span:not([class]),
  body.in-kosik .cart-header .step strong span {
    display: none; /* hide step labels on mobile, show only number */
  }
  body.in-kosik .cart-header .step.active span:not([class]),
  body.in-kosik .cart-header .step.active strong span {
    display: inline; /* show only active step label */
  }
  body.in-kosik .cart-table tr.removeable {
    grid-template-columns: 64px 1fr;
    gap: 12px;
    padding: 16px 0;
  }
  body.in-kosik .cart-table .cart-p-image,
  body.in-kosik .cart-table .cart-p-image a {
    width: 64px; height: 64px;
  }
  body.in-kosik .cart-table .p-quantity,
  body.in-kosik .cart-table .p-price,
  body.in-kosik .cart-table .p-total {
    grid-column: 2;
  }
  body.in-kosik .next-step.next-step--cart {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
  }
  body.in-kosik .next-step .next-step-forward,
  body.in-kosik .next-step #continue-order-button {
    width: 100%;
    text-align: center;
  }
  body.in-kosik .next-step .next-step-back {
    text-align: center;
    justify-content: center;
  }
  /* v4: free shipping bar mobile compact */
  body.in-kosik .ss-cart-freeship-bar {
    padding: 14px 16px;
    margin: 0 0 20px;
    gap: 10px;
  }
  body.in-kosik .ss-cart-freeship-bar__copy {
    font-size: 16px;
  }
  /* v4: cross-sell 4col -> 2col */
  body.in-kosik .ss-cart-crosssell {
    margin: 28px 0 20px;
  }
  body.in-kosik .ss-cart-crosssell__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  body.in-kosik .ss-cart-crosssell__title {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  /* v4: cross-sell 2col -> 1col on smallest */
  body.in-kosik .ss-cart-crosssell__grid {
    grid-template-columns: 1fr;
  }
  body.in-kosik .ss-cart-freeship-bar__copy {
    font-size: 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}