/* ==========================================================================
   Tarino base + layout (v1.0 kit). Loads after tokens.css, before components.css.

   Phone first. 720px: header nav replaces the tab bar, tiles and cards go to grids. 960px: two-column product page.
   Content max-width 1120px (--container), side gutter 16px, 24px from 720px (set in tokens.css).
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (min-width:720px){html{scroll-padding-top:80px}}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;display:flex;flex-direction:column;
}
@supports (min-height:100dvh){body{min-height:100dvh}}
body>main{flex:1 0 auto;min-width:0}

/* The phone tab bar is fixed to the bottom; the footer carries the room for it (class set by base.html), so the footer
   surface runs down behind the bar. */
body.has-tabbar .site-footer{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px))}
@media (min-width:720px){body.has-tabbar .site-footer{padding-bottom:0}}

h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,video{max-width:100%}   /* not svg: the marker loop is wider than its parent on purpose */
a{color:var(--visnja-ink);text-underline-offset:.2em}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}

/* Focus: 3px ring in višnja, offset 2. In dark it is the višnja ink tint (--focus flips). */
:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-offset)}
:focus:not(:focus-visible){outline:none}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--space-4);top:0;transform:translateY(-130%);z-index:var(--z-skip);
  background:var(--visnja);color:var(--on-visnja);font-weight:var(--fw-bold);text-decoration:none;
  padding:12px 16px;border-radius:var(--radius-12);
}
.skip-link:focus{transform:none;top:var(--space-2);outline-color:var(--on-visnja)}
main:focus{outline:none}

/* ---- Container ---- */
.container{
  width:100%;margin-inline:auto;
  max-width:calc(var(--container) + 2 * var(--gutter));
  padding-inline:var(--gutter);
}
/* viewport-fit=cover lets the page run under the notch in landscape: keep content out of it */
@supports (padding:max(0px)){
  .container{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
}
.page{padding-block:var(--space-2) var(--space-8)}
@media (min-width:720px){.page{padding-block:var(--space-4) var(--space-12)}}

/* ---- Text utilities (see README "Utilities") ---- */
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.fine{font-size:.84rem;line-height:1.45;color:var(--muted)}
.mono{font-family:var(--mono);font-size:.78rem;overflow-wrap:anywhere}
.nowrap{white-space:nowrap}
.serif{font-family:var(--serif);font-weight:var(--fw-regular)}
.lead{font-size:1.06rem;color:var(--ink-2);max-width:60ch;text-wrap:pretty}
.page-title{
  font-family:var(--serif);font-weight:var(--fw-regular);
  font-size:1.72rem;line-height:1.08;letter-spacing:-.005em;text-wrap:balance;
  margin:var(--space-4) 0 var(--space-3);overflow-wrap:anywhere;
}
@media (min-width:720px){.page-title{font-size:2.3rem;margin-top:var(--space-8)}}

/* Plain running text pages (explainer, legal): bullets and paragraph rhythm come back. */
.prose{max-width:66ch;font-size:1.02rem;color:var(--ink-2)}
.prose>*+*{margin-top:var(--space-3)}
.prose ul{padding-left:var(--space-5);list-style:disc}
.prose ol{padding-left:var(--space-5);list-style:decimal}
.prose li+li{margin-top:var(--space-1)}
.prose h2{font-family:var(--serif);font-weight:var(--fw-regular);font-size:1.2rem;color:var(--ink);margin-top:var(--space-8)}

/* ---- Vertical rhythm ---- */
.stack>*+*{margin-top:var(--stack-gap,var(--space-4))}
.stack--sm{--stack-gap:var(--space-2)}
.stack--lg{--stack-gap:var(--space-6)}

/* ---- Sections ---- mock: .sec{padding:18px 16px 4px}; the side padding comes from .container */
.section{padding-block:18px var(--space-1)}
.section--tight{padding-top:14px}
@media (min-width:720px){.section{padding-block:var(--space-8) var(--space-1)}.section--tight{padding-top:var(--space-6)}}

/* ---- Grids. Tiles and cards go to a grid from 720px. ---- */
.card-grid{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:720px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}}
@media (min-width:960px){.card-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- Product page: one column on phones, two from 960px ----
   .layout-product__head  breadcrumb + product head (spans both columns)
   .layout-product__main  receipt, stats, verdict, actions        (left, sticky on desktop)
   .layout-product__side  trend, chains, where to buy, proof, share (right)
   DOM order is the phone order. The two columns are grids with ONE column that may shrink (minmax(0,1fr)), and their children may
   shrink too: an auto track or a min-width:auto child would take the width of its widest content (a 300px card column) and push a 320px
   phone sideways. */
.layout-product{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr)}
.layout-product__main,.layout-product__side{display:grid;gap:var(--space-4);align-content:start;grid-template-columns:minmax(0,1fr);min-width:0}
.layout-product__main>*,.layout-product__side>*{min-width:0}
/* 720 to 959px: still one page column, but a receipt, a verdict and two full-width buttons make 672px of wide boxes. --duo puts the
   receipt on the left and the rest on the right. */
@media (min-width:720px) and (max-width:959px){
  .layout-product__main--duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start}
  .layout-product__main--duo>:first-child{grid-row:1 / span 2}
}
@media (min-width:960px){
  .layout-product{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--space-8);row-gap:var(--space-2)}
  .layout-product__head{grid-column:1 / -1}
  .layout-product__main{position:sticky;top:88px;align-self:start}
  .layout-product__side{gap:var(--space-6)}
}
/* A sticky column only works while it fits the window: on a short screen its bottom would be cut off with no way to scroll to it.
   The tallest left column in the sample is 521px (about 545px with a three-line verdict and a price-list date), plus the 88px offset
   and 16px of air: below 660px of window height it scrolls with the page again. */
@media (min-width:960px) and (max-height:659px){.layout-product__main{position:static}}

/* ---- Two panes for list pages (basket + summary, search + filters) ----
   .layout-split__aside is the second pane (the last child, sticky from 960px).
   --list    a flexible list and a fixed 336px aside (search results: the list keeps the room the 7fr / 5fr basket split would take)
   --block   block layout below 960px, so a sticky aside can stick to the viewport instead of to its own grid cell (shopping mode)
   --areas   children placed by class, not by order: __head (spans both), __main (left, stacks), __aside (right, from the second row),
             so on a phone the DOM order is the reading order and the aside can sit between main blocks (account, tracker, chain).
             --rows-3: the aside spans three main blocks. */
.layout-split{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr)}
.layout-split>*{min-width:0}
@media (min-width:960px){.layout-split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--space-8);align-items:start}.layout-split__aside{position:sticky;top:88px}}
@media (min-width:960px){.layout-split--list{grid-template-columns:minmax(0,1fr) 336px}}
@media (max-width:959px){.layout-split--block{display:block}.layout-split--block>*+*{margin-top:var(--space-4)}}
@media (min-width:960px){
  .layout-split--areas>.layout-split__head{grid-column:1 / -1}
  .layout-split--areas>.layout-split__main{grid-column:1}
  .layout-split--areas>.layout-split__aside{grid-column:2;grid-row:2}
  .layout-split--rows-3>.layout-split__aside{grid-row:2 / span 3}
}

/* ---- Catalogue: a sticky filter column and the list (category page). Phones: filters above the list. ---- */
.layout-catalog{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-4);margin-top:var(--space-3)}
.layout-catalog__main{min-width:0}
@media (min-width:960px){
  .layout-catalog{grid-template-columns:288px minmax(0,1fr);column-gap:var(--space-8);align-items:start}
  .layout-catalog__filters{position:sticky;top:88px}
}

/* ---- One grid column that may shrink: a page column made of a search field, a heading, chips, a list. minmax(0,1fr) because an auto
   track would grow to the search field's intrinsic width at 320px. ---- */
.stack-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3);align-content:start;min-width:0}
.stack-grid>.pager{margin-top:var(--space-1)}