/* ============================================================
   skinspecialist.cz / bioby.cz — ss-checkout-step4-1.css — v1
   PRODUCTION CSS for Shoptet /objednavka/krok-4/ page
   (Thank-you / order confirmation)

   APPROACH: CSS-only re-skin of Shoptet's native DOM.
   Style:
     - Hero "Děkujeme za objednávku." italic Rigane
     - Order number prominent display
     - "Co se bude dít dále" 3-step list (e-mail, expedice, doručení)
     - Cart items recapitulation (cream card, like step-3)
     - Billing/delivery info recap
     - "Co dál vyzkoušet" cross-sell strip (4 products, Must Have homepage pattern)
     - Sage CTA "Pokračovat v nákupu" + ghost "Přejít na hlavní stránku"

   DETECTION:
     - body.in-krok-4 (target — fallback selectors for in-objednavka-krok-4
       and type-cart-success included for safety)

   Shoptet renders Thank-you sometimes as type-page with class
   `cart-step-confirmation` or `in-krok-4`. Both selectors covered.

   ----------------------------------------------------------------
   DEPLOY:
     1. Upload to /user/documents/upload/
     2. V Záhlaví HTML kódy přidej:
        <link rel="stylesheet" href="/user/documents/upload/ss-checkout-step4-1.css?v=1">
     3. Rollback: odeber link tag.
   ============================================================ */


/* ============================================================
   SCOPE — handle multiple potential body class variants
   We use a CSS variable trick: any of these triggers the styles
   via shared selector blocks below.
   ============================================================ */
body.in-krok-4,
body.cart-step-confirmation,
body.in-objednavka-krok-4 {
  background: var(--ss-canvas, #F2EBDB) !important;
}
body.in-krok-4 .breadcrumbs-wrapper,
body.cart-step-confirmation .breadcrumbs-wrapper,
body.in-objednavka-krok-4 .breadcrumbs-wrapper {
  display: none !important;
}
body.in-krok-4 #content-wrapper,
body.in-krok-4 .content-inner,
body.cart-step-confirmation #content-wrapper,
body.cart-step-confirmation .content-inner,
body.in-objednavka-krok-4 #content-wrapper,
body.in-objednavka-krok-4 .content-inner {
  background: var(--ss-canvas, #F2EBDB) !important;
}
body.in-krok-4 #content.content,
body.cart-step-confirmation #content.content,
body.in-objednavka-krok-4 #content.content {
  max-width: 1500px;
  margin: 0 auto;
  padding: 48px 32px 80px;
}


/* ============================================================
   STEP INDICATOR — all completed (rare on thank-you, but style anyway)
   ============================================================ */
body.in-krok-4 .cart-header,
body.cart-step-confirmation .cart-header,
body.in-objednavka-krok-4 .cart-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  list-style: none !important;
  list-style-type: none !important;
  padding: 28px 16px 24px;
  margin: 0 -32px 36px;
  background: var(--ss-paper, #FAF5E8);
  border-bottom: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  counter-reset: step;
}
body.in-krok-4 .cart-header .step,
body.cart-step-confirmation .cart-header .step,
body.in-objednavka-krok-4 .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;
  list-style: none !important;
}
body.in-krok-4 .cart-header .step::marker,
body.cart-step-confirmation .cart-header .step::marker {
  display: none;
  content: '';
}
body.in-krok-4 .cart-header .step::before,
body.cart-step-confirmation .cart-header .step::before,
body.in-objednavka-krok-4 .cart-header .step::before {
  content: '✓';
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ss-sage-deep, #5A7E78);
  color: var(--ss-white, #FFFFFF);
  border: 1px solid var(--ss-sage-deep, #5A7E78);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 11.5px;
  letter-spacing: 0;
  flex-shrink: 0;
}
body.in-krok-4 .cart-header .step + .step::after,
body.cart-step-confirmation .cart-header .step + .step::after {
  content: '';
  position: absolute;
  left: -18px;
  width: 18px; height: 1px;
  background: var(--ss-sage, #6B8B85);
}
body.in-krok-4 .cart-header .step span::before,
body.in-krok-4 .cart-header .step strong::before {
  content: none !important;
  display: none !important;
}


/* ============================================================
   THANK-YOU HERO
   Wrap all heading + order# inside Shoptet's main confirmation block.
   Most Shoptet templates put it in #content > .row > .col-md-12, with
   .order-confirmation-content or similar wrapper.
   ============================================================ */

/* Hide raw "Vaše objednávka byla úspěšně přijata" Shoptet header — replace */
body.in-krok-4 #content h1,
body.in-krok-4 #content h2:first-of-type,
body.cart-step-confirmation #content h1,
body.in-objednavka-krok-4 #content h1 {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(48px, 6vw, 84px) !important;
  letter-spacing: -.025em !important;
  line-height: 1 !important;
  margin: 0 0 18px !important;
  color: var(--ss-black, #0F0F0F) !important;
  text-align: center;
  text-transform: none !important;
}

/* If sr-only — reveal */
body.in-krok-4 #content h1.sr-only,
body.cart-step-confirmation #content h1.sr-only,
body.in-objednavka-krok-4 #content h1.sr-only {
  position: static !important;
  width: auto !important; height: auto !important;
  overflow: visible !important;
  clip: auto !important;
}

/* Inject "Děkujeme za objednávku." headline above Shoptet's content */
body.in-krok-4 #cart-wrapper::before,
body.cart-step-confirmation #cart-wrapper::before,
body.in-objednavka-krok-4 #cart-wrapper::before,
body.in-krok-4 #content > .row:first-child::before,
body.cart-step-confirmation #content > .row:first-child::before {
  content: 'Děkujeme.';
  display: block;
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(56px, 7vw, 96px);
  letter-spacing: -.03em;
  line-height: .95;
  color: var(--ss-black, #0F0F0F);
  text-align: center;
  margin: 0 auto 12px;
  max-width: 900px;
}

body.in-krok-4 #cart-wrapper::after,
body.cart-step-confirmation #cart-wrapper::after,
body.in-objednavka-krok-4 #cart-wrapper::after {
  content: 'Vaše objednávka byla úspěšně přijata. Na e-mail jsme vám odeslali potvrzení s detaily.';
  display: block;
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
  margin: 0 auto 48px;
  text-align: center;
  max-width: 540px;
}


/* ============================================================
   ORDER NUMBER CARD — prominent display
   Shoptet typically renders order code via #orderCode, .order-code or
   inline within a paragraph. We catch common selectors.
   ============================================================ */
body.in-krok-4 .order-number,
body.in-krok-4 .order-code-wrapper,
body.in-krok-4 #orderCode,
body.in-krok-4 .order-id,
body.cart-step-confirmation .order-code-wrapper,
body.cart-step-confirmation #orderCode,
body.cart-step-confirmation .order-number,
body.in-objednavka-krok-4 .order-number,
body.in-objednavka-krok-4 .order-code-wrapper {
  display: block;
  max-width: 480px;
  margin: 0 auto 48px;
  padding: 28px 32px;
  background: var(--ss-white, #FFFFFF);
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(15, 15, 15, .04);
}
body.in-krok-4 .order-number::before,
body.in-krok-4 #orderCode::before {
  content: 'Číslo objednávky';
  display: block;
  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 8px;
}
body.in-krok-4 .order-number strong,
body.in-krok-4 #orderCode strong,
body.in-krok-4 .order-code-wrapper strong {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -.015em;
  color: var(--ss-black, #0F0F0F);
  display: block;
}


/* ============================================================
   ROOT INFO TEXT — paragraph-style copy (after order code)
   Shoptet typically has explanatory paragraphs.
   ============================================================ */
body.in-krok-4 #content p,
body.cart-step-confirmation #content p,
body.in-objednavka-krok-4 #content p {
  font-family: var(--ss-sans, sans-serif);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ss-black, #0F0F0F);
  max-width: 640px;
  margin: 0 auto 14px;
  text-align: center;
}
body.in-krok-4 #content p a,
body.cart-step-confirmation #content p a {
  color: var(--ss-terracotta-deep, #7E6248);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  font-weight: 500;
}
body.in-krok-4 #content p a:hover {
  color: var(--ss-terracotta, #9A7A5F);
}


/* ============================================================
   "CO SE BUDE DÍT DÁLE" — 3-step custom strip
   Inject via ::after on #content > .row:first-child. Editorial timeline.
   ----------------------------------------------------------------
   NOTE: Pure CSS injection — content is plain text. Adapt copy if user
   wants different messaging.
   ============================================================ */
body.in-krok-4 .ss-next-steps,
body.cart-step-confirmation .ss-next-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 16px auto 48px;
}

/* CSS-only injection: build 3 cards from page content if Shoptet doesn't
   provide. We rely on a wrapper class — admin can add manually via HTML.
   ============================================================ */


/* ============================================================
   CART ITEMS RECAP — Shoptet typically renders inline summary
   ============================================================ */
body.in-krok-4 .order-summary-inner,
body.in-krok-4 .order-recapitulation,
body.cart-step-confirmation .order-summary-inner,
body.cart-step-confirmation .order-recapitulation,
body.in-objednavka-krok-4 .order-summary-inner {
  max-width: 720px;
  margin: 0 auto 48px;
  background: var(--ss-cream, #E8DDC8);
  border-radius: 4px;
  padding: 32px 32px 28px;
}
body.in-krok-4 .order-summary-inner h2.h4,
body.in-krok-4 .order-summary-inner .h4,
body.in-krok-4 .order-recapitulation h2,
body.in-krok-4 .order-recapitulation .h4,
body.cart-step-confirmation .order-summary-inner h2.h4 {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: 24px !important;
  letter-spacing: -.02em !important;
  color: var(--ss-black, #0F0F0F) !important;
  margin: 0 0 20px !important;
  text-transform: none !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: left;
}
body.in-krok-4 .cart-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(15, 15, 15, .20);
}
body.in-krok-4 .cart-items .cart-item {
  display: grid !important;
  grid-template-columns: 56px 1fr auto auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: left;
}
body.in-krok-4 .cart-items .cart-item-image,
body.in-krok-4 .cart-items .image {
  width: 56px; height: 56px;
  border-radius: 4px;
  background: var(--ss-canvas, #F2EBDB);
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .08));
  overflow: hidden;
}
body.in-krok-4 .cart-items .cart-item-image img,
body.in-krok-4 .cart-items .image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
body.in-krok-4 .cart-items .cart-item-name .main-link,
body.in-krok-4 .cart-items .cart-item-name a {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif) !important;
  font-weight: 300 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em !important;
  color: var(--ss-black, #0F0F0F) !important;
  text-decoration: none !important;
  text-transform: none !important;
}
body.in-krok-4 .cart-items .cart-item-name a:hover {
  color: var(--ss-sage-deep, #5A7E78) !important;
}
body.in-krok-4 .cart-items .cart-item-amount {
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 12.5px !important;
  color: var(--ss-muted, rgba(15, 15, 15, .62)) !important;
  white-space: nowrap;
}
body.in-krok-4 .cart-items .cart-item-price {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif) !important;
  font-weight: 300 !important;
  font-size: 17px !important;
  letter-spacing: -.01em !important;
  color: var(--ss-black, #0F0F0F) !important;
  white-space: nowrap;
}

body.in-krok-4 .order-summary-item,
body.in-krok-4 .recapitulation-single {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  padding: 6px 0 !important;
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 14px !important;
  color: var(--ss-muted, rgba(15, 15, 15, .62)) !important;
  margin: 0 !important;
  text-align: left;
}
body.in-krok-4 .recapitulation-shipping-billing-label {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--ss-muted, rgba(15, 15, 15, .62)) !important;
  font-weight: 400 !important;
  text-transform: none !important;
}
body.in-krok-4 .recapitulation-shipping-billing-info {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 8px !important;
  color: var(--ss-black, #0F0F0F) !important;
  font-weight: 500 !important;
  font-style: normal !important;
}
body.in-krok-4 .recapitulation-shipping-billing-info [data-testid="recapItemPrice"] {
  order: 2;
  color: var(--ss-sage-deep, #5A7E78) !important;
  font-weight: 600 !important;
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: .15em !important;
  padding: 2px 6px;
  border-radius: 2px;
  background: rgba(107, 139, 133, .12);
  white-space: nowrap;
}
body.in-krok-4 .price-final,
body.in-krok-4 .order-summary-item.total,
body.in-krok-4 .order-summary-item.price {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif) !important;
  font-weight: 300 !important;
  font-size: 28px !important;
  letter-spacing: -.015em !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px dashed rgba(15, 15, 15, .20) !important;
}


/* ============================================================
   BILLING / DELIVERY ADDRESS RECAP — white cards
   ============================================================ */
body.in-krok-4 .co-box {
  background: var(--ss-white, #FFFFFF) !important;
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .10)) !important;
  border-radius: 4px !important;
  padding: 28px !important;
  margin: 0 auto 16px !important;
  max-width: 720px;
  box-shadow: none !important;
}
body.in-krok-4 .co-box:empty {
  display: none !important;
}
body.in-krok-4 .co-box h4,
body.in-krok-4 .co-box .co-h,
body.in-krok-4 .co-box legend {
  font-family: var(--ss-sans, sans-serif) !important;
  font-size: 11px !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  color: var(--ss-sage-deep, #5A7E78) !important;
  font-weight: 600 !important;
  margin: 0 0 16px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--ss-border, rgba(15, 15, 15, .10)) !important;
  background-image: none !important;
  background: none !important;
  display: block !important;
}
body.in-krok-4 .co-box h4::before {
  display: none !important;
}
body.in-krok-4 .co-box .recapitulation p,
body.in-krok-4 .co-box .billing-info p,
body.in-krok-4 .co-box .delivery-info p {
  font-family: var(--ss-sans, sans-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ss-black, #0F0F0F);
  margin: 0 0 4px;
  text-align: left;
  max-width: none;
}


/* ============================================================
   CTA — "Pokračovat v nákupu" / "Přejít na hlavní stránku"
   Shoptet renders these inside .next-step or as plain link.
   ============================================================ */
body.in-krok-4 .next-step,
body.cart-step-confirmation .next-step,
body.in-objednavka-krok-4 .next-step {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin: 48px auto !important;
  padding: 0 !important;
  border: 0 !important;
  max-width: 540px;
}
body.in-krok-4 .next-step .next-step-back,
body.in-krok-4 .continue-shopping,
body.cart-step-confirmation .next-step .next-step-back,
body.cart-step-confirmation .continue-shopping {
  font-family: var(--ss-sans, sans-serif);
  font-size: 12px;
  color: var(--ss-black, #0F0F0F);
  text-decoration: none !important;
  background: transparent !important;
  border: 1px solid var(--ss-black, #0F0F0F) !important;
  padding: 14px 24px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: 4px !important;
  transition: background .25s cubic-bezier(.4, 0, .2, 1), color .25s cubic-bezier(.4, 0, .2, 1);
}
body.in-krok-4 .next-step .next-step-back:hover,
body.in-krok-4 .continue-shopping:hover {
  background: var(--ss-black, #0F0F0F) !important;
  color: var(--ss-white, #FFFFFF) !important;
}
body.in-krok-4 .next-step .next-step-forward,
body.in-krok-4 .next-step .btn-conversion,
body.cart-step-confirmation .next-step .btn-conversion {
  padding: 14px 28px !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);
  font-size: 12px !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);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.in-krok-4 .next-step .next-step-forward:hover,
body.in-krok-4 .next-step .btn-conversion:hover {
  background: var(--ss-sage-deep, #5A7E78) !important;
}


/* ============================================================
   CROSS-SELL "CO DÁL VYZKOUŠET" — optional manual injection
   ----------------------------------------------------------------
   Shoptet doesn't render cross-sell on thank-you by default. Admin
   can paste this HTML in /objednavka/krok-4/ Uvítací text:

   <section class="ss-thankyou-crosssell">
     <h2 class="ss-thankyou-crosssell-h">Co dál vyzkoušet</h2>
     <p class="ss-thankyou-crosssell-sub">Naše must-have rituály doporučované odbornicemi.</p>
     <div class="ss-thankyou-crosssell-grid">
       <a class="ss-thankyou-card" href="/...">
         <div class="ss-thankyou-card-img"><img src="..." alt=""></div>
         <span class="ss-thankyou-card-name">...</span>
         <span class="ss-thankyou-card-price">...</span>
       </a>
       (×4)
     </div>
   </section>
   ============================================================ */
body.in-krok-4 .ss-thankyou-crosssell {
  max-width: 1200px;
  margin: 64px auto 0;
  padding: 56px 0 0;
  border-top: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  text-align: center;
}
.ss-thankyou-crosssell-h {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -.02em;
  line-height: 1;
  margin: 0 0 8px;
  color: var(--ss-black, #0F0F0F);
}
.ss-thankyou-crosssell-sub {
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
  margin: 0 0 32px;
}
.ss-thankyou-crosssell-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.ss-thankyou-card {
  display: block;
  background: #FAF6EE;
  border: 1px solid rgba(15, 15, 15, .06);
  border-radius: 10px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  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);
  box-shadow: 0 6px 18px rgba(15, 15, 15, .04);
}
.ss-thankyou-card:hover {
  transform: translateY(-3px);
  background: var(--ss-white, #FFFFFF);
  border-color: rgba(15, 15, 15, .12);
  box-shadow: 0 14px 36px rgba(15, 15, 15, .08);
}
.ss-thankyou-card-img {
  aspect-ratio: 3 / 4;
  background: var(--ss-cream, #E8DDC8);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}
.ss-thankyou-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.ss-thankyou-card:hover .ss-thankyou-card-img img {
  transform: scale(1.03);
}
.ss-thankyou-card-name {
  display: block;
  font-family: var(--ss-sans, sans-serif);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ss-black, #0F0F0F);
  line-height: 1.35;
  margin: 0 0 6px;
  text-align: left;
}
.ss-thankyou-card-price {
  display: block;
  font-family: var(--ss-sans, sans-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ss-black, #0F0F0F);
  text-align: left;
}


/* ============================================================
   "CO SE BUDE DÍT DÁLE" timeline — optional manual injection
   ----------------------------------------------------------------
   Admin can paste in Uvítací text:

   <section class="ss-thankyou-timeline">
     <h2 class="ss-thankyou-timeline-h">Co se bude dít dál</h2>
     <ol class="ss-thankyou-timeline-list">
       <li>
         <span class="step-num">1</span>
         <span class="step-title">Potvrzení na e-mailu</span>
         <span class="step-desc">Hned teď vám posíláme potvrzení s detaily objednávky.</span>
       </li>
       <li>
         <span class="step-num">2</span>
         <span class="step-title">Expedice do 24 hodin</span>
         <span class="step-desc">V pracovní dny balíme a předáváme dopravci.</span>
       </li>
       <li>
         <span class="step-num">3</span>
         <span class="step-title">Doručení a péče</span>
         <span class="step-desc">Balíček dorazí do 1–3 dní podle zvolené dopravy.</span>
       </li>
     </ol>
   </section>
   ============================================================ */
.ss-thankyou-timeline {
  max-width: 720px;
  margin: 0 auto 48px;
  padding: 32px;
  background: var(--ss-white, #FFFFFF);
  border: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
  border-radius: 4px;
}
.ss-thankyou-timeline-h {
  font-family: var(--ss-sans, sans-serif);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ss-sage-deep, #5A7E78);
  font-weight: 600;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ss-border, rgba(15, 15, 15, .10));
}
.ss-thankyou-timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ss-thankyou-timeline-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
}
.ss-thankyou-timeline-list .step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ss-sage, #6B8B85);
  color: var(--ss-white, #FFFFFF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-weight: 300;
  font-style: italic;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.ss-thankyou-timeline-list .step-title {
  display: block;
  font-family: var(--ss-serif, 'Luxury Rigane', Georgia, serif);
  font-weight: 300;
  font-style: italic;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--ss-black, #0F0F0F);
  margin-bottom: 2px;
  grid-column: 2;
}
.ss-thankyou-timeline-list .step-desc {
  display: block;
  font-family: var(--ss-sans, sans-serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ss-muted, rgba(15, 15, 15, .62));
  grid-column: 2;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  body.in-krok-4 #content.content,
  body.cart-step-confirmation #content.content,
  body.in-objednavka-krok-4 #content.content {
    padding: 32px 16px 60px;
  }
  body.in-krok-4 .cart-header,
  body.cart-step-confirmation .cart-header,
  body.in-objednavka-krok-4 .cart-header {
    padding: 20px 12px 18px;
    margin: 0 -16px 28px;
    gap: 10px;
  }
  body.in-krok-4 .cart-header .step span:not([class]),
  body.in-krok-4 .cart-header .step strong span {
    display: none;
  }
  body.in-krok-4 #cart-wrapper::before,
  body.cart-step-confirmation #cart-wrapper::before {
    font-size: clamp(42px, 10vw, 56px);
  }
  body.in-krok-4 .order-number,
  body.in-krok-4 .order-code-wrapper,
  body.in-krok-4 #orderCode {
    padding: 22px 20px;
    margin-bottom: 36px;
  }
  body.in-krok-4 .order-summary-inner,
  body.in-krok-4 .order-recapitulation {
    padding: 24px 20px 20px;
  }
  body.in-krok-4 .cart-items .cart-item {
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    gap: 10px 12px;
  }
  body.in-krok-4 .cart-items .cart-item-image,
  body.in-krok-4 .cart-items .image {
    grid-row: 1 / 3;
    width: 48px; height: 48px;
  }
  body.in-krok-4 .cart-items .cart-item-name {
    grid-column: 2;
    grid-row: 1;
  }
  body.in-krok-4 .cart-items .cart-item-amount,
  body.in-krok-4 .cart-items .cart-item-price {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }
  body.in-krok-4 .next-step {
    flex-direction: column-reverse;
    align-items: stretch !important;
    gap: 12px;
    max-width: 320px;
  }
  body.in-krok-4 .next-step .next-step-forward,
  body.in-krok-4 .next-step .next-step-back {
    width: 100%;
    justify-content: center;
  }
  .ss-thankyou-crosssell-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  body.in-krok-4 #content.content,
  body.cart-step-confirmation #content.content,
  body.in-objednavka-krok-4 #content.content {
    padding: 24px 12px 48px;
  }
  body.in-krok-4 #cart-wrapper::before,
  body.cart-step-confirmation #cart-wrapper::before {
    font-size: 42px;
  }
  body.in-krok-4 #cart-wrapper::after,
  body.cart-step-confirmation #cart-wrapper::after {
    font-size: 15px;
    margin-bottom: 32px;
  }
  body.in-krok-4 .order-summary-inner,
  body.in-krok-4 .order-recapitulation {
    padding: 20px 14px 16px;
  }
  body.in-krok-4 .co-box {
    padding: 22px 18px !important;
  }
  .ss-thankyou-crosssell {
    padding-top: 40px;
    margin-top: 48px;
  }
  .ss-thankyou-crosssell-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.in-krok-4 .next-step .next-step-forward,
  body.in-krok-4 .next-step .next-step-back,
  body.in-krok-4 .continue-shopping,
  .ss-thankyou-card,
  .ss-thankyou-card-img img {
    transition: none !important;
  }
  .ss-thankyou-card:hover {
    transform: none !important;
  }
  .ss-thankyou-card:hover .ss-thankyou-card-img img {
    transform: none !important;
  }
}