/* ==========================================================
   MØSH — CART + CHECKOUT
   Loaded after style.css and shop.css.
   ========================================================== */

.cart-page { padding: 36px var(--pad) 90px; min-height: 60vh; }

.page-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(48px, 7vw, 96px); line-height: 1;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.cart {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

/* ---------- cart lines ---------- */
.cart__lines { border-top: 1px solid var(--line); }
.line {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.line__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #C7C7C7; }
.line__name {
  font-family: var(--display); font-size: 24px; line-height: 1.05; text-transform: uppercase;
}
.line__name:hover { color: var(--burgundy); }
.line__price { font-family: var(--mono); font-size: 13px; color: #737373; margin: 6px 0 14px; }
.line__controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.line__size {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.line__size select {
  height: 38px; padding: 0 28px 0 10px;
  border: 1px solid #B9B9B9; border-radius: 0; background: var(--paper);
  font-family: var(--mono); font-size: 12px; color: var(--charcoal);
}
.qty { display: flex; align-items: center; border: 1px solid #B9B9B9; height: 38px; }
.qty button { width: 36px; height: 100%; font-size: 16px; }
.qty button:hover:not(:disabled) { background: #DEDEDE; }
.qty button:disabled { opacity: .3; cursor: not-allowed; }
.qty span { min-width: 28px; text-align: center; font-family: var(--mono); font-size: 13px; }
.line__remove {
  margin-top: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #737373; text-decoration: underline; text-underline-offset: 3px;
}
.line__remove:hover { color: var(--burgundy); }
.line__total { font-family: var(--mono); font-size: 14px; white-space: nowrap; }

/* ---------- summary box ---------- */
.summary {
  position: sticky; top: calc(var(--header-h) + 20px);
  background: #E2E2E2;
  padding: 26px 24px;
}
.summary h2 {
  font-family: var(--display); font-weight: 400; font-size: 30px; text-transform: uppercase;
  margin-bottom: 16px;
}
.summary__rows {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 0;
  margin: 0 0 22px;
  font-family: var(--mono); font-size: 13px;
}
.summary__rows dd { margin: 0; padding-left: 16px; text-align: right; }
.summary__rows .total {
  padding-top: 12px; border-top: 1px solid #C4C4C4;
  font-size: 16px; color: var(--burgundy);
}
.summary__note { margin-top: 14px; font-size: 13px; color: #676767; }
.summary__note a { text-decoration: underline; text-underline-offset: 3px; }

/* small list of tees in the checkout summary */
.mini { margin-bottom: 18px; }
.mini__line {
  position: relative;
  display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid #CECECE;
  font-size: 13px; line-height: 1.4;
}
.mini__line img { width: 56px; aspect-ratio: 4 / 5; object-fit: cover; }
.mini__line strong { font-weight: 500; }
.mini__line > span:last-child { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.mini__qty {
  position: absolute; left: 44px; top: 4px;
  min-width: 20px; height: 20px; border-radius: 10px; padding: 0 5px;
  background: var(--charcoal); color: var(--paper);
  font-family: var(--mono); font-size: 11px; line-height: 20px; text-align: center;
}

/* ---------- checkout form ---------- */
.checkout fieldset { border: 0; padding: 0; margin: 0 0 30px; }
.checkout legend {
  font-family: var(--display); font-size: 28px; text-transform: uppercase;
  margin-bottom: 14px; padding: 0;
}
.field { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label {
  display: block; margin-bottom: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.field label span { color: #878787; text-transform: none; letter-spacing: 0; }
.field input, .field textarea {
  width: 100%; padding: 13px 14px;
  border: 1px solid #B9B9B9; border-radius: 0;
  background: #F5F5F5;
  font: inherit; font-size: 16px;            /* 16px stops phones zooming in */
  color: var(--charcoal);
  transition: border-color .2s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--charcoal); }
.field.is-bad input { border-color: var(--burgundy); background: #EFEFEF; }
.honey { position: absolute; left: -9999px; }

.pay { display: block; cursor: pointer; margin-bottom: 10px; }
.pay input { position: absolute; opacity: 0; }
.pay__box {
  display: block; padding: 16px 16px 16px 48px; position: relative;
  border: 1px solid #B9B9B9; background: #F5F5F5;
  transition: border-color .2s, background .2s;
}
.pay__box::before {
  content: ''; position: absolute; left: 16px; top: 18px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--charcoal);
}
.pay input:checked + .pay__box { border-color: var(--charcoal); background: var(--paper); }
.pay input:checked + .pay__box::before { background: var(--burgundy); box-shadow: inset 0 0 0 3px var(--paper); }
.pay input:focus-visible + .pay__box { outline: 2px solid var(--wire); outline-offset: 2px; }
.pay__box strong { display: block; font-weight: 500; margin-bottom: 2px; }
.pay__box span { font-size: 14px; color: #676767; }

.bank {
  margin-top: 6px; padding: 18px;
  background: var(--charcoal); color: var(--bone); font-size: 14px;
}
.bank dl { display: grid; grid-template-columns: 70px 1fr; gap: 6px 12px; margin: 12px 0; font-family: var(--mono); font-size: 13px; }
.bank dt { color: var(--stone); }
.bank dd { margin: 0; word-break: break-word; }

.form-error { min-height: 20px; margin-bottom: 10px; color: var(--burgundy); font-size: 14px; }
#place:disabled { opacity: .7; cursor: wait; }

/* ---------- order placed ---------- */
.done { max-width: 640px; }
.done__num {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--burgundy); margin-bottom: 10px;
}
.done__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(56px, 10vw, 128px); line-height: .92; text-transform: uppercase;
  margin-bottom: 18px;
}
.done__text { font-size: 17px; margin-bottom: 22px; max-width: 52ch; }
.done .bank { margin-bottom: 22px; }
.done__summary { background: #E2E2E2; padding: 18px 22px 2px; margin-bottom: 24px; }
.done__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- empty ---------- */
.empty { padding: 40px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.empty__big { font-family: var(--display); font-size: clamp(40px, 6vw, 80px); line-height: 1; text-transform: uppercase; }

/* ---------- phones ---------- */
@media (max-width: 900px) {
  .cart { grid-template-columns: 1fr; }
  .summary { position: static; }
  .checkout { order: 2; }                    /* summary shows first on checkout */
}
@media (max-width: 560px) {
  .line__size select { font-size: 16px; height: 42px; }   /* 16px stops iPhones zooming in */
  .qty { height: 42px; }
  .qty button { width: 42px; }
  .line__remove { padding: 10px 0; margin-top: 4px; }
  .line { grid-template-columns: 84px minmax(0, 1fr); }
  .line__total { grid-column: 2; }
  .line__name { font-size: 20px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* NayaPay details with the QR code */
.bank__grid { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: start; }
.bank__qr { width: 150px; border-radius: 10px; background: #fff; }
@media (max-width: 480px) {
  .bank__grid { grid-template-columns: 1fr; }
  .bank__qr { width: min(240px, 100%); margin: 0 auto; }
}
.bank strong { white-space: nowrap; }