/*
 * Copyright © 1996 - 2026 Gousse & Gousse Inc. or its Affiliates., All Rights Reserved.
 *  author: Al D. Gousse
 *    site: www.goussecorp.com
 *   email: info@goussecorp.com
 *  twitter: @goussecorp
 **/

/* Page-specific stylesheet for the purchase funnel: cart.html,
   checkout_form.html, checkout_success.html, checkout_cancel.html,
   gift_cards.html, gift_card_success.html, gift_card_cancel.html. Kept the
   original "cart.css" filename rather than renaming it when the scope grew
   to the rest of the funnel — every file it now covers already links it
   explicitly, so the name is just a label, not a load-bearing convention.

   2026-07-21 redesign pass (Hancocks Signet Rings reference,
   planning/branding.md): brought this flow's markup/CSS in line with the
   rest of the storefront. Two confirmed-live bugs fixed here, both from
   generic bare-element selectors in style.css (same class of gotcha as the
   nav-shrink bug documented in redesign-agent-logs/phase1-nav-orchestrator.md
   for brand_subnav — a shared stylesheet's rule silently wins on any
   matching element in a page-specific stylesheet that doesn't explicitly
   override it):
     1. `form { background: var(--panel); border: 1px solid var(--border);
        padding: 1.25rem 1.5rem; box-shadow: ... }` in style.css is a plain
        element selector, so it applied to *every* <form> here too —
        including the small inline qty-update/remove forms inside cart
        table cells, which rendered as unwanted padded/bordered/shadowed
        gray boxes wedged inside table rows, and the big checkout/gift-card
        forms, which got the same gray admin-tool panel look instead of the
        cream/gold storefront treatment. Reset per-form below.
     2. `nav, p:has(> a) { display: inline-flex; background: var(--panel);
        border: 1px solid var(--border); padding: 0.5rem 0.85rem; ... }` in
        style.css (written for admin pages' own back-link toolbar) also
        matches any `<p>` with a direct `<a>` child, so cart.html's
        "Continue shopping" and checkout_form.html's "Back to cart" links
        picked up the same gray admin-toolbar box. Reset via
        `.flow-back-link` below. */

.cart-qty-input {
    width: 5rem;
    margin-bottom: 0;
    display: inline-block;
}

/* Flex row (input + Update button) instead of the old inline-block, and an
   explicit reset of every property style.css's generic `form {}` rule sets
   — see file header. Specificity of a single class beats a bare element
   selector regardless of source order, so this reliably wins. */
.cart-qty-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.cart-qty-form .button {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---------- Shared back-link (cart.html "Continue shopping",
   checkout_form.html "Back to cart") ---------- */
.flow-back-link {
    display: block;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0 0 1.25rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.flow-back-link a {
    color: var(--crest-ink);
    text-decoration: none;
}

.flow-back-link a:hover,
.flow-back-link a:focus {
    color: var(--crest-red);
    text-decoration: underline;
}

/* ---------- Cart table ---------- */

/* Lets the 5-column table scroll horizontally instead of squeezing/
   overflowing the viewport on narrow phones, and is the scoping root for
   the column-alignment rules below. */
.cart-table-scroll {
    overflow-x: auto;
}

/* Price / Line total columns (2nd and 4th) read as a price list, not a
   left-ragged column of numbers. */
.cart-table-scroll th:nth-child(2),
.cart-table-scroll td:nth-child(2),
.cart-table-scroll th:nth-child(4),
.cart-table-scroll td:nth-child(4) {
    text-align: right;
}

.cart-line-product {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.cart-line-thumb {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border: 1px solid var(--crest-gold-border);
    border-radius: var(--brand-radius);
    flex-shrink: 0;
}

.cart-line-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cart-line-name {
    font-weight: 600;
}

.cart-line-meta {
    font-size: 0.82rem;
    color: #6b6558;
}

/* ---------- Cart summary + primary CTA ---------- */

.cart-summary {
    max-width: 26rem;
    margin: 1.75rem 0 0 auto;
    padding-top: 1.1rem;
    border-top: 1px solid var(--crest-gold-border);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.1rem;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 1.05rem;
}

.cart-summary-row strong {
    color: var(--crest-red-dark);
    font-size: 1.2rem;
}

/* The single most important click in the whole funnel — full width and a
   bigger tap target than the default `.button` sizing, on top of the
   shared outlined-uppercase look from brand.css. */
.cart-checkout-cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.9rem 1.5rem;
    font-size: 0.95rem;
}

.cart-empty-state {
    margin-top: 1rem;
    text-align: center;
}

.cart-empty-state .button {
    margin-top: 0.9rem;
}

/* ---------- Checkout form ---------- */

/* Strips the generic gray form-panel look (see file header) so the
   fieldsets underneath — already themed cream/gold by brand.css — read as
   the page's only framing instead of a box nested inside a box. */
.checkout-form {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.checkout-summary-table td {
    text-align: right;
}

/* Thin gold rule ahead of the Total row, echoing the reference's "thin gold
   rule as accent" convention instead of a heavier full-table border. */
.checkout-summary-table tbody tr:last-child td,
.checkout-summary-table tbody tr:last-child th {
    border-top: 1px solid var(--crest-gold-border);
    padding-top: 0.9rem;
}

.checkout-submit {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.9rem 1.5rem;
    margin-top: 0.5rem;
}

/* ---------- Gift card form ---------- */

.gift-card-form {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* Denomination picker as a row of outlined chips instead of the browser's
   default stacked radio buttons — same outlined-uppercase-adjacent
   language as the rest of the redesign's controls. `:has()` is already
   relied on elsewhere in this codebase (style.css's `p:has(> a)`), so this
   isn't a new browser-support assumption. */
.gift-card-amount-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.5rem 0 1.5rem;
}

.gift-card-amount-grid label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--crest-gold-border);
    border-radius: var(--brand-radius);
    padding: 0.55rem 1.1rem;
    margin: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--crest-ink);
    background: #fff;
    transition: border-color 0.15s var(--brand-ease), color 0.15s var(--brand-ease), background 0.15s var(--brand-ease);
}

.gift-card-amount-grid label:has(input:checked) {
    border-color: var(--crest-red-dark);
    color: var(--crest-red-dark);
    background: var(--leather-tan-light);
}

.gift-card-amount-grid label:hover {
    border-color: var(--crest-red-dark);
}

/* Visible focus state on the label wrapper since the native radio itself
   is small and easy to lose track of against a cream background. */
.gift-card-amount-grid label:focus-within {
    outline: 2px solid var(--crest-red-dark);
    outline-offset: 2px;
}

/* ---------- Order / gift-card confirmation + cancel pages ---------- */

/* Caps the callout at a readable measure and centers it instead of letting
   it stretch edge-to-edge on a wide viewport (brand.css sets
   `.grid-container { max-width: 100% }` storefront-wide). */
.flow-confirmation {
    max-width: 34rem;
    margin: 3rem auto;
}

.flow-confirmation h1 {
    margin-top: 0;
}

/* checkout_success.html / gift_card_success.html each have a single
   `<p><a class="button">Continue shopping</a></p>` — same style.css
   `p:has(> a)` gray-toolbar match as `.flow-back-link` (see file header),
   just not worth a dedicated class for a single link. Reset scoped to
   `.flow-confirmation` rather than every `p:has(> a)` on the page, since
   the confirmation callout is the only place in this flow that has one. */
.flow-confirmation p:has(> a) {
    display: block;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 1rem 0 0;
}

.flow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Order/gift-card status values (checkout.rs `orders.status`,
   gift_cards.rs `gift_cards.status`) don't match any of style.css's
   `.badge[data-status="..."]` selectors (those cover product/vendor
   workflow statuses like APPROVED/PENDING/DRAFT), so without this the
   badge on these pages always fell back to `.badge`'s plain gray pill
   regardless of whether the order actually succeeded, failed, or is still
   pending. Colors reuse the same values as brand.css's
   `.callout.success`/`.callout.warning`/`[role="alert"]` rather than
   inventing a new palette. Scoped with `.brand-page` (redundant with this
   file only loading on brand-page templates, but matches the defensive
   scoping convention brand.css itself uses) so this never has a chance of
   bleeding into the admin order-status badges, which use a different, much
   larger status vocabulary. */
.brand-page .badge[data-status="PAID"],
.brand-page .badge[data-status="FULFILLED"],
.brand-page .badge[data-status="ACTIVE"] {
    background: #edf5e6;
    border-color: #9fc47c;
    color: #33511f;
}

.brand-page .badge[data-status="PENDING_PAYMENT"] {
    background: var(--leather-tan-light);
    border-color: var(--leather-tan);
    color: #6b3d13;
}

.brand-page .badge[data-status="CANCELLED"] {
    background: #fbeceb;
    border-color: #d99b91;
    color: var(--crest-red-dark);
}

.brand-page .badge[data-status="UNKNOWN"] {
    background: #f2ede1;
    border-color: var(--crest-gold-border);
    color: var(--crest-ink);
}