.shop-page { background: var(--paper); }
.shop-banner {
  min-height: 224px;
  color: white;
  background: linear-gradient(90deg, #0d1c24c9 0%, #142d3982 45%, #142d392e 100%), url('/assets/img/footer-travel.jpg') center 53%/cover no-repeat;
}
.shop-banner-inner { min-height: 224px; display: flex; justify-content: space-between; align-items: end; gap: 32px; padding-top: 38px; padding-bottom: 34px; }
.shop-banner h1 { color: white; font-size: clamp(3.2rem, 5.2vw, 5rem); line-height: 1; margin: 0 0 12px; text-shadow: 0 2px 12px #0d1c2452; }
.shop-banner p { margin: 0; font: 400 clamp(1rem, 1.6vw, 1.35rem)/1.35 'Playfair Display', Georgia, serif; }
.shop-banner-motto { align-self: end; padding-bottom: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .34em; white-space: nowrap; text-shadow: 0 1px 7px #0d1c24; }
.shop-banner-motto b { font-size: .7rem; padding: 0 9px; }
.shop-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 30px; padding-top: 28px; padding-bottom: 80px; }
.shop-sidebar { min-width: 0; }
.shop-sidebar-search { padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--cream); }
.shop-sidebar-search label { display: block; margin-bottom: 7px; font-size: .83rem; font-weight: 700; }
.shop-sidebar-search>div { display: flex; min-height: 42px; border: 1px solid #cbd5da; border-radius: 4px; background: white; }
.shop-sidebar-search input { width: 100%; min-width: 0; padding: 9px 10px; border: 0; background: transparent; font-size: .75rem; outline: 0; }
.shop-sidebar-search button { display: grid; place-items: center; flex: 0 0 42px; border: 0; background: transparent; color: var(--ink); }
.shop-sidebar-search button .icon { width: 19px; height: 19px; }
.shop-sidebar-search>div:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.shop-filter-panel { margin-top: 12px; }
.shop-filter-panel>summary { display: none; }
.shop-filter-group { margin-bottom: 12px; }
.shop-filter-group>summary { list-style: none; min-height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 7px 11px; background: var(--cream); border-radius: 4px; font-size: .82rem; font-weight: 700; cursor: pointer; }
.shop-filter-group>summary::-webkit-details-marker, .shop-filter-panel>summary::-webkit-details-marker { display: none; }
.shop-filter-group>summary:after { content: '⌄'; font-size: 1.1rem; line-height: 1; transform: rotate(180deg); }
.shop-filter-group:not([open])>summary:after { transform: none; }
.shop-filter-options { padding: 7px 8px 4px; }
.shop-option { display: grid; grid-template-columns: 17px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 27px; color: var(--ink); font-size: .75rem; line-height: 1.25; }
.shop-option:hover, .shop-option.is-selected { color: var(--blue); }
.shop-option.is-selected { font-weight: 700; }
.shop-option-check { width: 15px; height: 15px; border: 1px solid #b7c1c5; border-radius: 3px; background: white; }
.shop-option.is-selected .shop-option-check { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 3px white; }
.shop-option small { font-size: .69rem; color: var(--muted); }
.shop-color-options { display: flex; flex-wrap: wrap; gap: 9px; padding: 13px 10px; }
.shop-color { display: block; width: 25px; height: 25px; border-radius: 50%; background: var(--swatch); border: 1px solid #24394433; }
.shop-color.is-selected { outline: 2px solid var(--blue); outline-offset: 3px; }
.shop-clear { display: grid; place-items: center; min-height: 44px; margin: 15px 8px 0; border-radius: 4px; color: white; background: var(--green); font-size: .78rem; font-weight: 700; }
.shop-clear:hover { background: var(--blue); }
.shop-results { min-width: 0; }
.shop-results-bar { display: flex; align-items: end; justify-content: space-between; gap: 20px; min-height: 36px; padding: 0 2px 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.shop-results-bar h2 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.shop-results-bar p { margin: 4px 0 0; color: var(--muted); font-size: .76rem; }
.shop-sort { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.shop-sort label { font-size: .72rem; color: var(--muted); }
.shop-sort select { min-width: 132px; min-height: 38px; padding: 6px 10px; border: 1px solid #cbd5da; border-radius: 4px; background: white; color: var(--ink); font-size: .77rem; }
.shop-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.shop-card { min-width: 0; padding: 5px; border: 1px solid #eef0f0; border-radius: 5px; background: #fafaf9; }
.shop-card-media { position: relative; overflow: hidden; aspect-ratio: 2/3; background: #eeefec; border-radius: 3px; }
.shop-card-media>a { display: block; width: 100%; height: 100%; }
.shop-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.shop-card:hover .shop-card-media img { transform: scale(1.025); }
.shop-favorite { position: absolute; top: 1px; right: 1px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; color: var(--ink); background: transparent; }
.shop-favorite:before { content: ''; position: absolute; width: 31px; height: 31px; border: 1px solid #cbd5da; border-radius: 50%; background: #fffffff0; }
.shop-favorite .icon { position: relative; width: 19px; height: 19px; }
.shop-favorite[aria-pressed="true"] { color: var(--coral); }
.shop-favorite[aria-pressed="true"]:before { border-color: var(--coral); }
.shop-favorite[aria-pressed="true"] .icon { fill: currentColor; }
.shop-card-info { padding: 8px 3px 3px; }
.shop-card h3 { margin: 0; font: 700 .85rem/1.25 'DM Sans', Arial, sans-serif; letter-spacing: -.015em; }
.shop-card h3 a:hover { color: var(--blue); }
.shop-card-artist { margin: 3px 0 0; color: var(--muted); font-size: .69rem; line-height: 1.25; }
.shop-card-price { display: block; margin: 7px 0 5px; font-size: .85rem; line-height: 1.2; }
.shop-card-sizes { display: flex; flex-wrap: wrap; gap: 4px; }
.shop-card-sizes span { padding: 3px 5px; border: 1px solid #cbd5da; border-radius: 3px; background: white; color: var(--ink); font-size: .61rem; line-height: 1.15; white-space: nowrap; }
.shop-card-unavailable { margin: 8px 0 0; color: var(--muted); font-size: .72rem; }
.shop-results .pagination { margin-top: 32px; }
@media (max-width: 1200px) {
  .shop-shell { grid-template-columns: 230px minmax(0,1fr); gap: 24px; }
  .shop-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .shop-banner-motto { letter-spacing: .2em; }
}
@media (max-width: 950px) {
  .shop-shell { display: block; padding-top: 22px; }
  .shop-sidebar { margin-bottom: 22px; }
  .shop-sidebar-search { max-width: 100%; }
  .shop-filter-panel>summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px; font-size: .8rem; font-weight: 700; cursor: pointer; }
  .shop-filter-panel>summary span { color: var(--muted); font-size: .68rem; font-weight: 400; }
  .shop-filter-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 18px; padding-top: 12px; }
  .shop-filter-group { margin: 0; }
  .shop-filter-group:first-child { grid-row: span 2; }
  .shop-option { min-height: 42px; }
  .shop-color { width: 34px; height: 34px; }
  .shop-clear { align-self: start; }
  .shop-banner-motto { display: none; }
}
@media (max-width: 700px) {
  .shop-banner, .shop-banner-inner { min-height: 190px; }
  .shop-banner-inner { padding-top: 30px; padding-bottom: 27px; }
  .shop-banner h1 { font-size: clamp(2.8rem, 11vw, 4rem); }
  .shop-banner p { font-size: 1rem; }
  .shop-filter-groups { display: block; }
  .shop-filter-group { margin-bottom: 10px; }
  .shop-results-bar { align-items: start; }
  .shop-results-bar h2 { font-size: 1.2rem; }
  .shop-sort { gap: 5px; }
  .shop-sort label { display: none; }
  .shop-sort select { min-width: 115px; max-width: 125px; }
  .shop-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .shop-card { padding: 4px; }
  .shop-favorite { top: 0; right: 0; }
  .shop-card h3 { font-size: .78rem; }
  .shop-card-sizes span { font-size: .56rem; padding: 3px 4px; }
}