/* Greenlake Martial Arts site: the merch shop, shop.html (GMA-454, js/shop.js). Loaded after
   landing.css, booking.css (the product and cart dialogs are the booking dialog) and checkout.css
   (spinner, toast, the embedded checkout). Every value comes from tokens.css. Mobile first. */

.shop-title { font-size: var(--h1-size); line-height: var(--h1-lh); margin-bottom: var(--gap-sm); }
.shop-title:focus { outline: none; }

/* ---------- header cart button ---------- */
.cart-btn {
  position: relative; display: inline-flex; align-items: center; gap: var(--gap-xs);
  min-height: var(--touch); min-width: var(--touch); padding: 0 var(--gap-sm);
  font: inherit; font-weight: 700; font-size: var(--small-size); color: var(--c-text); cursor: pointer;
  background: transparent; border: var(--line-w) solid var(--c-line); border-radius: var(--radius-pill);
}
.cart-btn:hover { border-color: var(--c-text); }
/* The shop header carries the home page's menu plus the Cart (GMA-464): on narrow phones the
   Cart's word is kept for screen readers only, so Menu, Member login and Cart fit on one line. */
.header-nav .btn { white-space: nowrap; }
.header-nav .nav-menu-btn, .header-nav .cart-btn, .nav-menu-btn svg, .cart-btn svg { flex: none; }
@media (max-width: 419px) {
  .cart-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* The narrowest phones: Menu shows its icon alone (the word stays for screen readers). */
@media (max-width: 379px) {
  .nav-menu-btn { min-width: var(--touch); justify-content: center; }
  .nav-menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 359px) {
  .header-nav .btn-sm { padding-left: var(--gap-sm); padding-right: var(--gap-sm); }
  .cart-btn { padding: 0 var(--gap-xs); }
}
.cart-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cart-badge {
  min-width: var(--cart-badge); height: var(--cart-badge); padding: 0 var(--gap-xs); border-radius: var(--radius-pill);
  display: inline-grid; place-items: center; background: var(--c-cta-bg); color: var(--c-cta-text);
  font-size: var(--label-size); font-variant-numeric: tabular-nums; line-height: 1;
}

/* ---------- states ---------- */
.shop-loading { display: flex; align-items: center; gap: var(--gap-sm); color: var(--c-muted); }
.shop-empty {
  background: var(--c-surface); border: var(--line-w) solid var(--c-line); border-radius: var(--radius-lg);
  padding: var(--card-pad); display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-sm);
  max-width: var(--dialog-max-w);
}
.shop-empty a:not(.btn) { text-underline-offset: 3px; }
.shop-empty-title { font-weight: 800; font-size: var(--h3-size); line-height: var(--h3-lh); }

/* Return from checkout (shop.html?order=<id>). */
.shop-order {
  margin-bottom: var(--gap-lg); padding: var(--card-pad); max-width: var(--dialog-max-w);
  background: var(--c-surface); border: var(--line-w) solid var(--c-line); border-left: var(--accent-w) solid var(--c-success);
  border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--gap-xs);
}
.shop-order:focus { outline: none; }
.shop-order-title { font-weight: 800; font-size: var(--h3-size); line-height: var(--h3-lh); }
.shop-order-ref { color: var(--c-muted); font-size: var(--small-size); overflow-wrap: anywhere; }
.shop-order-ref:empty, .shop-order-text:empty { display: none; }

/* ---------- grid ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-sm); }
.shop-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-surface); border: var(--line-w) solid var(--c-line); border-radius: var(--radius-lg);
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
}
.shop-card:hover { transform: translateY(-2px); background: var(--c-surface-raised); box-shadow: var(--shadow-card); }
.shop-card:focus-within { outline: var(--focus-w) solid var(--c-focus); outline-offset: var(--focus-offset); }
/* Every photo box (card, dialog, thumbs, cart line) is a square with a definite size, and the photo
   is placed absolutely to fill it, so object-fit: contain always shows the whole photo (GMA-464: a
   percentage height inside an auto grid row let the photo overflow and get clipped). */
.shop-card-image, .product-image-inner, .product-thumb, .cart-line-image { position: relative; }
.shop-card-image img, .product-image-inner img, .product-thumb img, .cart-line-image img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.shop-card-image { aspect-ratio: 1 / 1; background: var(--c-shop-tile); display: grid; place-items: center; overflow: hidden; }
.shop-card-image { padding: var(--shop-tile-pad); }
.shop-card-image img { inset: var(--shop-tile-pad); width: calc(100% - 2 * var(--shop-tile-pad)); height: calc(100% - 2 * var(--shop-tile-pad)); }
.shop-card-body { padding: var(--gap-sm) var(--gap-sm) var(--gap); display: flex; flex-direction: column; gap: var(--gap-xs); flex: 1; }
.shop-card-name { font-size: var(--body-size); line-height: var(--h3-lh); font-weight: 700; }
/* The whole card is the button: its ::after covers the card, one tab stop per product. */
.shop-card-link {
  font: inherit; color: inherit; text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
  overflow-wrap: anywhere;
}
.shop-card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.shop-card-link:focus-visible { outline: none; }
.shop-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gap-xs); font-variant-numeric: tabular-nums; }
.shop-price { font-weight: 800; }
.shop-compare, .product-compare { color: var(--c-muted); font-size: var(--small-size); }
.shop-chips { display: flex; flex-wrap: wrap; gap: var(--gap-xs); margin-top: auto; padding-top: var(--gap-xs); }
.shop-chip {
  display: inline-flex; align-items: center; align-self: flex-start; padding: 2px 10px; border-radius: var(--radius-pill);
  border: var(--line-w) solid var(--c-line); font-size: var(--label-size); font-weight: 600; line-height: 1.4;
}
.shop-chip-sale { background: var(--c-cta-bg); border-color: var(--c-cta-bg); color: var(--c-cta-text); }
.shop-chip-pickup { border-color: var(--c-success); color: var(--c-success); }

/* No photo: a bag icon, the product's name and "Photo coming soon" on the tile. */
.shop-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: var(--gap-xs); padding: var(--gap-sm);
  color: var(--c-shop-placeholder); text-align: center; user-select: none;
}
.shop-placeholder svg { width: var(--shop-placeholder-icon); height: var(--shop-placeholder-icon); }
.shop-placeholder-name { font-weight: 700; font-size: var(--small-size); line-height: 1.3; overflow-wrap: anywhere; }
.shop-placeholder-note { font-size: var(--label-size); }

@media (min-width: 640px) { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } }
@media (min-width: 1000px) { .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .shop-card { transition: none; } .shop-card:hover { transform: none; } }

/* ---------- product dialog ---------- */
.product-media { display: flex; flex-direction: column; gap: var(--gap-xs); }
/* A centered square whose side is the dialog's width, capped by the max height token. */
.product-image {
  width: min(100%, var(--product-image-max-h)); align-self: center;
  border-radius: var(--radius-md); overflow: hidden;
}
.product-image-inner { aspect-ratio: 1 / 1; width: 100%; background: var(--c-shop-tile); display: grid; place-items: center; }
.product-thumbs { display: flex; gap: var(--gap-xs); overflow-x: auto; }
.product-thumb {
  flex: none; width: var(--product-thumb); height: var(--product-thumb); padding: 0; cursor: pointer; overflow: hidden;
  border: 2px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-shop-tile);
}
.product-thumb[aria-pressed="true"] { border-color: var(--c-field-focus); }
.product-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--gap-sm); font-variant-numeric: tabular-nums; }
.product-price { font-size: var(--price-size); font-weight: 800; line-height: 1.1; }
.product-pickup { margin: 0; }
.product-desc { color: var(--c-muted); white-space: pre-line; }

/* Color and Size: radio chips (constrained choices). A sold out one stays, disabled. */
.option-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.option-group legend { font-weight: 500; font-size: var(--label-size); color: var(--c-label); margin-bottom: var(--gap-xs); padding: 0; }
.option-value { color: var(--c-text); font-weight: 700; }
.option-list { display: flex; flex-wrap: wrap; gap: var(--gap-xs); }
.option-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.option-chip {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: var(--touch); min-width: var(--touch); padding: 0 var(--gap-sm); cursor: pointer;
  border: var(--line-w) solid var(--c-input-border); border-radius: var(--radius-sm); background: var(--c-input-bg);
  font-size: var(--small-size); font-weight: 600; line-height: 1.2; text-align: center;
}
.option-chip:hover { border-color: var(--c-text); }
.option-input:checked + .option-chip { border-color: var(--c-field-focus); box-shadow: 0 0 0 var(--line-w) var(--c-field-focus); background: var(--c-class-box-bg); }
.option-input:focus-visible + .option-chip { outline: var(--check-focus-w) solid var(--c-field-focus); outline-offset: var(--check-focus-w); }
.option-input:disabled + .option-chip { cursor: not-allowed; color: var(--c-muted); border-style: dashed; }
.option-input:disabled + .option-chip > span:first-child { text-decoration: line-through; }
.option-out { font-size: var(--label-size); font-weight: 400; }

.qty-field { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); }
.qty-label { font-weight: 500; font-size: var(--label-size); color: var(--c-label); }
.qty-stepper {
  display: inline-flex; align-items: center; border: var(--line-w) solid var(--c-input-border);
  border-radius: var(--radius-pill); background: var(--c-input-bg);
}
.qty-btn {
  width: var(--touch); height: var(--touch); border: 0; background: transparent; color: var(--c-text); cursor: pointer;
  font: inherit; font-size: var(--h3-size); font-weight: 700; border-radius: 50%;
}
.qty-btn:hover:not(:disabled) { background: var(--c-surface-raised); }
.qty-btn:disabled { color: var(--c-muted); cursor: not-allowed; opacity: 0.6; }
.qty-btn:focus-visible { outline: var(--check-focus-w) solid var(--c-field-focus); outline-offset: calc(-1 * var(--check-focus-w)); }
.qty-value { min-width: 2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.qty-stepper-sm .qty-btn { font-size: var(--body-size); }

.booking-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }

/* ---------- cart ---------- */
.cart-lines { display: flex; flex-direction: column; gap: var(--gap-sm); }
.cart-line {
  display: grid; grid-template-columns: var(--cart-thumb) minmax(0, 1fr) auto; gap: var(--gap-sm); align-items: start;
  padding-bottom: var(--gap-sm); border-bottom: var(--line-w) solid var(--c-line);
}
.cart-line-image {
  width: var(--cart-thumb); height: var(--cart-thumb); border-radius: var(--radius-sm); overflow: hidden;
  background: var(--c-shop-tile); display: grid; place-items: center;
}
/* The cart thumb is too small for the name: the icon alone. */
.cart-line-image .shop-placeholder { padding: 0; }
.cart-line-image .shop-placeholder-name, .cart-line-image .shop-placeholder-note { display: none; }
.cart-line-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-line-name { font-weight: 700; overflow-wrap: anywhere; }
.cart-line-meta { color: var(--c-muted); font-size: var(--small-size); }
.cart-line-info .shop-chip { margin-top: var(--gap-xs); }
.cart-line-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--gap-xs); }
.cart-line-total { font-weight: 800; font-variant-numeric: tabular-nums; }
.cart-remove { align-self: flex-end; }
.cart-total { display: flex; justify-content: space-between; font-weight: 800; font-size: var(--h3-size); font-variant-numeric: tabular-nums; }
.cart-empty { border: 0; padding: 0; background: transparent; }

/* Phones: the price and stepper go under the item, so nothing is squeezed. */
@media (max-width: 479px) {
  .cart-line { grid-template-columns: var(--cart-thumb) minmax(0, 1fr); }
  .cart-line-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* From 760px the cart is a panel on the right edge, the full height of the window. */
@media (min-width: 760px) {
  .cart-dialog {
    margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: var(--cart-panel-w); max-width: 100%;
    border-radius: 0; border-top: 0; border-bottom: 0; border-right: 0;
  }
}

.shop-toast { z-index: var(--checkout-z); }