/* Blok rankingu. Układ nowych kart ograniczony do data-ro-card. */
.product-ranking [hidden] { display: none !important; }
.product-ranking .ro-ranking-score-help > summary { list-style: none; cursor: pointer; }
.product-ranking .ro-ranking-score-help > summary::-webkit-details-marker { display: none; }
.product-ranking .ro-ranking-score-help > summary::marker { content: ''; }
.product-ranking .ro-ranking-score-help > summary:focus-visible { outline: 2px solid var(--theme-palette-color-1); outline-offset: 4px; }
.product-ranking .wp-block-button__link { text-transform: uppercase; }
.product-ranking .wp-block-button__link[data-ro-reset],
.product-ranking .wp-block-button__link[data-ro-more] { font-size: 12px; }
.product-ranking .ro-ranking-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; width: 100%; margin-bottom: .5rem; }
.product-ranking .ro-ranking-controls label,
.product-ranking .ro-ranking-sort-control { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: .35rem; margin: 0; }
.product-ranking .ro-ranking-controls > label,
.product-ranking .ro-ranking-sort-control { flex: 1 1 0; }
.product-ranking .ro-ranking-controls input,
.product-ranking .ro-ranking-controls select { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
.product-ranking .ro-ranking-controls > .wp-block-button { flex: 0 0 auto; margin: 0; }
.product-ranking .ro-ranking-sort-heading { display: flex; align-items: center; gap: .35rem; }
.product-ranking .ro-ranking-sort-heading label { display: block; }
.product-ranking .ro-ranking-sort-info { display: inline-flex; margin: 0; }
.product-ranking .ranking-button-info { position: relative; align-items: center; justify-content: center; font-size: 11px; opacity: .5; cursor: help; }
.product-ranking .ranking-button-info:hover { opacity: 1; }
.product-ranking .ranking-button-info .tooltip { visibility: hidden; width: 240px; background: var(--theme-palette-color-4); color: var(--theme-palette-color-8); text-align: center; padding: 5px; position: absolute; left: 50%; opacity: 0; transition: opacity .3s, visibility .3s; }
.product-ranking .ranking-button-info .tooltip::after { content: ''; position: absolute; top: 0; transform: translateX(-50%) translateY(-50%) rotate(45deg); width: 10px; height: 10px; background: var(--theme-palette-color-4); z-index: -1; }
.product-ranking .ranking-button-info:hover .tooltip { visibility: visible; opacity: 1; }
.product-ranking .ro-ranking-sort-info .tooltip { top: calc(100% + .5rem); bottom: auto; z-index: 20; transform: translateX(-25%); }
.product-ranking .ro-ranking-sort-info .tooltip::after { left: 25%; }
.product-ranking .ro-ranking-sort-info:focus { opacity: 1; }
.product-ranking .ro-ranking-sort-info:focus .tooltip { visibility: visible; opacity: 1; }
.product-ranking .ro-ranking-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: .5rem 0; }
.product-ranking [data-ro-count] { margin: 0; font-size: 0.8em; }
.product-ranking .ro-ranking-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0; }
.product-ranking .ro-ranking-message:empty { display: none; }
.product-ranking .product-table-list { margin: 0; padding: 0; list-style: none; }
.product-ranking [data-ro-card]::marker { content: ""; }
/* Tło, obramowanie karty oraz kolory przycisku i RankScore pozostają z motywu. */
.product-ranking [data-ro-card] { display: block; padding: 20px; }
.product-ranking [data-ro-card] .ro-ranking-card-main { display: grid; grid-template-columns: 190px minmax(0, 1fr) 190px; align-items: center; gap: 20px; }
.product-ranking [data-ro-card] .product-card-left { min-width: 0; }
.product-ranking [data-ro-card] .product-card-left > a { display: block; line-height: 0; }
.product-ranking [data-ro-card] .product-image { display: block; width: 200px; height: 200px; max-width: none; margin: 0 auto; object-fit: contain; }
.product-ranking [data-ro-card] .ro-ranking-card-summary { min-width: 0; }
.product-ranking [data-ro-card] .product-title h3 { margin: 0 0 6px; overflow-wrap: anywhere; }
.product-ranking [data-ro-card] .ranking-product-rating { font-size: .8em; font-weight: 500; }
.product-ranking [data-ro-card] .ro-ranking-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 14px 0 0; }
.product-ranking [data-ro-card] .ro-ranking-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin: 0; padding: 0; border-radius: 3px; background: var(--theme-palette-color-6); color: var(--theme-palette-color-4); font-size: 11px; font-weight: 500; line-height: 1.4; }
.product-ranking [data-ro-card] .ro-ranking-chip::before { content: none; }
.product-ranking [data-ro-card] .ro-ranking-chip details { min-width: 0; max-width: 100%; }
.product-ranking [data-ro-card] .ro-ranking-chip summary { display: flex; align-items: center; gap: 5px; margin: 0; padding: 5px 7px; list-style: none; border-radius: inherit; cursor: pointer; }
.product-ranking [data-ro-card] .ro-ranking-chip summary::-webkit-details-marker { display: none; }
.product-ranking [data-ro-card] .ro-ranking-chip summary::marker { content: ''; }
.product-ranking [data-ro-card] .ro-ranking-chip summary > span { min-width: 0; overflow-wrap: anywhere; }
.product-ranking [data-ro-card] .ro-ranking-chip summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.product-ranking [data-ro-card] .badge-explanation { padding: 8px; font-size: 14px; font-weight: 400; color: var(--theme-palette-color-4); }
.product-ranking [data-ro-card] .ro-ranking-chip--editorial { color: var(--theme-palette-color-1); background: color-mix(in srgb, var(--theme-palette-color-1) 12%, var(--theme-palette-color-8)); }
.product-ranking [data-ro-card] .ro-ranking-chip--value { color: var(--theme-palette-color-10); background: color-mix(in srgb, var(--theme-palette-color-10) 12%, var(--theme-palette-color-8)); }
.product-ranking [data-ro-card][data-ro-popularity="1"] .ro-ranking-chip--popularity { color: var(--theme-palette-color-1); background: color-mix(in srgb, var(--theme-palette-color-1) 12%, var(--theme-palette-color-8)); }
.product-ranking [data-ro-card][data-ro-popularity="2"] .ro-ranking-chip--popularity { color: var(--theme-palette-color-9); background: color-mix(in srgb, var(--theme-palette-color-9) 12%, var(--theme-palette-color-8)); }
.product-ranking [data-ro-card][data-ro-popularity="3"] .ro-ranking-chip--popularity { color: var(--theme-palette-color-11); background: color-mix(in srgb, var(--theme-palette-color-11) 12%, var(--theme-palette-color-8)); }
.product-ranking [data-ro-card] .ro-ranking-chip--high-price { color: var(--theme-palette-color-11); background: color-mix(in srgb, var(--theme-palette-color-11) 12%, var(--theme-palette-color-8)); }
.product-ranking [data-ro-card] .ro-ranking-chip--great-deal { color: var(--theme-palette-color-9); background: color-mix(in srgb, var(--theme-palette-color-9) 12%, var(--theme-palette-color-8)); }
.product-ranking [data-ro-card] .ro-ranking-chip--recommended { color: var(--theme-palette-color-12); background: color-mix(in srgb, var(--theme-palette-color-12) 12%, var(--theme-palette-color-8)); }
.product-ranking [data-ro-card] .ro-ranking-chip--budget { color: var(--theme-palette-color-13); background: color-mix(in srgb, var(--theme-palette-color-13) 12%, var(--theme-palette-color-8)); }
.product-ranking [data-ro-card] .ro-ranking-card-offer { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; min-width: 0; align-self: stretch; padding-left: 18px; border-left: 1px solid var(--theme-palette-color-5); }
.product-ranking [data-ro-card] .product-price { text-align: left; font-size: 1.4em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.product-ranking [data-ro-card] .product-price small { font-size: .5em; font-weight: 400; }
.product-ranking [data-ro-card] .product-action-button { width: 100%; margin: 0; }
.product-ranking [data-ro-card] .product-action-button .wp-block-button__link { display: flex; align-items: center; justify-content: center; width: 100%; text-align: center; font-size: 14px; }
.product-ranking [data-ro-card] .product-update-time { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; font-size: 10px; line-height: 1.4; }
.product-ranking [data-ro-card] .ro-ranking-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--theme-palette-color-5); }
.product-ranking [data-ro-card] .ro-ranking-card-utilities { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; margin-left: auto; }
.product-ranking [data-ro-card] .ro-ranking-card-footer button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; position: relative; width: auto; min-height: 32px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--theme-palette-color-4); font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.4; text-decoration: none; text-transform: none; cursor: pointer; }
.product-ranking [data-ro-card] .ro-ranking-card-footer .ro-ranking-card-toggle { font-weight: 700; bottom: auto; }
.product-ranking [data-ro-card] .ro-ranking-card-toggle [data-ro-open-icon],
.product-ranking [data-ro-card] .ro-ranking-card-toggle [data-ro-close-icon] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; }
.product-ranking [data-ro-card] .product-share span { padding-left: 0; }
.product-ranking [data-ro-card] .ro-ranking-card-footer button:hover { color: var(--theme-palette-color-1); }
.product-ranking [data-ro-card] button:focus-visible,
.product-ranking [data-ro-card] a:focus-visible { outline: 2px solid var(--theme-palette-color-1); outline-offset: 4px; }
.product-ranking [data-ro-card] [data-ro-card-info] { display: flow-root; margin-top: 12px; padding: 4px 0 0; }
.product-ranking [data-ro-card] [data-ro-card-info].is-info-animating { overflow: hidden; }
@media (max-width: 1000px) and (min-width: 641px) {
  .product-ranking [data-ro-card] { padding: 18px; }
  .product-ranking [data-ro-card] .ro-ranking-card-main { grid-template-columns: 160px minmax(0, 1fr) 190px; gap: 16px; }
  .product-ranking [data-ro-card] .product-image { width: 170px; height: 170px; }
  .product-ranking [data-ro-card] .ro-ranking-card-offer { padding-left: 14px; }
}
@media (max-width: 640px) {
  .product-ranking [data-ro-card] .product-action-button .wp-block-button__link { font-size: 12px; }
  .product-ranking [data-ro-card] { padding: 14px; }
  .product-ranking [data-ro-card] .ro-ranking-card-main { grid-template-columns: 90px minmax(0, 1fr); gap: 14px 12px; }
  .product-ranking [data-ro-card] .product-image { width: 90px; height: 120px; }
  .product-ranking [data-ro-card] .ro-ranking-chips { margin-top: 10px; }
  .product-ranking [data-ro-card] .ro-ranking-card-offer { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; align-items: center; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--theme-palette-color-5); }
  .product-ranking [data-ro-card] .product-price { font-size: 1.3em; overflow-wrap: anywhere; }
  .product-ranking [data-ro-card] .product-update-time { grid-column: 1 / -1; justify-content: flex-end; }
  .product-ranking [data-ro-card] .ro-ranking-card-footer { margin-top: 12px; padding-top: 8px; gap: 4px 10px; }
  .product-ranking [data-ro-card] .ro-ranking-card-utilities { gap: 12px; }
  .product-ranking [data-ro-card] .ro-ranking-card-footer button { min-height: 44px; }
}
@media (max-width: 600px) {
  .product-ranking .ro-ranking-controls { gap: 5px; }
  .product-ranking .ro-ranking-controls > label,
  .product-ranking .ro-ranking-sort-control { flex: 1 1 calc((100% - 5px) / 2); min-width: 0; }
  .product-ranking .ro-ranking-controls > .wp-block-button { flex: 0 0 100%; width: 100%; }
  .product-ranking .ro-ranking-controls > .wp-block-button button { box-sizing: border-box; width: 100%; }
  .product-ranking .ro-ranking-footer { flex-direction: column; text-align: center; }
  .product-ranking .ro-ranking-pagination { justify-content: center; }
}
