/* ==========================================================================
   Storefront e-commerce — cart, checkout and the customer account.

   The v1 merchant app's visual language (public/v1/css/app.css), re-expressed
   for pages a shopper sees: same Inter Tight, same 12/16px radii, same pill
   buttons, same card treatment. The tokens are re-exported as --ec-* rather
   than reused as --v1-* for two reasons — v1's stylesheet is not loaded on the
   storefront, and a merchant's template needs to be able to move the accent
   without touching anything else.

   A template overrides ONE token:

       .ec { --ec-accent: #c2410c; }

   Everything tinted — links, focus rings, the price, the active chip — derives
   from it. --ec-accent-lift is the hover/active shade and is the only other one
   worth setting.

   Scoped under .ec throughout. Storefront templates ship their own CSS with
   generic class names, and unscoped rules here would repaint their pages.

   NOT the v1 phone-column shell. v1 is a merchant tool used on a phone; a
   storefront is browsed on desktops too, so this is a fluid container that
   grows to a two-column checkout rather than a fixed 400px column.
   ========================================================================== */

.ec {
    /* --- ink and ground --------------------------------------------------- */
    --ec-ink: #0b1020;
    --ec-muted: #737373;
    --ec-soft: #a8a29e;
    --ec-page: #f5f5f4;
    --ec-surface: #ffffff;
    --ec-sunken: #f5f5f4;
    --ec-line: rgba(0, 0, 0, 0.06);
    --ec-hairline: rgba(0, 0, 0, 0.04);

    /* --- accent: the one token a template is expected to change ----------- */
    --ec-accent: #0e2391;
    --ec-accent-lift: #1c3fca;
    --ec-accent-wash: #f3f6fd;

    /* --- status ----------------------------------------------------------- */
    --ec-ok: #047857;
    --ec-ok-wash: #ecfdf5;
    --ec-warn: #b45309;
    --ec-warn-wash: #fffbeb;
    --ec-bad: #b91c1c;
    --ec-bad-wash: #fef2f2;

    /* --- geometry --------------------------------------------------------- */
    --ec-radius: 12px;
    --ec-radius-lg: 16px;
    --ec-radius-input: 14px;
    --ec-shadow: 0 1px 4px rgba(11, 16, 32, 0.04), 0 8px 24px -8px rgba(11, 16, 32, 0.12);
    --ec-shadow-cta: 0 12px 24px -10px rgba(11, 16, 32, 0.5);

    box-sizing: border-box;
    min-height: 100vh;
    background: var(--ec-page);
    color: var(--ec-ink);
    font-family: "Inter Tight", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    /* Clears the sticky mobile action bar. Removed at desktop, where the bar
       stops being sticky. */
    padding-bottom: 96px;
}

.ec *,
.ec *::before,
.ec *::after {
    box-sizing: border-box;
}

.ec img {
    max-width: 100%;
}

/* ==========================================================================
   Shell
   ========================================================================== */

.ec-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.9);
    /* Frosted rather than solid so a long cart reads as scrolling under the
       bar instead of being clipped by it. */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ec-hairline);
}

.ec-topbar__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 12px 20px;
}

.ec-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.ec-brand img {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.ec-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ec-topbar__spacer {
    flex: 1;
}

.ec-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ec-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.ec-back:hover {
    color: var(--ec-ink);
}

.ec-main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px;
}

.ec-page-title {
    margin: 4px 0 16px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Two columns once there is room: content left, order summary right. Below
   980px the summary drops under the content, which is the order a shopper
   reads them in on a phone anyway. */
.ec-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

@media (min-width: 980px) {
    .ec-split {
        grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
        gap: 24px;
    }

    .ec-split__rail {
        position: sticky;
        top: 80px;
    }

    .ec {
        padding-bottom: 40px;
    }
}

/* ==========================================================================
   Cards
   ========================================================================== */

.ec-card {
    overflow: hidden;
    border-radius: var(--ec-radius-lg);
    background: var(--ec-surface);
    box-shadow: inset 0 0 0 1px var(--ec-hairline), var(--ec-shadow);
}

.ec-card + .ec-card {
    margin-top: 16px;
}

.ec-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
}

.ec-card__title {
    color: var(--ec-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ec-card__link {
    border: 0;
    background: transparent;
    color: var(--ec-accent-lift);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.ec-card__link:hover {
    color: var(--ec-accent);
}

.ec-card__body {
    padding: 0 16px 16px;
}

.ec-card__body--flush {
    padding: 0;
}

/* ==========================================================================
   Cart and order lines
   ========================================================================== */

.ec-line {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
}

.ec-line + .ec-line {
    border-top: 1px solid var(--ec-hairline);
}

.ec-line__media {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: var(--ec-radius);
    background: var(--ec-sunken);
    object-fit: cover;
}

.ec-line__body {
    flex: 1;
    min-width: 0;
}

.ec-line__name {
    display: block;
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.ec-line__variant {
    margin-top: 3px;
    color: var(--ec-muted);
    font-size: 12px;
}

.ec-line__change {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    border: 0;
    background: none;
    padding: 0;
    color: var(--ec-accent);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.ec-line__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.ec-line--gone {
    opacity: 0.55;
}

/* Price ------------------------------------------------------------------- */

.ec-price {
    font-size: 15px;
    font-weight: 700;
}

.ec-price__was {
    margin-left: 6px;
    color: var(--ec-soft);
    font-size: 12px;
    font-weight: 500;
    text-decoration: line-through;
}

.ec-price--lg {
    font-size: 20px;
}

/* Quantity stepper -------------------------------------------------------- */

.ec-qty {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--ec-sunken);
}

.ec-qty button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ec-ink);
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.ec-qty button:disabled {
    opacity: 0.35;
    cursor: default;
}

.ec-qty output {
    min-width: 28px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ec-line__remove {
    border: 0;
    background: transparent;
    color: var(--ec-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.ec-line__remove:hover {
    color: var(--ec-bad);
}

/* ==========================================================================
   Totals
   ========================================================================== */

.ec-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    font-size: 14px;
}

.ec-total dt {
    color: var(--ec-muted);
}

.ec-total dd {
    margin: 0;
    font-weight: 600;
    /* Tabular figures so the column of numbers lines up on the decimal. */
    font-variant-numeric: tabular-nums;
}

.ec-total--save dd {
    color: var(--ec-ok);
}

.ec-total--grand {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--ec-line);
    font-size: 17px;
}

.ec-total--grand dt {
    color: var(--ec-ink);
    font-weight: 700;
}

.ec-total--grand dd {
    font-size: 19px;
    font-weight: 700;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.ec-cta,
.ec-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.15s, background-color 0.15s;
}

.ec-cta {
    padding: 16px;
    background: var(--ec-ink);
    color: #fff;
    box-shadow: var(--ec-shadow-cta);
}

.ec-cta--accent {
    background: var(--ec-accent);
}

.ec-cta:active,
.ec-ghost:active {
    transform: scale(0.98);
}

.ec-cta[disabled],
.ec-cta.is-busy {
    opacity: 0.4;
    pointer-events: none;
}

.ec-ghost {
    padding: 14px;
    background: var(--ec-surface);
    box-shadow: inset 0 0 0 1.5px #e7e5e4;
    color: var(--ec-ink);
}

.ec-ghost:hover {
    background: #fafaf9;
}

.ec-btn-sm {
    width: auto;
    padding: 9px 16px;
    font-size: 13px;
}

/* Sticky on phones, inline in the desktop rail. */
.ec-actions {
    position: sticky;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 15;
    margin-top: 16px;
}

@media (min-width: 980px) {
    .ec-actions {
        position: static;
    }
}

.ec-actions--split {
    display: flex;
    gap: 12px;
}

.ec-actions--split > * {
    flex: 1;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.ec-field + .ec-field {
    margin-top: 12px;
}

.ec-label {
    display: block;
    margin-bottom: 6px;
    color: var(--ec-muted);
    font-size: 12px;
    font-weight: 600;
}

.ec-input,
.ec-select,
.ec-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--ec-radius-input);
    background: var(--ec-sunken);
    color: var(--ec-ink);
    font-family: inherit;
    font-size: 15px;
    outline: none;
}

.ec-input::placeholder,
.ec-textarea::placeholder {
    color: var(--ec-soft);
}

.ec-input:focus,
.ec-select:focus,
.ec-textarea:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ec-accent) 35%, transparent);
}

/* color-mix is unsupported on older WebKit, where the rule above is dropped
   entirely and focus becomes invisible. This puts a ring back. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .ec-input:focus,
    .ec-select:focus,
    .ec-textarea:focus {
        box-shadow: 0 0 0 2px rgba(28, 63, 202, 0.35);
    }
}

.ec-textarea {
    min-height: 88px;
    resize: vertical;
    line-height: 1.5;
}

.ec-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ec-error {
    margin-top: 6px;
    color: var(--ec-bad);
    font-size: 12px;
    font-weight: 600;
}

/* OTP boxes --------------------------------------------------------------- */

.ec-otp {
    display: flex;
    gap: 8px;
}

.ec-otp input {
    width: 100%;
    max-width: 52px;
    padding: 12px 0;
    border: 0;
    border-radius: var(--ec-radius);
    background: var(--ec-sunken);
    color: var(--ec-ink);
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    outline: none;
}

.ec-otp input:focus {
    box-shadow: 0 0 0 2px rgba(28, 63, 202, 0.35);
}

/* Choice rows (address, payment method) ----------------------------------- */

.ec-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
}

.ec-choice + .ec-choice {
    border-top: 1px solid var(--ec-hairline);
}

.ec-choice input {
    margin-top: 2px;
    accent-color: var(--ec-accent);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ec-choice__body {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.45;
}

.ec-choice__title {
    font-weight: 600;
}

.ec-choice__meta {
    margin-top: 2px;
    color: var(--ec-muted);
    font-size: 13px;
}

.ec-choice.is-selected {
    background: var(--ec-accent-wash);
}

/* ==========================================================================
   Chips, notices, empty states
   ========================================================================== */

.ec-chip {
    display: inline-block;
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.ec-chip--ok { background: var(--ec-ok-wash); color: var(--ec-ok); box-shadow: inset 0 0 0 1px #a7f3d0; }
.ec-chip--warn { background: var(--ec-warn-wash); color: var(--ec-warn); box-shadow: inset 0 0 0 1px #fde68a; }
.ec-chip--bad { background: var(--ec-bad-wash); color: var(--ec-bad); box-shadow: inset 0 0 0 1px #fecaca; }
.ec-chip--muted { background: var(--ec-sunken); color: #78716c; }

.ec-notice {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: var(--ec-radius);
    font-size: 13px;
    line-height: 1.45;
}

.ec-notice[hidden] { display: none; }

.ec-notice--ok { background: var(--ec-ok-wash); color: var(--ec-ok); }
.ec-notice--warn { background: var(--ec-warn-wash); color: var(--ec-warn); }
.ec-notice--bad { background: var(--ec-bad-wash); color: var(--ec-bad); }

.ec-empty {
    padding: 56px 24px;
    text-align: center;
}

.ec-empty__art {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 999px;
    background: var(--ec-accent-wash);
    color: var(--ec-accent);
    display: grid;
    place-items: center;
}

.ec-empty__art svg {
    width: 32px;
    height: 32px;
}

.ec-empty h2 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
}

.ec-empty p {
    margin: 0 auto 20px;
    max-width: 34ch;
    color: var(--ec-muted);
    font-size: 14px;
    line-height: 1.5;
}

.ec-empty .ec-cta {
    max-width: 260px;
    margin: 0 auto;
}

/* ==========================================================================
   Account
   ========================================================================== */

.ec-acct {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
}

.ec-acct__avatar {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--ec-accent);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.ec-acct__name {
    font-size: 16px;
    font-weight: 700;
}

.ec-acct__meta {
    margin-top: 2px;
    color: var(--ec-muted);
    font-size: 13px;
}

.ec-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--ec-hairline);
}

.ec-stats div {
    padding: 14px 8px;
    text-align: center;
}

.ec-stats div + div {
    border-left: 1px solid var(--ec-hairline);
}

.ec-stats strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ec-stats span {
    color: var(--ec-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ec-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.ec-menu a + a {
    border-top: 1px solid var(--ec-hairline);
}

.ec-menu a:hover {
    background: var(--ec-accent-wash);
}

.ec-menu svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ec-muted);
}

.ec-menu__chev {
    margin-left: auto;
    color: var(--ec-soft);
}

/* Order history ----------------------------------------------------------- */

.ec-order {
    display: block;
    padding: 14px 16px;
    color: inherit;
    text-decoration: none;
}

.ec-order + .ec-order {
    border-top: 1px solid var(--ec-hairline);
}

.ec-order:hover {
    background: #fafaf9;
}

.ec-order__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ec-order__ref {
    font-size: 13px;
    font-weight: 700;
}

.ec-order__meta {
    margin-top: 4px;
    color: var(--ec-muted);
    font-size: 12px;
}

.ec-order__thumbs {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

.ec-order__thumbs img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--ec-sunken);
    object-fit: cover;
}

/* Tracking timeline ------------------------------------------------------- */

.ec-track {
    padding: 4px 16px 16px;
    list-style: none;
    margin: 0;
}

.ec-track li {
    position: relative;
    padding: 0 0 18px 24px;
}

/* The rail is drawn on the item, not behind the list, so the last step has no
   tail hanging below it. */
.ec-track li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 14px;
    bottom: 0;
    width: 2px;
    background: var(--ec-line);
}

.ec-track li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--ec-line);
}

.ec-track li.is-done::after {
    background: var(--ec-accent);
}

.ec-track__title {
    font-size: 14px;
    font-weight: 600;
}

.ec-track__at {
    margin-top: 2px;
    color: var(--ec-muted);
    font-size: 12px;
}

/* ==========================================================================
   Product grid (wishlist)
   ========================================================================== */

.ec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.ec-tile {
    overflow: hidden;
    border-radius: var(--ec-radius-lg);
    background: var(--ec-surface);
    box-shadow: inset 0 0 0 1px var(--ec-hairline), var(--ec-shadow);
    color: inherit;
    text-decoration: none;
}

.ec-tile img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    background: var(--ec-sunken);
    object-fit: cover;
}

.ec-tile__body {
    padding: 10px 12px 12px;
}

.ec-tile__name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    /* Two lines then ellipsis, so tiles in a row stay the same height however
       long the merchant's product names are. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ec-tile__price {
    margin-top: 6px;
}

/* ==========================================================================
   Variation picker
   ========================================================================== */

.ec-variants + .ec-variants {
    margin-top: 14px;
}

.ec-variants__label {
    margin-bottom: 8px;
    color: var(--ec-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ec-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ec-swatch {
    padding: 9px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--ec-sunken);
    color: var(--ec-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ec-swatch.is-active {
    background: var(--ec-accent);
    color: #fff;
}

.ec-swatch:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* ==========================================================================
   Print — the invoice is the only page anyone prints
   ========================================================================== */

@media print {
    .ec {
        padding: 0;
        background: #fff;
    }

    .ec-topbar,
    .ec-actions,
    .ec-no-print {
        display: none !important;
    }

    .ec-card {
        box-shadow: none;
        break-inside: avoid;
    }
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.ec-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ec-pager__btn {
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--ec-surface);
    box-shadow: inset 0 0 0 1.5px #e7e5e4;
    color: var(--ec-ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.ec-pager__btn:hover {
    background: #fafaf9;
}

.ec-pager__btn.is-off {
    opacity: 0.4;
    pointer-events: none;
}

.ec-pager__status {
    color: var(--ec-muted);
    font-size: 12px;
    font-weight: 600;
}

/* ==========================================================================
   Offer tiles
   ========================================================================== */

.ec-offer {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    border: 1.5px dashed var(--ec-line);
    border-radius: var(--ec-radius);
    background: var(--ec-surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.ec-offer:hover,
.ec-offer.is-on {
    border-color: var(--ec-accent);
    background: var(--ec-accent-wash);
}

.ec-offer.is-on { border-style: solid; }

.ec-offer__cut {
    flex: none;
    padding: 7px 10px;
    border-radius: 6px;
    background: var(--ec-accent-wash);
    color: var(--ec-accent);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.ec-offer__body { flex: 1; min-width: 0; }

.ec-offer__code {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ec-ink);
    letter-spacing: .02em;
}

.ec-offer__note {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ec-muted);
}

.ec-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--ec-radius);
    background: var(--ec-ok-wash);
    color: var(--ec-ok);
    font-size: 13px;
}

.ec-applied[hidden] { display: none; }

.ec-applied button {
    border: 0;
    background: none;
    padding: 0;
    color: var(--ec-bad);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}