/* Shared shop pages: cart, checkout, payment, order confirmation.
 *
 * Loaded AFTER the theme, matching where this section sat in the original file.
 *
 * SPLIT DELIBERATELY: these rules used to sit inside the Cutlass theme, and
 * several share a selector target AND specificity with the theme's own chrome
 * (.cb-container vs .cb-siteheader__topinner, for one). At equal specificity
 * source order decides the winner, so loading every extracted rule after the
 * theme flattened the site header. Keeping the original relative order is what
 * makes the cascade come out the same as before the extraction.
 */

.cb-cart {
  max-width: 1240px;
  margin: 2.5rem auto 3rem;
  padding: 0 1.5rem;
}

.cb-cart__title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--cb-ink);
  margin: 0 0 1.5rem;
}

.cb-cart__grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2.5rem;
  align-items: start;
}

.cb-cart__main {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  overflow: hidden;
}

.cb-cart-table {
  width: 100%;
  border-collapse: collapse;
}

.cb-cart-table thead th {
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cb-ink-muted);
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--cb-border);
  background: var(--cb-bg);
}

.cb-cart-table__th-product { width: auto; }

.cb-cart-table__th-qty    { width: 80px; text-align: center; }

.cb-cart-table__th-price  { width: 110px; text-align: right; }

.cb-cart-table__th-remove { width: 40px; }

.cb-cart-table__row td {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--cb-border);
  vertical-align: middle;
}

.cb-cart-table__row:last-child td { border-bottom: none; }

.cb-cart-table__name {
  font-weight: 600;
  font-size: .95rem;
  color: var(--cb-ink);
  margin-bottom: .15rem;
}

.cb-cart-table__name a { color: var(--cb-ink); text-decoration: none; }

.cb-cart-table__name a:hover { color: var(--cb-primary); }

.cb-cart-table__sku {
  font-size: .78rem;
  color: var(--cb-primary);
  font-family: var(--cb-font-mono);
  font-weight: 500;
  letter-spacing: .02em;
}

.cb-cart-table__row .cb-dispatch-badge {
  margin-top: .35rem;
}

/* Dispatch badges on cart, checkout-summary, review and receipt lines wrap
   inside their line at every width. The long ones ("○ Special order —
   dispatched in 2–3 weeks", "● In stock — ships today (order by 2pm AEST)")
   are wider than the 360px checkout summary's text column, so on desktops and
   tablets in landscape they used to run out of the card and push the whole
   page sideways. shop_base.css keeps them on one line everywhere else. */
.cb-cart-table__row .cb-dispatch-badge,
.cb-checkout__item .cb-dispatch-badge,
.cb-order__item .cb-dispatch-badge {
  white-space: normal;
  max-width: 100%;
  /* A pill once it wraps onto two or three lines looks like a blob. */
  border-radius: .85rem;
}

.cb-cart-table__qty { text-align: center; }

.cb-cart-table__qty input[type="number"] {
  width: 56px;
  padding: .45rem .35rem;
  text-align: center;
  border: 1.5px solid var(--cb-border-strong);
  border-radius: var(--cb-radius);
  font-size: .9rem;
  font-family: var(--cb-font-sans);
  background: #fff;
  color: var(--cb-ink);
  transition: border-color .15s, box-shadow .15s;
}

.cb-cart-table__qty input:focus {
  outline: none;
  border-color: var(--cb-primary);
  box-shadow: 0 0 0 3px var(--cb-primary-light);
}

.cb-cart-table__price {
  font-weight: 700;
  font-size: .95rem;
  color: var(--cb-ink);
  white-space: nowrap;
  text-align: right;
}

.cb-cart-table__remove-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: none; border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm); cursor: pointer;
  color: var(--cb-ink-muted); font-size: 1.1rem; line-height: 1;
  transition: color .15s, border-color .15s, background .15s;
}

.cb-cart-table__remove-btn:hover {
  color: var(--cb-danger);
  border-color: var(--cb-danger);
  background: var(--cb-danger-bg);
}

.cb-cart__update-row {
  display: flex;
  justify-content: flex-end;
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--cb-border);
  background: var(--cb-bg);
}

.cb-cart__sidebar {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: 1.75rem;
  box-shadow: var(--cb-shadow-sm);
  position: sticky;
  top: 120px;
}

.cb-cart__sidebar h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--cb-border);
}

.cb-summary-row {
  display: flex;
  justify-content: space-between;
  padding: .4rem 0;
  font-size: .9rem;
  color: var(--cb-ink-soft);
}

.cb-summary-row span:last-child { font-weight: 600; color: var(--cb-ink); }

.cb-summary-total {
  display: flex;
  justify-content: space-between;
  padding: .75rem 0 0;
  margin-top: .5rem;
  border-top: 1px solid var(--cb-border);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cb-ink);
}

.cb-cart__checkout-btn {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  text-align: center;
}

.cb-cart__free-ship {
  color: var(--cb-success);
  font-weight: 600;
}

.cb-cart__gst-note {
  font-size: .78rem;
  color: var(--cb-ink-muted);
  margin: .75rem 0 0;
  text-align: right;
}

.cb-cart__disclosures {
  list-style: none;
  padding: .9rem 1rem;
  margin: 1rem 0;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  font-size: .82rem;
  color: var(--cb-ink-soft);
  line-height: 1.55;
}

.cb-cart__disclosures li + li { margin-top: .35rem; }

.cb-cart__disclosures strong { color: var(--cb-ink); }

.cb-cart__sidebar .cb-cart__checkout-btn {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  text-align: center;
  font-size: 1.05rem !important;
  padding: 1rem !important;
}

.cb-cart-empty {
  text-align: center;
  padding: 5rem 2rem;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
}

.cb-cart-empty h2 {
  font-size: 1.5rem;
  margin-bottom: .75rem;
}

.cb-cart-empty p {
  color: var(--cb-ink-muted);
  margin-bottom: 2rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.cb-checkout {
  max-width: 1240px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
}

.cb-checkout__grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.5rem;
  align-items: start;
}

.cb-checkout__form {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: 2rem;
  box-shadow: var(--cb-shadow-sm);
}

.cb-checkout__section-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cb-ink);
  margin: 0 0 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--cb-border);
}

.cb-checkout__form .cb-form__field { margin-bottom: 1rem; }

.cb-check-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: var(--cb-ink-soft);
  cursor: pointer;
  margin-bottom: 1rem;
}

.cb-check-row input[type="checkbox"],
.cb-check-row input[type="radio"] {
  width: 18px; height: 18px;
  accent-color: var(--cb-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.cb-checkout__summary {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: 1.75rem;
  box-shadow: var(--cb-shadow-sm);
  position: sticky;
  top: 120px;
}

.cb-checkout__summary h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--cb-border);
}

.cb-checkout__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: .6rem 0;
  border-bottom: 1px solid var(--cb-border);
}

.cb-checkout__item:last-of-type { border-bottom: none; }

.cb-checkout__item-info { flex: 1; min-width: 0; padding-right: 1rem; }

.cb-checkout__item-name {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--cb-ink);
  line-height: 1.3;
}

.cb-checkout__item-sku {
  display: block;
  font-size: .73rem;
  color: var(--cb-primary);
  font-family: var(--cb-font-mono);
  font-weight: 500;
  margin-top: .1rem;
}

.cb-checkout__item-right {
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

.cb-checkout__item-qty {
  font-size: .78rem;
  color: var(--cb-ink-muted);
  display: block;
}

.cb-checkout__item-price {
  font-weight: 600;
  font-size: .9rem;
  color: var(--cb-ink);
}

.cb-checkout__summary-totals {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--cb-border);
}

.cb-checkout__actions {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cb-border);
}

.cb-checkout__pay-btn {
  font-size: 1.05rem !important;
  padding: 1rem !important;
  letter-spacing: .01em;
}

.cb-checkout__secure-note {
  text-align: center;
  font-size: .78rem;
  color: var(--cb-ink-muted);
  margin: 1rem 0 0;
}

.cb-pay-card-info {
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  padding: .75rem 1rem;
  margin-bottom: 1.25rem;
}

.cb-pay-card-info p {
  margin: 0;
  font-size: .85rem;
  color: var(--cb-ink-muted);
}

.cb-pay-fields {
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: 1.25rem;
}

.cb-ship-option {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1rem;
  border: 1.5px solid var(--cb-border-strong);
  border-radius: var(--cb-radius);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  margin-bottom: .75rem;
}

.cb-ship-option:hover { border-color: var(--cb-primary); background: var(--cb-primary-light); }

.cb-ship-option--selected {
  border-color: var(--cb-primary);
  background: var(--cb-primary-light);
}

.cb-ship-option input[type="radio"] {
  width: 18px; height: 18px; accent-color: var(--cb-primary); flex-shrink: 0;
}

.cb-ship-option__label { font-weight: 500; font-size: .9rem; }

.cb-pay-option {
  border: 1.5px solid var(--cb-border-strong);
  border-radius: var(--cb-radius-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
  transition: border-color .15s;
}

.cb-pay-option--selected {
  border-color: var(--cb-primary);
  box-shadow: 0 0 0 2px var(--cb-primary-light);
}

.cb-pay-option__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .75rem;
}

.cb-order {
  max-width: 900px;
  margin: 2rem auto 3rem;
  padding: 0 1.5rem;
}

.cb-order__title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 .75rem;
}

.cb-order__notice {
  background: var(--cb-success-bg);
  color: var(--cb-success);
  padding: 1rem 1.25rem;
  border-radius: var(--cb-radius);
  font-weight: 600;
  margin-bottom: 2rem;
}

.cb-order__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

.cb-order__detail-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cb-ink);
  margin: 0 0 .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.cb-order__detail-title a {
  font-size: .75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.cb-order__detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .9rem;
  color: var(--cb-ink-soft);
  line-height: 1.6;
}

.cb-order__items {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.cb-order__item {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--cb-border);
}

.cb-order__item:last-child { border-bottom: none; }

.cb-order__item-img {
  width: 60px; height: 60px;
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}

.cb-order__item-img img { max-width: 100%; max-height: 100%; object-fit: contain; }

.cb-order__item-info { flex: 1; min-width: 0; }

.cb-order__item-name { font-weight: 600; font-size: .9rem; margin: 0 0 .2rem; }

.cb-order__item-name a { color: var(--cb-ink); text-decoration: none; }

.cb-order__item-name a:hover { color: var(--cb-primary); }

.cb-order__item-meta { font-size: .8rem; color: var(--cb-ink-muted); margin: 0; }

.cb-order__item-price { font-weight: 700; white-space: nowrap; }

.cb-order__totals {
  background: var(--cb-bg);
  border-radius: 0 0 var(--cb-radius-lg) var(--cb-radius-lg);
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--cb-border);
}

.cb-order__totals dl { margin: 0; }

.cb-order__totals .cb-summary-row { font-size: .9rem; }

.cb-order__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.cb-errors {
  background: var(--cb-danger-bg);
  color: var(--cb-danger);
  padding: 1rem 1.25rem;
  border-radius: var(--cb-radius);
  margin-bottom: 1.5rem;
  font-size: .9rem;
  border: 1px solid rgba(185, 28, 28, .2);
}

.cb-errors h2 { font-size: 1rem; color: var(--cb-danger); margin-bottom: .5rem; }

.cb-errors ul { padding-left: 1.25rem; margin: .5rem 0 0; }

.cb-errors p  { margin: .25rem 0 .5rem; font-size: .85rem; }

/* Paid but not placed (carts/_paid_order_hold): stays until staff resolve it. */
.cb-paid-hold {
  background: var(--cb-warning-bg);
  color: var(--cb-ink);
  padding: 1rem 1.25rem;
  border-radius: var(--cb-radius);
  border: 1px solid var(--cb-warning);
  margin-bottom: 1.5rem;
}

.cb-paid-hold h2 { font-size: 1.05rem; margin: 0 0 .4rem; color: var(--cb-ink); }

.cb-paid-hold p { margin: .25rem 0; font-size: .95rem; }

.cb-paid-hold__contact { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-weight: 600; }

/* The held cart's quantities are text, not boxes (carts/_held_line_items). */
.cb-cart-table__qty-value { font-weight: 600; color: var(--cb-ink); }

.cb-ship-pending {
  color: var(--cb-ink-muted);
  font-size: .92em;
}

/* The cart's Enter-key button (see carts/show.html.erb). It must exist and
   be enabled for the browser to use it, but it is never seen, tabbed to or
   announced; the visible Update button is the real control. */
.cb-cart__enter-submit {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* "Quantity" label for each cart line. Screen-reader only on wider screens,
   where the Qty column heading does the job; shown on phones (below). */
.cb-cart-table__qty-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Tablets and phones ----------
 *
 * KEEP THESE AT THE END OF THIS FILE. Every rule here overrides a desktop
 * rule above with the same specificity, so it only wins by coming later.
 * They used to sit in shop_base.css, which loads BEFORE this file, and from
 * the 3 Sep split until this fix none of them applied: the phone cart
 * squeezed its items into a 2px column and checkout ran ~700px wide with
 * the order summary off-screen. spec/system/shop_responsive_layout_spec.rb
 * measures the real pages on both brands to catch a repeat.
 *
 * Wider breakpoint first, so the 600px block can refine it.
 */

@media (max-width: 900px) {
  /* One column; the summary follows the items/form instead of sitting
     beside them. minmax(0, …) lets a long product name wrap rather than
     stretch the column past the screen. */
  .cb-cart__grid,
  .cb-checkout__grid { grid-template-columns: minmax(0, 1fr); }
  .cb-cart__sidebar,
  .cb-checkout__summary { position: static; }
  .cb-order__details { grid-template-columns: 1fr 1fr; }
}

/* Same 16px rule as the checkout fields in shop_base.css, for the cart's
   quantity box, so iOS Safari does not zoom in when it is tapped. */
@media (max-width: 900px), (pointer: coarse) {
  .cb-cart-table__qty input[type="number"] { font-size: max(1rem, 16px); }
}

@media (max-width: 600px) {
  /* Match the 1rem side gutters of both brands' phone headers. */
  .cb-cart,
  .cb-order { padding: 0 1rem; }
  .cb-checkout { padding: 1.5rem 1rem 2.5rem; }
  .cb-cart { margin-top: 1.5rem; }
  .cb-cart__grid,
  .cb-checkout__grid { gap: 1.5rem; }

  /* Cart lines stack as cards: name, then quantity, then price, with the
     remove × pinned to the top-right corner of its own line. */
  .cb-cart-table thead { display: none; }
  .cb-cart-table,
  .cb-cart-table tbody,
  .cb-cart-table__row,
  .cb-cart-table__row td { display: block; }
  .cb-cart-table__row {
    position: relative;
    padding: 1rem;
    border-bottom: 1px solid var(--cb-border);
  }
  .cb-cart-table__row:last-child { border-bottom: none; }
  .cb-cart-table__row td { padding: .25rem 0; border: none; }
  .cb-cart-table__row .cb-cart-table__product { padding-right: 3rem; }
  .cb-cart-table__qty { text-align: left; }
  .cb-cart-table__qty-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0 .5rem 0 0;
    overflow: visible;
    clip: auto;
    font-size: .8rem;
    font-weight: 600;
    color: var(--cb-ink-muted);
  }
  .cb-cart-table__qty input[type="number"] { width: 4.5rem; min-height: 2.75rem; }
  .cb-cart-table__price { text-align: left; font-size: 1rem; }
  .cb-cart-table__remove { position: absolute; right: 1rem; top: .85rem; }
  .cb-cart-table__remove-btn { width: 2.5rem; height: 2.5rem; }
  .cb-cart__update-row { padding: .75rem 1rem; }
  .cb-cart__sidebar { padding: 1.25rem; }

  .cb-checkout__form,
  .cb-checkout__summary { padding: 1.25rem; }
  .cb-order__details { grid-template-columns: 1fr; padding: 1.25rem; }

  /* Review and receipt lines: picture and name on top, price underneath, so
     the name gets the width instead of breaking every word or two. */
  .cb-order__item { flex-wrap: wrap; gap: .5rem .75rem; padding: 1rem; }
  .cb-order__item-img { width: 48px; height: 48px; }
  .cb-order__item-info { flex: 1 1 calc(100% - 48px - .75rem); }
  .cb-order__item-price { margin-left: calc(48px + .75rem); }
}