/* css/refined/d2.css -- owner D2-SYSTEM. Design 2 (DESIGN-2.md): tokens, motion, the shared components (_d2_macros.html),
   the chrome restyled (header island, floating tab bar, ink footer) and the home page. Loaded last under the look row;
   every rule is scoped under body.rf, so with the row off nothing here applies (and base.html does not even link it).

   1. Tokens light   2. Tokens night   3. Base, type, focus   4. Motion   5. Chrome   6. Components   7. Home
   8. Reduced motion, forced colours

   Rules (DESIGN-2 section 1): solid surfaces, ONE shadow token, no backdrop-filter, no blur, no gradient text, no image
   shadows (the contact shadow is an ellipse under the product). Onest only. Prices tabular, ink or white, never red/green.
   Page lanes: use the --d2-* tokens and the d2-* classes; the trunk's tokens (--bg --ink --visnja ...) are mapped onto
   Design 2 below, so a page not yet rebuilt already sits in the new palette. */


/* ---- 1. Tokens: light (DESIGN-2 section 2) ---------------------------------------------------------------------- */
body.rf{
  --d2-bg:#F2F1EE; --d2-surface:#FFFFFF; --d2-tray:#E8E6E1;
  --d2-ink:#16130F; --d2-ink-2:#3A332C; --d2-muted:#5F584F; --d2-line:#E4E1DC;
  --d2-visnja:#7A1E3A;           /* brand, the deal tile */
  --d2-visnja-ink:#F6E7EC;       /* text on visnja, the tile's 30-day line */
  --d2-cta:#7A1E3A;              /* primary buttons, the "+", the scan button, the count */
  --d2-accent:#7A1E3A;           /* links, "Sve ›", the coloured headline word */
  --d2-save-bg:#E5F2EA; --d2-save-ink:#1B673C; --d2-live:#2E9D5B; --d2-live-halo:rgba(46,157,91,.18);
  --d2-focus:#7A1E3A;
  --d2-low30:#3A332C;            /* the 30-day line on white */
  --d2-island:rgba(255,255,255,.96);
  --d2-dark:#16130F; --d2-on-dark:#FFFFFF;    /* the basket circle, the city chip, the Plus badge */
  --d2-bar:#16130F; --d2-bar-ink:#A8A29B;     /* the tab bar */
  --d2-foot:#16130F; --d2-foot-ink:#E9E4DE;
  --d2-shadow:0 1px 0 #E4E1DC,0 8px 20px -12px rgba(22,19,15,.22);   /* the one shadow token (+ its hairline) */
  --d2-edge:0 0 0 0 transparent; /* night: the 1 px inset hairline that replaces the shadow (never none: it sits in comma lists) */
  --d2-glow:none;
  --d2-contact:rgba(40,6,18,.45);

  /* radii (section 2) */
  --d2-r-pack:8px; --d2-r-sm:16px; --d2-r-field:20px; --d2-r-card:22px; --d2-r-tray:26px; --d2-r-ring:28px; --d2-r-tile:30px;

  /* spacing: gutter 20 phone / 32 tablet, max 1120; section gap 26, card gap 10 */
  --gutter:20px; --d2-gap:26px; --d2-card-gap:10px;

  /* motion (section 4) */
  --d2-ease:cubic-bezier(.2,.8,.2,1); --d2-pop:cubic-bezier(.34,1.56,.64,1);
  --d2-rise:340ms; --d2-stagger:45ms; --d2-press:120ms; --d2-sheet:280ms; --d2-fade:150ms;

  /* the receipt zigzag (the logo's edge): 7 px bites every 18 px, along the bottom / the top */
  --d2-zig-b:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,radial-gradient(7px at 9px bottom,transparent 96%,#000) bottom left/18px 100% repeat-x;
  --d2-zig-t:linear-gradient(#000 0 0) bottom/100% calc(100% - 9px) no-repeat,radial-gradient(7px at 9px top,transparent 96%,#000) top left/18px 100% repeat-x;

  /* the trunk's roles, mapped: every kit component follows */
  --bg:var(--d2-bg); --surface:var(--d2-surface); --raise:var(--d2-surface);
  --ink:var(--d2-ink); --ink-2:var(--d2-ink-2); --muted:var(--d2-muted); --line:var(--d2-line); --line-2:#EDEBE7;
  --visnja:var(--d2-cta); --visnja-deep:#5E1530; --visnja-ink:var(--d2-accent); --mark:var(--d2-visnja); --focus:var(--d2-focus);
  --rf-hairline:var(--d2-line);   /* --save/--save-ink stay the trunk's: they are themed there (dark: a light green) */
  --serif:var(--sans); --fw-serif:var(--fw-heavy);   /* one family (rule 9) */
  --field-placeholder:#5F584F;
}
@media (min-width:720px){body.rf{--gutter:32px}}


/* ---- 2. Tokens: night (section 8: built solid, not inverted) --------------------------------------------------- */
@media (prefers-color-scheme: dark){
  body.rf:not(:where([data-theme="light"] *)){
    --d2-bg:#12080D; --d2-surface:#1F1318; --d2-tray:#1A0F14;
    --d2-ink:#F7EFF2; --d2-ink-2:#E9DFE3; --d2-muted:#C9BDC2; --d2-line:rgba(255,255,255,.08);
    --d2-visnja:#8E2346; --d2-cta:#B8325F; --d2-accent:#FF8FAB; --d2-focus:#FF8FAB;
    --d2-live:#4ADE80; --d2-live-halo:rgba(74,222,128,.18);
    --d2-low30:#C9BDC2;
    --d2-island:#1F1318;
    --d2-dark:#F7EFF2; --d2-on-dark:#12080D;
    --d2-bar:#1F1318; --d2-bar-ink:#B9ADB2;
    --d2-foot:#1F1318; --d2-foot-ink:#E9DFE3;
    --d2-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
    --d2-edge:inset 0 0 0 1px rgba(255,255,255,.08);
    --d2-glow:radial-gradient(70% 55% at 20% 0%,rgba(150,36,72,.45),transparent 72%);
    --line-2:rgba(255,255,255,.06); --visnja-deep:#8E2346; --mark:#FF8FAB; --line-strong:#7F7278;
    --field-placeholder:#C9BDC2;
  }
}
body.rf:where([data-theme="dark"] *){
  --d2-bg:#12080D; --d2-surface:#1F1318; --d2-tray:#1A0F14;
  --d2-ink:#F7EFF2; --d2-ink-2:#E9DFE3; --d2-muted:#C9BDC2; --d2-line:rgba(255,255,255,.08);
  --d2-visnja:#8E2346; --d2-cta:#B8325F; --d2-accent:#FF8FAB; --d2-focus:#FF8FAB;
  --d2-live:#4ADE80; --d2-live-halo:rgba(74,222,128,.18);
  --d2-low30:#C9BDC2;
  --d2-island:#1F1318;
  --d2-dark:#F7EFF2; --d2-on-dark:#12080D;
  --d2-bar:#1F1318; --d2-bar-ink:#B9ADB2;
  --d2-foot:#1F1318; --d2-foot-ink:#E9DFE3;
  --d2-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  --d2-edge:inset 0 0 0 1px rgba(255,255,255,.08);
  --d2-glow:radial-gradient(70% 55% at 20% 0%,rgba(150,36,72,.45),transparent 72%);
  --line-2:rgba(255,255,255,.06); --visnja-deep:#8E2346; --mark:#FF8FAB; --line-strong:#7F7278;
  --field-placeholder:#C9BDC2;
}


/* ---- 3. Base, type, focus (section 3) --------------------------------------------------------------------------- */
body.rf{background:var(--d2-bg);color:var(--d2-ink);font-family:var(--sans);font-weight:500;font-size:15px;line-height:1.5}
body.rf :focus-visible{outline:3px solid var(--d2-focus);outline-offset:2px}
body.rf .d2-h1{margin:0;font-weight:800;font-size:34px;line-height:1.02;letter-spacing:-.035em;color:var(--d2-ink);text-wrap:balance}
body.rf .d2-h1 em{font-style:normal;color:var(--d2-accent)}
@media (min-width:1024px){body.rf .d2-h1{font-size:48px}}
body.rf .page-title,body.rf .hero__title,body.rf .section-head__title{font-family:var(--sans);font-weight:800;letter-spacing:-.025em}


/* ---- 4. Motion (section 4): transform + opacity only, first paint only ----------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  body.rf .d2-rise{animation:d2-rise var(--d2-rise) var(--d2-ease) both}
  body.rf .d2-rise:nth-child(2){animation-delay:calc(var(--d2-stagger) * 1)}
  body.rf .d2-rise:nth-child(3){animation-delay:calc(var(--d2-stagger) * 2)}
  body.rf .d2-rise:nth-child(4){animation-delay:calc(var(--d2-stagger) * 3)}
  body.rf .d2-rise:nth-child(5){animation-delay:calc(var(--d2-stagger) * 4)}
  body.rf .d2-rise:nth-child(n+6){animation-delay:calc(var(--d2-stagger) * 5)}
  body.rf .d2-deal .d2-save{display:inline-block;animation:d2-stamp 460ms var(--d2-pop) 560ms both}
  body.rf :is(.d2-btn,.d2-add,.d2-chip,.d2-cat,.d2-sec__a,.d2-proof,.rfc__pill,.tabbar__item){transition:transform var(--d2-press) var(--d2-ease)}
  body.rf :is(.d2-btn,.d2-add,.d2-chip,.d2-cat,.rfc__pill,.tabbar__item):active{transform:scale(.96)}
  body.rf .d2-bump{animation:d2-bump 420ms var(--d2-pop)}
  body.rf .d2-bump .rfc__n{animation:d2-roll 260ms var(--d2-ease)}
  body.rf .d2-sheet[open] .sheet__panel{animation:d2-up var(--d2-sheet) var(--d2-ease)}
  body.rf .d2-skel__i>span{animation:d2-pulse 1.2s ease-in-out infinite alternate}
}
/* The rise and the stamp move without fading: text is never painted half-transparent, so its contrast holds at every
   frame (the browser gate's axe pass reads the page while it enters). */
@keyframes d2-rise{from{transform:translateY(8px)}to{transform:none}}
@keyframes d2-stamp{from{transform:scale(1.8)}to{transform:scale(1)}}
@keyframes d2-bump{40%{transform:scale(1.18)}to{transform:scale(1)}}
@keyframes d2-roll{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}
@keyframes d2-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes d2-pulse{from{opacity:1}to{opacity:.45}}
@keyframes d2-fade{from{opacity:0}to{opacity:1}}


/* ---- 5. Chrome ---------------------------------------------------------------------------------------------------- */
/* Header island: sticky 10 px from the top, white 96 % (solid, no blur), 56 px. */
body.rf .d2-head{position:sticky;top:10px;z-index:var(--z-header);margin:10px 12px 0;border:0;border-radius:999px;
  background:var(--d2-island);box-shadow:var(--d2-shadow)}
body.rf .d2-head__in{display:flex;align-items:center;gap:8px;min-height:56px;padding:0 6px 0 16px}
body.rf .d2-head__brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--d2-ink);font-weight:800;font-size:19px;letter-spacing:-.03em;text-decoration:none}
body.rf .d2-head__brand .icon-mark{color:var(--mark)}
body.rf .d2-head__tools{display:flex;align-items:center;gap:4px;margin-left:auto}
body.rf .d2-head .lang-switch__item{min-height:44px}
/* rule 1: search one tap away on every page */
body.rf .d2-head__search{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--d2-tray);color:var(--d2-ink)}
body.rf .d2-head__search .icon{width:20px;height:20px}
/* a narrow phone with the running total showing: the brand keeps its mark, the word gives way (the link keeps its label) */
@media (max-width:400px){body.rf .d2-head:has(.rfc:not(.rfc--empty)) .d2-head__brand{min-width:44px;justify-content:center}body.rf .d2-head:has(.rfc:not(.rfc--empty)) .d2-head__brand span{display:none}}
@media (min-width:720px){
  body.rf .d2-head{max-width:calc(var(--container) + 2 * var(--gutter) - 24px);margin:12px auto 0;width:calc(100% - 24px);border-bottom:0}
  body.rf .d2-head__in{padding-inline:20px 6px;gap:12px}
  body.rf .d2-head__nav{display:block;margin-left:auto}
  body.rf .d2-head__tools{margin-left:0}
  body.rf .d2-head .nav__link{min-height:44px;border-radius:999px;font-weight:700;font-size:14.5px;color:var(--d2-ink-2)}
  body.rf .d2-head .nav__link[aria-current="page"]{background:var(--d2-tray);color:var(--d2-ink)}
}
/* the basket (the companion's pill, _rf_companion.html): [running total] (44 px ink circle + visnja count) */
body.rf .d2-head .rfc{position:relative;top:auto;left:auto;transform:none}
body.rf .d2-head .rfc__pill{position:relative;gap:8px;height:44px;padding:0;border:0;background:none;box-shadow:none;color:var(--d2-ink)}
body.rf .d2-head .rfc__face{display:none;width:44px;height:44px;order:2}
body.rf .d2-head .rfc__bag{order:2;box-sizing:border-box;width:44px;height:44px;padding:11px;border-radius:50%;background:var(--d2-dark);color:var(--d2-on-dark)}
body.rf .d2-head .rfc__n{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--d2-cta);color:#fff;font-size:11.5px;font-weight:800;line-height:20px;text-align:center;box-shadow:0 0 0 2px var(--d2-island)}
body.rf .d2-head .rfc--empty .rfc__n{display:none}
body.rf .d2-head .rfc__sum{order:1;display:inline-flex;align-items:center;height:36px;padding:0 12px;border:0;border-radius:999px;
  background:var(--d2-tray);color:var(--d2-ink);font-size:14.5px;font-weight:800}
body.rf .d2-head .rfc__sum .rf-cur{font-size:.6em}
/* while it speaks, the face takes the basket's place */
body.rf .d2-head .rfc:has(.rfc__say:not([hidden])) .rfc__face{display:block}
body.rf .d2-head .rfc:has(.rfc__say:not([hidden])) .rfc__bag{display:none}
body.rf .d2-head .rfc__skin{fill:var(--d2-dark)}
body.rf .d2-head .rfc__eyes{fill:var(--d2-on-dark)}
body.rf .d2-head .rfc__line{stroke:var(--d2-on-dark)}
body.rf .d2-head .rfc__say{left:auto;right:0;transform:none;border:0;border-radius:var(--d2-r-card);background:var(--d2-surface);box-shadow:var(--d2-shadow)}

/* rule 7: the premium look's glass header and tab bar are solid here */
body.rf :is(.site-header,.tabbar){-webkit-backdrop-filter:none;backdrop-filter:none}
/* Tab bar (phone): the floating solid ink pill, 62 px, 16 px from the sides and the bottom. Labels always shown. */
@media (max-width:719px){
  body.rf .tabbar{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));min-height:62px;padding:0 6px;border:0;border-radius:999px;
    background:var(--d2-bar);box-shadow:var(--d2-edge),0 12px 28px -12px rgba(0,0,0,.5)}
  body.rf .tabbar__item{min-height:62px;padding:8px 2px;gap:3px;color:var(--d2-bar-ink)}
  body.rf .tabbar__icon,body.rf .tabbar__item[aria-current="page"] .tabbar__icon,body.rf .tabbar__item:active .tabbar__icon{width:auto;height:auto;background:none}
  body.rf .tabbar__icon .icon{width:22px;height:22px}
  body.rf .tabbar__label,body.rf .tabbar__item[aria-current="page"] .tabbar__label{font-size:11.5px;font-weight:600;line-height:1.15}
  body.rf .tabbar__item[aria-current="page"]{color:#fff}
  body.rf .tabbar__item[aria-current="page"] .icon{fill:currentColor;fill-opacity:.24}
  body.rf .tabbar .count-badge{background:var(--d2-cta);color:#fff;box-shadow:0 0 0 2px var(--d2-bar)}
  body.rf.has-tabbar .site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  body.rf .ai-launcher{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
}

/* Footer: ink, white text, the receipt edge on top (7.11). */
body.rf .site-footer{position:relative;margin-top:48px;padding-top:9px;border:0;background:var(--d2-foot);color:var(--d2-foot-ink);
  -webkit-mask:var(--d2-zig-t);mask:var(--d2-zig-t)}
body.rf .site-footer__inner{padding-block:32px 40px}
body.rf .site-footer .brand{color:#fff;font-weight:800;letter-spacing:-.03em}
body.rf .site-footer .brand .icon-mark{color:#FF8FAB}
body.rf .site-footer a:not(.brand){color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
body.rf .site-footer__note,body.rf .site-footer .store-badges__credit,body.rf .site-footer .store-badges__title{color:var(--d2-foot-ink)}


/* ---- 6. Components (_d2_macros.html) ---------------------------------------------------------------------------- */

/* the disc (an SVG circle) */
body.rf .d2-disc{display:block}

/* product_visual: the product stands on its disc, breaking out at the top (~8 %), on a contact shadow */
body.rf .d2-pv{--s:100px;position:relative;display:inline-flex;flex:none;align-items:flex-end;justify-content:center;
  width:var(--s);height:calc(var(--s) * 1.14);vertical-align:bottom}
body.rf .d2-pv--xs{--s:40px} body.rf .d2-pv--sm{--s:64px} body.rf .d2-pv--md{--s:100px} body.rf .d2-pv--lg{--s:140px} body.rf .d2-pv--hero{--s:200px}
body.rf .d2-pv>.d2-disc{position:absolute;left:0;bottom:calc(var(--s) * .06);width:var(--s);height:var(--s)}
body.rf .d2-pv::after{content:"";position:absolute;left:50%;bottom:calc(var(--s) * .015);width:calc(var(--s) * .75);height:clamp(6px,calc(var(--s) * .1),20px);
  translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,var(--d2-contact),transparent)}
body.rf .d2-pv__img{position:relative;z-index:1;display:block;width:auto;height:auto;max-width:calc(var(--s) * .92);max-height:calc(var(--s) * 1.08);
  margin-bottom:calc(var(--s) * .06);object-fit:contain}
body.rf .d2-pv--pack .d2-pv__img{max-width:calc(var(--s) * .9);max-height:calc(var(--s) * 1.04);border-radius:var(--d2-r-pack);mix-blend-mode:multiply}
body.rf .d2-pv--wide{align-items:center}
body.rf .d2-pv--wide::after{content:none}
body.rf .d2-pv--wide .d2-pv__img{margin:calc(var(--s) * .02) 0 0;max-width:calc(var(--s) * .84);max-height:calc(var(--s) * .62)}
/* multiply: a packshot's own white margin takes the disc's colour instead of drawing a white box (rule 3); the pack's
   colours stay (the disc is a light pastel). Not a filter, no blur, no shadow on the image. */
body.rf .d2-pv--fallback{align-items:center}
body.rf .d2-pv--fallback::after{content:none}
body.rf .d2-pv__icon{position:relative;z-index:1;width:calc(var(--s) * .46);height:calc(var(--s) * .46);margin-top:calc(var(--s) * .08);color:#16130F;--tint:rgba(255,255,255,.72)}
body.rf .d2-pv--xs .d2-pv__icon{stroke-width:1.4}

/* price: Onest 800, tabular, euro .6em; ink, white on visnja */
body.rf .d2-price{font-weight:800;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em;word-spacing:-.18em;white-space:nowrap;color:var(--d2-ink);line-height:1}
body.rf .d2-price .rf-cur{font-size:.6em;font-weight:800;margin-left:1px}
body.rf .d2-price--hero{font-size:32px;letter-spacing:-.03em}
body.rf .d2-price--card{font-size:21px}
body.rf .d2-price--row{font-size:19px}

/* the saving pill, the 30-day line, the proof link */
body.rf .d2-save{display:inline-block;padding:6px 11px;border-radius:999px;background:var(--d2-save-bg);color:var(--d2-save-ink);font-size:13px;font-weight:800;line-height:1.2;white-space:nowrap}
body.rf .d2-low30{margin:8px 0 0;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--d2-low30)}
body.rf .d2-low30--on-visnja{color:var(--d2-visnja-ink)}
body.rf .d2-proof{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;color:var(--d2-accent);font-size:13.5px;font-weight:700;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
body.rf .d2-proof--on-visnja{color:#fff}
/* the claim as its proof ("najniže u Kauflandu ›"): the muted store line, the 44 px tap area from padding (CTO rule 6),
   grown downward only so it never covers the product name above it */
body.rf .d2-proof--line{display:inline-block;min-height:0;margin:-2px 0 -26px;padding:2px 0 26px;color:var(--d2-muted);font:inherit;text-decoration:none}
body.rf .d2-proof--line:is(:hover,:focus-visible){text-decoration:underline}
body.rf :is(.d2-card,.d2-row) .d2-proof--line{position:relative;z-index:2}
/* rule 4: every price in a line of text keeps the euro at .6em and tabular figures */
body.rf :is(.d2-save,.d2-low30,.d2-receipt__v){font-variant-numeric:tabular-nums}
body.rf :is(.d2-save,.d2-low30,.d2-receipt__v) .rf-cur{font-size:.6em;margin-left:1px}

/* the add button: the 44 px "+" circle, or the "Dodaj" pill with its round "+" */
body.rf .d2-add-f{display:contents}
body.rf .d2-add{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:var(--d2-cta);color:#fff;font:inherit;cursor:pointer}
body.rf .d2-add__i{display:grid;place-items:center}
body.rf .d2-add .icon{width:18px;height:18px;stroke-width:2.2}
body.rf .d2-add--label{width:auto;height:48px;gap:10px;padding:0 6px 0 18px;border-radius:999px;font-size:14.5px;font-weight:800}
body.rf .d2-add--label .d2-add__i{width:36px;height:36px;border-radius:50%;background:var(--d2-cta);color:#fff}
body.rf .d2-add--white{background:#fff;color:#7A1E3A}
body.rf .d2-add--white .d2-add__i{background:#7A1E3A}
body.rf .d2-add.rf-added{background:var(--d2-save-bg);color:var(--d2-save-ink)}
body.rf .d2-add--label.rf-added{padding:0 18px}

/* buttons */
body.rf .d2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:999px;
  font:inherit;font-size:14.5px;font-weight:800;text-decoration:none;cursor:pointer}
body.rf .d2-btn--primary{background:var(--d2-cta);color:#fff}
body.rf .d2-btn--secondary{background:var(--d2-surface);color:var(--d2-ink);box-shadow:inset 0 0 0 1px var(--d2-line),0 1px 0 var(--d2-line)}
body.rf .d2-btn--tertiary{min-height:44px;padding:0 4px;background:none;color:var(--d2-accent)}
body.rf .d2-btn--block{display:flex;width:100%}
body.rf .d2-btn:disabled,body.rf .d2-btn[aria-disabled="true"]{opacity:.4;cursor:default}

/* badges */
body.rf .d2-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:800;line-height:1}
body.rf .d2-badge--plus{background:var(--d2-dark);color:var(--d2-on-dark)}
body.rf .d2-badge__dot{width:7px;height:7px;border-radius:50%;background:var(--d2-cta)}
body.rf .d2-badge--new{background:var(--d2-save-bg);color:var(--d2-save-ink)}

/* eyebrow */
body.rf .d2-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:6px 12px 6px 10px;border-radius:999px;background:var(--d2-surface);
  box-shadow:0 1px 0 var(--d2-line),var(--d2-edge);font-size:12.5px;font-weight:600;line-height:1.3;color:var(--d2-ink-2)}
body.rf .d2-eyebrow__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--d2-live);box-shadow:0 0 0 3px var(--d2-live-halo)}

/* search tray: the 6 px ring around the 52 px white field, the visnja scan circle inside */
body.rf .d2-tray{padding:6px;border-radius:var(--d2-r-tray);background:var(--d2-tray);box-shadow:var(--d2-edge)}
body.rf .d2-tray .search{min-height:52px;padding:0 4px 0 16px;gap:10px;border:0;border-radius:var(--d2-r-field);background:var(--d2-surface);color:var(--d2-ink);
  box-shadow:0 8px 20px -12px rgba(22,19,15,.22),var(--d2-edge);--field-icon:var(--d2-ink)}
body.rf .d2-tray .search__icon{margin:0 -10px 0 -12px}
body.rf .d2-tray .search__icon .icon{width:20px;height:20px}
body.rf .d2-tray .search__input{margin:0;padding:14px 0;font-size:16px;font-weight:500}
body.rf .d2-tray .scan-btn{width:44px;height:44px;margin:0;border-radius:50%;background:var(--d2-cta);color:#fff}
body.rf .d2-tray .scan-btn__pill{width:auto;height:auto;background:none;border-radius:0}
body.rf .d2-tray .scan-btn .icon{width:20px;height:20px}
body.rf .d2-tray .scan-btn:focus-visible{outline:3px solid var(--d2-focus);outline-offset:2px}
@supports selector(:has(*)){body.rf .d2-tray .search:has(.search__input:focus-visible){outline:3px solid var(--d2-focus);outline-offset:2px}}

/* chips: 36 px pills (44 px tap area), the city chip ink-filled. They wrap: no sideways scrolling. */
body.rf .d2-chips{display:flex;flex-wrap:wrap;gap:0 8px;margin:14px 0 0;padding:0;list-style:none}
body.rf .d2-chip{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 15px;color:var(--d2-ink);font-size:13.5px;font-weight:600;
  text-decoration:none;white-space:nowrap;isolation:isolate}
body.rf .d2-chip::before{content:"";position:absolute;inset:4px 0;z-index:-1;border-radius:999px;background:var(--d2-surface);box-shadow:0 1px 0 var(--d2-line),var(--d2-edge)}
body.rf .d2-chip[aria-current="true"]::before{background:var(--d2-dark)}
body.rf .d2-chip[aria-current="true"],body.rf .d2-chip--city{color:var(--d2-on-dark)}
body.rf .d2-chip--city::before{background:var(--d2-dark);box-shadow:none}
body.rf .d2-chip--city .icon{fill:currentColor;stroke:none}

/* category discs: 64 px pastel circles, the ink line icon 28 px, the label wraps (no ellipsis) */
body.rf .d2-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.75rem,1fr));gap:12px 6px;margin:0;padding:0;list-style:none}
body.rf .d2-cat{display:grid;justify-items:center;align-content:start;gap:7px;min-height:44px;color:var(--d2-ink);text-decoration:none}
body.rf .d2-cat__disc{position:relative;display:grid;place-items:center;width:64px;height:64px}
body.rf .d2-cat__disc .d2-disc{position:absolute;inset:0;width:100%;height:100%}
body.rf .d2-cat__disc .icon{position:relative;width:28px;height:28px;color:#16130F;--tint:rgba(255,255,255,.72)}
body.rf .d2-cat__l{max-width:100%;font-size:13px;font-weight:600;line-height:1.15;text-align:center;overflow-wrap:anywhere;hyphens:auto}
@media (min-width:1024px){body.rf .d2-cats{grid-template-columns:repeat(8,minmax(0,1fr))}}

/* section header */
body.rf .d2-sec__h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
body.rf .d2-sec__t{margin:0;font-size:21px;font-weight:800;line-height:1.15;letter-spacing:-.025em;color:var(--d2-ink)}
body.rf .d2-sec__a{display:inline-flex;align-items:center;justify-content:flex-end;flex:none;min-width:44px;min-height:44px;color:var(--d2-accent);font-size:14px;font-weight:700;text-decoration:none}

/* the deal receipt tile: visnja, r30 top, the zigzag bottom edge; the product on its disc right on the visnja */
body.rf .d2-deal{position:relative;display:flex;flex-direction:column;padding:8px 8px 26px;border-radius:var(--d2-r-tile) var(--d2-r-tile) 0 0;background:var(--d2-visnja);color:#fff;
  -webkit-mask:var(--d2-zig-b);mask:var(--d2-zig-b)}
body.rf .d2-deal__vis{display:flex;justify-content:center;padding-top:14px}
body.rf .d2-deal .d2-pv{--d2-contact:rgba(40,6,18,.5)}
body.rf .d2-deal__b{display:flex;flex-direction:column;padding:14px 10px 0}
body.rf .d2-deal__name{margin:0;font-size:17px;font-weight:700;line-height:1.25;color:#fff}
body.rf .d2-deal__name a{color:inherit;text-decoration:none}
/* the name opens the product from the whole tile (rule 8); the proof link and "Dodaj" stay above it */
body.rf .d2-deal__name a::after{content:"";position:absolute;inset:0;z-index:1}
/* motion.css scales a pressed link; a stretched link would become its own ::after's containing block and lose the tap */
body.rf :is(.d2-card__name,.d2-row__name,.d2-deal__name) a[href]:active{transform:none}
body.rf .d2-deal__name a:focus-visible{outline:0}
body.rf .d2-deal__name a:focus-visible::after{outline:3px solid var(--d2-focus);outline-offset:-3px;border-radius:var(--d2-r-tile) var(--d2-r-tile) 0 0}
body.rf .d2-deal .d2-proof{position:relative;z-index:2}
body.rf .d2-deal__save{margin:12px 0 0}
body.rf .d2-deal__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
body.rf .d2-deal .d2-price{color:#fff}

/* the product card: the tray ring around the white card; the whole card opens the product */
body.rf .d2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--d2-card-gap);margin:0;padding:0;list-style:none}
body.rf .d2-grid>li{display:flex;min-width:0}
body.rf .d2-grid__wide{grid-column:span 2}
@media (min-width:1024px){body.rf .d2-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
body.rf .d2-card{position:relative;display:flex;flex:1;min-width:0;padding:6px;border-radius:var(--d2-r-ring);background:var(--d2-tray);box-shadow:var(--d2-edge)}
body.rf .d2-card__in{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0;padding:8px;border-radius:var(--d2-r-card);background:var(--d2-surface);box-shadow:var(--d2-edge)}
body.rf .d2-card__vis{display:flex;justify-content:center;margin:2px 0 6px}
body.rf .d2-card__name{margin:0;padding:0 4px;font-size:14.5px;font-weight:700;line-height:1.25;color:var(--d2-ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body.rf .d2-card__name a{color:inherit;text-decoration:none}
body.rf .d2-card__name a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--d2-r-ring)}
body.rf .d2-card__name a:focus-visible{outline:0}
body.rf .d2-card__name a:focus-visible::after{outline:3px solid var(--d2-focus);outline-offset:2px}
body.rf .d2-card__meta{margin:0;padding:0 4px;font-size:12.5px;font-weight:500;line-height:1.35;color:var(--d2-muted)}
body.rf .d2-card__save{margin:6px 0 0 4px}
body.rf .d2-card .d2-low30{margin:6px 0 0;padding:0 4px}
body.rf .d2-card .d2-proof:not(.d2-proof--line){position:relative;z-index:2;margin-left:4px}
body.rf .d2-card__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding:8px 0 0 4px}
body.rf .d2-card__txt{display:contents}
body.rf .d2-card--wide .d2-card__in{flex-direction:row;align-items:center;gap:12px}
body.rf .d2-card--wide .d2-card__vis{flex:none;width:116px;margin:0}
body.rf .d2-card--wide .d2-card__txt{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0;align-self:stretch;padding:6px 0 0}
body.rf .d2-card--wide .d2-pv{--s:108px}

/* product rows: 72 px, the visual left, the price right */
body.rf .d2-rows{margin:0;padding:0;list-style:none}
body.rf .d2-row{position:relative;display:flex;align-items:center;gap:12px;min-height:72px;padding:6px 0;border-top:1px solid var(--d2-line)}
body.rf .d2-row:first-child{border-top:0}
body.rf .d2-row__vis{display:flex;flex:none}
body.rf .d2-row__main{display:grid;gap:2px;flex:1;min-width:0}
body.rf .d2-row__name{font-size:15px;font-weight:700;line-height:1.3;color:var(--d2-ink)}
body.rf .d2-row__name a{color:inherit;text-decoration:none}
body.rf .d2-row__name a::after{content:"";position:absolute;inset:0;z-index:1}
body.rf .d2-row__meta{font-size:12.5px;font-weight:500;color:var(--d2-muted)}

/* the receipt card: white, the zigzag bottom edge, the 800 totals */
body.rf .d2-receipt{padding:18px 20px 30px;border-radius:var(--d2-r-card) var(--d2-r-card) 0 0;background:var(--d2-surface);box-shadow:var(--d2-edge);
  -webkit-mask:var(--d2-zig-b);mask:var(--d2-zig-b)}
body.rf .d2-receipt__t{margin:0 0 8px;font-size:17px;font-weight:800;letter-spacing:-.02em}
body.rf .d2-receipt__line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding:8px 0;border-top:1px dashed var(--d2-line);font-size:15px}
body.rf .d2-receipt__line:first-of-type{border-top:0}
body.rf .d2-receipt__v{font-weight:700;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
body.rf .d2-receipt__line--total{font-size:17px;font-weight:800;border-top-style:solid}
body.rf .d2-receipt__line--total .d2-receipt__v{font-size:21px;font-weight:800}

/* sheets: white r28 top, the 5 px grab handle, 20 px padding, title 21/800 */
body.rf .d2-sheet .sheet__panel{display:grid;gap:12px;padding:26px 20px calc(20px + env(safe-area-inset-bottom,0px));border:0;border-radius:var(--d2-r-ring) var(--d2-r-ring) 0 0;
  background:var(--d2-surface);box-shadow:var(--d2-edge)}
body.rf .d2-sheet .sheet__panel::before{display:block;width:40px;height:5px;margin-top:-14px;background:var(--d2-tray)}
body.rf .d2-sheet .sheet__title{margin:0;font-size:21px;font-weight:800;letter-spacing:-.025em}

/* empty states: the mascot, one sentence, one action */
body.rf .d2-empty{display:grid;justify-items:center;gap:10px;padding:32px 20px;text-align:center}
body.rf .d2-empty>picture{display:contents}
body.rf .d2-empty__m{width:120px;height:120px}
body.rf .d2-empty__t{margin:0;font-size:21px;font-weight:800;letter-spacing:-.025em}
body.rf .d2-empty__p{margin:0;max-width:40ch;color:var(--d2-muted)}

/* skeletons: tray shapes, a 1.2 s opacity pulse */
body.rf .d2-skel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--d2-card-gap)}
body.rf .d2-skel__i{display:grid;justify-items:center;gap:8px;padding:14px;border-radius:var(--d2-r-ring);background:var(--d2-surface);box-shadow:inset 0 0 0 6px var(--d2-tray)}
body.rf .d2-skel__disc{width:88px;height:88px;border-radius:50%;background:var(--d2-tray)}
body.rf .d2-skel__l{width:80%;height:12px;border-radius:999px;background:var(--d2-tray)}
body.rf .d2-skel__l--s{width:50%}
body.rf .d2-skel--rows{grid-template-columns:1fr}
body.rf .d2-skel--rows .d2-skel__i{grid-template-columns:48px 1fr;justify-items:start;padding:10px;border-radius:var(--d2-r-sm)}
body.rf .d2-skel--rows .d2-skel__disc{width:48px;height:48px;grid-row:span 2}


/* ---- 7. Home (7.1, desktop 7.12) ------------------------------------------------------------------------------- */
body.rf .d2-home{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "cats" "deal" "staples" "more" "rest";
  column-gap:40px;padding-block:24px 0}
/* night: the one static glow behind the hero, painted on the page itself so it has no edge (light: none) */
body.rf:has(.d2-home){background:var(--d2-glow) top left/100% 640px no-repeat,var(--d2-bg)}
body.rf .d2-home>section{min-width:0;margin-bottom:var(--d2-gap)}
body.rf .d2-home__hero{grid-area:hero;padding-bottom:4px}
body.rf .d2-home__hero .d2-tray{margin-top:18px}
body.rf .d2-home__cats{grid-area:cats}
body.rf .d2-home__deal{grid-area:deal}
body.rf .d2-home__staples{grid-area:staples}
body.rf .d2-home__more{grid-area:more}
body.rf .d2-home__rest{grid-area:rest}
body.rf .d2-how{display:grid;gap:4px;padding:16px 18px;border-radius:var(--d2-r-card);background:var(--d2-surface);box-shadow:var(--d2-shadow)}
body.rf .d2-how p{margin:0;font-size:14px;color:var(--d2-ink-2)}
body.rf .d2-how .d2-how__fine{font-size:12.5px;color:var(--d2-muted)}
body.rf .d2-how .d2-btn--tertiary{justify-self:start}
body.rf .d2-home .store-badges{padding:16px 18px;border-radius:var(--d2-r-card);background:var(--d2-surface);box-shadow:var(--d2-shadow);margin-bottom:12px}
@media (min-width:1024px){
  body.rf .d2-home{grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"hero deal" "cats cats" "staples staples" "more more" "rest rest";padding-top:48px}
  body.rf .d2-home__hero{align-self:center;padding-bottom:var(--d2-gap)}
  body.rf .d2-home__hero .d2-chips{max-width:560px}
}
/* the container under the home's own blocks (the household invite, the coming line) keeps the page rhythm */
body.rf .d2-home+.container.page{padding-top:0}
body.rf .d2-home+.container.page .panel{border:0;border-radius:var(--d2-r-card);background:var(--d2-surface);box-shadow:var(--d2-shadow)}


/* ---- 8. Reduced motion (rule 10: every animation becomes a 150 ms fade; nothing moves), forced colours -------- */
@media (prefers-reduced-motion:reduce){
  body.rf .d2-rise,body.rf .d2-deal .d2-save,body.rf .d2-bump,body.rf .d2-sheet[open] .sheet__panel{animation:d2-fade var(--d2-fade) linear both}
  body.rf .d2-skel__i>span{animation:none}
}
@media (forced-colors:active){
  body.rf .d2-chip::before,body.rf .d2-card,body.rf .d2-save,body.rf .d2-head{border:1px solid CanvasText}
  body.rf .d2-disc{forced-color-adjust:none}
}