#catalog.catalog-section { padding-block: clamp(26px,4vw,48px); }
#catalog .section-label, #catalog .section-intro { display: none; }
#catalog .catalog-heading { align-items: center; flex-wrap: wrap; margin: 0; gap: 7px 15px; }
#catalog-title {
  margin: 0; font: 500 clamp(24px,3vw,36px)/1.1 var(--serif);
  letter-spacing: -.035em;
}
#catalog .q-catalog-tools { display: flex; gap: 8px; align-items: center; }
#catalog #quiz-btn { min-height: 34px; padding: 5px 12px; border-radius: 999px; font: 600 12px/1.25 var(--sans); }
#catalog-count { font: 600 11px/1.3 var(--sans); letter-spacing: 0; color: var(--muted); }
#catalog .catalog-tools { align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 14px; }
#catalog .catalog-tools .filters { margin: 0; gap: 4px; }
#catalog .filter-chip { border-radius: 999px; min-height: 31px; padding: 5px 10px; font-size: 12px; }
#catalog .select-pickers { flex-wrap: wrap; gap: 7px 10px; }
#catalog .material-field { font-size: 11px; }
#catalog .material-field select { max-width: 155px; min-height: 32px; border-radius: 10px; font-size: 12px; }
#catalog-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
#catalog-grid .item-card {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0; aspect-ratio: 1;
  border: 1px solid var(--rule); border-radius: 22px; background: var(--paper-2); color: var(--on-dark);
}
#catalog-grid .item-media {position:absolute; inset:0; isolation:auto; aspect-ratio:auto; border:0; border-radius:inherit; background:var(--paper-2)}
#catalog-grid .item-open, #catalog-grid .item-open img {display:block; width:100%; height:100%; border-radius:inherit}
#catalog-grid .item-open img {object-fit:cover}
#catalog-grid .item-open[data-id="tap-49122235"] img,
#catalog-grid .item-open[data-id="lalafo-117024910"] img {object-position:50% 65%}
#catalog-grid .item-open[data-id="lalafo-110047502"] img {object-position:50% 85%}
#catalog-grid .item-open[data-id="lalafo-113174996"] img {object-position:50% 57%}
/* The lamp was photographed in a panoramic frame. Keep its full silhouette
   against a softened continuation of the same seller photograph. */
#catalog-grid .item-open[data-id="lalafo-116327480"] {position:relative; overflow:hidden}
#catalog-grid .item-open[data-id="lalafo-116327480"]::before {content:""; position:absolute; inset:-18px; background:center / cover url("/assets/regional-glass-lamp.jpg"); filter:blur(16px)}
#catalog-grid .item-open[data-id="lalafo-116327480"] img {position:relative; object-fit:contain}
#catalog-grid .item-save {
  position:absolute; z-index:3; right:8px; top:8px; display:grid; place-items:center;
  width:40px; height:40px; padding:0; border:1px solid var(--paper); border-radius:50%;
  background:color-mix(in srgb, var(--paper) 94%, transparent); color:var(--ink); box-shadow:0 1px 6px color-mix(in srgb, var(--night) 18%, transparent);
}
#catalog-grid .item-save.is-saved {color:var(--on-dark); background:var(--wine); border-color:color-mix(in srgb, var(--on-dark) 60%, transparent)}
#catalog-grid .item-save.is-saved svg {fill:currentColor}
#catalog-grid .item-info, #catalog-grid .item-info h3 {padding:0; margin:0}
/* The photo button handles pointer activation. Keep the title as the native
   keyboard button and show its focus on the entire tile. */
#catalog-grid .item-title, #catalog-grid .item-location {
  position:absolute; width:1px; height:1px; top:50%; left:50%; padding:0; margin:0;
  overflow:hidden; white-space:nowrap; clip-path:inset(50%); border:0;
}
#catalog-grid .item-price {
  position:absolute; z-index:2; left:9px; bottom:9px; display:inline-flex; flex-wrap:wrap; align-items:baseline;
  gap:1px 5px; max-width:calc(100% - 18px); padding:6px 10px; margin:0; border-radius:15px;
  background:color-mix(in srgb, var(--night) 91%, transparent); color:var(--on-dark); font:650 14px/1.18 var(--sans); pointer-events:none;
}
#catalog-grid .item-price > span {color:inherit; white-space:nowrap}
#catalog-grid .item-unit {margin:0; color:var(--on-dark); font:450 11px/1.25 var(--sans)}
#catalog-grid .item-illustration {top:9px; left:9px; bottom:auto; right:auto; border-radius:20px}
#catalog-grid .item-card:focus-within {outline:3px solid var(--brass); outline-offset:3px}
#catalog-grid .item-save:focus-visible {outline:2px solid var(--on-dark); outline-offset:0; box-shadow:0 0 0 4px var(--night)}
@media(max-width:900px) {#catalog-grid {grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px}}
@media(max-width:640px) {
  #catalog-grid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  #catalog-grid .item-card {border-radius:17px}
  #catalog-grid .item-save {top:6px; right:6px}
  #catalog-grid .item-price {left:6px; bottom:6px; max-width:calc(100% - 12px); padding:5px 7px; font-size:13px}
}
@media(pointer:coarse) {#catalog-grid .item-save {min-width:44px; min-height:44px}}
@media(prefers-reduced-motion:reduce) {#catalog-grid .item-open img {transition:none; transform:none}}
#dialog[data-mode="favorites"] { width: min(450px,calc(100% - 28px)); border: 1px solid var(--rule); border-radius: 22px; background:var(--paper); }
.saved-panel { padding: clamp(22px,5vw,30px); }
.saved-panel #dialog-title { margin: 0 38px 14px 0; font: 400 clamp(26px,5vw,32px)/1.15 var(--serif); letter-spacing:-.025em; color:var(--ink); }
#dialog[data-mode="favorites"] .dialog-close { width:40px; height:40px; border-color:var(--rule); background:var(--paper-2); }
.saved-rows { display: grid; gap: 7px; padding: 0; margin: 0; list-style: none; }
.saved-rows li {
  display: flex; align-items: center; gap: 5px; padding: 5px 9px 5px 5px;
  border: 1px solid var(--rule); border-radius: 14px; background: var(--paper);
}
.saved-row { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; padding: 0; text-align: left; }
.saved-row img { flex: none; width: 54px; height: 54px; object-fit: cover; border-radius: 9px; }
.saved-row span { display: grid; gap: 3px; min-width: 0; }
.saved-row strong { font: 600 14px/1.26 var(--sans); color: var(--ink); overflow-wrap:anywhere; }
.saved-row small { font: 400 12px/1.4 var(--sans); color: var(--muted); overflow-wrap:anywhere; }
.saved-panel .item-save { position: static; width: 40px; height: 40px; flex: none; border-radius: 50%; }
.saved-panel .item-save.is-saved { background: var(--wine); color: var(--on-dark); }
.saved-panel .item-save.is-saved svg { fill: currentColor; }
.saved-back { display: inline-flex; margin: 7px 42px 0 12px; padding: 7px; min-height: 35px; color: var(--wine); font-size: 13px; }
.saved-empty { margin: 0 auto 20px; text-align:center; max-width: 34ch; color: var(--muted); font:400 15px/1.5 var(--sans); text-wrap:pretty; }
.saved-continue { display:flex; width:max-content; max-width:100%; margin-inline:auto; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:10px 16px; border-radius:999px; background:var(--wine); color:var(--on-dark); font:600 14px/1.3 var(--sans); }
.saved-continue:hover { background:var(--night); }
@media(pointer:coarse) { .saved-panel .item-save, #dialog[data-mode="favorites"] .dialog-close { width:44px; height:44px; } }
#dialog[data-mode="detail"] { border-radius:22px; background:var(--paper); }
.detail-info .dialog-kicker { margin-bottom:6px; font:500 12px/1.4 var(--sans); letter-spacing:0; text-transform:none; color:var(--muted); }
.detail-info .dialog-title { margin:0; color:var(--ink); font:400 clamp(25px,3.2vw,37px)/1.12 var(--serif); letter-spacing:-.026em; overflow-wrap:anywhere; }
.detail-base { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 6px; margin:9px 0; color:var(--ink); }
.detail-base strong { font:600 20px/1.2 var(--sans); white-space:nowrap; }
.detail-base .item-unit { margin:0; font:400 14px/1.35 var(--sans); color:var(--muted); }
.detail-info .quote-box { margin:10px 0 12px; padding:0; border-color:var(--rule); }
.detail-info .quote-box summary { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:44px; cursor:pointer; list-style:none; font:550 14px/1.35 var(--sans); color:var(--wine); }
.detail-info .quote-box summary::-webkit-details-marker { display:none; }
.detail-info .quote-box summary output { margin-left:auto; }
.detail-info .quote-box summary::after { content:""; width:7px; height:7px; flex:none; margin:0 6px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
.detail-info .quote-box[open] summary::after { transform:rotate(225deg); }
.detail-info .quote-box summary:focus-visible { outline:2px solid var(--brass); outline-offset:1px; }
.detail-info .quote-note { padding-bottom:10px; }
.detail-info .dialog-description { margin:14px 0 5px; color:var(--ink); font:400 15px/1.45 var(--sans); }
.detail-info .detail-status,.detail-info .detail-source { margin:5px 0; line-height:1.45; }
@media(max-width:700px) {
  .detail-info { padding:15px 18px 20px; }
  .detail-visual img { height:clamp(125px,27dvh,200px); }
  .detail-visual figcaption { padding:4px 16px; font:400 11px/1.4 var(--sans); }
  .detail-info .quote-field input,.detail-info .quote-field select { font-size:16px; min-height:38px; }
}