/* Original catalogue/product design, followed by WooCommerce integration. */
.collection {
  width: 100%;
  min-height: 100svh;
  padding-bottom: var(--catalog-bottom-space);
}

.collection-intro {
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: stretch;
  background: var(--collection-surface);
}

.collection-intro__copy {
  align-self: center;
  padding: var(--collection-copy-padding);
}

.collection-intro__eyebrow {
  margin-bottom: 28px;
  font-size: var(--font-size-catalog-caption);
  letter-spacing: var(--letter-spacing-collection-eyebrow);
  text-transform: uppercase;
  color: var(--catalog-muted);
}

.collection-intro h1 {
  margin-bottom: 22px;
  font-size: var(--font-size-collection-title);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-collection-title);
  letter-spacing: var(--letter-spacing-collection-title);
}

.collection-intro__description {
  max-width: var(--collection-description-max);
  margin-bottom: 0;
  color: var(--collection-description-color);
  font-size: var(--font-size-collection-description);
  line-height: var(--line-height-collection-description);
}

.collection-intro__image {
  height: 100%;
  min-height: var(--collection-image-min-height);
  max-height: var(--collection-image-max-height);
  aspect-ratio: var(--collection-image-ratio);
  object-fit: cover;
  object-position: center 45%;
}

.catalog {
  display: grid;
  grid-template-columns: var(--catalog-sidebar-width) minmax(0, 1fr);
  gap: var(--catalog-gap);
  margin-top: var(--catalog-section-space);
  padding-inline: var(--container-fluid-gutter);
  scroll-margin-top: var(--catalog-sticky-offset);
}

.catalog-filters {
  align-self: start;
  position: sticky;
  top: var(--catalog-sticky-offset);
}

.catalog-filters h2,
.catalog-toolbar h2 {
  margin: 0;
  font-size: var(--font-size-catalog-heading);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-catalog-heading);
}

.catalog-filters h2 {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--catalog-border);
  margin-bottom: 24px;
}

.filter-group {
  min-width: 0;
  padding: 0;
  margin: 0 0 28px;
  border: 0;
}

.filter-label {
  display: block;
  padding: 0;
  margin-bottom: 12px;
  font-size: var(--font-size-catalog-label);
}

.catalog-filters select {
  width: 100%;
  min-height: var(--catalog-control-height);
  padding: 10px 30px 10px 12px;
  border: 1px solid var(--catalog-border);
  border-radius: 0;
  background: var(--color-white);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-catalog-control);
}

.price-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.price-fields label {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--catalog-border);
  padding: 0 10px;
  font-size: var(--font-size-catalog-caption);
  color: var(--catalog-muted);
}

.price-fields input {
  width: 100%;
  min-width: 0;
  height: var(--catalog-control-height);
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--color-text);
  background: transparent;
  font-size: var(--font-size-catalog-control);
  appearance: textfield;
  -moz-appearance: textfield;
}

.price-fields input::-webkit-inner-spin-button,
.price-fields input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.price-fields input::placeholder {
  color: var(--catalog-placeholder-color);
}

.size-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.size-option {
  min-height: var(--catalog-control-height);
  padding: 0;
  border: 1px solid var(--catalog-border);
  background: var(--color-white);
  font-size: var(--font-size-catalog-control);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.size-option:hover {
  border-color: var(--color-text);
}

.size-option[aria-pressed="true"] {
  color: var(--color-white);
  background: var(--color-text);
  border-color: var(--color-text);
}

.filter-apply {
  width: 100%;
  min-height: var(--catalog-apply-height);
  padding: 12px;
  border: 1px solid var(--color-text);
  background: var(--color-text);
  color: var(--color-white);
  font-size: var(--font-size-catalog-control);
  letter-spacing: var(--letter-spacing-catalog-button);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.filter-apply:hover {
  background: var(--catalog-button-hover);
}

.filter-clear {
  display: block;
  min-height: var(--catalog-control-height);
  margin: 6px auto 0;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--catalog-muted);
  font-size: var(--font-size-catalog-control);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.filter-clear:hover {
  color: var(--color-text);
}

.catalog-toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
}

.catalog-toolbar p {
  margin: 0;
  color: var(--catalog-muted);
  font-size: var(--font-size-catalog-control);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--product-grid-gap);
}

.catalog-product {
  min-width: 0;
}

.catalog-product[hidden],
.catalog-empty[hidden] {
  display: none;
}

.catalog-product__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--product-image-ratio);
  background: var(--color-surface);
}

.catalog-product__image,
.catalog-product__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-product__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-preview);
}

.catalog-product.is-playing .catalog-product__video {
  opacity: 1;
}

.preview-toggle {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: var(--preview-button-size);
  height: var(--preview-button-size);
  padding: 8px;
  border: 1px solid var(--preview-border-color);
  border-radius: 50%;
  background: var(--preview-background);
  color: var(--color-text);
  cursor: pointer;
}

.preview-toggle svg {
  width: var(--preview-icon-size);
  height: var(--preview-icon-size);
  fill: currentColor;
}

.preview-pause,
.is-playing .preview-play {
  display: none;
}

.is-playing .preview-pause {
  display: block;
}

.catalog-product__info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 8px;
  padding-top: 14px;
}

.catalog-product__name {
  margin: 0;
  font-size: var(--font-size-catalog-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-catalog-heading);
}

.catalog-product__price {
  margin: 0;
  font-size: var(--font-size-catalog-control);
  white-space: nowrap;
}

.catalog-product__description {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--catalog-muted);
  font-size: var(--font-size-catalog-caption);
  line-height: var(--line-height-catalog-description);
}

.catalog-empty {
  padding: 72px 20px;
  text-align: center;
  border-top: 1px solid var(--catalog-border);
}

.catalog-empty h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-regular);
}

.catalog-empty p {
  color: var(--catalog-muted);
  font-size: var(--font-size-body);
}

.products-page :focus-visible {
  outline: 2px solid var(--catalog-focus-color);
  outline-offset: 4px;
}

.product-main {
  width: 100%;
  padding: 0 var(--container-fluid-gutter) var(--catalog-bottom-space);
}

.product-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-5);
  color: var(--catalog-muted);
  font-size: var(--font-size-catalog-caption);
}

.product-breadcrumbs a:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.product-detail {
  display: grid;
  grid-template-columns: var(--product-detail-columns);
  align-items: start;
  row-gap: var(--product-detail-gap);
  column-gap: 0;
}

.product-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--product-gallery-gap);
}

.product-gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--color-surface);
  cursor: zoom-in;
}

.product-gallery__item img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--product-gallery-ratio);
  object-fit: cover;
}

.product-gallery__zoom {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: grid;
  place-items: center;
  width: var(--preview-button-size);
  height: var(--preview-button-size);
  border-radius: 50%;
  background: var(--preview-background);
  font-size: var(--font-size-h3);
}

.product-info {
  position: sticky;
  top: var(--product-info-top);
  justify-self: center;
  min-width: 0;
  width: 100%;
  max-width: var(--product-info-max);
  padding: var(--product-info-padding);
}

.product-info__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.product-info__heading h1 {
  margin: 0;
  font-size: var(--product-title-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-catalog-heading);
}

.product-info__price {
  flex-shrink: 0;
  margin: 0;
  white-space: nowrap;
  font-size: var(--product-price-size);
}

.product-info__type {
  margin: var(--space-2) 0 var(--space-6);
  color: var(--catalog-muted);
  font-size: var(--font-size-catalog-label);
}

.product-color {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  font-size: var(--font-size-catalog-control);
}

.product-color p {
  margin: 0;
  color: var(--catalog-muted);
}

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

.product-color__swatch {
  width: var(--preview-button-size);
  height: var(--preview-button-size);
  border: 3px solid var(--color-white);
  border-radius: 50%;
  outline: 1px solid var(--catalog-border);
  background: var(--product-color-sand);
}

.product-size-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-catalog-label);
}

.product-text-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--catalog-control-height);
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--font-size-catalog-control);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

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

.product-sizes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.product-sizes label {
  position: relative;
}

.product-sizes .size-option {
  display: grid;
  place-items: center;
}

.product-sizes input:checked+.size-option {
  border-color: var(--color-text);
  color: var(--color-white);
  background: var(--color-text);
}

.product-sizes input:focus-visible+.size-option,
.product-page :focus-visible {
  outline: 2px solid var(--catalog-focus-color);
  outline-offset: 4px;
}

.product-size-hint,
.product-purchase__status {
  margin: var(--space-3) 0 var(--space-5);
  font-size: var(--font-size-catalog-caption);
  color: var(--catalog-muted);
}

.product-purchase__status:empty {
  margin: 0;
}

.product-add {
  min-height: var(--catalog-apply-height);
}

.product-information {
  margin-top: var(--space-6);
  border-top: 1px solid var(--catalog-border);
}

.product-information details {
  border-bottom: 1px solid var(--catalog-border);
}

.product-information summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
  list-style: none;
  cursor: pointer;
  font-size: var(--font-size-catalog-label);
}

.product-information summary::-webkit-details-marker {
  display: none;
}

.product-information summary::after {
  content: "+";
  font-size: var(--font-size-h3);
}

.product-information details[open] summary::after {
  content: "−";
}

.product-information p,
.product-information ul {
  margin: 0 0 var(--space-4);
  color: var(--catalog-muted);
  font-size: var(--font-size-catalog-control);
  line-height: var(--line-height-collection-description);
}

.product-information ul {
  padding-left: var(--space-4);
}

.product-article {
  margin: var(--space-4) 0 0;
  color: var(--catalog-muted);
  font-size: var(--font-size-catalog-caption);
}

.related-products {
  margin-top: var(--section-space);
  padding-top: var(--space-6);
  border-top: 1px solid var(--catalog-border);
}

.related-products__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.related-products__heading h2 {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
}

.related-products__heading a {
  flex-shrink: 0;
}

body.product-modal-open {
  overflow: hidden;
}

.product-dialog {
  width: min(var(--product-dialog-width), calc(100% - var(--space-5)));
  max-width: none;
  max-height: calc(100svh - var(--space-5));
  padding: var(--product-dialog-padding);
  border: 0;
  color: var(--color-text);
  background: var(--color-white);
}

.product-dialog::backdrop {
  background: var(--product-modal-backdrop);
}

.product-dialog__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.product-dialog__heading h2 {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
}

.product-dialog__close {
  flex-shrink: 0;
  width: var(--catalog-control-height);
  height: var(--catalog-control-height);
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--font-size-h2);
  cursor: pointer;
}

.size-guide__intro,
.size-guide__note p {
  color: var(--catalog-muted);
  font-size: var(--font-size-catalog-control);
}

.size-guide__table-wrap {
  overflow-x: auto;
}

.size-guide table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-catalog-control);
  text-align: center;
}

.size-guide th,
.size-guide td {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--catalog-border);
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
}

.size-guide thead,
.size-guide tr.is-selected {
  background: var(--collection-surface);
}

.size-guide tr.is-selected th {
  font-weight: var(--font-weight-semibold);
}

.size-guide__note {
  margin-top: var(--space-5);
}

.size-guide__note h3 {
  font-size: var(--font-size-catalog-label);
  font-weight: var(--font-weight-medium);
}

.size-guide__note p {
  margin-bottom: 0;
}

.product-lightbox {
  width: 100%;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--collection-surface);
}

.product-lightbox__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--product-lightbox-toolbar-height);
  padding-inline: var(--space-4);
  background: var(--color-white);
}

.product-lightbox__toolbar p {
  margin: 0;
  font-size: var(--font-size-catalog-control);
}

.product-lightbox__stage {
  height: calc(100% - var(--product-lightbox-toolbar-height));
  overflow: auto;
  overscroll-behavior: contain;
  text-align: center;
}

.product-lightbox__image-button {
  display: block;
  width: fit-content;
  max-width: 100%;
  height: 100%;
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.product-lightbox__image-button img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-lightbox.is-zoomed .product-lightbox__image-button {
  width: var(--product-lightbox-zoom-width);
  max-width: none;
  height: auto;
  cursor: zoom-out;
}

.product-lightbox.is-zoomed img {
  width: 100%;
  height: auto;
}

.product-lightbox__arrow {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: var(--catalog-control-height);
  height: var(--catalog-control-height);
  padding: 0;
  border: 1px solid var(--catalog-border);
  border-radius: 50%;
  background: var(--color-white);
  font-size: var(--font-size-h3);
  cursor: pointer;
}

.product-lightbox__arrow--prev {
  left: var(--space-4);
}

.product-lightbox__arrow--next {
  right: var(--space-4);
}

@media (max-width: 1199px) {
.catalog {
    grid-template-columns: var(--catalog-sidebar-compact-width) minmax(0, 1fr);
  }

.product-grid {
    gap: var(--product-grid-compact-gap);
  }

.catalog-product__info {
    column-gap: 5px;
  }

.catalog-product__name,
  .catalog-product__price {
    font-size: var(--font-size-catalog-caption);
  }
}

@media (max-width: 989px) {
.product-detail {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    row-gap: var(--space-4);
  }

.product-info__heading {
    flex-wrap: wrap;
  }

.product-sizes {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

.catalog {
    grid-template-columns: var(--catalog-sidebar-tablet-width) minmax(0, 1fr);
    gap: 26px;
  }

.product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--product-grid-tablet-gap);
  }

.catalog-product__name {
    font-size: var(--font-size-catalog-label);
  }

.catalog-product__price {
    font-size: var(--font-size-catalog-control);
  }

.collection-intro__copy {
    padding: 28px;
  }

.collection-intro__eyebrow {
    margin-bottom: 18px;
  }
}

@media (max-width: 749px) {
.product-detail {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

.product-info {
    position: static;
  }

.product-info__heading {
    flex-wrap: nowrap;
  }

.product-sizes {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

.related-products__heading {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }
}

@media (max-width: 649px) {
.collection-intro {
    grid-template-columns: 1fr;
  }

.collection-intro__copy {
    padding: 30px 24px;
  }

.collection-intro h1 {
    font-size: var(--font-size-collection-title-mobile);
  }

.collection-intro__image {
    height: auto;
    min-height: 0;
    max-height: var(--collection-image-mobile-height);
  }

.catalog {
    grid-template-columns: 1fr;
    gap: 32px;
  }

.catalog-filters {
    position: static;
  }

.catalog-filters h2 {
    padding-bottom: 16px;
    margin-bottom: 20px;
  }

#filter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

.filter-group {
    margin-bottom: 20px;
  }

.filter-group:has(.size-options) {
    grid-column: 1 / -1;
  }

.size-options {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

.filter-apply,
  #filter-form>.filter-clear {
    grid-column: 1 / -1;
  }

.preview-toggle {
    width: var(--catalog-control-height);
    height: var(--catalog-control-height);
    bottom: 6px;
    right: 6px;
  }

.catalog-product__info {
    gap: 5px;
  }

.catalog-product__name,
  .catalog-product__price {
    font-size: var(--font-size-catalog-caption);
  }

.catalog-product__description {
    font-size: var(--font-size-catalog-caption-mobile);
  }
}

@media (max-width: 359px) {
#filter-form {
    grid-template-columns: 1fr;
  }

.catalog-product__info {
    grid-template-columns: 1fr;
  }

.catalog-product__price {
    grid-row: 3;
  }
}

@media (max-height: 700px) {
.catalog-filters {
    position: static;
  }
}