/* Scribe — Cart & checkout */
.cart-wrap { display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; align-items: start; }

.cart-item {
    display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem;
    padding: 1.4rem; align-items: center; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--card); margin-bottom: 1rem;
}
.cart-item h3 { margin: 0 0 .3rem; font-size: 1.15rem; }

/* Product photo, or a plain tile for an accessory. Matches the drawn
   .mini-journal.sm footprint so every row lines up whichever it uses. */
.cart-thumb {
    width: 78px; height: 104px; flex: none;
    border-radius: var(--radius-sm); object-fit: cover;
    background: var(--paper-2); box-shadow: var(--shadow-sm);
}
.cart-thumb.accessory {
    display: grid; place-items: center;
    font-family: var(--font-display); font-size: 1.9rem;
    color: rgba(255, 255, 255, .9); text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.cart-item .chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.cart-item .chips span {
    font-size: .74rem; color: var(--muted); background: var(--paper-2);
    padding: .2rem .6rem; border-radius: 999px; font-weight: 700;
}
.cart-item .right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.cart-item .line-price { font-family: var(--font-display); font-size: 1.2rem; color: var(--mocha); font-weight: 600; }
.link-remove { background: none; border: none; color: var(--muted); font-size: .82rem; cursor: pointer; text-decoration: underline; padding: 0; }
.link-remove:hover { color: var(--clay); }

.cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.cart-qty button { width: 32px; height: 32px; border: none; background: #fff; color: var(--mocha); font-size: 1.1rem; cursor: pointer; }
.cart-qty button:hover { background: var(--blush-soft); }
.cart-qty form { display: inline-flex; }
.cart-qty .val { min-width: 30px; text-align: center; font-weight: 800; }

.order-summary {
    position: sticky; top: 98px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--card); padding: 1.6rem; box-shadow: var(--shadow-sm);
}
.order-summary h3 { margin-bottom: 1rem; }
.summary-row { display: flex; justify-content: space-between; padding: .5rem 0; color: var(--muted); }
.summary-row.total { border-top: 1px solid var(--line); margin-top: .5rem; padding-top: 1rem; color: var(--ink); font-weight: 800; font-size: 1.2rem; }
.summary-row.total b { font-family: var(--font-display); color: var(--espresso); }

.ship-nudge { background: var(--paper-2); border-radius: var(--radius-sm); padding: .8rem 1rem; font-size: .82rem; color: var(--mocha); margin-bottom: 1rem; }
.ship-bar { height: 6px; background: var(--line); border-radius: 999px; margin-top: .5rem; overflow: hidden; }
.ship-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--rose), var(--caramel)); border-radius: 999px; }

.cart-empty { text-align: center; padding: 4rem 1rem; }

.toast {
    background: #EDF6EC; border: 1px solid #CDE6C9; color: #3f6b3a;
    padding: .9rem 1.2rem; border-radius: var(--radius-sm); margin-bottom: 1.5rem; font-weight: 700;
}

/* ---------- Checkout form ---------- */
.checkout-grid { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; align-items: start; }
.checkout-fields { padding: 1.8rem; }
.checkout-fields h3 { margin-bottom: 1.2rem; }

.field { display: flex; flex-direction: column; margin-bottom: 1rem; }
.field label { font-size: .82rem; font-weight: 800; color: var(--mocha); margin-bottom: .35rem; }
.field input, .field textarea {
    font-family: var(--font-body); font-size: .95rem; color: var(--ink);
    padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--paper); transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus {
    outline: none; border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(212, 154, 148, .18);
}
.field textarea { resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-row.three { grid-template-columns: 1.4fr 1fr 1fr; }

.field .field-validation-error,
.field-errors { color: #A6353F; font-size: .8rem; font-weight: 700; margin-top: .3rem; }
.field-errors ul { margin: 0; padding-left: 1.1rem; }
.field-errors:empty { display: none; }
.field input.input-validation-error,
.field textarea.input-validation-error { border-color: #D08B90; background: #FDF6F6; }

/* ---------- Payment placeholder (Development only) ----------
   Deliberately dashed and unbranded so it never reads as part of the shop —
   it is scaffolding standing in for the Stripe redirect. */
.pay-stub {
    margin-top: 1.6rem; padding: 1.2rem 1.3rem;
    border: 2px dashed var(--line); border-radius: var(--radius-sm);
    background: repeating-linear-gradient(45deg, var(--paper-2) 0 10px, var(--paper) 10px 20px);
}
.pay-stub h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .7rem; }
.pay-stub-tag {
    font-family: var(--font-body); font-size: .62rem; font-weight: 800;
    letter-spacing: .09em; text-transform: uppercase;
    color: #8a6410; background: #FBF0D2; border: 1px solid #EBD9A6;
    padding: .18rem .5rem; border-radius: 999px;
}
.pay-stub-lead { margin: 0 0 .8rem; font-size: .88rem; color: var(--ink); }
.pay-stub-steps { margin: 0; padding-left: 1.2rem; font-size: .82rem; color: var(--mocha); }
.pay-stub-steps li { margin-bottom: .45rem; line-height: 1.55; }
.pay-stub-steps em { color: var(--sage); font-style: normal; font-weight: 800; }
.pay-stub code {
    font-size: .78rem; background: var(--card); border: 1px solid var(--line);
    border-radius: 5px; padding: .05rem .3rem; color: var(--espresso);
}
.pay-stub-foot { margin: .9rem 0 0; font-size: .8rem; color: var(--muted); }

@media (max-width: 820px) {
    .cart-wrap, .checkout-grid { grid-template-columns: 1fr; }
    .order-summary { position: static; }
    .cart-item { grid-template-columns: auto 1fr; }
    .cart-item .right { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; }
    .field-row, .field-row.three { grid-template-columns: 1fr; }
}


/* ============================================================
   PHONE
   ============================================================ */
@media (max-width: 940px) {
    /* Checkout is the one form on the site where a mis-tap costs a sale, and
       every field on it was .95rem — under the 16px at which iOS zooms the
       whole page in on focus and does not zoom back out. site.css says the
       same thing, but .field wins on order, so it has to be repeated here. */
    .field input, .field textarea, .field select { font-size: 16px; }
    .field input, .field select { min-height: 48px; }
}

/* Above the breakpoint the summary is pinned beside the items already.
   Stated before the query that turns it on — same specificity, so whichever
   comes last would win. */
.cart-dock { display: none; }

@media (max-width: 820px) {
    /* 32px steppers with a 30px number between them: three targets inside
       94px. Full-size controls, and the row can afford them now that it has
       the width to itself. */
    .cart-qty button { width: 46px; height: 46px; font-size: 1.25rem; }
    .cart-qty .val { min-width: 42px; }
    .link-remove {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: 44px; padding: 0 .5rem; margin-right: -.5rem;
        font-size: .86rem;
    }
    .cart-item .right { gap: .5rem; flex-wrap: wrap; }

    /* ---------- the sticky total ----------
       The summary sits under the items, so on a phone the total and the way to
       pay are below however many things are in the basket — 2,278px down on a
       two-item cart. This keeps both on screen. The panel below stays the
       canonical one; this is a shortcut to it, so it is hidden from assistive
       technology and out of the tab order rather than announced twice. */
    .cart-dock {
        display: block;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        background: rgba(251, 247, 241, .96);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--line);
        box-shadow: 0 -8px 24px -18px rgba(74, 53, 40, .7);
        padding: .7rem 0;
        padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
    }
    .cart-dock-inner {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    }
    .cart-dock-total { display: flex; flex-direction: column; line-height: 1.15; }
    .cart-dock-total em {
        font-style: normal; font-size: .6rem; font-weight: 800;
        letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
    }
    .cart-dock-total b {
        font-family: var(--font-display); font-size: 1.45rem;
        color: var(--espresso); font-variant-numeric: tabular-nums;
    }
    .cart-dock .btn { min-height: 48px; }

    .cart-wrap { padding-bottom: 5.5rem; }
}


/* ============================================================
   Ready-to-ship journal · the product page

   A journal off the shelf earns a page of its own because there
   is a decision to make on it: which charms go on before it
   ships. Accessories keep the grid's quick-add — a pack of clips
   is a price and a photograph, and a second click to reach the
   same button would be a click for nothing.
   ============================================================ */
.rts {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 2.5rem; align-items: start;
}

.rts-media {
    position: relative; border-radius: var(--radius); overflow: hidden;
    background: var(--paper-2); box-shadow: var(--shadow-md);
    aspect-ratio: 4 / 5;
}
.rts-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No photograph yet — the drawn tile fills the frame instead. */
.rts-media .mini-journal { width: 100%; height: 100%; }
.rts-badge { position: absolute; top: 14px; left: 14px; }

.rts-body h1 { margin: .25rem 0 .5rem; }
.rts-body .lead { margin-bottom: 1.1rem; }

.rts-ship {
    display: flex; align-items: flex-start; gap: .5rem;
    padding: .7rem .9rem; border-radius: var(--radius-sm);
    background: #F2F7F1; border: 1px solid #D8E6D6; color: #3B6640;
    font-size: .88rem; margin-bottom: 1.6rem;
}
.rts-ship span { font-weight: 800; }

.rts-charms h2 { font-size: 1.15rem; margin: 0 0 .2rem; }
.rts-charms .muted { font-size: .85rem; margin: 0 0 .9rem; }
.rts-sub { font-size: 1rem; margin: 1.5rem 0 .2rem; }

.rts-note { display: block; margin-top: 1.6rem; }
.rts-note > span {
    display: block; font-size: .82rem; font-weight: 700;
    color: var(--ink); margin-bottom: .4rem;
}
.rts-note > span i {
    font-style: normal; font-weight: 500; color: var(--muted);
    text-transform: none; letter-spacing: 0;
}
.rts-note textarea {
    width: 100%; padding: .7rem .85rem; border-radius: var(--radius-sm);
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    font-family: var(--font-body); font-size: .92rem; line-height: 1.5;
    resize: vertical;
}
.rts-note textarea:focus {
    outline: none; border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(212, 154, 148, .18);
}

/* Which charm went free. The tiles all carry a price, so without this the total
   reads as if one of them had been miscounted. Sits directly above the figure it
   explains. */
.rts-free {
    margin: 1.4rem 0 -.6rem; font-size: .82rem; font-weight: 700;
    color: #3B6640;
}

.rts-buy {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line);
}
.rts-price { display: flex; flex-direction: column; line-height: 1.15; }
.rts-price .muted { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.rts-price strong {
    font-family: var(--font-display); font-size: 1.9rem; font-weight: 600;
    color: var(--mocha); font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
    .rts { grid-template-columns: 1fr; gap: 1.6rem; }
    /* Portrait at full width is most of a phone screen before the price is
       reachable, so the photograph gives some of it back. */
    .rts-media { aspect-ratio: 4 / 3; }
    .rts-buy { position: sticky; bottom: 0; background: var(--paper); padding-bottom: 1rem; }
}

/* The buyer's charm note, echoed back on the cart line. */
.cart-note {
    margin: .5rem 0 0; font-size: .84rem; line-height: 1.5;
    color: var(--muted); font-style: italic;
    border-left: 2px solid var(--line); padding-left: .7rem;
}