/* groups.css (W-0067, Mikhail 13.10): tabs by brand origin - the home price block and brand chips, the /marki/ brand list.
   Loaded by the home page and /marki/ after tokens.css. Markup: build/templates/partials/groups.html (gen/groups.py).
   Every list here is bounded (data/site/brand_groups.yaml limits): the blocks keep their height when models or brands
   are added. Light bands (paper #efedea, cards #fff, ink #14161a, notes #5c6169, price red #c8202a); motion only on a
   user switch, none with reduced motion. */
.gt [hidden]{display:none!important}
.gt-tabs{display:flex;flex-wrap:wrap;gap:0 26px;margin:0 0 18px;border-bottom:1px solid rgba(20,22,26,.14)}
.gt-tab{position:relative;display:inline-flex;align-items:baseline;gap:8px;min-height:48px;padding:12px 0;font-family:var(--f-disp);font-size:22px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;color:#5c6169;text-decoration:none;transition:color .2s}
.gt-tab small{font-family:var(--f-text);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:#5c6169}
.gt-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.gt-tab:hover,.gt-tab.is-on{color:#14161a}
.gt-tab.is-on::after{transform:scaleX(1)}
.gt-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.gt-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px 8px 16px;border-radius:999px;background:#fff;border:1.5px solid rgba(20,22,26,.14);color:#14161a;font-weight:600;font-size:15px;text-decoration:none;transition:transform .15s var(--ease),border-color .2s,background-color .2s,color .2s}
.gt-chip small{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#efedea;color:#3a3f46;font-size:12px;font-weight:700}
.gt-chip:hover{border-color:#14161a;transform:translateY(-2px)}
.gt-chip:active{transform:scale(.95)}
.gt-chips .gt-chip.is-on{background:#d6262d;border-color:#d6262d;color:#fff}  /* beats «.band.light a{color:ink}» (3.6:1 on red) */
.gt-chip.is-on small{background:rgba(0,0,0,.24);color:#fff}
.gt-chip-all{background:transparent;border-color:#14161a}
.gt-tab:focus-visible,.gt-chip:focus-visible,.gt-row:focus-visible,.gt-bt:focus-visible,.gt-all a:focus-visible{outline:3px solid #14161a;outline-offset:2px}
.gt-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:4px 0 12px;font-size:15px;color:#3a3f46}
.gt-sum b{font-family:var(--f-disp);font-weight:500;font-size:20px;text-transform:uppercase;letter-spacing:.02em;color:#14161a}
.gt-sum a,.gt-more a{color:#14161a;text-decoration:underline}
.gt-rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
@media (min-width:1024px){.gt-rows{grid-template-columns:repeat(4,1fr)}}
.gt-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:8px 14px;background:#fff;border-radius:10px;color:#14161a;text-decoration:none;overflow:hidden;transition:box-shadow .2s,transform .2s var(--ease)}
.gt-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);transform:scaleY(0);transition:transform .2s var(--ease)}
.gt-car{min-width:0;font-family:var(--f-disp);font-size:18px;font-weight:500;line-height:1.1;text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere}
.gt-val{font-family:var(--f-disp);font-size:18px;font-weight:600;color:#c8202a;white-space:nowrap}
.gt-row:hover{box-shadow:0 8px 20px rgba(20,22,26,.12);transform:translateY(-2px)}
.gt-row:hover::before{transform:scaleY(1)}
.gt-more{margin:12px 0 0;font-size:15px}
.gt-all{margin:20px 0 0}
.band.light .gt-all a,.gt-all a{display:inline-flex;align-items:center;min-height:48px;padding:12px 22px;border:1.5px solid #14161a;border-radius:var(--r-btn);color:#14161a;font-weight:600;text-decoration:none;transition:background-color .2s,color .2s}
.band.light .gt-all a:hover,.gt-all a:hover{background:#14161a;color:#fff}
/* home: the price band is a little tighter than other bands; «Все цены» stands at the right end of the origin tabs */
@media (min-width:760px){#tseny{padding:var(--band-y) 0 0}#tseny .blead{max-width:none}}  /* no bottom padding: the next band is the same paper, its own top padding is the gap (W-0086 round 3) */
.gt-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:0 24px;margin:0 0 18px;border-bottom:1px solid rgba(20,22,26,.14)}
.gt-head .gt-tabs{margin:0;border-bottom:0}
.gt-head .gt-all{margin:0 0 8px}
.band.light .gt-head .gt-all a,.gt-head .gt-all a{min-height:44px;padding:10px 18px}
.gt-chips-home{margin:0}
/* /marki/: brand tiles under the origin tabs; without JS every group stands under its own heading */
.gt-h{margin:28px 0 12px;font-family:var(--f-disp);font-size:22px;font-weight:500;text-transform:uppercase;letter-spacing:.02em}
.gt-on .gt-h{display:none}
.gt-bgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:760px){.gt-bgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.gt-bgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1200px){.gt-bgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.gt-bt{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 10px;min-height:64px;padding:14px 16px;background:#fff;border-radius:12px;color:#14161a;text-decoration:none;overflow:hidden;transition:box-shadow .2s,transform .2s var(--ease)}
.gt-bt b{font-family:var(--f-disp);font-size:20px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;line-height:1.15}
.gt-bt small{font-size:13px;color:#5c6169;white-space:nowrap}
.gt-bt span{grid-column:1/-1;font-size:13px;color:#5c6169;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt-bt::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.gt-bt:hover{box-shadow:0 8px 20px rgba(20,22,26,.12);transform:translateY(-2px)}
.gt-bt:hover::after{transform:scaleX(1)}
@media (max-width:759px){
  .gt-tabs{gap:0 18px}
  .gt-tab{font-size:18px}
  .gt-tab small{display:none}
  .gt-bt small{font-size:14px}
  .gt-bt{grid-template-columns:1fr;min-height:60px;padding:10px 14px}
  .gt-bt b{font-size:18px}
  .gt-bt span{display:none}
}
/* a switch runs the new rows in one after another: a calm cascade, no sound; none with reduced motion (the script adds .gt-in) */
@keyframes gt-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.gt-in .gt-rows>li,.gt-in .gt-bt,.gt-in>.gt-chips>.gt-chip{animation:gt-up .34s var(--ease) both}
.gt-in .gt-rows>li:nth-child(2),.gt-in .gt-bt:nth-child(2),.gt-in>.gt-chips>.gt-chip:nth-child(2){animation-delay:.03s}
.gt-in .gt-rows>li:nth-child(3),.gt-in .gt-bt:nth-child(3),.gt-in>.gt-chips>.gt-chip:nth-child(3){animation-delay:.06s}
.gt-in .gt-rows>li:nth-child(4),.gt-in .gt-bt:nth-child(4),.gt-in>.gt-chips>.gt-chip:nth-child(4){animation-delay:.09s}
.gt-in .gt-rows>li:nth-child(5),.gt-in .gt-bt:nth-child(5),.gt-in>.gt-chips>.gt-chip:nth-child(5){animation-delay:.12s}
.gt-in .gt-rows>li:nth-child(6),.gt-in .gt-bt:nth-child(6),.gt-in>.gt-chips>.gt-chip:nth-child(6){animation-delay:.15s}
.gt-in .gt-rows>li:nth-child(7),.gt-in .gt-bt:nth-child(7),.gt-in>.gt-chips>.gt-chip:nth-child(7){animation-delay:.18s}
.gt-in .gt-rows>li:nth-child(n+8),.gt-in .gt-bt:nth-child(n+8),.gt-in>.gt-chips>.gt-chip:nth-child(n+8){animation-delay:.21s}
@media (prefers-reduced-motion:reduce){.gt-in *{animation:none!important}.gt-tab::after,.gt-row,.gt-bt,.gt-chip{transition:none}}
/* W-0086 round 2 (Mikhail 14.10 21:20: «было попроще... табами: вверху Китай / Япония / Корея / Европа, по маркам тоже табы, под
   ними модели конкретной марки»): the home price block shows one brand at a time (origin tabs -> brand chips -> rows above).
   The block height eases on a switch (tabs_js morph). Phone .gp-mp: tabs and chips scroll sideways in their own row (the page
   never does), the models in two columns. */
.gt-price .gt-more{margin:12px 0 0}
.gp-links{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:759px){
  .gp-mp .gt-tabs,.gp-mp .gt-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding:0 var(--gutter)}
  .gp-mp .gt-tabs::-webkit-scrollbar,.gp-mp .gt-chips::-webkit-scrollbar{display:none}
  .gp-mp .gt-tab,.gp-mp .gt-chip{flex:0 0 auto}
  .gp-mp .gt-chips{padding-bottom:4px}
  .gp-mp .gt-rows{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .gp-mp .gt-row{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:56px;padding:8px 12px}
  .gp-mp .gt-car{font-size:16px}
  .gp-mp .gt-val{font-size:15px}
  .gp-mp .gt-sum{margin:2px 0 10px}
  .gp-mp .gt-sum b{font-size:18px}
  .gp-mp .gt-more a{display:inline-flex;align-items:center;min-height:44px}
  .gp-mp .gt-tabs.gt-fade,.gp-mp .gt-chips.gt-fade{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
  .m-price .gt-all{margin:12px 0 0}
  .m-price .gt-all a{width:100%;justify-content:center}
}