/* Collection-specific composition from the approved mockup, using Arch tokens.
   Photography uses contain to preserve the approved assets and their watermark. */
.widget-product .widget-container { margin-block-start: calc(var(--space-xl) * var(--spacing-scale)); }
.product-overview { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.product-gallery { display: flex; align-items: flex-start; gap: var(--space-md); min-width: 0; }
.product-thumbnails { display: grid; gap: var(--space-sm); flex: 0 0 15%; }
.product-thumbnail label { display: block; border: var(--border-width-medium) solid transparent; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; }
.product-thumbnail:has(input:checked) label { border-color: var(--accent); }
.product-thumbnail input:focus-visible + label { outline: var(--border-width-medium) solid var(--text-heading); outline-offset: var(--space-xs); }
.product-thumbnail-image { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; background: var(--bg-secondary); }
.product-photos { flex: 1; min-width: 0; }
.product-photo { margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-secondary); }
.product-photo-extra { display: none; }
.product-image { display: block; width: 100%; height: auto; }
.product-summary { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); min-width: 0; }
.product-heading { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.product-category { color: var(--accent); text-decoration: none; }
.product-description { width: 100%; }
.product-assurances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); list-style: none; padding: 0; margin: var(--space-sm) 0; width: 100%; }
.product-assurances li { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
.product-assurances li + li { border-inline-start: var(--border-width-thin) solid var(--border-color); padding-inline-start: var(--space-sm); }
.product-assurances svg { color: var(--accent); width: var(--space-2xl); height: var(--space-2xl); }
.product-contact { width: 100%; justify-content: center; text-align: center; white-space: normal; gap: var(--space-sm); }
.product-contact > span { display: flex; align-items: center; flex-shrink: 0; }
.product-contact svg { display: block; width: var(--space-lg); height: var(--space-lg); }
.product-back, .product-all { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; }
.product-back { color: var(--text-content); }
.product-related-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-block-end: var(--space-lg); }
.product-all { color: var(--accent); }
.product-related-grid { --card-image-ratio: 3 / 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); list-style: none; padding: 0; margin: 0; }
.product-related-grid > [hidden] { display: none; }
.widget-product a:focus-visible, .product-all:focus-visible { outline: var(--border-width-medium) solid var(--accent); outline-offset: var(--space-xs); }
@media (max-width: 989px) {
  .product-overview { grid-template-columns: minmax(0, 1fr); }
  .product-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .product-related-grid { grid-template-columns: minmax(0, 1fr); }
  .product-related-heading { flex-direction: column; align-items: flex-start; }
  .product-assurances { grid-template-columns: minmax(0, 1fr); }
  .product-assurances li + li { border-inline-start: 0; padding-inline-start: 0; }
  .product-gallery { flex-direction: column-reverse; }
  .product-thumbnails { display: flex; flex-wrap: wrap; width: 100%; }
  .product-thumbnail { width: var(--space-5xl); }
  .product-photos { width: 100%; }
}