/* ECOA-4372 — „TOP v kategorii“ (mockup PM ECOA-4367). Barvy z tokenů: --ag-star / --ag-green / --ag-blue. */
.ag-topslots-wrap[hidden] { display: none !important; }
.ag-topslots { margin: 0 0 22px; padding: 18px 18px 20px; background: var(--ag-stone, #F2F4F7); border-radius: var(--ag-radius-card, 12px); }
.ag-topslots__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 14px; position: relative; }
.ag-topslots__title { font: 700 20px/1.25 var(--ag-font-display, 'Bricolage Grotesque', sans-serif); color: var(--ag-navy, #1F2A44); margin: 0; }
.ag-topslots__sub { font: 400 13px/1.4 var(--ag-font-body, 'DM Sans', sans-serif); color: var(--ag-mute, #6B7280); margin: 2px 0 0; }
.ag-topslots__how { flex-shrink: 0; font: 500 12px/1.3 var(--ag-font-body, sans-serif); color: var(--ag-mute, #6B7280); }
.ag-topslots__how > summary { cursor: pointer; list-style: none; text-decoration: underline dotted; white-space: nowrap; padding-top: 4px; }
.ag-topslots__how > summary::-webkit-details-marker { display: none; }
.ag-topslots__how-body { position: absolute; right: 0; top: 100%; z-index: 20; width: min(360px, 100%); margin-top: 6px; padding: 12px 14px; background: #fff; border: 1px solid var(--ag-line, #E5E7EB); border-radius: 10px; box-shadow: 0 8px 24px rgba(31, 42, 68, .12); color: var(--ag-navy-2, #3A455F); font-size: 13px; line-height: 1.45; }
.ag-topslots__how-body p { margin: 0 0 6px; }
.ag-topslots__how-body p:last-child { margin: 0; }
.ag-topslots__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ag-topslot { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 2px solid var(--slot-c); border-radius: var(--ag-radius-card, 12px); overflow: hidden; }
.ag-topslot--popular { --slot-c: var(--ag-star, #FFB400); --slot-bg: #FFF6DB; --slot-fg: #7A5600; }
.ag-topslot--value { --slot-c: var(--ag-green, #3DAA3F); --slot-bg: #ECF7ED; --slot-fg: #2E8C32; }
.ag-topslot--top { --slot-c: var(--ag-blue, #3D6FD6); --slot-bg: #E8EEFB; --slot-fg: #2A56B0; }
.ag-topslot__label { display: flex; align-items: center; gap: 6px; padding: 9px 14px 4px; background: var(--slot-bg); color: var(--slot-fg); font: 700 13px/1.2 var(--ag-font-body, sans-serif); text-transform: uppercase; letter-spacing: .04em; }
.ag-topslot__why { margin: 0; padding: 0 14px 10px; background: var(--slot-bg); color: var(--ag-navy-2, #3A455F); font: 400 13px/1.35 var(--ag-font-body, sans-serif); }
/* ECOA-4685: chip s parametry (konektor · délka · W / mAh) v kategoriích bez modelu */
.ag-topslot__chip { margin: 0; padding: 0 14px 10px; background: var(--slot-bg); }
.ag-topslot__chip span { display: inline-block; padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--slot-c); color: var(--ag-navy, #1F2A44); font: 600 12px/1.3 var(--ag-font-body, sans-serif); }
.ag-topslot .pc { border: 0; border-radius: 0; box-shadow: none; flex: 1; transform: none; }
.ag-topslot .pc-img { padding: 12px 24px 0; aspect-ratio: auto; height: 180px; border-radius: 0; }
.ag-topslot .pc-img img { max-height: 164px; width: auto; margin: 0 auto; display: block; }
.ag-topslots__rest { font: 600 14px/1.3 var(--ag-font-body, sans-serif); color: var(--ag-mute, #6B7280); margin: 0 0 12px; }

@media (max-width: 767px) {
  .ag-topslots { padding: 14px 12px; margin: 0 0 18px; }
  .ag-topslots__head { flex-direction: column; gap: 4px; }
  .ag-topslots__title { font-size: 17px; }
  .ag-topslots__sub { font-size: 12px; line-height: 1.35; }
  .ag-topslots__how > summary { padding-top: 0; }
  .ag-topslots__how-body { left: 0; right: auto; width: 100%; }
  .ag-topslots__list { grid-template-columns: 1fr; gap: 10px; }
  .ag-topslot { display: grid; grid-template-columns: 108px minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .ag-topslot__label { grid-column: 1 / -1; padding: 7px 12px 3px; font-size: 12px; }
  .ag-topslot__why { grid-column: 1 / -1; padding: 0 12px 8px; font-size: 12px; }
  .ag-topslot:has(> .ag-topslot__chip) { grid-template-rows: auto auto auto 1fr; }
  .ag-topslot__chip { grid-column: 1 / -1; padding: 0 12px 8px; }
  .ag-topslot__chip span { font-size: 11px; }
  .ag-topslot .pc { display: contents; }
  .ag-topslot .pc-img { grid-column: 1; height: auto; padding: 10px 0 10px 10px; align-self: start; }
  .ag-topslot .pc-img img { max-height: 92px; }
  .ag-topslot .pc-fav, .ag-topslot .pc-badges, .ag-topslot .pc-rating, .ag-topslot .pc-swatches { display: none; }
  .ag-topslot .pc-body { grid-column: 2; padding: 8px 12px 12px; border-top: 0; gap: 6px; }
  .ag-topslot .pc-title { font-size: 13px; min-height: 0; -webkit-line-clamp: 2; line-height: 1.4; }
  .ag-topslot .pc-price { font-size: 20px; }
  .ag-topslot .pc-cta { height: 38px; font-size: 13px; }
}