/* Native ports of UI Layout's image accordion and Kibo's marquee. See THIRD_PARTY_NOTICES.md. */
.packing-tape { position: relative; overflow: hidden; background: var(--orange); color: var(--ink); padding-block: 20px; border-block: 1px solid #29251f30; }
.marquee-content { display: flex; width: max-content; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; gap: 50px; padding-right: 50px; font: bold 15px 'Courier New', monospace; letter-spacing: .09em; white-space: nowrap; animation: packing-scroll 40s linear infinite; }
.marquee-group b { font: 30px Arial, sans-serif; }
.marquee-fade { position: absolute; top: 0; bottom: 0; width: 6vw; z-index: 1; pointer-events: none; }
.marquee-fade.left { left: 0; background: linear-gradient(90deg, var(--orange), transparent); }
.marquee-fade.right { right: 0; background: linear-gradient(-90deg, var(--orange), transparent); }
.packing-tape:hover .marquee-group, .packing-tape:focus-within .marquee-group { animation-play-state: paused; }
@keyframes packing-scroll { to { transform: translateX(-100%); } }
.image-accordion { display: flex; gap: 12px; width: 100%; height: 530px; }
.parcel-card { position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 5px; color: var(--paper); transition: flex 600ms cubic-bezier(.5,.85,.25,1); background: #403629; isolation: isolate; }
.parcel-card[data-active="true"] { flex: 3.4; }
.parcel-card > img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50%; z-index: -2; transition: filter 500ms, transform 700ms; }
.parcel-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#0006,transparent 40%,#000c); z-index: -1; }
.parcel-card[data-active="false"] > img { filter: saturate(.65) brightness(.8); }
.parcel-card[data-active="true"] > img { transform: scale(1.02); }
.parcel-select { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; border: 0; padding: 28px; text-align: left; background: none; color: inherit; }
.parcel-number { position: absolute; top: 25px; left: 25px; border: 1px solid #fff7e970; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; font: 11px 'Courier New', monospace; }
.parcel-title { font-size: clamp(23px,2.7vw,40px); font-weight: 500; letter-spacing: -.055em; line-height: 1.05; margin-bottom: 8px; transition: transform 350ms; }
.parcel-card[data-active="true"] .parcel-title { transform: translateY(-77px); }
.parcel-plus { position: absolute; top: 25px; right: 25px; font: 22px 'Courier New', monospace; }
.parcel-card[data-active="false"] .parcel-title { writing-mode: vertical-rl; transform: rotate(180deg); }
.parcel-details { position: absolute; left: 28px; right: 28px; bottom: 27px; pointer-events: none; }
.parcel-details p { font-size: 13px; margin: 0 0 17px; }
.view-photo { pointer-events: auto; border: 0; border-bottom: 1px solid #fff7e975; background: transparent; color: inherit; padding: 8px 0; font: 10px 'Courier New', monospace; }
.parcel-select:focus-visible { outline-offset: -5px; border-radius: 5px; }
@media (max-width: 760px) {
 .packing-tape { padding-block: 13px; }
 .marquee-group { font-size: 11px; gap: 30px; padding-right: 30px; }
 .image-accordion { flex-direction: column; height: auto; gap: 9px; }
 .parcel-card { flex: none; height: 94px; transition: height 450ms ease; }
 .parcel-card[data-active="true"] { flex: none; height: 410px; }
 .parcel-card[data-active="false"] .parcel-title { writing-mode: horizontal-tb; transform: none; margin: 0 0 0 50px; font-size: 25px; }
 .parcel-select { padding: 24px; }
 .parcel-card[data-active="false"] .parcel-select { justify-content: center; }
 .parcel-number { top: 29px; left: 19px; }
 .parcel-card[data-active="true"] .parcel-number { top: 22px; }
 .parcel-plus { top: 32px; right: 22px; }
 .parcel-card[data-active="true"] .parcel-title { font-size: 35px; }
 .parcel-details { left: 24px; }
}