.results {
  --shot-h: 754px;
  display: flex;
  flex-direction: column;
  width: min(1240px, 100vw - 48px);
  max-height: calc(100vh - 88px);
  margin-top: 24px;
  cursor: auto;
}
@supports (height: 100dvh) {
  .results { max-height: calc(100dvh - 88px) }
}
.l-pane, .l-side {
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--line);
  overflow: hidden;
}
.l-pane {
  position: relative;
  min-height: 0;
  display: grid;
}
.results-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 12px;
}
.results.is-single { width: min(960px, 100vw - 48px) }
.results.is-single .results-body { grid-template-columns: minmax(0, 1fr) }

.results.is-scroll .l-shot { align-self: start; height: var(--shot-h); position: sticky; top: -32px }
.l-lead { scrollbar-width: thin; scrollbar-color: oklch(0 0 0 / .22) transparent }
.l-lead::-webkit-scrollbar { width: 10px; background: transparent }
.l-lead::-webkit-scrollbar-track { background: transparent }
.l-lead::-webkit-scrollbar-thumb {
  background: oklch(0 0 0 / .18);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
}
.l-lead::-webkit-scrollbar-thumb:hover { background: oklch(0 0 0 / .34); background-clip: padding-box }

.l-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-areas: "shot col";
  gap: 0 36px;
  padding: 32px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
@supports (zoom: 1) {
  .l-lead { overflow-y: hidden }
}
.results img.r-shot {
  flex: 0 0 auto;
  margin: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.l-shot {
  grid-area: shot;
  position: relative;
  min-height: var(--shot-h);
  margin: -32px 0 -32px -32px;
  overflow: hidden;
  background: var(--tile);
}
.l-shot img.r-shot { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; opacity: 0 }
.l-shot.is-fit img.r-shot { opacity: 1; transition: opacity .15s }
.l-ghost { position: absolute; inset: 0; pointer-events: none }
.l-col { grid-area: col; display: flex; flex-direction: column; gap: 18px; min-width: 0 }
.l-head { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.l-head h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.4px;
  line-height: 1.3;
}
.l-head .price-row { flex: 0 0 auto; margin: 0; padding: 0 }
.l-head .price { font-size: 21px; font-weight: 400; letter-spacing: -.3px; color: inherit }
.l-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.l-figure { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--tile); border-radius: 10px }
.l-figure span { font-size: 12px; color: var(--muted) }
.l-figure strong { font-size: 15px; font-weight: 600; line-height: 1.3 }
.l-rows { margin: 0 }
.l-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0 }
.l-rows dt { flex: 0 0 auto; font-size: 13px; color: var(--muted) }
.l-rows dd { margin: 0; font-size: 13.5px; text-align: right }
.l-shops .shop-grid { grid-template-columns: 1fr; margin-top: 0 }
.l-shops .buy-btn.shop-search { margin-top: 8px }
.l-shops .shop-grid .buy-btn.is-shop { padding: 13px 16px }
.l-col { align-self: stretch }
.l-shops { margin-top: auto }
.l-tabs { display: none }
.l-specs { display: contents }
.results img.shop-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  margin: 0;
  mix-blend-mode: normal;
  border-radius: 4px;
}
.results img.amz {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(calc(-50% + 1px));
  width: 16.4px;
  height: 17px;
  margin: 0;
  mix-blend-mode: normal;
}

.l-side { position: relative; height: 0; min-height: 100% }
.l-list {
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
}
.l-list.no-fade { -webkit-mask-image: none; mask-image: none }
.l-list::-webkit-scrollbar { display: none }
.l-bar {
  position: absolute;
  top: 0;
  right: 3px;
  width: 4px;
  border-radius: 999px;
  background: oklch(0 0 0 / .22);
  cursor: grab;
  touch-action: none;
  opacity: 0;
  transition: opacity .2s, background .15s, width .15s;
}
.l-side:hover .l-bar, .l-bar.is-drag { opacity: 1 }
.l-drawer { display: none }
.l-close { display: none }
.l-track { display: contents }
.l-peek { display: none }
.l-bar:hover, .l-bar.is-drag { width: 6px; background: oklch(0 0 0 / .34) }
.l-bar.is-drag { cursor: grabbing }
.l-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 11px 20px;
  text-align: left;
  transition: background .18s;
}
.l-item:hover { background: var(--tile) }
.l-item[aria-current="true"] { background: var(--tile-hover) }
.l-thumb { position: relative; flex: 0 0 26px; width: 26px; height: 40px; overflow: hidden }
.l-thumb img.r-shot { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none }
.l-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column }
.l-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.l-price { font-size: 12px; color: var(--muted) }

.l-tag { flex: 0 0 auto; margin-left: auto; padding: 3px 7px; border-radius: 6px; background: var(--tile); font-size: 11px; font-weight: 500; color: var(--muted-strong) }
.l-item[aria-current="true"] .l-tag, .l-item:hover .l-tag { background: var(--surface) }

@media (max-width: 1100px) {
  .results-body { grid-template-columns: minmax(0, 1fr) 260px }
  .l-lead { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 28px }
}

@keyframes l-specs-fade {
  0%, 90% { --fade: 40px }
  100% { --fade: 0px }
}
@media (max-width: 700px) {
  .results, .results.is-single {
    width: calc(100vw - 16px);
    height: calc(100vh - 36px - env(safe-area-inset-bottom, 0px));
    max-height: none;
    margin-top: 12px;
    background: none;
    overflow: visible;
  }
  .results-body { position: relative; display: flex; flex-direction: column; gap: 8px; overflow: visible }
  .l-pane, .l-side { border-radius: 14px; box-shadow: none }
  .l-pane { flex: 1 1 auto; display: grid; min-height: 0 }
  .results:not(.is-single) { width: calc(100vw - 48px) }
  .l-track { position: relative; flex: 1 1 auto; min-height: 0; display: grid }
  .l-peek { position: absolute; top: 0; bottom: 0; width: 100%; display: grid; pointer-events: none }
  .l-peek[hidden] { display: none }
  .l-peek[data-side="-1"] { right: calc(100% + 8px) }
  .l-peek[data-side="1"] { left: calc(100% + 8px) }
  .l-lead {
    grid-template-columns: 1fr;
    grid-template-areas: "shot" "col";
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px 0;
    padding: 16px 18px 14px;
    overflow: hidden;
  }
  .l-shot { min-height: 0; height: clamp(140px, 23vh, 240px); margin: 0; background: none }
  .l-pane { touch-action: pan-y }
  .l-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    border-radius: 50%;
  }
  .l-close svg { width: 20px; height: 20px }
  .l-close:active { color: var(--ink); background: var(--tile) }
  .l-col { gap: 12px; min-height: 0; overflow: hidden }
  .l-head { gap: 2px }
  .l-head h2 { font-size: 20px; letter-spacing: -.3px }
  .l-head .price { font-size: 19px }
  .l-tabs { display: flex; margin-top: 0 }
  .l-specs {
    flex: 0 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 9px;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: none;
  }
  .l-specs::-webkit-scrollbar { display: none }
  @supports (animation-timeline: scroll()) {
    .l-specs {
      -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent);
      mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent);
      animation: l-specs-fade linear both;
      animation-timeline: scroll(self block);
    }
  }
  .l-figures, .l-rows { display: contents }
  .l-figure, .l-rows div { display: flex; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; min-width: 0; padding: 0; background: none; border-radius: 0 }
  .l-figure span, .l-rows dt { flex: 0 0 auto; font-size: 13px; color: var(--muted) }
  .l-figure strong, .l-rows dd { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.35; text-align: right; overflow-wrap: anywhere }
  .l-shops .shop-grid { grid-template-columns: 1fr; gap: 8px }
  .l-shops .shop-grid .buy-btn.is-shop { padding: 13px 16px }
  .l-pane:not([data-tab="shops"]) .l-shops:not(.no-tabs) .shop-grid { display: none }
  .l-pane[data-tab="shops"] .l-specs:has(+ .l-shops:not(.no-tabs)) { display: none }
  .l-pane[data-tab="shops"] .l-shops:not(.no-tabs) { flex: 1 1 auto; display: flex; flex-direction: column; margin-top: 0 }
  .l-pane[data-tab="shops"] .l-shops:not(.no-tabs) .shop-search { margin-top: auto }
  .l-shops .buy-btn.shop-search { padding-top: 14px; padding-bottom: 14px }
  .l-bar { display: none }

  .l-side { flex: 0 0 auto; display: flex; flex-direction: column; height: auto; min-height: 0; z-index: 2 }
  .l-drawer { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; text-align: left; color: var(--ink) }
  .l-current { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px }
  .l-drawer svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--muted-strong); transition: transform .2s }
  .l-list { display: none; height: auto; -webkit-mask-image: none; mask-image: none }
  .l-item { padding: 11px 14px }

  .results.is-drawer .l-side {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 78%;
    box-shadow: 0 0 0 1px var(--line), 0 -8px 24px oklch(0 0 0 / .14);
  }
  .results.is-drawer .l-drawer { border-bottom: 1px solid var(--line) }
  .results.is-drawer .l-drawer svg { transform: rotate(180deg) }
  .results.is-drawer .l-list { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px }
  .results.is-drawer .l-pane::after {
    content: ""; position: absolute; inset: 0; z-index: 1; background: oklch(0 0 0 / .28);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
}
@supports (height: 100dvh) {
  @media (max-width: 700px) {
    .results, .results.is-single { height: calc(100dvh - 36px - env(safe-area-inset-bottom, 0px)) }
    #details.wide.layouts { height: 100dvh }
  }
}