/*  OutdoorCushions.com - Template 1 - Classic / Traditional
    Shopping cart. Loads on top of stylesheet.css, which owns every token used
    below - nothing here redefines a variable.

    Class names follow cushion.new/cart.css so the markup cart.aspx.cs writes is
    the same shape on both sites: .shop is the two column split, #cart_items
    holds a stack of .item rows, and .summary is the totals rail.               */


/*## LAYOUT ########################################################################################################################################*/
.shop { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(1.5rem,3vw,2.5rem); align-items:flex-start; }

#cart_lead { border:1px solid var(--line); background:var(--accent-soft); padding:.85rem 1.1rem; margin:0 0 1.75rem; font-size:.86rem; color:var(--ink2); }


/*## EMPTY STATE ###################################################################################################################################*/
.empty { text-align:center; padding:clamp(3rem,10vw,6rem) 1.5rem; border:1px solid var(--line); background:var(--panel); }
.empty h2 { margin-bottom:.5rem; }
/*  No max-width. There was one - 52ch, then 76ch - and both were far
    narrower than the box they sat in: .wrap is 1240px, so a 76ch cap threw
    away half the width and wrapped two short sentences mid-clause for no
    reason. The padding on .empty is what keeps the text off the edges.

    Two paragraphs rather than one with a <br>, so the second sentence
    breaks to its own line at every width instead of only the wide ones.   */
.empty p { color:var(--muted); }
.empty p + p { margin-top:.35rem; }
.empty .btn_row { justify-content:center; margin-top:1.5rem; }


/*## ITEM ROWS #####################################################################################################################################*/
#cart_items { border-top:1px solid var(--line); }

.item { display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:1.25rem; padding:1.5rem 0; border-bottom:1px solid var(--line-soft); align-items:flex-start; }

.item .thumb { border:1px solid var(--line); background:var(--sand2); overflow:hidden; }
.item .thumb img { width:100%; height:auto; display:block; }

.item .desc { font-size:.9rem; min-width:0; }

/*  FormatItemDescription() emits .details_name, .details_styleinfo and a
    table.details - these are its styles. Matching the class names rather than
    rewriting the method keeps this cart aligned with the other sites.          */
.item .details_name { display:inline; font-family:var(--font-display); font-size:1.15rem; color:var(--ink); }
.item .details_styleinfo { display:inline; font-size:.86rem; color:var(--muted); }
.item table.details { border-collapse:collapse; margin-top:.6rem; font-size:.82rem; }
.item table.details td { padding:.15rem .9rem .15rem 0; vertical-align:top; color:var(--ink2); }
.item table.details td b { font:600 .68rem/1.6 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

.item .tools { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:1rem; }

.item .qty { display:inline-flex; align-items:center; border:1px solid var(--line); }
.item .qty button { width:34px; height:34px; border:0; background:var(--sand2); cursor:pointer; font-size:1rem; line-height:1; color:var(--ink2); }
.item .qty button:hover { background:var(--accent-soft); color:var(--accent-dk); }
.item .qty input { width:46px; height:34px; border:0; border-inline:1px solid var(--line); text-align:center; background:var(--white); }

.item .remove { font-size:.8rem; color:var(--muted); }
.item .remove:hover { color:#8d2b37; }

.item .price { text-align:right; white-space:nowrap; display:flex; flex-direction:column; gap:.2rem; }
.item .price .unit { font-size:.78rem; color:var(--muted); }
.item .price b { font-size:1.05rem; }


/*## TOTALS PANEL ##################################################################################################################################*/
.summary { position:sticky; top:1rem; border:1px solid var(--line); background:var(--panel); padding:1.4rem 1.5rem 1.6rem; }
.summary h2 { font-size:1.2rem; margin:0 0 1rem; }

.summary .row { display:flex; justify-content:space-between; gap:1rem; padding:.4rem 0; font-size:.9rem; border-bottom:1px dotted var(--line); }
.summary .row span { color:var(--muted); }
.summary .row.discount b { color:var(--ok); }

.summary .total { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.9rem 0 1.25rem; font-family:var(--font-display); font-size:1.45rem; }

#cart_state, #cart_discount { margin-top:1.25rem; }
#cart_state label { display:block; font:600 .7rem/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem; }
/*  Both summary rows share one control size.

    Three things made them disagree before: the discount row used
    align-items:center so its button could not stretch to the field (30px
    against 41px); a <select> and an <input> with the same padding still
    resolve to different heights (38 against 41); and the buttons sized to
    their own labels, so APPLY and REMOVE came out different widths and the
    right edge of the column moved when a code was applied.

    Fixing an explicit height on the fields and a fixed width on the buttons
    settles all three - the rows stay identical whatever the label says.     */
#cart_state .row_inline,
#cart_discount { display:flex; gap:.4rem; align-items:stretch; }

#cart_state select,
#cart_discount input,
#cart_discount_code { flex:1 1 auto; min-width:0; height:40px; padding:0 .6rem; border:1px solid var(--line); border-radius:var(--r-input); background:var(--white); font-size:.86rem; }

#cart_discount_code { display:flex; align-items:center; border:1px dashed var(--accent); background:var(--accent-soft); font:600 .82rem/1 var(--font-body); letter-spacing:.06em; color:var(--accent-dk); }

#cart_state .btn,
#cart_discount .btn { flex:0 0 92px; width:92px; height:40px; padding:0; }

#cart_checkout { margin-top:1.4rem; }

.summary .note { margin:.9rem 0 0; font-size:.76rem; line-height:1.55; color:var(--muted); }


/*## RESPONSIVE ####################################################################################################################################*/
@media (max-width:900px)
{
    .shop { grid-template-columns:1fr; }
    .summary { position:static; }
}

@media (max-width:640px)
{
    .item { grid-template-columns:88px minmax(0,1fr); gap:1rem; }
    .item .price { grid-column:2; text-align:left; flex-direction:row; align-items:baseline; gap:.6rem; margin-top:.5rem; }
    #cart_lead { font-size:.82rem; }
}