/* ==========================================================================
   Open-shop page parts that the B2B storefront does not have: the logo /
   wordmark, hero, category chips, product page price, checkout card,
   confirmation and footer. Tokens only (docs/design-system.md). The shared
   look comes from order.css + product.css + themes/shop.css.
   ========================================================================== */

.shop-logo {
  display: block;
  /* Club logos are often portrait marks with small lettering underneath
     (Joutsan: 191x259), so they need real height to stay legible; the width
     cap keeps a wide landscape logo from taking over the header. */
  height: 84px;
  max-width: 280px;
  object-fit: contain;
}

/* themes/shop.css pads the brand 0.75rem; trimmed so the taller logo grows
   the navbar (min-height 100px there) only as far as it needs. */
body.theme-shop .navbar-brand {
  padding: var(--space-2) 0;
}

.shop-wordmark {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--brand-primary);
  text-align: center;
}

/* Footer pinned to the bottom on short pages (checkout review on a desktop
   left a band of page grey under it): the page is a column and main takes the
   spare height. The closed-shop page uses its own body class, so it is not
   affected; the Bootstrap modal and backdrop are position:fixed and ignore it. */
body.theme-shop {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.shop-main {
  flex: 1 0 auto;
  min-height: 60vh;
  padding-bottom: var(--space-8);
}

body.theme-shop .navbar,
body.theme-shop .shop-footer {
  flex-shrink: 0;
}

/* order.css hides .toolbar-filters from 992px (the B2B order page swaps in a
   sidebar there); in a shop that wrapper holds the back link and the category
   chips, so keep it — the same exception product.css makes for .product-page. */
@media (min-width: 992px) {
  .shop-main .toolbar-filters {
    display: flex;
  }
}

.shop-count {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.shop-state {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--text-muted);
}

.shop-preview-banner,
.shop-notice {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.shop-preview-banner {
  background: var(--status-warning-soft);
  color: var(--text-primary);
}

.shop-notice {
  background: var(--brand-primary-soft);
  color: var(--text-primary);
}

/* ---- Front ------------------------------------------------------------- */

.shop-banner {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 5;
  object-fit: cover;
  margin-top: var(--space-4);
  border-radius: var(--radius-lg);
}

.shop-hero {
  padding: var(--space-5) 0 var(--space-4);
}

/* The club's name above a generic heading ("Seuran tuotteet"); app.js shows
   it only when the heading does not already contain the name. */
.shop-eyebrow {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.shop-heading {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-2xl);
  font-weight: 800;
  color: var(--text-primary);
}

.shop-intro {
  max-width: 60ch;
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  white-space: pre-line;
}

.shop-intro:empty {
  display: none;
}

.shop-vat-note {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.shop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.shop-chip {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.shop-chip:hover {
  border-color: var(--brand-primary);
}

.shop-chip.is-active {
  border-color: var(--brand-primary);
  background: var(--brand-primary-soft);
  color: var(--text-primary);
}

.shop-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 calc(var(--space-1) / 2) var(--brand-primary-ring);
}

/* Search over the loaded catalogue (public/js/shop/catalog.js), between the
   hero and the grid. Full width on a phone, a comfortable field on a desktop;
   the magnifier sits inside the field, the clear button is the shared
   .clearable-input one (design-system.css). */
.shop-search {
  position: relative;
  max-width: calc(var(--space-10) * 12);
  margin: 0 0 var(--space-4);
}

.shop-search__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
}

.shop-search .form-control {
  min-height: calc(var(--space-10) + var(--space-1));
  padding-left: calc(var(--space-3) + var(--space-6));
  border-radius: var(--radius-pill);
  font-size: 1rem; /* iOS zoom guard: Safari zooms into a field under 16px */
}

.shop-search .form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 calc(var(--space-1) / 2) var(--brand-primary-ring);
}

.shop-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.shop-search-empty__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--text-primary);
}

.shop-search-empty__hint {
  margin: 0 0 var(--space-2);
}

/* Colour flipping on a multi-colour card (public/js/shop/catalog.js): arrows
   on the photo and clickable colour dots. On a mouse the arrows appear on
   hover or keyboard focus; on a touch screen there is no hover, so they stay
   visible. */
body.theme-shop .product-card__media {
  position: relative;
}

.product-card__colour-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--space-8);
  height: var(--space-8);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  z-index: 6;
  transition: opacity var(--motion-fast), border-color var(--motion-fast);
}

.product-card__colour-nav--prev {
  left: var(--space-1);
}

.product-card__colour-nav--next {
  right: var(--space-1);
}

.product-card__colour-nav:hover {
  border-color: var(--brand-primary);
}

.product-card__colour-nav:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 calc(var(--space-1) / 2) var(--brand-primary-ring);
}

@media (hover: hover) {
  .product-card__colour-nav {
    opacity: 0;
  }

  .product-card:hover .product-card__colour-nav,
  .product-card:focus-within .product-card__colour-nav {
    opacity: 1;
  }
}

/* The dot is still 16px to the eye; the invisible ::after widens what a
   finger can hit to 24px. */
.product-card__swatch {
  position: relative;
  /* Room for the active ring so it does not touch a neighbour or the text. */
  margin: 0 calc(var(--space-1) / 2);
  padding: 0;
  border: 0;
  cursor: pointer;
}

.product-card__swatch::after {
  content: "";
  position: absolute;
  inset: calc(var(--space-1) * -1);
}

.product-card__swatch.is-active {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.product-card__swatch:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px var(--border-default), 0 0 0 6px var(--brand-primary-ring);
}

/* ---- Product page ------------------------------------------------------ */

.product-info__price {
  margin: var(--space-3) 0;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
}

.product-info__price-vat {
  margin-left: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--text-muted);
}

.shop-added-note {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--brand-primary-soft);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.shop-added-note.is-capped {
  background: var(--status-warning-soft);
}

/* ---- Size table ("Kokotaulukko") --------------------------------------- */

/* Looks like the chart link it replaces (product.css .product-info__size-chart a). */
.shop-size-table-btn {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--brand-primary);
}

.shop-size-table-btn:hover {
  text-decoration: underline;
}

.shop-size-table-btn:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 calc(var(--space-1) / 2) var(--brand-primary-ring);
}

.shop-size-modal__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.shop-size-modal__product {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* A wide table scrolls sideways on a phone; the size column stays in view. */
.shop-size-table__scroll {
  overflow-x: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.shop-size-table__scroll:focus-visible {
  outline: none;
  box-shadow: 0 0 0 calc(var(--space-1) / 2) var(--brand-primary-ring);
}

.shop-size-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.shop-size-table th,
.shop-size-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
  white-space: nowrap;
}

.shop-size-table thead th {
  background: var(--bg-surface-muted);
  color: var(--text-secondary);
  font-weight: 700;
  white-space: normal;
  vertical-align: bottom;
}

.shop-size-table tbody tr:last-child th,
.shop-size-table tbody tr:last-child td {
  border-bottom: 0;
}

.shop-size-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  background: var(--bg-surface);
  font-weight: 700;
  color: var(--text-primary);
}

.shop-size-table thead th:first-child {
  background: var(--bg-surface-muted);
  color: var(--text-secondary);
}

.shop-size-table tbody tr:hover td,
.shop-size-table tbody tr:hover th {
  background: var(--brand-primary-soft);
}

.shop-size-table__note {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: pre-line;
}

/* ---- Cart pop-up ------------------------------------------------------- */

.shop-basket {
  padding: var(--space-3) var(--space-4);
}

.shop-basket__empty {
  padding: var(--space-6) 0;
  text-align: center;
  color: var(--text-muted);
}

.shop-basket__summary {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-3);
  font-size: var(--font-size-sm);
}

.shop-basket__summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.shop-basket__summary-row--total {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
  font-size: var(--font-size-md);
  font-weight: 700;
}

/* ---- Checkout ---------------------------------------------------------- */

.shop-checkout,
.shop-done {
  max-width: 720px;
  margin: var(--space-5) auto 0;
}

/* body.theme-shop prefix: themes/shop.css sets these with that prefix, and a
   plain .shop-checkout selector lost to it (the divider line still showed). */
body.theme-shop .shop-checkout .checkout-stepper {
  border-bottom: 0;
  padding-inline: 0;
}

.shop-checkout__card {
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.shop-checkout__heading {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.shop-checkout__hint {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.shop-checkout__empty {
  padding: var(--space-6);
  text-align: center;
}

.shop-review-lines {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.shop-review-lines li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--font-size-sm);
}

.shop-review-lines__meta {
  display: block;
  color: var(--text-muted);
}

.shop-review-lines__price {
  white-space: nowrap;
  font-weight: 600;
}

.shop-totals {
  display: grid;
  grid-template-columns: 1fr auto;
  /* No column gap: the grand total's top border sits on both the dt and the
     dd, and a gap split it into two segments. The dd pads itself instead. */
  gap: var(--space-1) 0;
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
}

.shop-totals dt {
  font-weight: 400;
  color: var(--text-secondary);
}

.shop-totals dd {
  margin: 0;
  padding-left: var(--space-3);
  text-align: right;
}

.shop-totals .shop-totals__grand {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--text-primary);
}

.shop-review-address {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bg-surface-muted);
  font-size: var(--font-size-sm);
  white-space: pre-line;
}

.shop-consent .invalid-feedback {
  display: block;
}

.shop-checkout__error {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--status-danger-soft);
  color: var(--status-danger);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.shop-checkout__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.shop-checkout__actions .btn-primary {
  margin-left: auto;
}

.shop-pay-note {
  margin: var(--space-3) 0 0;
  text-align: right;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.shop-done__card {
  text-align: center;
}

.shop-done__icon {
  width: 3rem;
  height: 3rem;
  color: var(--brand-primary);
}

.shop-done__title {
  margin: var(--space-3) 0;
  font-size: var(--font-size-2xl);
  font-weight: 800;
}

/* ---- Footer / closed page --------------------------------------------- */

.shop-footer {
  padding: var(--space-6) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.shop-footer a {
  color: var(--text-secondary);
}

/* Each link (and the seller text) wraps as a whole; phones drop the "·"
   separators and space the items instead, so a wrapped line never starts or
   ends with a stray dot. */
.shop-footer__links,
.shop-footer__seller {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  row-gap: var(--space-1);
}

.shop-footer__sep {
  margin: 0 var(--space-2);
}

.shop-footer__seller {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-xs);
}

.shop-closed {
  max-width: 480px;
  margin: 15vh auto 0;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-family: var(--font-sans);
  color: var(--text-primary);
}

/* ---- Product photos ----------------------------------------------------
   Several supplier photos (polo, hoodie) carry a 1px light-grey line along
   their own top and left edge, which showed as a faint box inside the white
   card and gallery frame. Measured: edge pixels 236-246 against 255 white
   inside, so mix-blend-mode: multiply cannot help (multiplying by a white
   frame leaves the image unchanged). Clipping a sliver off the image edge
   removes the line; product shots carry white margin, so nothing is lost. */
body.theme-shop .product-card__img,
body.theme-shop .product-gallery__img {
  clip-path: inset(0.5%);
}

/* The clip works on the image's own box, so the gallery image must hug the
   picture: themes/shop.css stretches it to the whole frame (object-fit
   letterboxes it), which on a desktop left the line inside the clip. The
   frame keeps its fixed 1:1 size from the theme, so nothing shifts on load. */
body.theme-shop .product-gallery__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

body.theme-shop .product-gallery__thumb img {
  clip-path: inset(1%);
}

/* One-row toolbar on the narrowest phones: "Takaisin" + the cart button (the
   link keeps its full name in its aria-label). From 360px up the full label
   fits next to the cart once the product count is hidden off the front page. */
@media (max-width: 359.98px) {
  .shop-back-link__rest {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .shop-logo {
    height: 64px;
    max-width: 200px;
  }

  body.theme-shop .navbar {
    min-height: 0;
  }

  .shop-footer__links {
    column-gap: var(--space-4);
  }

  .shop-footer__seller {
    column-gap: var(--space-3);
  }

  .shop-footer .shop-footer__sep {
    display: none;
  }

  .shop-heading {
    font-size: var(--font-size-xl);
  }

  .shop-checkout__card {
    padding: var(--space-4);
  }

  /* Step indicator on one line: every step keeps its number, only the
     current step shows its name (the others stay readable to screen readers).
     All three names at once need about 375px, more than a phone has. */
  body.theme-shop .checkout-stepper {
    flex-wrap: nowrap;
    padding-inline: var(--space-3);
  }

  body.theme-shop .checkout-stepper__item:not(:last-child)::after {
    width: var(--space-5);
    margin-left: 0;
  }

  body.theme-shop .checkout-stepper__item:not(.is-active) .checkout-stepper__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Order deadline line under the intro ("Tilaukset sulkeutuvat pe 17.10."). */
.shop-closing-line {
  display: inline-block;
  margin: var(--space-1) 0 var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--brand-primary-soft);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}