/* Receipt carousel: desktop arc and a horizontal mobile row. */
.hero__content--prices .receipt-carousel { width: min(1100px, 100%); }
.receipt-carousel-row { position: relative; display: block; width: 100%; }
.receipt-track { width: 100%; aspect-ratio: auto; overflow: hidden; perspective: none; mask: none; -webkit-mask: none; touch-action: pan-y; cursor: grab; padding-top: 24px; }
.receipt-track.is-dragging { cursor: grabbing; }
.receipt-track .receipt-slide,
.receipt-track .receipt-slide:has(.receipt-paper--dense) { position: absolute; top: 24px; left: 50%; width: 300px; height: auto; transform-origin: center 65%; display: block; visibility: visible; transition: transform 500ms cubic-bezier(.22,1,.36,1), opacity 400ms; }
.receipt-track .receipt-paper,
.receipt-track .receipt-paper--dense { position: relative; width: 100%; height: auto; max-height: none; min-height: 0; aspect-ratio: auto; padding: 32px 20px; overflow: visible; }
.receipt-track .receipt-paper-items { overflow: visible; flex-shrink: 0; }
.receipt-track .receipt-paper-title { font-size: 18px; }
.receipt-track :is(.receipt-paper-heading, .receipt-paper-item, .receipt-paper-total, .receipt-paper-price) { font-size: 13px; }
.receipt-track .receipt-paper-tax { font-size: 10px; }
.receipt-track .receipt-paper-note { font-size: 12px; }
.receipt-track .receipt-paper-items { gap: 12px; }
.receipt-track .receipt-paper-footer { margin-top: 24px; }
.receipt-carousel-row .receipt-arrow { display: grid; position: absolute; top: 190px; width: 32px; height: 32px; padding: 7px; z-index: 20; }
#receipt-prev { left: 20px; }
#receipt-next { right: 20px; }
@media (max-width: 600px) {
  .hero__content--prices .receipt-carousel { width: 100%; }
  .receipt-track .receipt-slide, .receipt-track .receipt-slide:has(.receipt-paper--dense) { width: min(68vw, 300px); }
  .receipt-track .receipt-paper { padding: 28px 16px; }
  .receipt-track .receipt-paper-title { font-size: 16px; }
  .receipt-track :is(.receipt-paper-heading, .receipt-paper-item, .receipt-paper-total, .receipt-paper-price) { font-size: 12px; }
  #receipt-prev { left: 12px; }
  #receipt-next { right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .receipt-track .receipt-slide { transition: none; } }

/* Mobile uses native horizontal scrolling rather than the desktop arc. */
@media (max-width: 600px) {
  .receipt-track { display: flex; align-items: flex-start; gap: 20px; padding: 16px 24px 24px; overflow-x: auto; overflow-y: hidden; height: auto; touch-action: auto; scroll-snap-type: x proximity; scroll-padding-inline: 24px; scrollbar-width: thin; scrollbar-color: #a6b5ff transparent; cursor: auto; mask: none; -webkit-mask: none; }
  .receipt-track .receipt-slide,
  .receipt-track .receipt-slide:has(.receipt-paper--dense) { position: relative; top: auto; left: auto; flex: 0 0 82%; width: 82%; transform: none !important; opacity: 1 !important; scroll-snap-align: start; }
  .receipt-carousel-row .receipt-arrow { display: none; }
  .receipt-track::-webkit-scrollbar { display: block; height: 3px; }
  .receipt-track::-webkit-scrollbar-thumb { background: #a6b5ff; border-radius: 999px; }
}

@media (max-width: 600px) {
  .receipt-track { padding-left: var(--receipt-row-inset, 32px); scroll-padding-left: var(--receipt-row-inset, 32px); mask-image: linear-gradient(to right, #000 0%, #000 88%, transparent 100%); -webkit-mask-image: linear-gradient(to right, #000 0%, #000 88%, transparent 100%); }
}

@media (max-width: 600px) {
  .receipt-track { scrollbar-width: none; }
  .receipt-track::-webkit-scrollbar { display: none; }
}


@media (max-width: 600px) {
}

/* Readability trial: Inter for receipt details, existing font for titles. */
.receipt-track .receipt-paper { font-family: "Inter", Arial, sans-serif; line-height: 1.5; }
.receipt-track .receipt-paper-title { font-family: "Be Vietnam Pro", sans-serif; }
.receipt-track .receipt-paper-item { font-weight: 400; }
@media (max-width: 600px) {
  .receipt-track :is(.receipt-paper-heading, .receipt-paper-item, .receipt-paper-total, .receipt-paper-price, .receipt-paper-note) { font-size: 13px; line-height: 1.5; }
}

/* Native mobile row gives every receipt equal typography, including neighbours. */
@media (max-width: 600px) {
  .receipt-track .receipt-slide .receipt-paper-item { font-family: "Inter", Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; }
}

/* All receipt typography follows the Klargøring receipt, regardless of position. */
.receipt-track .receipt-slide .receipt-paper-title { font-family: "Be Vietnam Pro", sans-serif; font-size: 18px; font-weight: 700; line-height: 1.2; }
.receipt-track .receipt-slide .receipt-paper-heading { font-family: "Inter", Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.5; margin-bottom: 20px; }
.receipt-track .receipt-slide .receipt-paper-item { font-family: "Inter", Arial, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; }
.receipt-track .receipt-slide .receipt-paper-items { gap: 12px; }
.receipt-track .receipt-slide .receipt-paper-tax { font-family: "Inter", Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1.5; }
.receipt-track .receipt-slide :is(.receipt-paper-total, .receipt-paper-price) { font-family: "Inter", Arial, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.5; }
.receipt-track .receipt-slide .receipt-paper-note { font-family: "Inter", Arial, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.5; margin-top: 16px; align-items: flex-start; }
@media (max-width: 600px) {
  .receipt-track .receipt-slide .receipt-paper-title { font-size: 16px; }
  .receipt-track .receipt-slide .receipt-paper-note { font-size: 13px; }
}


/* Match the approved mobile typography on desktop too. */
.receipt-track .receipt-slide .receipt-paper-title { font-size: 16px; }
.receipt-track .receipt-slide .receipt-paper-note { font-size: 13px; line-height: 1.5; }

.receipt-carousel-row .receipt-arrow { padding: 0; place-items: center; }
.receipt-carousel-row .receipt-arrow svg { display: block; width: 18px; height: 18px; margin: 0; }

@media (min-width: 601px) {
  #receipt-prev { left: 36px; }
  #receipt-next { right: 36px; }
  .receipt-track {
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 120px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 120px), transparent 100%);
  }
}
