.product-pickly {
  --cover-paper: #f6f0e7;
  --cover-ink: #302b25;
  --accent: #7b4f34;
}

.pickly-cover {
  background: var(--cover-paper);
  color: var(--cover-ink);
}

.pickly-intro { text-align: center; }
.pickly-intro h1 {
  margin: 0;
  font-size: clamp(38px, 5.1vw, 76px);
  font-weight: 750;
  line-height: 1.22;
  letter-spacing: -.04em;
  text-wrap: balance;
  word-break: keep-all;
}

.pickly-description {
  margin: 18px auto 0;
  color: #5b544a;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.75;
  word-break: keep-all;
  text-wrap: balance;
}

.pickly-tools, .pickly-reel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pickly-tools {
  border-top: 1px solid #afa497;
  padding: 13px 0;
}

.pickly-tools h2 { font-size: 17px; line-height: 1.4; letter-spacing: -.04em; }
.pickly-search {
  width: clamp(142px, 18vw, 220px);
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  background: #fffaf4;
  border: 1px solid #b9ad9f;
  border-radius: 4px;
}

.pickly-search svg { width: 16px; height: 16px; flex: none; }
.pickly-search input {
  width: 100%;
  min-width: 0;
  padding: 8px 0;
  background: transparent;
  border: none;
  font: inherit;
  font-size: 14px;
  color: inherit;
}

.pickly-search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.pickly-search input:focus { outline: 0; }
.pickly-album {
  --print-height: clamp(196px, min(22vw, 31svh), 350px);
}
/* Keep the search field in place as the centered album switches to an empty result. */
.pickly-reel, .pickly-empty { min-block-size: calc(var(--print-height) + 3.5rem); }
.pickly-reel {
  display: flex;
  gap: clamp(10px, 1.4vw, 20px);
  overflow-x: auto;
  padding: 4px 0 12px;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-color: #a99b89 transparent;
  scrollbar-width: thin;
}

.pickly-print {
  flex: none;
  margin: 0;
  scroll-snap-align: start;
}

.pickly-print button {
  display: block;
  width: min(calc(var(--print-height) * 1.5), 72vw);
  aspect-ratio: 3 / 2;
  padding: 0;
  background: #ded6c8;
  border: none;
  cursor: zoom-in;
}

.pickly-print img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pickly-print button:focus-visible { outline: 3px solid #f9f5ea; outline-offset: -6px; }
.pickly-print figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding-top: 9px;
  font-size: 14px;
  font-weight: 600;
}

.pickly-print-name small {
  padding-right: 6px;
  font: 11px/1.4 ui-monospace, monospace;
  color: #6b6257;
}

.pickly-print-rating { position: relative; display: inline-flex; align-items: center; gap: 3px; color: #6d5742; font-size: 12px; }
.pickly-print-rating svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.pickly-reel-foot { min-height: 48px; margin-top: 8px; }
.pickly-result { margin: 0; color: #655a4f; font-size: 13px; }
.pickly-photo-info { margin-left: auto; padding: 8px 0; color: #655a4f; font-size: 12px; text-underline-offset: 3px; }
.pickly-photo-info:hover { text-decoration: underline; }
.pickly-arrows { display: flex; gap: 6px; }
.pickly-arrows button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #b9ad9f;
  background: transparent;
  color: var(--cover-ink);
  font-size: 20px;
  line-height: 1;
}

.pickly-arrows button:disabled { opacity: .35; cursor: default; }
.pickly-arrows button:hover:enabled { background: #fffaf4; }
.pickly-empty {
  display: grid;
  align-content: center;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #5f5246;
  word-break: keep-all;
}

.pickly-tools { position: relative; justify-content: flex-start; }
.pickly-filters { display: flex; gap: 3px; margin-left: auto; }
.pickly-filter { position: relative; color: #514638; }
.pickly-filter summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 44px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.pickly-filter summary::-webkit-details-marker { display: none; }
.pickly-filter summary:hover, .pickly-filter[open] summary { background: #eae0d2; }
.pickly-filter summary:has(.pickly-selected:not([hidden])) { color: #684320; background: #eaddca; }
.pickly-filter summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pickly-filter summary svg { width: 16px; height: 16px; }
.pickly-filter summary .pickly-chevron { width: 12px; height: 12px; }
.pickly-filter[open] .pickly-chevron { transform: rotate(180deg); }
.pickly-selected:not([hidden]) + .pickly-chevron { display: none; }
.pickly-selected { font-size: 12px; font-variant-numeric: tabular-nums; }
.pickly-filter fieldset {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 3;
  width: max-content;
  min-width: 160px;
  max-height: min(330px, 48svh, calc(var(--print-height) + 2rem));
  overflow-y: auto;
  margin: 0;
  padding: 8px;
  border: 1px solid #b5a796;
  border-radius: 8px;
  background: #fffaf4;
}
.pickly-filter legend, .pickly-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.pickly-filter fieldset p { padding: 5px 8px 7px; color: #695f54; font-size: 12px; }
.pickly-filter label {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 9px;
  padding: 0 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.pickly-filter label:hover, .pickly-filter label:focus-within { background: #f3ebdf; }
.pickly-filter input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.pickly-reel-foot { justify-content: flex-start; }
.pickly-reset { padding: 8px 0; border: 0; background: transparent; color: #624b36; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.pickly-album [hidden] { display: none; }
@media (max-width: 720px) {
  .pickly-album { --print-height: clamp(196px, 42vw, 270px); }
}

@media (max-width: 640px) {
  .pickly-tools {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 8px;
    padding: 9px 0;
  }
  .pickly-tools h2 { grid-column: 1 / -1; }
  .pickly-filters { grid-column: 1; grid-row: 2; margin: 0; }
  .pickly-filter summary { padding-inline: 6px; }
  .pickly-filter:last-child fieldset { left: auto; right: 0; }
  .pickly-search { grid-column: 2; grid-row: 2; width: min(100%, 190px); min-width: 0; gap: 5px; padding-inline: 7px; justify-self: end; }
}

@media (max-width: 540px) {
  .pickly-intro h1 { font-size: clamp(35px, 9vw, 46px); }
  .pickly-description { margin-top: 16px; font-size: 15px; }
  .pickly-description br { display: none; }
}

@media (max-width: 430px) {
  .pickly-tools { column-gap: 4px; }
  .pickly-filters { gap: 0; }
  .pickly-filter summary { gap: 3px; padding-inline: 4px; font-size: 13px; }
  .pickly-filter summary svg { width: 14px; height: 14px; }
}

@media (max-width: 360px) {
  .pickly-filter summary svg:first-child { display: none; }
}