/* =========================================================
   UI 044 — GUEST TRACK ORDER (form + result)

   The track-order template renders ds-track-* markup for the luxe_modest
   theme, but no stylesheet for those classes ever existed -- grepping the
   whole project, the ONLY file mentioning "ds-track" was the Blade template.
   That single omission produced all three reported faults: the form looked
   like raw HTML, the result page was plain stacked text, and the product
   fallback SVG -- which has no intrinsic size -- expanded to fill its
   container, which is the oversized "triangle" graphic.

   Everything below is built from the existing tokens in tokens-v3.css so it
   matches the rest of the storefront rather than introducing a new look.
   ========================================================= */

.ds-track-page {
    font-family: var(--luxe-font-sans, Inter, Arial, sans-serif);
    color: var(--luxe-ink, #171717);
    background: var(--luxe-paper, #fff);
    padding: var(--luxe-space-16, 64px) 0 var(--luxe-space-20, 80px);
}

.ds-track-page * { box-sizing: border-box; }

.ds-track-page h1,
.ds-track-page h2,
.ds-track-page h3 {
    font-family: var(--luxe-font-serif, Georgia, serif);
    font-weight: 400;
    margin: 0;
    letter-spacing: -0.01em;
}

/* ---------------------------------------------- shared eyebrow + heading */

.ds-track-header,
.ds-track-intro {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--luxe-space-10, 40px);
    display: flex;
    flex-direction: column;
    gap: var(--luxe-space-3, 12px);
}

.ds-track-header > p,
.ds-track-intro > p {
    margin: 0;
    font-size: var(--luxe-text-xs, 10px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--luxe-gold, #8e703a);
}

.ds-track-header h1,
.ds-track-intro h1 {
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
}

.ds-track-header > span,
.ds-track-intro > span {
    color: var(--luxe-muted, #746e66);
    font-size: var(--luxe-text-md, 14px);
    line-height: 1.7;
}

/* --------------------------------------------------------------- the form */

.ds-track-form-wrap {
    max-width: 520px;
    margin: 0 auto;
}

.ds-track-form {
    background: var(--luxe-paper, #fff);
    border: 1px solid var(--luxe-line, #e7e2da);
    border-radius: var(--luxe-radius-md, 10px);
    box-shadow: var(--luxe-shadow-soft, 0 20px 60px rgba(0, 0, 0, .08));
    padding: var(--luxe-space-10, 40px);
    display: flex;
    flex-direction: column;
    gap: var(--luxe-space-6, 24px);
}

.ds-track-form > div {
    display: flex;
    flex-direction: column;
    gap: var(--luxe-space-2, 8px);
}

.ds-track-form label {
    font-size: var(--luxe-text-sm, 12px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--luxe-muted, #746e66);
}

.ds-track-form input {
    width: 100%;
    padding: 14px 16px;
    font-size: var(--luxe-text-md, 14px);
    font-family: inherit;
    color: var(--luxe-ink, #171717);
    background: var(--luxe-paper, #fff);
    border: 1px solid var(--luxe-line, #e7e2da);
    border-radius: var(--luxe-radius-sm, 4px);
    transition: border-color var(--luxe-transition, 180ms ease);
}

.ds-track-form input::placeholder { color: #b3aca2; }

.ds-track-form input:focus {
    outline: none;
    border-color: var(--luxe-gold, #8e703a);
}

/* Matches the site's primary action button (e.g. ADD TO BAG). */
.ds-track-form button {
    margin-top: var(--luxe-space-2, 8px);
    padding: 16px 24px;
    width: 100%;
    border: 0;
    cursor: pointer;
    background: var(--luxe-ink, #171717);
    color: var(--luxe-paper, #fff);
    font-family: inherit;
    font-size: var(--luxe-text-sm, 12px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: var(--luxe-radius-sm, 4px);
    transition: background var(--luxe-transition, 180ms ease);
}

.ds-track-form button:hover { background: var(--luxe-gold, #8e703a); }
.ds-track-form button:focus-visible {
    outline: 2px solid var(--luxe-gold, #8e703a);
    outline-offset: 3px;
}

/* ------------------------------------------------------------ result grid */

.ds-track-result {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--luxe-space-6, 24px);
    align-items: start;
}

.ds-track-meta,
.ds-track-address,
.ds-track-products,
.ds-track-summary {
    background: var(--luxe-paper, #fff);
    border: 1px solid var(--luxe-line, #e7e2da);
    border-radius: var(--luxe-radius-md, 10px);
    padding: var(--luxe-space-8, 32px);
}

.ds-track-meta    { grid-column: 1 / -1; }
.ds-track-address { grid-column: 1; }
.ds-track-summary { grid-column: 2; grid-row: 2 / span 2; position: sticky; top: 24px; }
.ds-track-products{ grid-column: 1; }

/* order info: a responsive set of label/value pairs */
.ds-track-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--luxe-space-6, 24px);
}

.ds-track-meta > div {
    display: flex;
    flex-direction: column;
    gap: var(--luxe-space-2, 8px);
}

.ds-track-meta small {
    font-size: var(--luxe-text-xs, 10px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--luxe-muted, #746e66);
}

.ds-track-meta strong {
    font-weight: 500;
    font-size: var(--luxe-text-md, 14px);
}

/* ------------------------------------------------------------- badges */

.ds-track-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: var(--luxe-text-xs, 10px);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.ds-track-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ds-track-badge--success {
    color: var(--luxe-success, #3d734d);
    background: #eaf2ec;
    border-color: #cfe2d5;
}

.ds-track-badge--pending {
    color: #8a6512;
    background: #fbf1dd;
    border-color: #efdfbe;
}

.ds-track-badge--danger {
    color: var(--luxe-danger, #a73c32);
    background: #f9e9e7;
    border-color: #efcdc8;
}

.ds-track-badge--neutral {
    color: var(--luxe-muted, #746e66);
    background: var(--luxe-soft, #f6f3ee);
    border-color: var(--luxe-line, #e7e2da);
}

/* ------------------------------------------------------------- address */

.ds-track-address > p {
    margin: 0 0 var(--luxe-space-4, 16px);
    font-size: var(--luxe-text-xs, 10px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--luxe-muted, #746e66);
}

.ds-track-address h2 { font-size: var(--luxe-text-lg, 18px); margin-bottom: 6px; }
.ds-track-address span { display: block; color: var(--luxe-muted, #746e66); font-size: var(--luxe-text-md, 14px); }

.ds-track-address address {
    margin: var(--luxe-space-3, 12px) 0 0;
    font-style: normal;
    line-height: 1.7;
    font-size: var(--luxe-text-md, 14px);
    color: var(--luxe-ink, #171717);
}

/* -------------------------------------------------------------- products */

.ds-track-products__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: var(--luxe-space-4, 16px);
    margin-bottom: var(--luxe-space-4, 16px);
    border-bottom: 1px solid var(--luxe-line, #e7e2da);
}

.ds-track-products__head h2 { font-size: var(--luxe-text-lg, 18px); }

.ds-track-product {
    display: grid;
    grid-template-columns: 72px 1fr auto auto;
    align-items: center;
    gap: var(--luxe-space-4, 16px);
    padding: var(--luxe-space-4, 16px) 0;
    border-bottom: 1px solid var(--luxe-soft-2, #f2eee7);
}

.ds-track-product:last-child { border-bottom: 0; padding-bottom: 0; }

/*
 * THE FIX for the oversized graphic. The fallback is an SVG with no intrinsic
 * dimensions, so with no rule at all it stretched to fill the row -- that is
 * the giant triangle. Pinning an explicit box, as the cart and listing pages
 * do, makes both real photos and the fallback render identically.
 */
.ds-track-product img {
    width: 72px;
    height: 92px;
    object-fit: cover;
    display: block;
    flex: none;
    background: var(--luxe-soft, #f6f3ee);
    border: 1px solid var(--luxe-line, #e7e2da);
    border-radius: var(--luxe-radius-sm, 4px);
}

.ds-track-product h3 {
    font-family: var(--luxe-font-sans, Inter, Arial, sans-serif);
    font-size: var(--luxe-text-md, 14px);
    font-weight: 500;
    line-height: 1.5;
}

.ds-track-product > span {
    font-size: var(--luxe-text-sm, 12px);
    color: var(--luxe-muted, #746e66);
    white-space: nowrap;
}

.ds-track-product > strong {
    font-weight: 600;
    font-size: var(--luxe-text-md, 14px);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- summary */

.ds-track-summary { display: flex; flex-direction: column; gap: var(--luxe-space-3, 12px); }

.ds-track-summary > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--luxe-space-4, 16px);
    font-size: var(--luxe-text-md, 14px);
}

.ds-track-summary span { color: var(--luxe-muted, #746e66); }
.ds-track-summary strong { font-weight: 500; font-variant-numeric: tabular-nums; }

.ds-track-summary__total {
    margin-top: var(--luxe-space-3, 12px);
    padding-top: var(--luxe-space-4, 16px);
    border-top: 1px solid var(--luxe-line, #e7e2da);
}

.ds-track-summary__total span { color: var(--luxe-ink, #171717); font-weight: 500; }
.ds-track-summary__total strong { font-size: var(--luxe-text-lg, 18px); font-weight: 600; }

/* ------------------------------------------------------- track again link */

.ds-track-again {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: var(--luxe-space-4, 16px);
    display: inline-block;
    padding: 14px 32px;
    border: 1px solid var(--luxe-ink, #171717);
    border-radius: var(--luxe-radius-sm, 4px);
    color: var(--luxe-ink, #171717);
    text-decoration: none;
    font-size: var(--luxe-text-sm, 12px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background var(--luxe-transition, 180ms ease), color var(--luxe-transition, 180ms ease);
}

.ds-track-again:hover {
    background: var(--luxe-ink, #171717);
    color: var(--luxe-paper, #fff);
}

.ds-track-again:focus-visible {
    outline: 2px solid var(--luxe-gold, #8e703a);
    outline-offset: 3px;
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 900px) {
    .ds-track-result { grid-template-columns: 1fr; }
    .ds-track-address,
    .ds-track-products,
    .ds-track-summary { grid-column: 1; }
    .ds-track-summary { grid-row: auto; position: static; }
}

@media (max-width: 640px) {
    .ds-track-page { padding: var(--luxe-space-10, 40px) 0 var(--luxe-space-16, 64px); }

    .ds-track-form,
    .ds-track-meta,
    .ds-track-address,
    .ds-track-products,
    .ds-track-summary { padding: var(--luxe-space-6, 24px); }

    /* Image and price stay on the first line; name spans beneath, so nothing
       is squeezed to an unreadable width on a phone. */
    .ds-track-product {
        grid-template-columns: 56px 1fr auto;
        row-gap: var(--luxe-space-2, 8px);
    }

    .ds-track-product img { width: 56px; height: 72px; }
    .ds-track-product h3 { grid-column: 2 / -1; }
    .ds-track-product > span { grid-column: 2; }
    .ds-track-product > strong { grid-column: 3; text-align: right; }

    .ds-track-again { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .ds-track-page * { transition: none !important; }
}

/* N.119 — the "no order found" notice.

   The controller has always sent this message and no template rendered it, so a
   mistyped reference or email silently redrew the empty form and the Track
   button looked dead. It now shows, in the page's own register rather than a
   stock Bootstrap alert. */
.ds-track-alert {
    margin: 0 0 22px;
    padding: 14px 18px;
    border-radius: 2px;
    border-left: 2px solid #8a6a4f;
    background: #faf6f2;
    color: #4a3728;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: .01em;
}

.ds-track-alert--danger {
    border-left-color: #a4553f;
    background: #fbf3f1;
    color: #6b3325;
}