/* Shared shop: existing escape-room purchases and free printable products. */
.shop-page { background: var(--surface-dark); color: var(--text-on-dark); padding-bottom: var(--space-80); }
.shop-intro { padding-block: var(--space-64) var(--space-40); }
.shop-intro h1 { margin-top: var(--space-12); font: var(--type-heading-lg); letter-spacing: var(--tracking-heading); }
.shop-intro > p:last-child { max-width: 52ch; margin-top: var(--space-20); color: var(--text-on-dark-muted); font: var(--type-prose); }
.shop-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--space-48); align-items: start; }
.shop-sidebar { position: sticky; top: calc(var(--header-height) + var(--space-24)); }
.shop-sidebar h2 { font: var(--type-small); font-weight: var(--weight-medium); margin-bottom: var(--space-16); }
.shop-sidebar nav > a { display: flex; gap: var(--space-16); align-items: center; justify-content: space-between; color: var(--text-on-dark-muted); font: var(--type-small); min-height: 48px; padding: var(--space-12); border-radius: var(--radius-control); text-decoration: none; }
.shop-sidebar nav > a[aria-current] { color: var(--text-on-dark); background: var(--surface-dark-raised); box-shadow: inset 3px 0 var(--color-yellow); }
.shop-sidebar nav > a span { font: var(--type-caption); }
.shop-sidebar-note { display: flex; align-items: flex-start; gap: var(--space-12); margin-top: var(--space-32); padding: var(--space-16) var(--space-12); border-top: 1px solid var(--line-dark); color: var(--text-on-dark-muted); font: var(--type-caption); }
.shop-sidebar-note svg { flex: 0 0 20px; width: 20px; height: 20px; }
.shop-results-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-16); }
.shop-results-heading h2 { font: var(--type-heading-md); }
.shop-results-heading p { color: var(--text-on-dark-muted); font: var(--type-small); }
.shop-filters { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-block: var(--space-20) var(--space-24); }
.shop-filters a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-8) var(--space-16); color: var(--text-on-dark-muted); border: 1px solid var(--line-dark); border-radius: var(--radius-control); text-decoration: none; font: var(--type-small); }
.shop-filters a[aria-current] { background: var(--color-yellow); border-color: var(--color-yellow); color: var(--color-black); }
.shop-filters a:hover, .shop-sidebar nav > a:hover { color: var(--text-on-dark); border-color: var(--text-on-dark-muted); }
.shop-filters a[aria-current]:hover { color: var(--color-black); }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
.shop-item { min-width: 0; overflow: clip; border: 1px solid var(--line-dark); border-radius: var(--radius-control); background: var(--surface-dark-raised); color: var(--text-on-dark); display: flex; flex-direction: column; }
.shop-item-art { position: relative; display: block; padding: var(--space-16); background: var(--surface-paper); }
.shop-item-art img { display: block; width: 100%; height: auto; aspect-ratio: 595 / 842; object-fit: contain; background: white; }
.shop-free { position: absolute; left: var(--space-12); top: var(--space-12); padding: var(--space-4) var(--space-8); background: var(--color-yellow); color: var(--color-black); border-radius: var(--radius-control); font: var(--type-caption); font-weight: var(--weight-medium); }
.shop-item-copy { display: flex; flex-direction: column; flex: 1; gap: var(--space-12); padding: var(--space-20); }
.shop-item-level { font: var(--type-caption); color: var(--text-on-dark-muted); }
.shop-item h3 { font: var(--type-body); font-weight: var(--weight-medium); line-height: 1.45; }
.shop-item h3 a { color: inherit; text-decoration: none; }
.shop-item h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.shop-item-format { font: var(--type-caption); color: var(--text-on-dark-muted); }
.shop-item-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12); margin-top: auto; padding-top: var(--space-12); }
.shop-item-action strong { font: var(--type-price-sm); }
.shop-item-action a { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 44px; color: var(--color-yellow); font: var(--type-caption); text-decoration: none; }
.shop-item-action svg { width: 16px; height: 16px; }
.shop-pack { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); padding: var(--space-24); margin-top: var(--space-40); border: 1px solid var(--line-dark); border-radius: var(--radius-control); background: var(--surface-dark-raised); color: var(--text-on-dark); }
.shop-pack > div { display: flex; align-items: flex-start; gap: var(--space-16); }
.shop-pack > div > svg { color: var(--color-yellow); flex: 0 0 28px; width: 28px; height: 28px; }
.shop-pack h2 { font: var(--type-heading-sm); }
.shop-pack p { margin-top: var(--space-8); color: var(--text-on-dark-muted); font: var(--type-small); max-width: 45ch; }
.shop-pack > a { flex-shrink: 0; }
.shop-product-section { padding-top: var(--space-24); }
.shop-product-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--space-64); margin-top: var(--space-24); }
.shop-product-preview { margin: 0; max-width: 560px; width: 100%; justify-self: center; }
.shop-product-preview img { display: block; width: 100%; height: auto; background: white; box-shadow: 0 16px 48px rgb(0 0 0 / .25); }
.shop-category-label { color: var(--color-yellow); font: var(--type-small); text-underline-offset: 4px; }
.shop-product-level { margin-top: var(--space-24); color: var(--text-on-dark-muted); font: var(--type-small); }
.shop-product-intro h1 { margin-top: var(--space-12); font: var(--type-heading-md); letter-spacing: var(--tracking-heading); }
.shop-product-intro > p:not(.shop-product-level) { margin-top: var(--space-20); color: var(--text-on-dark-muted); font: var(--type-prose); }
.shop-product-intro > .shop-product-task { color: var(--text-on-dark); }
.shop-product-facts { display: grid; gap: var(--space-12); padding: 0; margin-top: var(--space-24); list-style: none; }
.shop-product-facts li { display: flex; align-items: center; gap: var(--space-12); color: var(--text-on-dark-muted); font: var(--type-small); }
.shop-product-facts svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--color-yellow); }
.maze-product-card--entry { grid-template-columns: minmax(0, 1fr) auto; }
.maze-product-card--entry .maze-product-action { margin: 0; }
@media (max-width: 1100px) {
  .shop-layout { grid-template-columns: 175px minmax(0, 1fr); gap: var(--space-24); }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
  .shop-pack { flex-direction: column; align-items: flex-start; }
  .shop-product-layout { gap: var(--space-32); }
}
@media (max-width: 720px) {
  .shop-intro { padding-block: var(--space-40) var(--space-24); }
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .shop-sidebar { position: static; }
  .shop-sidebar nav { display: flex; flex-wrap: wrap; gap: var(--space-8); }
  .shop-sidebar h2 { flex: 0 0 100%; margin-bottom: 0; }
  .shop-sidebar nav > a { gap: var(--space-12); border: 1px solid var(--line-dark); }
  .shop-sidebar-note { display: none; }
  .shop-results-heading h2 { font: var(--type-heading-sm); }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
  .shop-item-art { padding: var(--space-8); }
  .shop-item-copy { padding: var(--space-12); }
  .shop-free { top: var(--space-4); left: var(--space-4); font-size: 10px; }
  .shop-item h3 { font: var(--type-small); font-weight: var(--weight-medium); }
  .shop-product-layout { grid-template-columns: minmax(0, 1fr); }
  .shop-product-preview { max-width: 420px; }
  .shop-product-intro { min-width: 0; }
  .maze-product-card--entry { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .shop-grid { grid-template-columns: minmax(0, 1fr); }
  .shop-item-art { padding: var(--space-16); }
  .shop-item-copy { padding: var(--space-16); }
}

.shop-results-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-8) var(--space-16); }
.shop-results-tools a { color: var(--color-yellow); min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; }

.shop-sections { min-width: 0; display: grid; gap: var(--space-64); }
.shop-room-grid { margin-top: var(--space-24); }
.shop-item--room .shop-item-art { padding: 0; background: var(--surface-dark-raised); }
.shop-item--room .shop-item-art img { aspect-ratio: 16 / 10; object-fit: cover; }
.shop-room-summary { color: var(--text-on-dark-muted); font: var(--type-small); }
.shop-room-price { margin-top: auto; padding-top: var(--space-8); font: var(--type-price-sm); }
.shop-room-detail { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 44px; color: var(--color-yellow); font: var(--type-small); }
.shop-room-detail svg { width: 16px; height: 16px; }
.shop-item--room .button { width: 100%; min-width: 0; white-space: normal; }
.shop-vat-note { margin-top: var(--space-20); font: var(--type-caption); color: var(--text-on-dark-muted); }