/* ==========================================================================
   Retail Product Detail (/product.html)
   Uses design-system.css tokens; falls back to base styles when needed.
   ========================================================================== */

.product-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-6) 0 0;
  min-height: auto;
  background-color: var(--bg-page);
}

.product-page > .container-fluid {
  flex: 1 0 auto;
}

.product-loading,
.product-error {
  max-width: calc(var(--space-10) * 16);
  margin: calc(var(--space-8) * 2) auto;
  text-align: center;
}

.product-loading__spinner {
  color: var(--brand-primary);
}

.product-error__card {
  border-color: var(--status-danger);
}

.product-error__icon {
  color: var(--status-danger);
}

.product-muted {
  color: var(--text-muted);
}

.product-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 62rem) {
  .product-detail__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: calc(var(--space-6) * 2);
  }
}

/* Gallery
   -------------------------------------------------------------------------- */
.product-gallery {
  position: relative;
}

.product-gallery__main {
  background: var(--bg-surface);
  border: calc(var(--space-1) / 4) solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 60svh;
  min-height: calc(var(--space-10) * 7);
  padding: var(--space-3);
}

.product-gallery__img {
  display: block;
  max-width: 100%;
  max-height: 60svh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  cursor: zoom-in;
  transition: transform var(--transition-base);
}

.product-gallery__img:hover,
.product-gallery__img:focus-visible {
  transform: scale(1.02);
}

.product-gallery__img:focus-visible {
  outline: calc(var(--space-1) / 2) solid var(--brand-primary);
  outline-offset: calc(var(--space-1) / 2);
}

.product-gallery__thumbs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  margin-top: var(--space-3);
  padding-bottom: var(--space-1);
  scrollbar-width: thin;
}

.product-gallery__thumb {
  flex: 0 0 calc(var(--space-8) + var(--space-10));
  width: calc(var(--space-8) + var(--space-10));
  height: calc(var(--space-8) + var(--space-10));
  border: calc(var(--space-1) / 2) solid transparent;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

/* Touch press feedback (tablet-first). */
.product-gallery__thumb:active {
  transform: scale(0.96);
  transition-duration: var(--motion-instant);
}

.product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-gallery__thumb:hover {
  border-color: var(--border-strong);
}

.product-gallery__thumb.is-active {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 var(--space-1) var(--brand-primary-ring);
}

.product-gallery__thumb:focus-visible {
  outline: calc(var(--space-1) / 2) solid var(--brand-primary);
  outline-offset: calc(var(--space-1) / 2);
  border-color: var(--brand-primary);
}

.product-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: var(--space-10);
  height: var(--space-10);
  border: none;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.product-gallery__nav:hover {
  background: var(--bg-surface);
  transform: translateY(-50%) scale(1.05);
}

/* Touch press feedback (tablet-first). */
.product-gallery__nav:active {
  transform: translateY(-50%) scale(0.95);
  transition-duration: var(--motion-instant);
}

.product-gallery__nav:focus-visible {
  outline: calc(var(--space-1) / 2) solid var(--brand-primary);
  outline-offset: calc(var(--space-1) / 2);
}

.product-gallery__nav--prev {
  left: var(--space-2);
}

.product-gallery__nav--next {
  right: var(--space-2);
}

.product-gallery__main-wrap {
  position: relative;
}

/* Image zoom modal
   -------------------------------------------------------------------------- */
.product-zoom-modal {
  z-index: 1065 !important;
}

.product-zoom-modal__content {
  position: relative;
  border: none;
  background: var(--bg-surface);
  overflow: hidden;
}

.product-zoom-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 3;
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  border-radius: var(--radius-pill);
  padding: calc(var(--space-2) + (var(--space-1) / 2));
  box-shadow: var(--shadow-sm);
}

.product-zoom-modal__body {
  background: var(--bg-surface-muted, var(--bg-page));
}

.product-zoom-modal__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(75svh, calc(var(--space-10) * 13));
  padding: calc(var(--space-6) * 2) calc(var(--space-8) + var(--space-6));
}

.product-zoom-modal__img {
  display: block;
  max-width: 100%;
  max-height: 75svh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

.product-zoom-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: calc(var(--space-10) + var(--space-1));
  height: calc(var(--space-10) + var(--space-1));
  border: none;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.product-zoom-nav:hover {
  background: var(--bg-surface);
  transform: translateY(-50%) scale(1.06);
}

/* Touch press feedback (tablet-first). */
.product-zoom-nav:active {
  transform: translateY(-50%) scale(0.95);
  transition-duration: var(--motion-instant);
}

.product-zoom-nav:focus-visible {
  outline: calc(var(--space-1) / 2) solid var(--brand-primary);
  outline-offset: calc(var(--space-1) / 2);
}

.product-zoom-nav--prev {
  left: var(--space-3);
}

.product-zoom-nav--next {
  right: var(--space-3);
}

.product-zoom-modal__counter {
  margin: 0;
  padding: calc(var(--space-2) + (var(--space-1) / 2)) var(--space-4) var(--space-4);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

@media (max-width: 36rem) {
  .product-zoom-modal__stage {
    min-height: min(60svh, calc(var(--space-10) * 10));
    padding: var(--space-10) var(--space-3);
  }

  .product-zoom-nav {
    width: calc(var(--space-10) + var(--space-1));
    height: calc(var(--space-10) + var(--space-1));
  }

  .product-gallery__nav {
    width: calc(var(--space-10) + var(--space-1));
    height: calc(var(--space-10) + var(--space-1));
  }
}

/* Info column
   -------------------------------------------------------------------------- */
.product-info {
  background: var(--bg-surface);
  border: calc(var(--space-1) / 4) solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.product-info__header {
  border-bottom: calc(var(--space-1) / 4) solid var(--border-default);
  padding-bottom: var(--space-4);
}

.product-info__code {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 0 0 calc(var(--space-2) - (var(--space-1) / 2));
}

.product-info__title {
  font-size: var(--font-size-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-tight);
}

.product-info__badges {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-2) - (var(--space-1) / 2));
  margin-bottom: var(--space-2);
}

.product-info__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: calc(var(--space-1) / 2) calc(var(--space-2) + (var(--space-1) / 2));
  border-radius: var(--radius-pill);
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.product-info__badge--kids {
  background: color-mix(in srgb, var(--accent-kids) 12%, transparent);
  color: var(--accent-kids);
}

/* Best seller: keeps the badge base's brand tint (the base already reads as a
   positive recommendation), stated explicitly so it does not drift if the base
   colour changes for another reason. */
.product-info__badge--bestseller {
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
}

.product-info__meta {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.product-color-switcher {
  margin-top: var(--space-4);
}

.product-color-switcher.is-loading {
  opacity: 0.72;
  pointer-events: none;
}

.product-color-switcher__label {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.product-color-switcher__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.product-color-switcher__swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: calc(var(--space-10) + var(--space-1));
  padding: calc(var(--space-1) + (var(--space-1) / 2)) var(--space-3);
  border: calc(var(--space-1) / 4) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--leading-tight);
  cursor: pointer;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background-color var(--motion-fast);
}

.product-color-switcher__swatch:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--bg-surface-hover);
}

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

.product-color-switcher__swatch.is-active {
  border-color: var(--brand-primary);
  background: var(--brand-primary-soft);
  color: var(--text-primary);
  cursor: default;
}

.product-color-switcher__swatch.is-unavailable:not(.is-active) {
  opacity: 0.72;
}

.product-color-switcher__chip {
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-pill);
  border: calc(var(--space-1) / 4) solid var(--border-default);
  flex: 0 0 auto;
}

.product-color-switcher__text {
  white-space: nowrap;
}

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

.product-info__description {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  line-height: var(--leading-body);
  white-space: pre-wrap;
}

.product-info__description:empty {
  display: none;
}

.product-info__size-chart a {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 500;
}

.product-info__size-chart a:hover {
  text-decoration: underline;
}

/* Size picker
   -------------------------------------------------------------------------- */
.product-sizes__heading {
  font-size: var(--font-size-md);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
}

.product-sizes__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Pack-size notice (e.g. "Myydään 10 kpl erissä") above the size rows. */
.product-size-pack-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--space-2);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.product-size-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: calc(var(--space-2) + (var(--space-1) / 2)) var(--space-3);
  background: var(--bg-surface-muted);
  border: calc(var(--space-1) / 4) solid transparent;
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

/* Amber means "check this" in this design system; a size already in the order
   is fine, so it takes the calm success tint (green; brand blue on the partner
   themes, whose success token is their brand colour). */
.product-size-row.is-in-cart {
  border-color: var(--status-success);
  background: var(--status-success-soft);
}

/* Typed but not yet added: the same brand tint as before, dashed so it cannot
   be mistaken for a size that is already in the order (both can be green). */
.product-size-row.is-pending {
  border-color: var(--brand-primary);
  border-style: dashed;
  background: var(--brand-primary-soft);
}

.product-size-row__label {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-1) / 2);
  min-width: 0;
}

.product-size-row__size {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}

.product-size-row__hint {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.product-size-row__hint--existing {
  color: var(--brand-primary-hover);
  font-weight: 600;
}

/* The one size-row stepper (also used by the Autoexperten size pop-up and the
   club shop): two 44px buttons around a number box, on every screen width. */
.product-size-row__controls .input-group {
  flex-wrap: nowrap;
  width: calc(var(--space-10) * 4);
}

.product-size-row__qty[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.product-size-row__qty[type="number"]::-webkit-outer-spin-button,
.product-size-row__qty[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product-size-row--disabled {
  opacity: 0.65;
}

.product-size-row--disabled .product-size-row__size {
  text-decoration: line-through;
}

/* CTA bar
   -------------------------------------------------------------------------- */
.product-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  /* Stays at the foot of the screen while the size list scrolls past: with seven
     sizes the button used to sit below the fold (y=920 on a 900px laptop), and
     on a phone at the very bottom of an 1,800px page. Bounded by .product-info,
     so it settles into place at the end of the card instead of floating over
     the footer. The card's side padding is bled out so the bar spans the card. */
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 0 calc(var(--space-6) * -1) calc(var(--space-6) * -1);
  padding: var(--space-3) var(--space-6);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--bg-surface);
  border-top: calc(var(--space-1) / 4) solid var(--border-default);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.product-cta__btn {
  min-width: calc(var(--space-10) * 5);
  min-height: var(--control-height-touch);
}

@media (max-width: 36rem) {
  .product-info {
    padding: var(--space-4);
  }

  /* The card's phone padding is --space-4, so the sticky bar bleeds by that. */
  .product-cta {
    margin: 0 calc(var(--space-4) * -1) calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
    flex-wrap: nowrap;
  }

  .product-cta__summary {
    flex: 1 1 0;
    min-width: 0;
  }

  .product-cta__btn {
    flex: 0 0 auto;
    min-width: calc(var(--space-10) * 4);
  }

  .product-gallery__main {
    max-height: 50svh;
    min-height: calc((var(--space-10) * 5) + var(--space-5));
  }

  .product-gallery__img {
    max-height: 50svh;
  }
}

/* Shared order.css hides .toolbar-filters at >=992px (the order page swaps in a
   sidebar toggle there). On the product page that same wrapper holds the
   "Takaisin valikoimaan" back button, so re-show it on the product page only. */
@media (min-width: 992px) {
  .product-page .toolbar-filters {
    display: flex;
  }
}

/* Logo upload add-on (customer-uploaded artwork). Rendered only when the
   channel enables it; the container is hidden otherwise, so these rules never
   affect the default storefront. Colours come from design-system tokens, so
   the widget picks up the active theme automatically.
   -------------------------------------------------------------------------- */
.product-logo-upload {
  margin-top: var(--space-4);
}

.logo-upload__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-height-touch);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: calc(var(--space-1) / 4) solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

/* The paid logo option is a card you can see and tap, not a bare checkbox that
   reads as small print under the size list. */
.logo-upload__toggle:hover {
  border-color: var(--border-strong);
}

.logo-upload__toggle:has(.logo-upload__toggle-input:checked) {
  border-color: var(--brand-primary);
  background: var(--brand-primary-soft);
}

.logo-upload__toggle:has(.logo-upload__toggle-input:focus-visible) {
  outline: calc(var(--space-1) / 2) solid var(--brand-primary);
  outline-offset: calc(var(--space-1) / 2);
}

.logo-upload__toggle-icon {
  flex: 0 0 auto;
  font-size: var(--font-size-xl);
  color: var(--brand-primary);
}

.logo-upload__toggle-input {
  flex: 0 0 auto;
  width: var(--space-5);
  height: var(--space-5);
  margin: 0;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

.logo-upload__panel {
  margin-top: var(--space-3);
}

.logo-upload__dropzone {
  border: calc(var(--space-1) / 4) dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface-muted);
  padding: var(--space-4);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.logo-upload__dropzone:hover,
.logo-upload__dropzone:focus-visible,
.logo-upload__dropzone.is-dragover {
  border-color: var(--brand-primary);
  background: var(--brand-primary-soft);
  outline: none;
}

.logo-upload__hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
}

/* "Choose file" is a real button-sized target (it was a 17px underlined link). */
.logo-upload__browse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height-touch);
  padding: 0 var(--space-4);
  background: var(--bg-surface);
  border: calc(var(--space-1) / 4) solid var(--brand-primary);
  border-radius: var(--radius-md);
  color: var(--brand-primary);
  font-weight: var(--font-weight-semibold);
}

.logo-upload__browse-touch {
  display: none;
}

/* A phone cannot drag a file onto the page: drop the drag wording and name the
   button for what it does. */
@media (hover: none) {
  .logo-upload__hint-drag,
  .logo-upload__browse-pointer {
    display: none;
  }

  .logo-upload__browse-touch {
    display: inline;
  }
}

.logo-upload__formats {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.logo-upload__setup-fee {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.logo-upload__status {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  min-height: var(--space-4);
}

.logo-upload__status.is-error { color: var(--status-danger); }
.logo-upload__status.is-success { color: var(--status-success); }
.logo-upload__status.is-busy { color: var(--text-muted); }

.logo-upload__preview {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-2);
  padding: 0;
}

.logo-upload__thumb-wrap {
  flex: 0 0 calc(var(--space-10) + var(--space-6));
  width: calc(var(--space-10) + var(--space-6));
}

.logo-upload__thumb {
  display: block;
  width: 100%;
  height: calc(var(--space-10) + var(--space-6));
  object-fit: contain;
  object-position: left center;
}

.logo-upload__meta {
  flex: 1;
  min-width: 0;
  padding-top: var(--space-1);
}

.logo-upload__filename {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.logo-upload__placement {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.logo-upload__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.logo-upload__change,
.logo-upload__remove {
  border: none;
  background: none;
  padding: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  cursor: pointer;
}

.logo-upload__change {
  color: var(--brand-primary);
}

.logo-upload__change:hover:not(:disabled) {
  color: var(--brand-primary-hover, var(--brand-primary));
}

.logo-upload__remove {
  color: var(--status-danger);
}

.logo-upload__remove:hover:not(:disabled) {
  opacity: 0.85;
}

.logo-upload__change:disabled,
.logo-upload__remove:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}