/* ===========================================================================
   PumkinGrey — Cart / Bag page
   Ported from the Claude Design project ("Cart - PumkinGrey.html", shop/cart.css)
   and aligned to the storefront design system. Scoped to .pg-cart, used ALONGSIDE
   .pg-home on the same wrapper — tokens and the shared `.pgc .card` product-card
   system come from pg-home.css and are not redeclared here.
   =========================================================================== */

.pg-cart__wrap { max-width: 1400px; margin: 0 auto; padding: 0 22px 60px; }

.pg-cart .crumbs { padding: 18px 0 0; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--muted); }
.pg-cart .crumbs a:hover { color: var(--ink); }

.pg-cart .cart__head { padding: 14px 0 0; }
.pg-cart .cart__head h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; font-size: clamp(30px, 5vw, 48px); margin: 0; color: var(--ink); }

.pg-cart .cart__main { display: grid; grid-template-columns: 1fr 360px; gap: 48px; padding: 24px 0 40px; align-items: start; }
@media (max-width: 900px) { .pg-cart .cart__main { grid-template-columns: 1fr; padding: 18px 0 30px; gap: 28px; } }

/* line items */
.pg-cart .cart__lines { border-top: 1px solid var(--line); }
.pg-cart .cart__line { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.pg-cart .cart__line__media { width: 96px; height: 120px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); flex: none; display: block; }
.pg-cart .cart__line__media img { width: 100%; height: 100%; object-fit: cover; }
.pg-cart .cart__line__body { min-width: 0; }
.pg-cart .cart__line__brand { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; color: var(--muted); }
.pg-cart .cart__line__name { font-family: var(--font-display); font-weight: 500; font-size: 15px; margin: 4px 0 0; color: var(--ink); display: block; }
.pg-cart .cart__line__name:hover { color: var(--accent); }
.pg-cart .cart__line__meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.pg-cart .cart__line__remove { border: 0; background: none; color: var(--muted); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; padding: 8px 0 0; cursor: pointer; font-family: var(--font-display); }
.pg-cart .cart__line__remove:hover { color: var(--sale); }

.pg-cart .cart__line__right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.pg-cart .cart__qty { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: 100px; padding: 5px 14px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pg-cart .cart__qty b { color: var(--ink); font-weight: 700; }
.pg-cart .cart__line__price { font-family: var(--font-mono); text-align: right; }
.pg-cart .cart__line__price .now { font-weight: 700; font-size: 15px; color: var(--ink); }

/* empty state */
.pg-cart .cart__empty { text-align: center; padding: 90px 20px; color: var(--muted); grid-column: 1 / -1; }
.pg-cart .cart__empty svg { color: var(--muted-2); }
.pg-cart .cart__empty h3 { font-family: var(--font-display); color: var(--ink); font-weight: 600; font-size: 24px; margin: 16px 0 6px; }
.pg-cart .cart__empty p { margin: 0; font-size: 14px; }
.pg-cart .cart__empty a { margin-top: 20px; display: inline-block; border: 1px solid var(--ink); background: none; color: var(--ink); border-radius: 100px; padding: 12px 26px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; transition: all .15s; }
.pg-cart .cart__empty a:hover { background: var(--ink); color: var(--paper); }

/* summary */
.pg-cart .cart__summary { position: sticky; top: 78px; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--surface); }
.pg-cart .cart__summary h4 { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--muted); margin: 0 0 16px; }
.pg-cart .cart__row { display: flex; justify-content: space-between; font-size: 14px; padding: 9px 0; color: var(--ink); }
.pg-cart .cart__row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 16px; font-family: var(--font-mono); font-weight: 700; font-size: 16px; }
.pg-cart .cart__row .free { color: var(--accent); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

.pg-cart .cart__checkout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 0; border-radius: 100px; padding: 16px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; margin-top: 12px; transition: background .15s; }
.pg-cart .cart__checkout:hover { background: var(--accent); color: var(--accent-ink); }
.pg-cart .cart__secure { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: 12px; font-family: var(--font-mono); letter-spacing: .04em; }
.pg-cart .cart__pay { margin-top: 16px; display: block; width: 100%; }

/* recommendations */
.pg-cart .cart__reco { padding: 10px 0 20px; border-top: 1px solid var(--line); margin-top: 20px; }
.pg-cart .cart__reco__head { display: flex; align-items: baseline; justify-content: space-between; margin: 40px 0 22px; }
.pg-cart .cart__reco__head h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; font-size: clamp(20px, 3vw, 26px); margin: 0; color: var(--ink); }
.pg-cart .cart__reco__head span { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--muted); }
@media (max-width: 1100px) { .pg-cart .cart__reco .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .pg-cart .cart__reco .grid { grid-template-columns: repeat(2, 1fr); } }