/* css/d2/geo.css -- owner D2-GEO. Design 2 (DESIGN-2 7.7) for the geo and content pages: cities, city, the basket by city,
   chain prices and deals, the store, where to buy, staples, promotions, guides, explore, aisles, needs, leaflets, fuel,
   online, recipes, the price calendar, why and the trust pages. Linked only by those pages (app/_geo.html css()), only
   under the look row; every rule sits under body.rf. Tokens and components come from refined/d2.css: no colour here
   that is not a --d2-* token, no backdrop-filter, no blur, no image shadows (rule 7).

   1. Hero   2. Surfaces the trunk prints (panel, link list, summary list, proof, callout, stats, receipt, chart)
   3. Ranking (chain chips, bars)   4. Summary receipt, deal tile, cards   5. Page bits   6. Desktop */


/* ---- 1. Hero: the eyebrow, the 34/800 H1 with its coloured word, the lead; night: the one glow behind it ---------- */
body.rf:has(.geo-hero){background:var(--d2-glow) top left/100% 560px no-repeat,var(--d2-bg)}
body.rf .geo-hero{display:grid;justify-items:start;gap:0;padding:24px 0 6px;margin-bottom:var(--d2-gap)}
body.rf .geo-hero .d2-h1{margin:0}
body.rf .geo-lead{margin:14px 0 0;max-width:60ch;font-size:16px;font-weight:500;line-height:1.5;color:var(--d2-ink-2)}
body.rf .geo-meta{margin:8px 0 0;max-width:68ch;font-size:12.5px;font-weight:500;line-height:1.45;color:var(--d2-muted)}
body.rf .geo-hero .d2-tray{width:100%;margin-top:18px}
body.rf .geo-hero .btn{margin-top:12px}

/* the section rhythm: 26 px between blocks, titles 21/800 */
body.rf .geo-page>*+*,body.rf main .container>.panel+.section-head,body.rf main .container>.panel+.panel{margin-top:var(--d2-gap)}
body.rf main .section-head{margin:var(--d2-gap) 0 12px}
body.rf main .section-head__title{font-size:21px;line-height:1.15;font-weight:800;letter-spacing:-.025em;color:var(--d2-ink)}
body.rf main .section-head__link{min-height:44px;display:inline-flex;align-items:center;color:var(--d2-accent);font-weight:700}
body.rf main .d2-sec__h:not(:first-child){margin-top:var(--d2-gap)}
body.rf main .fine{font-size:12.5px;line-height:1.45;color:var(--d2-muted)}
body.rf main .container>p>a,body.rf main .stack>p>a,body.rf .geo-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--d2-accent);font-weight:700;
  text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}


/* ---- 2. Surfaces the trunk prints, in Design 2 ------------------------------------------------------------------ */
/* panel: the white card r22 with the one shadow token (night: the inset hairline) */
body.rf main .panel{border:0;border-radius:var(--d2-r-card);background:var(--d2-surface);box-shadow:var(--d2-shadow)}
body.rf main .panel--pad{padding:16px 18px}

/* link list: 60 px rows, the label 15/700, the sub line meta, the chevron muted */
body.rf main .link-list>li>a,body.rf main .link-row{min-height:60px;padding:10px 18px;gap:12px;color:var(--d2-ink);font-weight:700;font-size:15px}
body.rf main .link-list>li+li>a,body.rf main .link-list>li+li>.link-row{border-top:1px solid var(--d2-line)}
body.rf main .link-list__sub,body.rf main .link-row__sub{display:block;margin-top:2px;font-size:12.5px;font-weight:500;color:var(--d2-muted)}
body.rf main .link-list .icon,body.rf main .link-row>.icon{color:var(--d2-muted)}
body.rf main .link-list__mark{background:var(--d2-dark);color:var(--d2-on-dark);border-radius:999px;font-weight:700}
body.rf main .link-list>li>a[aria-current="true"]{background:color-mix(in srgb,var(--d2-tray) 55%,transparent)}
body.rf main .link-list>li:first-child>a{border-radius:var(--d2-r-card) var(--d2-r-card) 0 0}
body.rf main .link-list>li:last-child>a{border-radius:0 0 var(--d2-r-card) var(--d2-r-card)}
body.rf main .link-list>li:only-child>a{border-radius:var(--d2-r-card)}

/* summary list: receipt lines, dashed between, values 700 tabular; sentences wrap (the trunk's inline style is dropped
   by the CSP, so the wrap lives here) */
body.rf main .summary-list{margin:0;padding:6px 18px}
body.rf main .summary-list>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px;padding:11px 0;border-top:1px dashed var(--d2-line)}
body.rf main .summary-list>div:first-child{border-top:0}
body.rf main .summary-list dt{flex:1 1 10rem;font-size:14.5px;font-weight:500;color:var(--d2-ink-2)}
body.rf main .summary-list dd{flex:0 1 auto;margin:0 0 0 auto;min-width:0;max-width:100%;font-size:15px;font-weight:700;color:var(--d2-ink);text-align:right;white-space:normal;font-variant-numeric:tabular-nums lining-nums}
body.rf main .summary-list__total{border-top-style:solid !important}
body.rf main .summary-list__total dd{font-size:19px;font-weight:800}

/* proof / method (<details>): a white card, the 52 px summary 15/700 */
body.rf main .proof{margin-top:12px;border:0;border-radius:var(--d2-r-card);background:var(--d2-surface);box-shadow:var(--d2-shadow)}
body.rf main .proof__summary{min-height:52px;padding:0 18px;font-size:15px;font-weight:700;color:var(--d2-ink)}
body.rf main .proof__body{padding:0 18px 16px;color:var(--d2-ink-2);font-size:14.5px}
body.rf main .proof__body a{color:var(--d2-accent);font-weight:700}

/* callout ("Kako računamo"): a white card with the info icon on a tray disc */
body.rf main .callout{margin-top:var(--d2-gap);min-height:60px;border:0;border-radius:var(--d2-r-card);background:var(--d2-surface);box-shadow:var(--d2-shadow);color:var(--d2-ink)}
body.rf main .callout__icon{background:var(--d2-tray);color:var(--d2-ink)}
body.rf main .callout__text{font-size:14.5px}
body.rf main .callout__go{color:var(--d2-muted)}
body.rf main .callout+.callout{margin-top:10px}

/* stats: tray tiles, the number 21/800 tabular */
body.rf main .acct-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--d2-card-gap)}
body.rf main .panel--pad:has(>.acct-stats){padding:0;background:none;box-shadow:none}
body.rf main .acct-stats .stat{margin:0;padding:14px 16px;border-radius:var(--d2-r-card);background:var(--d2-surface);box-shadow:var(--d2-shadow)}
body.rf main .stat__k{margin:0;font-size:12.5px;font-weight:600;line-height:1.35;color:var(--d2-muted)}
body.rf main .stat__v{margin:4px 0 0;font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--d2-ink);font-variant-numeric:tabular-nums lining-nums}

/* the trunk's store badge (link rows): the chain chip's ink disc */
body.rf main .store-badge{width:32px;height:32px;border:0;border-radius:50%;background:var(--d2-dark);color:var(--d2-on-dark);font-weight:800}

/* the trunk's prices in rows: ink, never green (rule 4) */
body.rf main .chain-row__price,body.rf main .chain-row.is-best .chain-row__price{color:var(--d2-ink);font-weight:800}

/* the 30-day chart (sparkline): ink 2 px line, the visnja dot with a white ring, no grid (6, Charts) */
body.rf main .spark__title{font-size:14.5px;font-weight:700;color:var(--d2-ink)}
body.rf main .spark__line{stroke:var(--d2-ink);stroke-width:2px}
body.rf main .spark__dot{background:var(--d2-cta);box-shadow:0 0 0 3px var(--d2-surface)}

/* explore and aisles: prices in ink (green stays a ring or the "Najjeftinije" label, never a price: rule 4), the bars and
   the extra in the ranking's muted ink, the Design 2 rows inside the trunk's product list */
body.rf main .x3-crow.is-cheapest .x3-big,body.rf main .x3-cell.is-cheapest,body.rf main .explore-grid__cell.is-best .explore-grid__unit,
body.rf main .explore-cup.is-best .explore-cup__unit,body.rf main .explore-week__cell.is-low,body.rf main .explore-spread__list .is-cheapest{color:var(--d2-ink)}
body.rf main .explore-stores__bar,body.rf main .x3-bar__fill{background:var(--d2-muted)}
body.rf main .explore-stores__track{background:var(--d2-tray)}
body.rf main .explore-stores__extra{color:var(--d2-muted);font-weight:700}
body.rf main .product-list:has(>.d2-row){margin:0;padding:4px 18px;list-style:none}
body.rf main .d2-row .geo-rank__fig{flex:none}

/* tags: small pills */
body.rf main .tag{border:0;border-radius:999px;background:var(--d2-tray);color:var(--d2-ink);font-weight:700}

/* prose blocks inside content pages */
body.rf main .prose{max-width:68ch;color:var(--d2-ink-2)}
body.rf main .prose a{color:var(--d2-accent)}


/* ---- 3. Ranking: chain chips, prices, the gap to the cheapest, the bar ------------------------------------------ */
body.rf .geo-rank{margin:0;padding:4px 18px;list-style:none;border-radius:var(--d2-r-card);background:var(--d2-surface);box-shadow:var(--d2-shadow)}
body.rf .geo-rank__r{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:8px;padding:14px 0 16px;border-top:1px solid var(--d2-line)}
body.rf .geo-rank__r:first-child{border-top:0}
body.rf .geo-rank__main{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
body.rf .geo-rank__sub{flex-basis:100%;font-size:12.5px;font-weight:500;line-height:1.4;color:var(--d2-muted)}
body.rf .geo-rank__sub a,body.rf .geo-rank__main a.where-directions{display:inline-flex;align-items:center;min-height:44px;color:var(--d2-accent);font-weight:700}
body.rf .geo-rank__fig{display:grid;justify-items:end;gap:3px;text-align:right}
body.rf .geo-rank__m2{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px 8px}
body.rf .geo-rank__unit{font-size:12.5px;font-weight:500;color:var(--d2-muted);font-variant-numeric:tabular-nums lining-nums}
body.rf .geo-rank__gap{font-size:12.5px;font-weight:700;color:var(--d2-muted);font-variant-numeric:tabular-nums lining-nums}
/* rule 4: the euro at .6em in every price these pages print (geo.cur(), price_html(), the trunk's price figure) */
body.rf main .rf-cur{font-size:.6em;margin-left:1px}
body.rf main .price--lg .price__cur{font-size:1.74rem}
body.rf main .price--md .price__cur{font-size:1.56rem}
@media (min-width:960px){body.rf main .price--lg .price__cur{font-size:2.04rem}}
/* a cheapest claim IS its proof (CTO rule 6): d2.css's d2-proof--line */
body.rf .geo-rank__m2 .d2-proof--line{font-size:12.5px;font-weight:700}
body.rf .d2-row .d2-proof--line{position:relative;z-index:2}
body.rf .geo-bar{grid-column:1/-1;display:block;width:100%;height:5px}
body.rf .geo-bar__bg{fill:var(--d2-tray)}
body.rf .geo-bar__v{fill:var(--d2-muted)}
body.rf .is-best .geo-bar__v{fill:var(--d2-cta)}
/* the extra lines a page puts in a row (where: the address, the distance, the way, the "mine" tag) */
body.rf .geo-rank__main .fine{flex-basis:100%;margin:0;font-size:12.5px;color:var(--d2-muted)}
body.rf .geo-rank__main [hidden]{display:none}

/* the chain chip: the initial on an ink disc + the name 15/700; 44 px when it is a link */
body.rf .geo-chip{display:inline-flex;align-items:center;gap:9px;min-height:36px;color:var(--d2-ink);font-size:15px;font-weight:700;line-height:1.25;text-decoration:none}
body.rf a.geo-chip{min-height:44px}
body.rf a.geo-chip .geo-chip__n{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--d2-line)}
body.rf .geo-chip__m{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--d2-dark);color:var(--d2-on-dark);font-size:13px;font-weight:800}
body.rf .is-best .geo-chip__m{background:var(--d2-cta);color:#fff}


/* ---- 4. Summary receipt, the deal tile, the cards --------------------------------------------------------------- */
body.rf .geo-sum{margin-bottom:var(--d2-gap)}
body.rf .geo-sum .d2-receipt__t{font-size:14.5px;font-weight:700;color:var(--d2-ink-2);letter-spacing:0}
body.rf .geo-sum__p{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:2px 0 0}
body.rf .geo-sum__unit{font-size:13.5px;font-weight:600;color:var(--d2-muted);font-variant-numeric:tabular-nums lining-nums}
body.rf .geo-sum__at{margin:8px 0 6px;font-size:15px;font-weight:700;color:var(--d2-ink)}
body.rf .geo-sum .d2-save{margin:4px 0 0}
body.rf .geo-sum .d2-low30{margin:8px 0 6px}
body.rf .geo-sum .d2-receipt__line>span:first-child{font-size:13.5px;color:var(--d2-ink-2)}
body.rf .geo-sum .d2-proof{margin-top:2px}
body.rf .geo-legs{display:grid;gap:var(--d2-card-gap);margin-top:12px}
body.rf .geo-leg__v{margin:0;font-size:21px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
@media (min-width:720px) and (max-width:1023px){body.rf .geo-legs{grid-template-columns:1fr 1fr}}
body.rf .geo-sec{margin-top:var(--d2-gap)}
body.rf .geo-tile{margin-bottom:var(--d2-card-gap)}
body.rf .geo-tile__store{margin:6px 0 var(--d2-card-gap);padding:0 4px;font-size:12.5px;color:var(--d2-muted)}
body.rf .geo-grid{margin-top:var(--d2-card-gap)}
body.rf .geo-grid .d2-card__meta{-webkit-line-clamp:3}


/* ---- 5. Page bits ------------------------------------------------------------------------------------------------ */
/* the city change link, the "all" links: secondary pills */
body.rf .geo-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--d2-gap)}
/* the empty state sits in a white card */
body.rf .geo-empty{border-radius:var(--d2-r-card);background:var(--d2-surface);box-shadow:var(--d2-shadow)}
/* where: the near-me / on-my-way tools */
body.rf main [data-way]{display:grid;gap:8px}
body.rf main [data-near]{min-height:48px;border-radius:999px;font-weight:800}


/* ---- 6. Desktop (7.12): content 1120, two columns where a page has a ranking and a side block --------------------- */
@media (min-width:1024px){
  body.rf .geo-hero{padding-top:40px}
  body.rf .geo-cols{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:0 32px;align-items:start}
  body.rf .geo-cols>aside{position:sticky;top:96px}
  /* the deal tile across the content: the product left, the name, the saving, the 30-day line and the price right */
  body.rf .geo-tile .d2-deal{flex-direction:row;align-items:center;gap:24px;padding:18px 32px 34px}
  body.rf .geo-tile .d2-deal__vis{padding-top:0}
  body.rf .geo-tile .d2-deal__b{flex:1;max-width:560px;padding:0}
}

/* ---- rule 8 on the trunk parts these pages print: a text link in a sentence and a <details> summary get a 44 px hit area
   from padding (a negative margin keeps the line where it was) ------------------------------------------------------- */
body.rf main p>a:not([class]),body.rf main ul:not(.link-list)>li>a:not([class]){padding-block:13px;margin-block:-13px}
body.rf main details>summary:not([class]){padding-block:11px;margin-block:-11px}
/* a price never breaks inside itself ("2,75 €/k|g"): the price tables scroll sideways instead */
body.rf main :is(.explore-grid__unit,.explore-grid__price,.x3-cell__v){white-space:nowrap}