/* ==========================================================================
   Outlaw Bullets: the store flow (css/pages/cart.css)
   cart.html, checkout.html and order-received.html: WooCommerce's cart, checkout and thank-you pages
   in a static preview. Components come from site.css (.page-head, .stepper, .notice, .error-summary,
   .field, .input, .select, .steps, .contact-band, .btn). Page-only pieces (candidates for site.css):
   .cart-table (line items; a table that turns into one card per line in a narrow container),
   .cart-sum (subtotal / shipping / total), .cart-totals (the totals box with Proceed to checkout),
   .cart-empty (the empty state), .cart-note (added / removed with Undo), .checkout-sec (numbered form
   sections), .checkout-ship (the shipping line), .checkout-placeholder (an honest placeholder slot),
   .checkout-summary + .summary-lines (the order beside the form), .received-* (the thank-you page).
   ========================================================================== */

/* ---------- shared: what shows when (JS sets the state; without JS the empty / no-order notes show) ---------- */
.cart-main,
.checkout-main,
.received-main { padding-block: var(--sp-7) var(--section-y); }

.js .cart-view { display: none; }
.js [data-cart-state="full"] .cart-view--full,
.js [data-cart-state="empty"] .cart-view--empty { display: block; }
html:not(.js) .cart-view--full { display: none; }

.js .checkout-empty { display: none; }
.js [data-checkout-state="empty"] .checkout-empty { display: block; }
.js [data-checkout-state="empty"] .checkout-layout,
html:not(.js) .checkout-layout { display: none; }
.js .checkout-page:not([data-checkout-state]) .checkout-layout { visibility: hidden; }   /* until js/checkout.js has filled it */

.js [data-received-state="order"] .received-none,
.js [data-received-state="none"] .received-order,
.js [data-received-state="none"] .received-lede,
.js [data-received-state="none"] .received-next,
html:not(.js) .received-order,
html:not(.js) .received-lede,
html:not(.js) .received-next,
.js [data-received-state="none"] .received-layout,
html:not(.js) .received-layout { display: none; }   /* no order: only the empty sheet */
.js .received-page:not([data-received-state]) .received-order,
.js .received-page:not([data-received-state]) .received-none { visibility: hidden; }

/* "this preview keeps your cart in your browser": without JS, or when the cart store didn't load */
.js .cart-nojs { display: none; }
.js .cart-page--nostore .cart-nojs,
.js .checkout-page--nostore .cart-nojs,
.js .received-page--nostore .cart-nojs { display: block; }

/* ---------- the note at the top of the cart: added, removed (Undo), put back ---------- */
.cart-note { max-width: 46rem; margin: 0 0 var(--sp-6); font-size: var(--fs-body); }
.cart-note:focus { outline: 3px solid var(--red); outline-offset: 3px; }
.cart-note__text { margin: 0; font-weight: 600; }
.cart-note__actions { margin-top: var(--sp-3); }
.cart-note__actions[hidden] { display: none; }

/* the browser blocks site data (js/cart.js has no storage): the cart can't follow the shopper from page
   to page, so cart.html and checkout.html say so (shown by js/cart-page.js and js/checkout.js) */
.cart-nosave { max-width: 46rem; margin: 0 0 var(--sp-6); font-size: var(--fs-body); }
.cart-nosave[hidden] { display: none; }
.cart-empty .cart-nosave { max-width: 32em; margin: 0 auto var(--sp-5); text-align: left; }

/* ---------- line items: a table on wide screens, one card per line in a narrow container ---------- */
.cart-sheet {
  container: cart / inline-size;
  background: var(--paper-hi);
  border: 3px solid var(--ink);
}
.cart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}
.cart-table thead th {
  padding: 12px 16px;
  background: var(--ink);
  color: var(--on-dark);
  font: 700 var(--fs-label)/1.25 var(--f-text);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.cart-table thead th.num { text-align: right; }
.cart-table tbody th,
.cart-table td {
  padding: var(--sp-4);
  border-bottom: 1px dotted var(--rule-strong);
  text-align: left;
  vertical-align: middle;
}
.cart-table tbody tr:last-child > * { border-bottom: 0; }
.cart-table tbody th { font-weight: 700; }

.cart-line__link {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--tap);
  color: var(--ink);
  text-decoration-color: var(--red-line);
  text-underline-offset: .2em;
}
@media (hover: hover) and (pointer: fine) { .cart-line__link:hover { color: var(--red); text-decoration-color: currentColor; } }
.cart-line__img { display: block; flex: none; width: 72px; height: 72px; object-fit: cover; padding: 2px; background: var(--photo-mat); border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 2px; margin: 3px; }
/* the product name is the client's code: League Gothic, like the cards and the product page title */
.cart-line__name { font: 400 1.875rem/1.02 var(--f-gothic); letter-spacing: .02em; }
.cart-line__packname { display: block; font-weight: 600; white-space: nowrap; }
.cart-line__ship {
  display: block;
  margin-top: 2px;
  font: 700 var(--fs-label)/1.3 var(--f-text);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
}
.cart-table .cart-line__price { white-space: nowrap; text-align: right; }
.cart-line__amount { font: 400 1.75rem/1 var(--f-gothic); letter-spacing: .02em; }
.cart-line__each { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cart-line__qty .stepper { vertical-align: middle; }
.cart-line .stepper__input { width: 3.4ch; min-width: 54px; }   /* 1 to 99: two digits; keeps the stepper and total on one row at 320px */
.cart-table .cart-line__total {
  font: 400 2rem/1 var(--f-gothic);
  letter-spacing: .02em;
  text-align: right;
  white-space: nowrap;
}
.cart-line__sum { display: block; }
/* "2,000 bullets": what the line comes to, which is what decides the shipping box */
.cart-line__bullets { display: block; margin-top: 6px; font: 600 var(--fs-note)/1.3 var(--f-text); letter-spacing: 0; color: var(--ink-2); }
.cart-table .cart-line__remove { text-align: right; }
.cart-remove { padding-inline: 8px; color: var(--red); gap: .35em; white-space: nowrap; overflow-wrap: normal; }
.cart-remove .icon { width: 1.05em; height: 1.05em; fill: currentColor; }
.cart-table .cart-table__item { width: 34%; }
.cart-line__ship { white-space: nowrap; }


/* narrower than 56em (tablets, phones, big text): each line is a card. The drawing sits beside the name,
   pack and price. From 42em the stepper, total and Remove stand to the right of them; below 42em they
   wrap underneath, as the width allows */
@container cart (max-width: 55.99em) {
  .cart-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cart-table, .cart-table tbody { display: block; }
  .cart-table tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-4) var(--sp-3);
    border-bottom: 2px solid var(--ink);
  }
  .cart-table tbody tr:last-child { border-bottom: 0; }
  .cart-table tbody th,
  .cart-table td { display: block; padding: 0; border: 0; text-align: left; }
  .cart-table .cart-table__item { width: auto; }
  .cart-table .cart-line__item,
  .cart-table .cart-line__pack,
  .cart-table .cart-line__price { flex: 1 1 100%; padding-left: 92px; }
  .cart-line__img { position: absolute; left: var(--sp-3); top: var(--sp-4); }
  .cart-line__link { min-height: var(--tap); }
  .cart-line__packname,
  .cart-line__ship { white-space: normal; }
  /* a long rifle code ("45/70-405-RF-") must fit beside the photo, even with very large text */
  .cart-line__name { font-size: clamp(1.5rem, 9cqi, 1.875rem); overflow-wrap: anywhere; }
  .cart-line__link { min-width: 0; }
  .cart-table .cart-line__price { margin-bottom: var(--sp-2); text-align: left; font: 600 var(--fs-note)/1.4 var(--f-text); }
  .cart-line__amount { font: inherit; }
  .cart-line__each { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .cart-table .cart-line__total { margin-left: auto; text-align: right; }
  .cart-line__total::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font: 700 var(--fs-label)/1.2 var(--f-text);
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .cart-table .cart-line__remove { flex-basis: 100%; text-align: left; }
  .cart-remove { margin-left: -8px; }
}
@container cart (min-width: 42em) and (max-width: 55.99em) {
  .cart-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas:
      "item  qty total remove"
      "pack  qty total remove"
      "price qty total remove";
    align-items: center;
    gap: 2px var(--sp-5);
    min-height: calc(84px + 2 * var(--sp-4));
    padding-inline: var(--sp-4);
  }
  .cart-line__img { left: var(--sp-4); }
  .cart-table .cart-line__item { grid-area: item; }
  .cart-table .cart-line__pack { grid-area: pack; }
  .cart-table .cart-line__price { grid-area: price; margin-bottom: 0; }
  .cart-table .cart-line__qty { grid-area: qty; }
  .cart-table .cart-line__total { grid-area: total; margin-left: 0; min-width: 4.5ch; }
  .cart-table .cart-line__remove { grid-area: remove; }
  .cart-remove { margin-left: 0; }
}

/* ---------- totals: subtotal / shipping / total (cart, checkout summary, order received) ---------- */
.cart-after { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }
.cart-after .cart-ship { margin: 0; }
@media (min-width: 60em) {
  .cart-after { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); align-items: start; gap: var(--sp-7); }
  .cart-after .cart-totals { grid-column: 2; grid-row: 1; }
  .cart-after .cart-ship { grid-column: 1; grid-row: 1; }
}

.cart-totals {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4);
  background: var(--paper-hi);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-red);
}
@media (min-width: 37.5em) { .cart-totals { padding: var(--sp-6); } }
.cart-totals__title,
.checkout-summary__title,
.received-sheet__title {
  margin: 0;
  font: 400 var(--fs-h3)/1.1 var(--f-display);
}
.cart-totals__more { margin: 0; text-align: center; }

.cart-sum { margin: 0; border-top: 2px solid var(--ink); }
.cart-sum__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px var(--sp-4);
  padding: 12px 0;
  border-bottom: 1px dotted var(--rule-strong);
}
.cart-sum dt { font-weight: 700; }
.cart-sum dd { margin: 0 0 0 auto; text-align: right; }
.cart-sum__num { font: 400 1.875rem/1 var(--f-gothic); letter-spacing: .02em; white-space: nowrap; }
/* shipping: the amount on the right like the other rows, the box and its note underneath, full width */
.cart-sum__est { font-weight: 400; font-size: var(--fs-note); }
.cart-sum__row--ship .cart-sum__ship { flex: 1 1 100%; margin: 0; text-align: left; }
.cart-sum__box { display: block; font-weight: 600; }
.cart-sum__ship:empty, .cart-sum__box:empty { display: none; }
.cart-sum__note { display: block; margin-top: 4px; font: 600 var(--fs-note)/1.35 var(--f-text); }
.cart-sum__note[hidden] { display: none; }
.cart-sum__row--total { border-top: 2px solid var(--ink); border-bottom: 0; padding-top: var(--sp-3); }
.cart-sum__row--total dt { font-size: var(--fs-h4); }
.cart-sum__row--total .cart-sum__num { font-size: 2.75rem; }

/* ---------- empty cart / nothing to check out: a printed card, like the order form's sheet ---------- */
.cart-empty {
  max-width: 52rem;
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-7);
  background: var(--paper-hi);
  border: 4px solid var(--ink);
  outline: 1.5px solid var(--ink);
  outline-offset: -10px;
  text-align: center;
}
@media (min-width: 37.5em) { .cart-empty { padding: var(--sp-7) clamp(24px, 5vw, 64px) var(--sp-8); } }
.cart-empty .orn { margin-bottom: var(--sp-5); }
.cart-empty__title { margin-bottom: var(--sp-3); }
.cart-empty__text { max-width: 30em; margin: 0 auto var(--sp-5); font-size: var(--fs-lede); line-height: 1.5; }
.cart-empty .cart-nojs { max-width: 32em; margin: 0 auto var(--sp-5); text-align: left; }
.cart-empty__ask { justify-content: center; margin-top: var(--sp-5); }

/* ---------- checkout: form left, the order right (sticky) from 60em ---------- */
.checkout-layout { display: grid; gap: var(--sp-7); }
.checkout-form { container: checkout / inline-size; max-width: none; gap: var(--sp-6); }
.checkout-form .form__legend-note { margin-bottom: calc(var(--sp-2) * -1); }
@media (min-width: 60em) {
  .checkout-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "form summary" "place summary";
    align-items: start;
    gap: var(--sp-6) clamp(40px, 4vw, 72px);
  }
  .checkout-form { grid-area: form; }
  .checkout-summary { grid-area: summary; }
  .checkout-place { grid-area: place; }
}
/* the order stays beside the form while you fill it in (only where the screen is tall enough to show
   all of it under the sticky header; in em, so very large text switches it off). It covers nothing. */
@media (min-width: 60em) and (min-height: 45em) {
  .checkout-summary { position: sticky; top: var(--header-h); }
}

/* numbered sections: 1 Contact, 2 Shipping address, 3 Shipping, 4 Payment, 5 Order notes */
.checkout-sec { min-width: 0; margin: 0; padding: 0; border: 0; }
.checkout-sec + .checkout-sec { padding-top: var(--sp-6); border-top: 1px dotted var(--rule-strong); }
/* a floated legend is laid out like any block, so the section's top padding sits above it, not below */
fieldset.checkout-sec > .checkout-sec__legend { float: left; }
.checkout-sec__legend + * { clear: both; }
.checkout-sec__legend {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  margin: 0 0 var(--sp-4);
  padding: 0;
}
.checkout-sec__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper-hi);
  font: 400 1.75rem/1 var(--f-gothic);
}
.checkout-sec__title { margin: 0; font: 700 1.375rem/1.25 var(--f-text); }
.checkout-sec .field + .field { margin-top: var(--sp-5); }
.checkout-form .field__label { font-size: 1.1875rem; }

.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5) var(--sp-4); }
.checkout-grid .field + .field { margin-top: 0; }
@container checkout (min-width: 28rem) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .checkout-grid__full { grid-column: 1 / -1; }
}

/* the shipping line: shown like a chosen option (there is only one) */
.checkout-ship {
  padding: var(--sp-4);
  border: 3px solid var(--red);
  border-radius: var(--r);
  background: var(--red-wash);
  box-shadow: var(--shadow-sm-red);
}
@media (min-width: 37.5em) { .checkout-ship { padding: var(--sp-4) var(--sp-5); } }
.checkout-ship__what { margin: 0 0 4px; font: 700 var(--fs-h4)/1.3 var(--f-text); }
.checkout-ship__note { margin: 0; font-size: var(--fs-note); line-height: 1.5; }
.checkout-ship__mix { margin: var(--sp-4) 0 0; font-size: var(--fs-note); line-height: 1.5; }

/* the payment slot: a framed panel the provider's own fields replace (TODO in checkout.html) */
.checkout-placeholder {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--sp-3);
  min-height: 11rem;
  padding: var(--sp-5) var(--sp-4);
  border: 2px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: -7px;
  border-radius: var(--r);
  background: var(--paper-hi);
  text-align: center;
}
.checkout-placeholder__icon { width: 2.5rem; height: 2.5rem; fill: var(--ink-2); }
.checkout-placeholder__text { max-width: 18em; margin: 0; font: 600 var(--fs-body)/1.45 var(--f-text); color: var(--ink-2); }

/* the order beside the form */
.checkout-summary,
.received-sheet {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4);
  background: var(--paper-hi);
  border: 3px solid var(--ink);
}
@media (min-width: 37.5em) {
  .checkout-summary,
  .received-sheet { padding: var(--sp-6); }
}
.checkout-summary .cart-sum,
.received-sheet .cart-sum { border-top: 0; }
.checkout-summary__edit { margin: 0; }

.summary-lines { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.summary-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "img name total" "img what total";
  gap: 2px var(--sp-3);
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px dotted var(--rule-strong);
}
.summary-line__img { grid-area: img; align-self: start; display: block; width: 56px; height: 56px; object-fit: cover; padding: 2px; background: var(--photo-mat); border: 1px solid var(--ink); }
.summary-line__name { grid-area: name; font: 400 1.625rem/1.05 var(--f-gothic); letter-spacing: .02em; }
.summary-line__what { grid-area: what; font-size: var(--fs-note); line-height: 1.4; }
/* very narrow (or very large text): the photo steps aside so the name keeps its room */
@media (max-width: 22.49em) {
  .summary-line { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name total" "what total"; }
  .summary-line__img { display: none; }
  /* "2 × 1,000 pieces" and "2,000 bullets" each get their own line instead of breaking mid-phrase */
  .summary-line__what .nowrap { display: block; white-space: normal; }
  .summary-line__sep { display: none; }
}
.summary-line__total { grid-area: total; align-self: center; font: 400 1.75rem/1 var(--f-gothic); letter-spacing: .02em; white-space: nowrap; }

/* Place order, with the total once more beside the button */
.checkout-place { display: grid; gap: var(--sp-4); }
.checkout-place__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--sp-3);
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 2px solid var(--ink);
  font-weight: 700;
}
.checkout-place__label { font-size: var(--fs-h4); }
.checkout-place__num { font: 400 2.75rem/1 var(--f-gothic); letter-spacing: .02em; }
.checkout-place__note { flex-basis: 100%; font-size: var(--fs-note); font-weight: 600; text-align: right; }
.checkout-place__after { margin: 0; font-size: var(--fs-note); text-align: center; }
/* under 60em the summary (with its own Total) sits right above Place order, so the total isn't repeated */
@media (max-width: 59.99em) { .checkout-place__total { display: none; } }
.checkout-place .ask { justify-content: center; margin-top: 0; }

/* ---------- order received ---------- */
.received-layout { display: grid; gap: var(--sp-7); }
@media (min-width: 60em) {
  .received-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: clamp(40px, 4vw, 72px); }
}
.received-col { min-width: 0; }

/* the overview strip: date, email, total (WooCommerce's order overview) */
.received-overview {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-6);
  margin: 0 0 var(--sp-6);
  padding: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.received-overview li { display: grid; align-content: start; gap: 4px; flex: 1 1 auto; min-width: min(100%, 8rem); padding: var(--sp-3) 0; }
.received-overview li + li { border-top: 1px dotted var(--rule-strong); }
@media (min-width: 37.5em) {
  .received-overview { flex-wrap: nowrap; }
  .received-overview li + li { border-top: 0; }
}
.received-overview__label {
  font: 700 var(--fs-label)/1.2 var(--f-text);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
}
.received-overview__value { font-weight: 700; min-width: 0; }
.received-overview__value[data-r-date] { white-space: nowrap; }   /* "October 20, 2026" stays on one line */
.received-overview__email { overflow-wrap: anywhere; }
.received-overview__num { font: 400 2rem/1 var(--f-gothic); letter-spacing: .02em; }
.received-overview__note { display: block; font-size: var(--fs-note); font-weight: 600; }

.received-addr { padding-top: var(--sp-4); border-top: 1px dotted var(--rule-strong); }
.received-addr__title { margin: 0 0 var(--sp-2); font: 700 1.1875rem/1.3 var(--f-text); }
.received-addr__lines { margin: 0; font-style: normal; overflow-wrap: anywhere; }
.received-addr__lines span { display: block; }
.received-addr__note { white-space: pre-line; }

.received-next__title { margin-bottom: var(--sp-3); }
.received-next__text { margin: 0 0 var(--sp-4); font-size: var(--fs-body); line-height: 1.5; }
.received-next__actions { gap: var(--sp-3); }

/* print: the order received page is worth printing; drop the screen-only parts */
@media print {
  .cart-note, .cart-totals__more, .checkout-summary__edit, .received-next__actions,
  .cart-remove, .stepper__btn { display: none !important; }
}

/* "Checkout" (and "order" on the thank-you page) is a long Ultra word: with very large default text on a small phone it gets a smaller cap
   than site.css's 17vw, so it never runs off the screen (normal text never reaches the cap) */
.checkout-page .page-head__title,
.received-page .page-head__title { font-size: min(var(--fs-h1), 14vw); }

/* the breadcrumb links are short words ("Cart"): give each a full 44px target */
.cart-page .crumbs a,
.checkout-page .crumbs a,
.received-page .crumbs a { padding-inline: 2px; }