/* Merch shop (ActivityPlatform::Merch::*Controller: shop, cart, order, withdrawal). The engine's views ship plain
   semantic classes (.page-title, .card, .btn, .field, .facts, .note, .flash, .num ...); base.css already styles
   most of them. This file adds the "Lochraster" look on top, from tokens.css only, and ONLY inside the shop
   wrappers, so nothing else on the site is affected: ink outlines, a T-nut grid behind the products, price tags
   as climbing tape, the marker hand for the total. */
.merch-shop, .merch-cart, .merch-order, .merch-withdrawal { max-width: 1180px; }
.merch-shop .page-title, .merch-cart .page-title, .merch-order .page-title, .merch-withdrawal .page-title {
  text-transform: uppercase; line-height: .95; letter-spacing: .005em;
}
.merch-shop .lede, .merch-cart .lede, .merch-order .lede { margin-bottom: var(--space-4); }
.merch-shop .note, .merch-cart .note, .merch-order .note, .merch-withdrawal .note {
  padding: 10px 12px; border: 1.5px dashed var(--line2); border-radius: var(--radius-md); background: var(--sunk); color: var(--ink);
}
.merch-legal { margin-top: var(--space-5); }
.merch-legal a { color: inherit; text-underline-offset: 3px; }

/* Shop: product grid */
.merch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--space-4); margin: var(--space-5) 0; padding: 0; list-style: none; }
.merch-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); border: 1.5px solid var(--line); box-shadow: 4px 4px 0 var(--line); }
.merch-card h2 { margin: 0; font-size: var(--fs-xl); text-transform: uppercase; letter-spacing: .01em; }
.merch-card p { margin: 0; }
.merch-card form { width: 100%; margin-top: auto; padding-top: var(--space-3); }
.merch-card .field { margin-bottom: var(--space-3); }
.merch-card .btn { width: 100%; }
.merch-card__pic { position: relative; aspect-ratio: 1; width: 100%; margin-bottom: var(--space-3); border-radius: var(--radius-sm); overflow: hidden; border: 1.5px solid var(--line);
  background-color: var(--sunk);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 14%, transparent) 1.3px, transparent 1.6px); background-size: 22px 22px; background-position: 11px 11px; }
.merch-card__pic img { width: 100%; height: 100%; object-fit: contain; }
.merch-card__pic .merch-card__back { position: absolute; right: var(--space-2); bottom: var(--space-2); width: 34%; height: auto;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
/* Price as a strip of climbing tape */
.merch-card .num, .merch-line .num, .merch-totals .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-numeral); }
.merch-card > .num { display: inline-block; margin: var(--space-1) 0 0; padding: 2px 10px; border: 1.5px solid var(--line); border-radius: 3px;
  background: var(--tape); color: var(--on-tape); transform: rotate(-1.2deg); }

/* Cart and order lines */
.merch-lines { display: grid; gap: var(--space-3); margin: var(--space-4) 0; padding: 0; list-style: none; }
.merch-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); border: 1.5px solid var(--line2); box-shadow: none; }
.merch-line h2 { margin: 0; font-size: var(--fs-lg); }
.merch-line input[type="number"] { width: 5.5rem; }
.merch-cart .facts, .merch-order .facts { margin: var(--space-4) 0; }
.merch-cart .flash, .merch-order .flash, .merch-shop .flash { max-width: none; width: auto; margin: var(--space-4) 0; }

/* Totals and checkout */
.merch-totals { margin: var(--space-4) 0; border: 1.5px solid var(--line); box-shadow: 4px 4px 0 var(--line); }
.merch-totals dl { margin: 0; display: grid; gap: var(--space-2); }
.merch-totals dl > div { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px dashed var(--line2); }
.merch-totals dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.merch-totals dl > div:last-child dd { font-family: var(--f-hand); font-size: var(--fs-2xl); line-height: 1; color: var(--accent); }
.merch-zone { max-width: 28rem; }
.merch-cart .actions .btn.primary, .merch-withdrawal .btn.primary { min-height: 48px; }

/* Order page and withdrawal */
.merch-order .page-title, .merch-withdrawal .page-title { margin-bottom: var(--space-2); }
.merch-withdrawal .form { max-width: 36rem; }

@media (max-width: 560px) {
  .merch-card { box-shadow: 3px 3px 0 var(--line); }
  .merch-line { align-items: flex-start; }
}