/* A native dialog owns focus and modality; this file supplies its visual journey. */
html.cart-transition-open { overflow: hidden; overscroll-behavior: none; }
.cart-transition {
  --cart-cream: #f5f1e8;
  --cart-navy: #0b2d63;
  --cart-orange: #f28c1e;
  width: min(560px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid #ffffffa6;
  border-radius: 30px;
  background: var(--cart-cream);
  color: var(--cart-navy);
  box-shadow: 0 32px 100px #071d4259, 0 4px 16px #071d421f;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: #c5b89f var(--cart-cream);
}
.cart-transition:not([open]) { display: none; }
.cart-transition[open] { animation: cart-modal-enter .3s cubic-bezier(.16, 1, .3, 1) both; }
.cart-transition::backdrop { background: #071d4280; backdrop-filter: blur(6px); animation: cart-backdrop-enter .2s ease-out both; }
.cart-transition__panel { position: relative; padding: 34px 34px 28px; }
.cart-transition [hidden] { display: none !important; }
.cart-transition__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 12px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #0b2d63a6;
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.cart-transition__close:hover { background: #0b2d630b; color: var(--cart-navy); }
.cart-transition__close svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.cart-transition__journey {
  --cart-thumb-size: 76px;
  --cart-icon-size: 100px;
  --cart-flight-distance: calc(100cqw - var(--cart-thumb-size) / 2 - var(--cart-icon-size) / 2);
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 408px;
  height: 176px;
  margin: 16px auto 18px;
  isolation: isolate;
}
.cart-transition__origin, .cart-transition__parcel {
  position: absolute;
  left: 0;
  top: calc(50% - var(--cart-thumb-size) / 2);
  display: grid;
  place-items: center;
  width: var(--cart-thumb-size);
  height: var(--cart-thumb-size);
  padding: 8px;
  border: 1px solid #e2dace;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 14px #0b2d6309;
}
.cart-transition__origin { z-index: 1; transform: rotate(-7deg); }
.cart-transition__origin img, .cart-transition__parcel img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.cart-transition__fallback { width: 80%; height: 80%; color: #6b84a6; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cart-transition__parcel { z-index: 3; opacity: 0; box-shadow: 0 12px 24px #0b2d6321; }
.cart-transition__route {
  position: absolute;
  top: 50%;
  left: calc(var(--cart-thumb-size) + 13px);
  right: calc(var(--cart-icon-size) + 9px);
  z-index: 0;
  border-top: 3px dotted #cfc1a8;
  transform: translateY(-1px);
}
.cart-transition__route::after { content: ''; position: absolute; right: -3px; top: -5px; width: 6px; height: 6px; border-top: 2px solid #cfc1a8; border-right: 2px solid #cfc1a8; transform: rotate(45deg); }
.cart-transition__cart {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--cart-icon-size);
  height: var(--cart-icon-size);
  border-radius: 24px;
  background: var(--cart-orange);
  color: var(--cart-navy);
  box-shadow: 0 10px 24px #f28c1e29, inset 0 1px 0 #ffffff59;
  transform: translateY(-50%);
}
.cart-transition__cart::after { content: ''; position: absolute; width: 74%; height: 9px; bottom: -10px; border-radius: 50%; background: #0b2d6312; filter: blur(2px); }
.cart-transition__cart svg { display: block; width: 64%; height: 64%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.cart-transition__eyebrow { margin: 0 0 9px; color: #786a55; font-family: var(--f-body, sans-serif); font-size: .67rem; font-weight: 800; letter-spacing: .17em; line-height: 1.4; text-transform: uppercase; overflow-wrap: anywhere; }
.cart-transition #cart-transition-title { margin: 0; color: var(--cart-navy); font-family: var(--f-head, sans-serif); font-size: clamp(1.75rem, 7vw, 2.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -.04em; }
.cart-transition__product { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 13px 0 0; max-width: 38ch; color: #344c6d; font-size: .92rem; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.cart-transition__description { margin: 13px 0 0; max-width: 43ch; color: #687184; font-size: .93rem; line-height: 1.6; }
.cart-transition__progress { height: 6px; margin-top: 25px; overflow: hidden; border-radius: 999px; background: #e5dece; }
.cart-transition__progress > span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--cart-orange); transform: scaleX(0); transform-origin: left; }
.cart-transition__actions { position: sticky; bottom: 0; z-index: 4; display: grid; grid-template-columns: .8fr 1.2fr; gap: 12px; margin-top: 17px; padding-top: 9px; background: linear-gradient(180deg, #f5f1e800, var(--cart-cream) 9px); }
.cart-transition__cancel, .cart-transition__continue { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 48px; padding: 12px 14px; border: 1.5px solid #d3c9b8; border-radius: 999px; font: 700 .9rem/1.2 var(--f-body, sans-serif); text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.cart-transition__cancel { background: transparent; color: #52627e; }
.cart-transition__cancel:hover { background: #ece5d9; border-color: #b8ab96; }
.cart-transition__continue { border-color: var(--cart-orange); background: var(--cart-orange); color: var(--cart-navy); box-shadow: 0 5px 12px #f28c1e24; }
.cart-transition__continue:hover { background: #ff9a2d; border-color: #ff9a2d; box-shadow: 0 7px 18px #f28c1e38; }
.cart-transition__close:focus-visible, .cart-transition__cancel:focus-visible, .cart-transition__continue:focus-visible { outline: 3px solid var(--cart-orange); outline-offset: 3px; }

.cart-transition[open].is-running .cart-transition__parcel { animation: cart-parcel-flight var(--cart-delay, 2500ms) cubic-bezier(.4, 0, .2, 1) both; }
.cart-transition[open].is-running .cart-transition__origin { animation: cart-origin-fade var(--cart-delay, 2500ms) ease-out both; }
.cart-transition[open].is-running .cart-transition__cart { animation: cart-receive var(--cart-delay, 2500ms) ease-in-out both; }
.cart-transition[open].is-running .cart-transition__progress > span { animation: cart-progress var(--cart-delay, 2500ms) linear both; }
.cart-transition[open].is-closing { animation: cart-modal-exit .16s ease-in both; }
.cart-transition.is-closing::backdrop { animation: cart-backdrop-exit .16s ease-in both; }
.cart-transition[open].is-closing .cart-transition__parcel, .cart-transition[open].is-closing .cart-transition__origin,
.cart-transition[open].is-closing .cart-transition__cart, .cart-transition[open].is-closing .cart-transition__progress > span { animation-play-state: paused; }

@keyframes cart-modal-enter { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes cart-modal-exit { to { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes cart-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes cart-backdrop-exit { to { opacity: 0; } }
@keyframes cart-origin-fade { 0%, 10% { opacity: 1; } 24%, 100% { opacity: .32; } }
@keyframes cart-parcel-flight {
  0%, 10% { opacity: 0; transform: translate(0, 0) rotate(-7deg) scale(.95); }
  17% { opacity: 1; transform: translate(2px, -5px) rotate(-9deg) scale(1); }
  43% { opacity: 1; transform: translate(calc(var(--cart-flight-distance) * .43), -30px) rotate(5deg) scale(.94); }
  65% { opacity: 1; transform: translate(calc(var(--cart-flight-distance) * .87), -8px) rotate(-4deg) scale(.64); }
  76%, 100% { opacity: 0; transform: translate(var(--cart-flight-distance), 5px) rotate(0deg) scale(.12); }
}
@keyframes cart-receive {
  0%, 61%, 100% { transform: translateY(-50%) scale(1); }
  72% { transform: translateY(-57%) scale(1.08); }
  82% { transform: translateY(-46%) scale(.97); }
  90% { transform: translateY(-52%) scale(1.02); }
}
@keyframes cart-progress { to { transform: scaleX(1); } }

@media (max-width: 400px) {
  .cart-transition { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 24px; }
  .cart-transition__panel { padding: 27px 21px 22px; }
  .cart-transition__close { top: 7px; right: 7px; }
  .cart-transition__journey { --cart-thumb-size: 64px; --cart-icon-size: 84px; height: 145px; margin: 15px auto; }
  .cart-transition__origin, .cart-transition__parcel { border-radius: 14px; padding: 7px; }
  .cart-transition__route { left: calc(var(--cart-thumb-size) + 10px); right: calc(var(--cart-icon-size) + 5px); }
  .cart-transition__eyebrow { font-size: .62rem; }
  .cart-transition #cart-transition-title { font-size: 1.75rem; }
  .cart-transition__product { font-size: .85rem; margin-top: 11px; }
  .cart-transition__description { font-size: .85rem; line-height: 1.5; }
  .cart-transition__progress { margin-top: 21px; }
  .cart-transition__actions { gap: 9px; }
  .cart-transition__cancel, .cart-transition__continue { padding-inline: 10px; min-height: 46px; font-size: .8rem; }
}
@media (min-width: 600px) and (max-height: 520px) {
  .cart-transition { width: min(680px, calc(100% - 24px)); max-height: calc(100dvh - 20px); border-radius: 24px; text-align: left; }
  .cart-transition__panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: 25px; padding: 27px 28px 20px; }
  .cart-transition__close { top: 5px; right: 5px; }
  .cart-transition__journey { --cart-thumb-size: 64px; --cart-icon-size: 84px; grid-column: 1; grid-row: 1 / 5; align-self: center; height: 136px; margin: 0; }
  .cart-transition__eyebrow { grid-column: 2; grid-row: 1; margin-right: 18px; margin-bottom: 7px; font-size: .6rem; }
  .cart-transition #cart-transition-title { grid-column: 2; grid-row: 2; font-size: 1.7rem; }
  .cart-transition__product { grid-column: 2; grid-row: 3; margin: 9px 0 0; font-size: .81rem; }
  .cart-transition__description { grid-column: 2; grid-row: 4; margin: 9px 0 0; font-size: .8rem; line-height: 1.45; }
  .cart-transition__progress { grid-column: 1 / -1; margin-top: 18px; }
  .cart-transition__actions { grid-column: 1 / -1; margin-top: 12px; }
  .cart-transition__cancel, .cart-transition__continue { min-height: 44px; padding-block: 10px; font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cart-transition, .cart-transition::backdrop, .cart-transition .cart-transition__origin,
  .cart-transition .cart-transition__parcel, .cart-transition .cart-transition__cart,
  .cart-transition .cart-transition__progress > span { animation: none !important; transition: none !important; }
  .cart-transition { transform: none !important; }
  .cart-transition .cart-transition__origin { opacity: 1; }
  .cart-transition .cart-transition__parcel { display: none; }
  .cart-transition .cart-transition__cart { transform: translateY(-50%); }
  .cart-transition .cart-transition__progress > span { transform: scaleX(1); }
}