/* 0.95.0 · lista zestawów wycofywanych */
.sf-ret { max-width: 1640px; margin: 0 auto; display: grid; gap: 16px; color: var(--ui-ink); }
.sf-ret-head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: end; }
.sf-ret-head h1 { margin: 0; font: 800 36px/1.1 var(--b-font-display); color: var(--ui-ink); }
.sf-ret-head p { margin: 6px 0 0; color: var(--ui-muted); font-size: 14px; }
.sf-ret-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sf-ret-stats div { min-width: 92px; padding: 8px 12px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-card); }
.sf-ret-stats .is-mine { border-color: var(--ui-accent); }
.sf-ret-stats dt { font-size: 11px; font-weight: 700; color: var(--ui-muted); }
.sf-ret-stats dd { margin: 0; font: 800 20px var(--b-font-display); color: var(--ui-ink); }
.sf-ret-admin { padding: 10px 14px; border: 2px dashed var(--b-red, #C8102E); border-radius: 12px; background: var(--ui-card); }
.sf-ret-admin summary { cursor: pointer; font-size: 13px; font-weight: 800; }
.sf-ret-admin form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.sf-ret-admin input[type=file] { max-width: 100%; color: var(--ui-ink); }
.sf-ret-small { margin: 8px 0 0; font-size: 12px; color: var(--ui-muted); }
.sf-ret-msg { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.sf-ret-msg.is-ok { background: color-mix(in srgb, var(--ui-positive) 16%, var(--ui-card)); }
.sf-ret-msg.is-err { background: color-mix(in srgb, var(--ui-negative) 16%, var(--ui-card)); }
html[data-ui-theme] .main-content .sf-ret-btn { min-height: 38px; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--ui-accent); color: #231a00; font-weight: 800; cursor: pointer; box-shadow: none; }
.sf-ret-tops { padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-card); }
.sf-ret-tops > summary { cursor: pointer; font: 800 18px var(--b-font-display); }
.sf-ret-top-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; margin-top: 12px; }
.sf-ret-top { min-width: 0; padding: 10px; border-radius: 12px; background: var(--ui-surface-raised); }
.sf-ret-top h2 { margin: 0 0 6px; font: 800 15px var(--b-font-display); color: var(--ui-ink); }
.sf-ret-top ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.sf-ret-top-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; align-items: center; color: var(--ui-ink); font-size: 13px; text-decoration: none; }
.sf-ret-top-img { width: 38px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: #fff; overflow: hidden; }
.sf-ret-top-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sf-ret-top-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sf-ret-top-row b { white-space: nowrap; }
.sf-ret-sorts { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-ret-chip { padding: 7px 12px; border: 1px solid var(--ui-line); border-radius: 999px; background: var(--ui-card); color: var(--ui-ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.sf-ret-chip.is-active { border-color: var(--ui-accent); background: var(--ui-accent); color: #231a00; font-weight: 800; }
.sf-ret-filter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 10px; padding: 13px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-card); }
.sf-ret-filter label { display: grid; gap: 4px; min-width: 0; font-size: 11px; font-weight: 800; color: var(--ui-muted); }
.sf-ret-filter label.is-wide { grid-column: span 2; }
.sf-ret-filter :is(input, select) { width: 100%; min-height: 38px; box-sizing: border-box; padding: 6px 9px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-surface-raised); color: var(--ui-ink); font: 500 13px var(--b-font); }
.sf-ret-filter-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 13px; color: var(--ui-muted); }
.sf-ret-filter-foot a { font-weight: 700; color: var(--b-blue); }
.sf-ret-filter-foot b { color: var(--ui-ink); }
.sf-ret-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 14px; }
.sf-ret-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-card); color: inherit; text-decoration: none; }
.sf-ret-card[href]:hover { border-color: var(--ui-accent); text-decoration: none; }
.sf-ret-lid { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 36px; padding: 4px 10px; background: var(--box); color: #fff; font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.sf-ret-lid img { display: block; max-height: 26px; max-width: 110px; object-fit: contain; }
/* 0.95.3: jednakowe pole zdjęcia 4:3 w każdej karcie. Zdjęcia sklepowe mają białe tło,
   więc pole jest białym, zaokrąglonym kafelkiem wewnątrz karty (także w trybie ciemnym),
   a zdjęcie mieści się w nim w całości. */
.sf-ret-picture { position: relative; aspect-ratio: 4 / 3; margin: 8px 8px 0; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: #fff; color: #6b7686; font-size: 12px; font-weight: 700; }
.sf-ret-picture img { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; object-fit: contain; }
.sf-ret-owned { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 7px; background: #1E8A4C; color: #fff; font-size: 11.5px; font-weight: 800; font-style: normal; }
.sf-ret-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 11px; }
.sf-ret-body h2 { margin: 0; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 15px/1.25 var(--b-font-display); color: var(--ui-ink); }
.sf-ret-pills { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.sf-ret-pills span { padding: 2px 7px; border-radius: 999px; background: var(--ui-surface-raised); color: var(--ui-muted); font-size: 11px; font-weight: 600; }
.sf-ret-price { margin: auto 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sf-ret-price b { font: 800 18px var(--b-font-display); color: var(--ui-ink); }
.sf-ret-price small { font-size: 11.5px; color: var(--ui-muted); }
.sf-ret-deadline { margin: 0; font-size: 12px; font-weight: 700; color: var(--ui-muted); }
.sf-ret-deadline.is-date { color: var(--ui-negative); }
.sf-ret-empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--ui-muted); }
.sf-ret-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.sf-ret-pages :is(a, span) { padding: 7px 11px; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-card); color: var(--ui-ink); text-decoration: none; }
.sf-ret-pages .is-active { border-color: var(--ui-accent); background: var(--ui-accent); color: #231a00; font-weight: 800; }
@media (max-width: 620px) { .sf-ret-head h1 { font-size: 28px; } .sf-ret-filter label.is-wide { grid-column: auto; } .sf-ret-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } }

/* 0.95.3 · wariant B: topki w panelu bocznym */
.sf-ret-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.sf-ret-layout.is-single { grid-template-columns: minmax(0, 1fr); }
.sf-ret-main { display: grid; gap: 16px; min-width: 0; }
.sf-ret-side { position: sticky; top: 12px; display: grid; gap: 6px; max-height: calc(100vh - 24px); overflow-y: auto; padding: 12px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-card); scrollbar-width: thin; }
.sf-ret-side-title { margin: 0 0 2px; font: 800 18px var(--b-font-display); color: var(--ui-ink); }
.sf-ret-acc { border-top: 1px solid var(--ui-line); }
.sf-ret-acc > summary { display: flex; justify-content: space-between; align-items: center; padding: 9px 2px; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 800; color: var(--ui-ink); }
.sf-ret-acc > summary::-webkit-details-marker { display: none; }
.sf-ret-acc > summary::after { content: "▾"; color: var(--ui-muted); transition: transform .15s; }
.sf-ret-acc[open] > summary::after { transform: rotate(180deg); }
.sf-ret-podium { margin: 0 0 8px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sf-ret-podium a { display: grid; gap: 3px; min-width: 0; color: var(--ui-ink); text-align: center; text-decoration: none; }
.sf-ret-podium-img { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 9px; background: #fff; }
.sf-ret-podium-img img { width: 100%; height: 100%; padding: 5px; box-sizing: border-box; object-fit: contain; }
.sf-ret-podium-img i { position: absolute; left: 4px; top: 4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--ui-accent); color: #231a00; font: 800 11px/18px var(--b-font); font-style: normal; }
.sf-ret-podium-name { overflow: hidden; font-size: 11.5px; font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sf-ret-podium b { font-size: 11.5px; color: var(--ui-muted); white-space: nowrap; }
.sf-ret-rest { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 5px; }
.sf-ret-rest .sf-ret-top-row { grid-template-columns: 16px 38px minmax(0, 1fr) auto; }
.sf-ret-rest i { font-style: normal; font-size: 12px; font-weight: 800; color: var(--ui-muted); text-align: center; }
@media (max-width: 1000px) {
  .sf-ret-layout { grid-template-columns: minmax(0, 1fr); }
  .sf-ret-side { position: static; max-height: none; }
}
.sf-ret-tabs { display: inline-flex; flex-wrap: wrap; justify-self: start; gap: 4px; padding: 4px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-card); }
.sf-ret-tabs a { padding: 8px 14px; border-radius: 9px; color: var(--ui-ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.sf-ret-tabs a.is-active { background: var(--ui-ink); color: var(--ui-card); font-weight: 800; }
.sf-ret-retail { margin: 0; font-size: 12px; color: var(--ui-muted); }
.sf-ret-retail em { font-style: normal; font-weight: 800; }
.sf-ret-retail em.is-up { color: var(--ui-positive); } .sf-ret-retail em.is-down { color: var(--ui-negative); }
