/* ---------- Cart page (extends shop.css — same :root tokens) ---------- */

.back-link{
color: var(--ink-soft);
text-decoration: none;
font-weight: 500;
transition: color 0.15s ease;
}
.back-link:hover{ color: var(--teal-deep); }

.cart-layout{
max-width: 1180px;
margin: 0 auto;
padding: 40px 32px 0;
display: grid;
grid-template-columns: 1fr 340px;
gap: 36px;
align-items: start;
}

@media (max-width: 860px){
.cart-layout{ grid-template-columns: 1fr; }
}

/* ---------- Cart items ---------- */
.cart-items{
display: flex;
flex-direction: column;
gap: 16px;
}

.cart-row{
background: var(--card);
border: 1px solid var(--line);
border-radius: 4px;
padding: 18px;
display: grid;
grid-template-columns: 84px 1fr auto auto auto;
align-items: center;
gap: 18px;
position: relative;
}

@media (max-width: 600px){
.cart-row{
  grid-template-columns: 72px 1fr;
  grid-template-areas:
    "art info"
    "art qty"
    "art price";
  row-gap: 8px;
  align-items: start;
}
.cart-row-art{
  grid-area: art;
  width: 72px;
  height: 88px;
}
.cart-row-info{ grid-area: info; }
.cart-row-qty{ grid-area: qty; }
.cart-row-price{ grid-area: price; }
.cart-row-remove{ position: absolute; top: 12px; right: 12px; }
}

.cart-row-art{
width: 84px;
height: 100px;
border-radius: 3px;
overflow: hidden;
background: var(--sage);
flex-shrink: 0;
}

.cart-row-art img,
.cart-row-art svg{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.cart-row-info{
min-width: 0;
}

.cart-row-title{
font-weight: 500;
font-size: 16.5px;
line-height: 1.25;
margin-bottom: 3px;
}

.cart-row-medium{
font-size: 12px;
color: var(--ink-soft);
margin-bottom: 4px;
}

.cart-row-size{
font-size: 12.5px;
color: var(--teal-deep);
font-weight: 500;
}

.cart-row-qty{
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}

.cart-fixed-note{
font-size: 10.5px;
color: var(--ink-soft);
white-space: nowrap;
}

.cart-row-price{
font-family: 'Fraunces', serif;
font-weight: 600;
font-size: 17px;
white-space: nowrap;
min-width: 64px;
text-align: right;
}

.cart-row-remove{
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--ink-soft);
font-size: 17px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
flex-shrink: 0;
}

.cart-row-remove:hover{
background: rgba(41,53,43,0.08);
color: var(--ink);
}

/* ---------- Order summary ---------- */
.order-summary{
background: var(--card);
border: 1px solid var(--line);
border-radius: 4px;
padding: 26px;
position: sticky;
top: 32px;
}

.order-summary-title{
font-size: 20px;
font-weight: 500;
font-style: italic;
margin-bottom: 20px;
}

.summary-row{
display: flex;
justify-content: space-between;
font-size: 14px;
color: var(--ink-soft);
padding: 10px 0;
border-bottom: 1px solid var(--line);
}

.summary-total{
border-bottom: none;
padding-top: 14px;
color: var(--ink);
font-weight: 600;
font-size: 17px;
font-family: 'Fraunces', serif;
}

.checkout-btn{
width: 100%;
margin-top: 20px;
text-align: center;
}

.checkout-note{
font-size: 12px;
color: var(--ink-soft);
text-align: center;
margin-top: 12px;
line-height: 1.5;
}

/* ---------- Empty state ---------- */
.empty-cart{
display: none;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 360px;
margin: 80px auto 0;
padding: 0 32px;
}

.empty-art{
width: 64px;
height: 64px;
color: var(--teal-deep);
margin-bottom: 18px;
}

.empty-art svg{ width: 100%; height: 100%; }

.empty-cart h2{
font-size: 24px;
font-weight: 500;
font-style: italic;
margin-bottom: 8px;
}

.empty-cart p{
font-size: 14.5px;
color: var(--ink-soft);
line-height: 1.55;
margin-bottom: 22px;
}

.empty-cart .add-btn{
text-decoration: none;
display: inline-block;
}