.ssg-wrapper {
  box-sizing: border-box;
  width: 100%;
  padding: 30px 20px;
  background: #f3efea;
}

.ssg-wrapper *, .ssg-wrapper *::before, .ssg-wrapper *::after { box-sizing: border-box; }
.ssg-intro { max-width: 800px; margin: 0 auto 32px; text-align: center; }

.ssg-filter-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 34px;
  margin-bottom: 28px;
  color: #34302d;
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ssg-fb-left, .ssg-fb-middle { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ssg-fb-right { margin-left: auto; white-space: nowrap; }
.ssg-fb-label { flex: none; font-size: 13px; font-weight: 700; letter-spacing: 2px; }
.ssg-fb-left > .ssg-fb-label { font-weight: 400; }
.ssg-filter-control { position: relative; min-width: 0; }
.ssg-filter-toggle, .ssg-sort-select {
  min-height: 32px;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 1.4px;
  text-transform: none;
  cursor: pointer;
}
.ssg-filter-toggle { display: flex; align-items: center; gap: 9px; padding: 4px 2px; text-align: left; }
.ssg-sort-select { max-width: 235px; padding: 4px 24px 4px 2px; }
.ssg-filter-toggle:focus-visible, .ssg-sort-select:focus-visible,
.ssg-filter-clear:focus-visible,
.ssg-card:focus-visible { outline: 2px solid #28221e; outline-offset: 3px; }
.ssg-selected-count {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 100px;
  background: #34302d;
  color: #fff;
  text-align: center;
  line-height: 1.3;
}
.ssg-selected-count[hidden] { display: none; }
.ssg-chevron { width: 7px; height: 7px; margin: -3px 2px 0 4px; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg); }
.ssg-filter-toggle[aria-expanded="true"] .ssg-chevron { margin-top: 3px; transform: rotate(225deg); }
.ssg-filter-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 20px 28px;
  width: min(580px, calc(100vw - 40px));
  max-height: min(70vh, 600px);
  overflow: auto;
  padding: 24px;
  border: 1px solid #d8d1ca;
  background: #f8f4ef;
  box-shadow: 0 12px 28px rgba(28, 22, 17, .1);
  color: #27231f;
  text-transform: none;
  letter-spacing: 0;
}
.ssg-filter-panel[hidden] { display: none; }
.ssg-filter-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.ssg-filter-group legend {
  width: 100%;
  margin-bottom: 14px;
  padding: 0 0 6px;
  border-bottom: 1px solid #d8d1ca;
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.ssg-filter-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 10px 0;
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.ssg-filter-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
}
.ssg-filter-option__box {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  border: 2px solid currentColor;
  border-radius: 1px;
  background: transparent;
}
.ssg-filter-option input:checked + .ssg-filter-option__box::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: currentColor;
}
.ssg-filter-option input:focus-visible + .ssg-filter-option__box { outline: 2px solid currentColor; outline-offset: 3px; }
.ssg-filter-clear {
  justify-self: start;
  padding: 2px 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: Georgia, serif;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ssg-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 20px;
  align-items: stretch;
}
.ssg-card {
  display: flex;
  grid-column: span 2;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  color: inherit;
  text-decoration: none !important;
}
.ssg-card--hero { grid-column: span 4; grid-row: span 2; }
.ssg-card--wide { grid-column: span 3; }
.ssg-card--full { grid-column: span 6; }
.ssg-image { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #fffcfa; }
.ssg-card--hero .ssg-image { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
.ssg-card--full .ssg-image { aspect-ratio: 2 / 1; }
.ssg-image img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .45s ease; }
.ssg-card--hero .ssg-image img { object-fit: cover; }
.ssg-card:hover .ssg-image img { transform: scale(1.025); }
.ssg-placeholder { width: 100%; height: 100%; background: rgba(0, 0, 0, .025); }
.ssg-content { flex: none; padding: 10px 0 0; }
.ssg-title { margin: 0 0 2px; color: #1a1a1a; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .02em; }
.ssg-subtitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35em; color: #6b6662; font-size: 12px; line-height: 1.4; }
.ssg-designer-label, .ssg-designer-name { min-width: 0; }
.ssg-no-results, .ssg-notice { padding: 30px 12px; text-align: center; color: #645e58; }
.ssg-no-results[hidden] { display: none; }

@media (max-width: 1024px) {
  .ssg-filter-bar { flex-wrap: wrap; gap: 12px 24px; }
  .ssg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssg-card, .ssg-card--wide { grid-column: span 1; }
  .ssg-card--hero, .ssg-card--full { grid-column: span 2; grid-row: span 1; }
  .ssg-card--hero .ssg-image { flex: none; aspect-ratio: 1.6 / 1; }
}
@media (max-width: 767px) {
  .ssg-wrapper { padding: 22px 14px; }
  .ssg-filter-bar { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
  .ssg-fb-left { grid-column: 1 / -1; position: relative; }
  .ssg-filter-control { position: static; }
  .ssg-fb-middle { grid-column: 1 / -1; }
  .ssg-fb-right { grid-column: 1 / -1; margin-left: 0; justify-self: start; align-self: start; }
  .ssg-sort-select { max-width: min(52vw, 220px); }
  .ssg-filter-panel { grid-template-columns: 1fr; left: 0; right: 0; width: 100%; padding: 18px; }
  .ssg-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ssg-card, .ssg-card--hero, .ssg-card--wide, .ssg-card--full { grid-column: 1; grid-row: auto; }
  .ssg-image, .ssg-card--hero .ssg-image, .ssg-card--full .ssg-image { flex: none; aspect-ratio: 1.1 / 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ssg-image img { transition: none; }
}