/* ==========================================================================
   Premium look (R1-W21, G18-008). Linked by base.html only while the country's premium_look row is shown to the visitor, and every rule
   starts with [data-look="premium"], so with the row off nothing here applies. It refines the v1 kit; it replaces none of it.

   What changes: a lighter, quieter canvas; hairlines in place of heavy borders; shadows that are tinted and diffuse; a firmer
   type scale for headings (Young Serif, tighter); more air between blocks; one calm hover, press and focus language;
   tabular numerals on every price. What does not: the brand (višnja, Young Serif, Onest), the tap targets (44 px), the
   16 px floor of the Explore pages, the focus ring, the three themes, every word. Colour, space and radius come from tokens.css;
   the few new tokens are --p-* below. Motion is transform and opacity only, and only where the visitor has not asked for less.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens. Light, then dark for the device, then dark forced (the last two identical, as in tokens.css).
   -------------------------------------------------------------------------- */
:root[data-look="premium"]{
  --p-ease:cubic-bezier(.16,1,.3,1);
  --p-tint:58,24,38;   /* the shadow hue: višnja, near black, as an rgb triple */
  --p-lift:0 1px 2px rgba(var(--p-tint),.04),0 14px 30px -22px rgba(var(--p-tint),.2);
  --p-hair:0 1px 1px rgba(var(--p-tint),.03);
  --p-glass:color-mix(in srgb,var(--bg) 86%,transparent);
  --p-radius:16px;
}
:root[data-look="premium"],
[data-look="premium"] [data-theme="light"]{
  --bg:#F8F6F7; --surface:#FFFFFF; --raise:#FCFBFB;
  --line:#EBE5E8; --line-2:#F3EFF1;
  --shadow:0 1px 2px rgba(58,24,38,.04),0 12px 28px -20px rgba(58,24,38,.2);
  --shadow-card:0 1px 2px rgba(58,24,38,.05),0 22px 36px -28px rgba(58,24,38,.26);
  --shadow-btn:0 10px 20px -14px rgba(94,21,48,.6);
  --shadow-snap:0 8px 16px -10px rgba(58,24,38,.3);
  --seg-track:#EFEAEC;
}
@media (prefers-color-scheme: dark){
  :root[data-look="premium"]:not([data-theme="light"]){
    --p-tint:0,0,0;
    --bg:#141012; --surface:#1E181B; --raise:#241D20;
    --line:#30272B; --line-2:#272024;
    --seg-track:#1A1417; --seg-active:#30272B;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 30px -18px rgba(0,0,0,.7);
    --shadow-card:0 1px 2px rgba(0,0,0,.5),0 20px 34px -22px rgba(0,0,0,.8);
    --shadow-btn:0 12px 22px -14px rgba(0,0,0,.8); --shadow-snap:0 6px 14px -8px rgba(0,0,0,.7);
  }
}
:root[data-look="premium"][data-theme="dark"],
[data-look="premium"] [data-theme="dark"]{
  --p-tint:0,0,0;
  --bg:#141012; --surface:#1E181B; --raise:#241D20;
  --line:#30272B; --line-2:#272024;
  --seg-track:#1A1417; --seg-active:#30272B;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 30px -18px rgba(0,0,0,.7);
  --shadow-card:0 1px 2px rgba(0,0,0,.5),0 20px 34px -22px rgba(0,0,0,.8);
  --shadow-btn:0 12px 22px -14px rgba(0,0,0,.8); --shadow-snap:0 6px 14px -8px rgba(0,0,0,.7);
}


/* --------------------------------------------------------------------------
   2. Type and rhythm
   -------------------------------------------------------------------------- */
[data-look="premium"] body{line-height:1.55}
[data-look="premium"] ::selection{background:color-mix(in srgb,var(--visnja) 22%,transparent)}
[data-look="premium"] .page-title,
[data-look="premium"] .hero__title,
[data-look="premium"] .section-head__title,
[data-look="premium"] .panel__title,
[data-look="premium"] .empty__title,
[data-look="premium"] .sources__title,
[data-look="premium"] .x3-h2,
[data-look="premium"] .product-head__title{letter-spacing:-.016em;text-wrap:balance}
[data-look="premium"] .page-title{font-size:2rem;line-height:1.04;margin:var(--space-6) 0 var(--space-3)}
[data-look="premium"] .page-head{gap:var(--space-2)}
[data-look="premium"] .lead{font-size:1.1rem;line-height:1.55;color:var(--ink-2)}
[data-look="premium"] .fine{line-height:1.5}
[data-look="premium"] .lead,
[data-look="premium"] .fine,
[data-look="premium"] .explore-note,
[data-look="premium"] .x3-meta,
[data-look="premium"] .x3-answer{text-wrap:pretty}
[data-look="premium"] .section-head{margin-bottom:var(--space-2)}
[data-look="premium"] .section-head__title{font-size:1.3rem}
[data-look="premium"] .section{padding-block:var(--space-6) var(--space-1)}
[data-look="premium"] .product-head__title{line-height:1.12}
[data-look="premium"] .num,
[data-look="premium"] .chain-row__price,
[data-look="premium"] .chain-row__unit,
[data-look="premium"] .chain-card__amt,
[data-look="premium"] .chain-card__unit,
[data-look="premium"] .product-row__figs,
[data-look="premium"] .basket-row__price,
[data-look="premium"] .stat__v,
[data-look="premium"] .x3-big,
[data-look="premium"] .x3-small,
[data-look="premium"] .explore-cup{font-variant-numeric:tabular-nums}
@media (min-width:720px){
  [data-look="premium"] .page-title{font-size:2.9rem;margin-top:var(--space-10)}
  [data-look="premium"] .section-head__title{font-size:1.65rem}
  [data-look="premium"] .section{padding-block:var(--space-10) var(--space-1)}
  [data-look="premium"] .lead{font-size:1.18rem}
  [data-look="premium"] .page{padding-block:var(--space-4) var(--space-16)}
}
@media (prefers-reduced-motion:no-preference){
  [data-look="premium"]{scroll-behavior:smooth}
}

/* Running text links: a hairline underline that darkens on hover, not a heavy one. */
[data-look="premium"] a:not([class]){text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--visnja-ink) 45%,transparent)}
[data-look="premium"] a:not([class]):hover{text-decoration-color:currentColor}


/* --------------------------------------------------------------------------
   3. Header, tab bar, footer
   -------------------------------------------------------------------------- */
[data-look="premium"] .site-header__inner{min-height:68px}
[data-look="premium"] .brand{font-size:1.2rem}
[data-look="premium"] .nav__link{font-weight:var(--fw-medium);color:var(--ink-2)}
[data-look="premium"] .nav__link[aria-current="page"]{font-weight:var(--fw-semi)}
@media (min-width:720px){
  [data-look="premium"] .site-header{background:var(--p-glass);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);border-bottom-color:var(--line)}
  [data-look="premium"] .site-header__inner{min-height:72px}
}
[data-look="premium"] .tabbar{background:color-mix(in srgb,var(--surface) 97%,transparent);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);border-top-color:var(--line)}
[data-look="premium"] .tabbar__item{font-weight:var(--fw-medium)}
[data-look="premium"] .tabbar__item[aria-current="page"]{font-weight:var(--fw-bold)}

[data-look="premium"] .site-footer{margin-top:var(--space-16);background:var(--surface);border-top-color:var(--line);font-size:.92rem}
[data-look="premium"] .site-footer__inner{padding-block:var(--space-8) var(--space-10);row-gap:var(--space-4)}
[data-look="premium"] .site-footer__note{color:var(--muted)}
[data-look="premium"] .site-footer a:not(.brand){font-weight:var(--fw-medium);color:var(--ink-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
[data-look="premium"] .site-footer a:not(.brand):hover{color:var(--visnja-ink);text-decoration-color:currentColor}
[data-look="premium"] .site-footer p>a[href^="mailto:"]{color:var(--visnja-ink);font-weight:var(--fw-semi)}
[data-look="premium"] .site-footer__links{display:flex;flex-wrap:wrap;gap:0 var(--space-5);padding-top:var(--space-2);border-top:1px solid var(--line-2)}
[data-look="premium"] .site-footer__links>span[aria-hidden="true"]{display:none}
[data-look="premium"] .site-footer__links a{font-size:.9rem}
@media (min-width:720px){
  [data-look="premium"] .site-footer__links{grid-column:1 / -1}
  [data-look="premium"] .site-footer__inner{align-items:start;padding-block:var(--space-12) var(--space-10)}
}


/* --------------------------------------------------------------------------
   4. Hero and search
   -------------------------------------------------------------------------- */
[data-look="premium"] .hero{background-image:radial-gradient(70% 140% at 88% -10%,rgba(255,255,255,.08),transparent 60%);padding:var(--space-6) 0 var(--space-8)}
[data-look="premium"] .hero__title{font-size:2rem;line-height:1.05}
[data-look="premium"] .search{box-shadow:0 10px 24px -16px rgba(var(--p-tint),.5)}
@media (min-width:720px){
  [data-look="premium"] .hero{padding:var(--space-16) 0 var(--space-16)}
  [data-look="premium"] .hero__title{font-size:3.3rem;max-width:18ch;margin-bottom:var(--space-8)}
  [data-look="premium"] .hero .search{max-width:680px}
}


/* --------------------------------------------------------------------------
   5. Surfaces: panel, card, tiles, callout. Hairline first; lift only where one answer needs it.
   -------------------------------------------------------------------------- */
[data-look="premium"] .panel{border-radius:var(--p-radius);border-color:var(--line);box-shadow:var(--p-hair);padding:var(--space-1) var(--space-5)}
[data-look="premium"] .panel--pad{padding:var(--space-5)}
[data-look="premium"] .panel--flush{padding:0}
[data-look="premium"] .card{border-radius:var(--p-radius);border-color:var(--line);box-shadow:var(--p-lift);padding:var(--space-4)}
[data-look="premium"] .proof{border-radius:var(--p-radius);border-color:var(--line)}
[data-look="premium"] .cat-tile{border-color:transparent;border-radius:var(--p-radius)}
[data-look="premium"] .cat-tile__label{font-weight:var(--fw-semi)}
[data-look="premium"] .callout{border-style:solid;border-color:var(--line);background:var(--surface);border-radius:var(--p-radius)}
[data-look="premium"] .verdict{border-radius:14px}
[data-look="premium"] .receipt__stats{border-color:var(--line)}
[data-look="premium"] .chain-card.is-best{box-shadow:0 0 0 1px var(--save),var(--p-lift)}
[data-look="premium"] .chain-row,
[data-look="premium"] .product-row,
[data-look="premium"] .basket-row,
[data-look="premium"] .sources__item,
[data-look="premium"] .link-list__row,
[data-look="premium"] .link-list>li>a{border-top-color:var(--line-2)}
[data-look="premium"] .tag{font-weight:var(--fw-semi)}
[data-look="premium"] .pill{background:var(--line-2);border:1px solid var(--line)}
[data-look="premium"] .snap{box-shadow:var(--shadow-snap)}
[data-look="premium"] .total-card{border-radius:var(--p-radius)}


/* --------------------------------------------------------------------------
   6. Buttons, chips, tabs, fields
   -------------------------------------------------------------------------- */
[data-look="premium"] .btn{border-radius:var(--radius-13);font-weight:var(--fw-semi);letter-spacing:-.003em}
[data-look="premium"] .btn--primary{box-shadow:var(--shadow-btn)}
[data-look="premium"] .btn--secondary{border-color:var(--line-strong)}
[data-look="premium"] .btn--secondary:hover{border-color:var(--visnja-ink)}
[data-look="premium"] .tabs,
[data-look="premium"] .x3-seg{border:1px solid var(--line)}
[data-look="premium"] .tab[aria-current="true"],
[data-look="premium"] .x3-seg__item[aria-current="true"]{box-shadow:0 1px 2px rgba(var(--p-tint),.12)}
[data-look="premium"] .chip--page::before,
[data-look="premium"] .x3-chip::before{border-color:var(--line)}
[data-look="premium"] .field__control{border-radius:var(--radius-13);border-color:var(--line-strong)}
[data-look="premium"] .field__label{font-weight:var(--fw-semi);color:var(--ink)}
[data-look="premium"] .search--page{border-color:var(--line-strong);box-shadow:var(--p-hair)}
[data-look="premium"] .stepper{border:1px solid var(--line)}

@media (prefers-reduced-motion:no-preference){
  [data-look="premium"] .btn,
  [data-look="premium"] .icon-btn,
  [data-look="premium"] .nav__link,
  [data-look="premium"] .tab,
  [data-look="premium"] .x3-seg__item,
  [data-look="premium"] .chip--page::before,
  [data-look="premium"] .x3-chip::before,
  [data-look="premium"] .field__control,
  [data-look="premium"] .cat-tile,
  [data-look="premium"] .deal-card,
  [data-look="premium"] .x3-cell,
  [data-look="premium"] .explore-cup,
  [data-look="premium"] .xm-row{transition:background-color 180ms var(--p-ease),border-color 180ms var(--p-ease),box-shadow 220ms var(--p-ease),color 180ms var(--p-ease),transform 220ms var(--p-ease)}
  [data-look="premium"] .btn--primary:hover{transform:translateY(-1px)}
  [data-look="premium"] .btn:active{transform:scale(.985)}
  [data-look="premium"] .cat-tile:hover,
  [data-look="premium"] .deal-card:hover{transform:translateY(-2px)}
  [data-look="premium"] .deal-card:hover{box-shadow:var(--shadow-card)}
  [data-look="premium"] .link-list .icon{transition:transform 200ms var(--p-ease),color 180ms var(--p-ease)}
  [data-look="premium"] .link-list>li>a:hover .icon{transform:translateX(3px);color:var(--visnja-ink)}
}


/* --------------------------------------------------------------------------
   7. Explore. Sizes stay at 16 px and above (the judged rule of rounds 3 and 4); the tables lose their outlines for tints, and the rows get room.
   -------------------------------------------------------------------------- */
[data-look="premium"] .link-list>li>a{min-height:68px;padding:var(--space-3) 0;font-size:1.05rem;font-weight:var(--fw-semi)}
[data-look="premium"] .link-list__sub{font-size:1rem;margin-top:1px}
[data-look="premium"] .x3-rows>li+li,
[data-look="premium"] .x3-grid tbody tr+tr>*{border-top-color:var(--line-2)}
[data-look="premium"] .x3-prow{min-height:76px;padding:14px 0}
[data-look="premium"] .x3-thumb{border-radius:12px}
[data-look="premium"] .x3-cell{border-width:2px;border-radius:12px}
[data-look="premium"] .x3-cell.is-cheapest{background:color-mix(in srgb,var(--save) 9%,var(--surface));border-color:color-mix(in srgb,var(--save) 60%,transparent)}
[data-look="premium"] .x3-cell:hover{background:var(--raise)}
[data-look="premium"] .x3-cell.is-cheapest:hover{background:color-mix(in srgb,var(--save) 14%,var(--surface))}
[data-look="premium"] .x3-answer{font-size:1.2rem;line-height:1.6rem}
[data-look="premium"] .x3-sheet{border-radius:var(--p-radius);box-shadow:var(--p-lift)}
[data-look="premium"] .x3-crow.is-yours,
[data-look="premium"] .xm-row.is-yours{border-width:1.5px;border-radius:var(--p-radius)}
[data-look="premium"] .x3-tag--own{background:var(--line-2);border:1px solid var(--line)}
[data-look="premium"] .x3-block{margin-top:var(--space-8)}
[data-look="premium"] .x3-chart-note,
[data-look="premium"] .x3-foot{color:var(--muted)}

/* The sizes of a shelf: one panel per product line; two across on a tablet and wider (they stood alone on a wide screen). */
[data-look="premium"] .xm-sizes{gap:var(--space-4);margin-top:var(--space-8)}
[data-look="premium"] .xm-sizes__label{font-weight:var(--fw-bold);font-size:1.05rem;margin-bottom:var(--space-3)}
[data-look="premium"] .explore-cups{gap:var(--space-2);padding-bottom:var(--space-1)}
[data-look="premium"] .explore-cup{border:1px solid transparent;border-radius:14px;min-width:84px;padding:var(--space-3) var(--space-2)}
[data-look="premium"] .explore-cup:hover{background:var(--raise);border-color:var(--line)}
[data-look="premium"] .explore-cup.is-current{background:var(--raise);border-color:var(--line)}
[data-look="premium"] .explore-cup__pack{border:1px solid var(--line-strong);border-radius:8px;background:color-mix(in srgb,var(--visnja) 5%,var(--surface))}
[data-look="premium"] .explore-cup.is-best .explore-cup__pack{border:1.5px solid var(--save);background:color-mix(in srgb,var(--save) 10%,var(--surface))}
[data-look="premium"] .explore-cup__size{font-weight:var(--fw-bold)}
@media (min-width:720px){
  [data-look="premium"] .xm-sizes{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  [data-look="premium"] .xm-sizes>.section-head,
  [data-look="premium"] .xm-sizes>.explore-note{grid-column:1 / -1}
}
@media (min-width:1100px){
  [data-look="premium"] .xm-sizes{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* The product page's rows (the merged flow): a row is a link, so its hover is a tint, never a shadow. */
[data-look="premium"] .xm-row:hover{background:var(--raise)}
[data-look="premium"] .xm-row.is-yours:hover{background:var(--surface)}

/* My shops: the ticks sit in columns on a wide screen and the fieldset loses its second frame inside the panel. */
[data-look="premium"] .panel fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;grid-template-columns:1fr;column-gap:var(--space-6)}
[data-look="premium"] .panel fieldset>legend{padding:0;margin-bottom:var(--space-3);color:var(--muted)}
[data-look="premium"] .panel fieldset>.check{border-top:1px solid var(--line-2);margin:0}
[data-look="premium"] .panel fieldset>.check:first-of-type{border-top:0}
@media (min-width:720px){
  [data-look="premium"] .panel fieldset{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-look="premium"] .panel fieldset>.check:nth-of-type(2){border-top:0}
}
@media (min-width:1100px){
  [data-look="premium"] .panel fieldset{grid-template-columns:repeat(3,minmax(0,1fr))}
  [data-look="premium"] .panel fieldset>.check:nth-of-type(3){border-top:0}
}

/* Small spacing fixes: the loop around a saving needs air above it, and the popular searches need air under a panel. */
[data-look="premium"] .deal-card__saving{margin-top:var(--space-4);margin-bottom:var(--space-2);padding:2px 6px}
[data-look="premium"] .popular--page{margin-top:var(--space-5)}
[data-look="premium"] :where(main,.stack,.section) > * + .section-head{margin-top:var(--space-8)}
[data-look="premium"] .cluster{margin-block:var(--space-3)}