/* ==========================================================================
   PddFalcon storefront — cart page, checkout, orders, account, auth, maps
   ========================================================================== */

/* Cart page */
.s-cartpage { display: grid; gap: var(--s-6); align-items: start; padding-block-end: var(--s-12); }
@media (min-width: 62rem) { .s-cartpage { grid-template-columns: minmax(0, 1fr) 22rem; } }
.s-cartpage .s-line { grid-template-columns: 6rem 1fr; }
.s-cartpage .s-line__thumb { inline-size: 6rem; block-size: 6rem; }

/* Coupon */
.s-coupon { padding-block-start: var(--s-3); }
.s-coupon__label { font-size: var(--s-text-sm); font-weight: 600; margin-block-end: 0.35rem; }
.s-coupon__row { display: flex; gap: 0.5rem; }
.s-coupon__input { flex: 1; text-transform: uppercase; letter-spacing: 0.06em; }
.s-coupon__ok { color: var(--s-success); font-size: var(--s-text-sm); font-weight: 600; }
.s-coupon__bad { color: var(--s-danger); font-size: var(--s-text-sm); }
.s-coupon__clear { border: 0; background: transparent; color: var(--s-muted); text-decoration: underline; font-size: var(--s-text-xs); }

/* Checkout */
.s-checkout { display: grid; gap: var(--s-6); align-items: start; padding-block-end: var(--s-12); }
@media (min-width: 62rem) { .s-checkout { grid-template-columns: minmax(0, 1fr) 24rem; } }
.s-checkout__main { display: grid; gap: var(--s-5); }
.s-address { display: grid; gap: 0.25rem; padding: var(--s-4); border: 1px solid var(--s-line); border-radius: var(--s-radius); background: var(--s-surface); font-size: var(--s-text-sm); }
.s-address__default { font-size: var(--s-text-2xs); font-weight: 700; color: var(--s-success); text-transform: uppercase; letter-spacing: var(--s-tracking-caps); }
.s-paybox { padding: var(--s-5); border: 1px solid var(--s-line); border-radius: var(--s-radius-lg); background: var(--s-surface); text-align: center; }
.s-paybox .s-rule { margin-inline: auto; }

/* Order page */
.s-orderstate { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.8rem; border-radius: var(--s-radius-pill); background: var(--s-brand-100); color: var(--s-brand-800); font-weight: 700; font-size: var(--s-text-sm); }
.s-orderstate__dot { inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: currentColor; }
.s-orderstate--paid, .s-orderstate--delivered { background: var(--s-success-soft); color: var(--s-success); }
.s-orderstate--cancelled, .s-orderstate--failed { background: var(--s-danger-soft); color: var(--s-danger); }
/* The component draws its own dots with li::before, so the browser's own
   markers have to go — base.css only clears them from a list carrying
   role="list", and this one did not, so "1." and "2." printed on top of the
   dots on the order page. The role="list" added to the element keeps the list
   a list for a screen reader, which list-style: none would otherwise take
   away. */
.s-timeline { display: grid; gap: 0; position: relative; padding-inline-start: 1.5rem; list-style: none; margin: 0; }
.s-timeline::before { content: ""; position: absolute; inset-block: 0.5rem; inset-inline-start: 0.4rem; inline-size: 2px; background: var(--s-line); }
.s-timeline li { position: relative; padding: 0.35rem 0 0.9rem; font-size: var(--s-text-sm); }
.s-timeline li::before { content: ""; position: absolute; inset-inline-start: -1.5rem; inset-block-start: 0.6rem; inline-size: 0.85rem; block-size: 0.85rem; border-radius: 50%; background: var(--s-surface); border: 2px solid var(--s-line); }
.s-timeline li.is-done::before { background: var(--s-brand-800); border-color: var(--s-brand-800); }
.s-timeline li.is-current::before { background: var(--s-accent-500); border-color: var(--s-accent-500); box-shadow: 0 0 0 4px rgb(196 38 12 / 0.15); }
.s-timeline time { display: block; color: var(--s-muted); font-size: var(--s-text-xs); }

/* Account */
.s-accountgrid { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .s-accountgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .s-accountgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.s-accountcard { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); padding: var(--s-5); background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-radius-lg); color: var(--s-ink); transition: box-shadow var(--s-base) var(--s-ease), transform var(--s-base) var(--s-ease); }
.s-accountcard:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgb(13 36 84 / 0.10); }
.s-accountcard__mark { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: var(--s-brand-100); color: var(--s-brand-700); }
.s-accountcard__title { font-family: var(--s-font-body); font-size: var(--s-text-md); }
.s-accountcard__note { color: var(--s-muted); font-size: var(--s-text-xs); }
.s-accountcard__go { color: var(--s-brand-500); }
.s-accountdetails { display: grid; gap: var(--s-3); }

/* Auth box */
.s-authbox { max-inline-size: 30rem; margin: var(--s-8) auto var(--s-16); padding: var(--s-6); background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow); }
.s-authbox .s-head { margin-block-end: var(--s-4); }
.s-authbox .s-fields { grid-template-columns: 1fr; }
.s-oauth { display: grid; gap: 0.6rem; margin-block-start: var(--s-4); }
.s-oauth__btn { justify-content: center; }
.s-oauth__mark { inline-size: 1.2rem; block-size: 1.2rem; }
.s-btn.s-oauth__btn--google { background: #fff; color: #3c4043; border-color: #dadce0; }
.s-btn.s-oauth__btn--google:hover:not(:disabled) { background: #f8f9fa; border-color: #c6c8cb; color: #3c4043; }
.s-oauth__note { text-align: center; color: var(--s-muted); font-size: var(--s-text-xs); }

/* Map */
.s-map { margin-block-start: var(--s-6); }
.s-map__title { font-size: var(--s-text-md); margin-block-end: 0.35rem; }
.s-map__note { color: var(--s-muted); font-size: var(--s-text-xs); margin-block-end: var(--s-3); }
.s-map__frame { aspect-ratio: 16 / 9; border: 0; border-radius: var(--s-radius-lg); inline-size: 100%; }

/* Install prompt */
.s-install { position: fixed; inset-inline: 1rem; inset-block-end: calc(var(--s-bottomnav-height) + 1rem); z-index: 120; display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-4); background: var(--s-surface); border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-xl); }
.s-install__icon { inline-size: 3rem; block-size: 3rem; border-radius: var(--s-radius); }
.s-install__title { font-family: var(--s-font-body); font-size: var(--s-text-md); }
.s-install__text { font-size: var(--s-text-sm); color: var(--s-ink-soft); }
.s-install__note { font-size: var(--s-text-xs); color: var(--s-muted); }
.s-install__actions { display: flex; gap: 0.5rem; margin-block-start: 0.5rem; }
.s-install__no { border: 0; background: transparent; color: var(--s-muted); }