/* Storefront. Inherits the site's type and colour; adds only what a cart needs. */
#store-products { display: grid; gap: 3rem; margin: 2rem 0 3rem; }
@media (min-width: 820px) { #store-products { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }

.product { display: flex; flex-direction: column; gap: 1.25rem; }

/* Main shot fills the card. Thumbnails swap it; clicking it opens the lightbox. */
.product-media { display: flex; flex-direction: column; gap: .6rem; }
.product-shot { padding: 0; border: 0; background: none; cursor: zoom-in; display: block;
  width: 100%; border-radius: 4px; overflow: hidden; }
.product-main { width: 100%; height: auto; display: block; background: #f2f1ee;
  aspect-ratio: 1 / 1; object-fit: cover; transition: opacity .15s ease; }
.product-shot:hover .product-main { opacity: .9; }

.product-thumbs { display: flex; gap: .5rem; }
.product-thumb { padding: 0; border: 1px solid transparent; background: none; cursor: pointer;
  border-radius: 3px; overflow: hidden; width: 68px; flex: 0 0 auto; line-height: 0; }
.product-thumb img { width: 100%; height: auto; display: block; background: #f2f1ee;
  aspect-ratio: 1 / 1; object-fit: cover; opacity: .72; transition: opacity .15s ease; }
.product-thumb.is-active { border-color: currentColor; }
.product-thumb.is-active img, .product-thumb:hover img { opacity: 1; }
.product-thumb:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.product-info h3 { margin: 0 0 .15rem; }
.product-by { margin: 0 0 .75rem; font-size: .9rem; opacity: .7; }
.product-garment { font-size: .9rem; opacity: .75; }
.product-note { font-size: .85rem; opacity: .7; font-style: italic; }

.product-buy { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-top: 1rem; }
.product-buy label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }
.product-buy select, .product-buy input, .cart-qty {
  padding: .5rem .6rem; font: inherit; font-size: .95rem;
  border: 1px solid rgba(0,0,0,.28); border-radius: 3px; background: #fff; color: inherit;
}
.product-buy input { width: 5rem; }
.cart-qty { width: 4.5rem; }
.product-buy select:focus-visible, .product-buy input:focus-visible,
.cart-qty:focus-visible, .btn:focus-visible, .cart-remove:focus-visible {
  outline: 2px solid currentColor; outline-offset: 2px;
}

.cart-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.cart-table th, .cart-table td { padding: .6rem .5rem; text-align: left; border-bottom: 1px solid rgba(0,0,0,.12); }
.cart-table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.cart-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cart-table tfoot th, .cart-table tfoot td { border-bottom: 0; font-weight: 700; }
.cart-size { display: block; font-size: .85rem; opacity: .7; }
.cart-remove { background: none; border: 0; padding: .25rem; font: inherit; font-size: .85rem;
  text-decoration: underline; cursor: pointer; color: inherit; opacity: .75; }
.cart-remove:hover { opacity: 1; }
.cart-empty, .cart-note, .cart-pay { font-size: .9rem; opacity: .75; }
.cart-blocked { font-size: .95rem; padding: .75rem .9rem; border-radius: 3px;
  background: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.12); }
.cart-error { font-size: .95rem; color: #9a2b21; }
#store-cart .btn[disabled] { opacity: .5; cursor: not-allowed; }
.cart-note { margin-top: .25rem; }

@media (max-width: 560px) {
  .cart-table thead { position: absolute; left: -9999px; }
  .cart-table tr { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem;
    padding: .75rem 0; border-bottom: 1px solid rgba(0,0,0,.12); }
  .cart-table td { border: 0; padding: .1rem 0; }
  .cart-table tfoot tr { grid-template-columns: 1fr auto; }
}

/* --- clickable product shots + lightbox --- */

body.lb-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  gap: .5rem; padding: clamp(.5rem, 3vw, 2rem); background: rgba(12,12,12,.94);
}
.lightbox[hidden] { display: none; }
.lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .75rem;
  max-width: min(100%, 1100px); }
.lb-figure img { max-width: 100%; max-height: 82vh; width: auto; height: auto;
  display: block; border-radius: 3px; background: #fff; }
.lb-figure figcaption { color: #f2f1ee; font-size: .9rem; opacity: .85; text-align: center; }
.lightbox button { background: rgba(255,255,255,.1); color: #fff; border: 0; cursor: pointer;
  border-radius: 999px; line-height: 1; font: inherit; }
.lightbox button:hover { background: rgba(255,255,255,.2); }
.lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-close { position: absolute; top: 1rem; right: 1rem; width: 2.6rem; height: 2.6rem; font-size: 1.8rem; }
.lb-prev, .lb-next { width: 2.8rem; height: 2.8rem; font-size: 2rem; flex: 0 0 auto; }
.lb-prev[hidden], .lb-next[hidden] { display: none; }
@media (max-width: 620px) {
  .lb-prev, .lb-next { position: absolute; bottom: 1rem; }
  .lb-prev { left: 1rem; } .lb-next { right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .product-main, .product-thumb img { transition: none; }
}

/* --- ordering, no payment ---
   The cart ends in a form rather than a checkout button: an order reserves a shirt in the
   group run, and money changes hands at pickup. */
.cart-table tfoot .cart-total th, .cart-table tfoot .cart-total td {
  border-top: 2px solid rgba(0,0,0,.28); font-size: 1.05rem;
}

.order-block { margin: 1.5rem 0 0; padding: .9rem 1rem; border: 1px solid rgba(0,0,0,.18);
  border-radius: 4px; }
.order-block legend { padding: 0 .4rem; font-size: .85rem; text-transform: uppercase;
  letter-spacing: .04em; opacity: .75; }
.order-block .radio { display: flex; align-items: center; gap: .55rem; padding: .3rem 0;
  font-size: .98rem; cursor: pointer; }

.order-form { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.25rem;
  max-width: 34rem; }
.order-lead { margin: 0; font-size: .92rem; opacity: .8; }
.order-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; }
/* The UA's [hidden] rule is display:none at zero specificity, so the line above beat it and
   the mailing-address box showed on pickup orders. Say it again, louder. */
.order-form label[hidden] { display: none; }
.order-form input, .order-form textarea {
  padding: .55rem .65rem; font: inherit; font-size: .98rem;
  border: 1px solid rgba(0,0,0,.28); border-radius: 3px; background: #fff; color: inherit;
}
.order-form input:focus-visible, .order-form textarea:focus-visible {
  outline: 2px solid currentColor; outline-offset: 2px;
}
.order-form .btn { align-self: flex-start; }
.order-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.order-done { margin: 1.25rem 0; padding: 1.1rem 1.2rem; border: 1px solid rgba(0,0,0,.2);
  border-radius: 4px; background: rgba(105,154,97,.10); }
.order-done h3 { margin: 0 0 .6rem; }
.order-done ul { margin: 0 0 .8rem; padding-left: 1.1rem; }
.order-done p { margin: .5rem 0; font-size: .95rem; }
.order-owed strong { font-size: 1.1rem; }