/* css/refined/pages.css -- owner R1-RF-PAGES (REFINE-COMMON). Every rule is scoped under body.rf.
   Home, search, deals, category, aisle, explainer and 404: the answer first, one proof line per card, calm density, 65ch text. */

/* Deal card (home strip, deals): name, the price at the chain, one proof line (the saving chip and "Zašto?"). */
body.rf .deal-card--rf{align-items:flex-start}
body.rf .deal-card--rf .deal-card__meta{margin:0 0 var(--space-2);font-size:.875rem}
body.rf .deal-card--rf .deal-card__meta b{font-size:1rem;color:var(--ink);white-space:nowrap}
body.rf .deal-card__proof{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);margin:0;font-size:.875rem}
body.rf .deal-card__save{display:inline-block;padding:2px var(--space-2);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--save) 14%,transparent);color:var(--save-ink);font-weight:var(--fw-semi)}
body.rf .deal-card__save::first-letter{text-transform:uppercase}
body.rf .deal-card__why-link{position:relative;z-index:1;display:inline-flex;align-items:center;min-block-size:24px;color:var(--ink-2);font-weight:var(--fw-semi);text-underline-offset:3px}
body.rf .deal-card__until{margin:0 0 var(--space-2)}

/* Every price, unit price and count on these pages in tabular lining figures. */
body.rf .deal-card__meta b,body.rf .deal-card__save,body.rf .product-row__figs,body.rf [data-deal-count]{font-variant-numeric:tabular-nums lining-nums}

/* Chip groups (deals, sort, aisle filters): one scrolling row each on a phone, so the first result shows on the first screen. */
@media (max-width:719.98px){
  body.rf .chip-group .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding:var(--space-1) var(--gutter);scroll-padding-inline:var(--gutter)}
  body.rf .chip-group .chips::-webkit-scrollbar{display:none}
  body.rf .chip-group .chips > li{flex:none}
}

/* Category: the filters in one native disclosure above the products; its summary says "Filteri", so the form's own title is for screen readers only. */
body.rf .rf-filters{margin:0}
body.rf .rf-filters__summary{display:inline-flex;align-items:center;gap:var(--space-2);min-block-size:44px;padding:0 var(--space-4);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font-size:.875rem;font-weight:var(--fw-semi);cursor:pointer;list-style:none}
body.rf .rf-filters__summary::-webkit-details-marker{display:none}
body.rf .rf-filters__summary::after{content:"";inline-size:7px;block-size:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
body.rf .rf-filters[open] > .rf-filters__summary{margin-bottom:var(--space-3)}
body.rf .rf-filters[open] > .rf-filters__summary::after{transform:translateY(2px) rotate(-135deg)}
body.rf .rf-filters .panel__title{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Readable long text: 65 characters a line. */
body.rf .lead,body.rf .fine,body.rf .prose p,body.rf .prose h2,body.rf .prose h3,body.rf .acct-fact-card__text,body.rf .hero__text{max-inline-size:65ch}

/* A stand-alone text link is a 24 px target (UX19): "Provjerite online: mlijeko". */
body.rf .fine > a:only-child{display:inline-block;min-block-size:24px;line-height:24px}