/*
Theme Name: SK Jõusport
Theme URI: https://jousport.ee/
Author: Spark X Agency
Author URI: https://sparkxagency.com/
Description: SK Jõuspordi veebileht — 24/7 jõusaalid Tartus ja Valgas ning treeningud kuues Lõuna-Eesti saalis. Sisaldab Ektaco CompuCash piletipoodi.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: jousport
*/


/* ============================================================
   SK JÕUSPORT — forged-iron editorial build
   Single self-contained file. Content visible without JS.
   ============================================================ */

/* ---- Tokens ---- */
:root{
  --ink:        #0E0D0B;   /* page base, warm near-black */
  --ink-900:    #100E0B;
  --ink-800:    #16130F;   /* elevated bands */
  --ink-700:    #1C1813;   /* cards */
  --ink-600:    #262019;   /* card hover / raised */
  --chalk:      #F5EFE4;   /* primary text */
  --muted:      #B7AC9C;   /* secondary text (AA on ink) */
  --faint:      #857A6C;   /* tertiary / decorative labels */
  --ember:      #67D633;   /* the one accent */
  --ember-hi:   #81D742;
  --ember-deep: #4FC221;
  --amber:      #A8E85C;   /* molten gradient start */
  --steel:      #47433B;   /* warm border-ish gray */
  --line:       rgba(245,239,228,.10);
  --line-2:     rgba(245,239,228,.18);
  --glow:       rgba(103,214,51,.34);
  --ember-soft: rgba(103,214,51,.12);
  --on-ember: #0D1A06;

  --molten: linear-gradient(100deg, var(--amber) 0%, var(--ember) 46%, var(--ember-deep) 100%);

  --maxw: 1240px;
  --maxw-wide: 1440px;
  --pad: clamp(20px, 5vw, 76px);

  --r-xs: 3px;
  --r: 6px;
  --r-lg: 12px;

  --shadow: 0 34px 70px -28px rgba(0,0,0,.72);
  --shadow-sm: 0 16px 34px -20px rgba(0,0,0,.6);

  --ease: cubic-bezier(.2,.7,.2,1);
  --nav-h: 84px;

  --f-display: 'Anton','Oswald','Arial Narrow',sans-serif;
  --f-body: 'Archivo','Segoe UI',system-ui,sans-serif;
  --f-mono: 'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--chalk);
  font-family:var(--f-body);
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.62;
  font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* NB! Siin EI TOHI olla overflow-x. "hidden" teeb body-st
     kerimiskonteineri ja lõhub päise position:sticky; "clip" html/body
     peal katkestab hoopis vertikaalse kerimise. Horisontaalset ülevoolu
     ei ole (kontrollitud 360-1920px), seega pole seda vaja. */
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--ember); color:#160b06; }

/* ---- Grain overlay (atmosphere, never blocks content) ---- */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Layout helpers ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap-wide{ max-width:var(--maxw-wide); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hp{ position:absolute; left:-9999px; }

section{ position:relative; }
.section{ padding-block:clamp(72px,10vw,140px); }
.section-b{ border-top:1px solid var(--line); }
[id]{ scroll-margin-top:calc(var(--nav-h) + 18px); }

/* ---- Type ---- */
.display{
  font-family:var(--f-display);
  font-weight:400;
  line-height:1.14;
  letter-spacing:.006em;
  text-transform:uppercase;
}
.eyebrow{
  font-family:var(--f-mono);
  font-size:clamp(11px,1.05vw,12.5px);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ember);
  display:inline-flex; align-items:center; gap:.7em;
  font-weight:500;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--ember); opacity:.7;
}
.eyebrow.no-rule::before{ display:none; }
.kicker-index{
  font-family:var(--f-mono);
  color:var(--faint);
  font-size:12px; letter-spacing:.2em;
}
.lead{ color:var(--muted); font-size:clamp(17px,1.4vw,20px); line-height:1.6; max-width:62ch; }
.muted{ color:var(--muted); }
.faint{ color:var(--faint); }
.ember-txt{ color:var(--ember); }
.mono{ font-family:var(--f-mono); }

.h2{
  font-family:var(--f-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(38px,6.4vw,86px); line-height:1.14; letter-spacing:.004em;
}
.h3{
  font-family:var(--f-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(24px,3vw,34px); line-height:1.14;
}

.section-head{ display:grid; gap:20px; margin-bottom:clamp(40px,5vw,68px); }
.section-head .row1{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:space-between; }
.section-head .lead{ margin-top:4px; }

/* underline flourish */
.molten-underline{ position:relative; white-space:nowrap; }
.molten-underline::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.11em;
  background:var(--molten); border-radius:2px;
}

/* ---- Buttons ---- */
.btn{
  --bg:transparent; --fg:var(--chalk); --bd:var(--line-2);
  position:relative; display:inline-flex; align-items:center; gap:.62em;
  font-family:var(--f-mono); font-weight:500; font-size:13.5px;
  letter-spacing:.12em; text-transform:uppercase;
  padding:15px 24px; border:1px solid var(--bd); border-radius:var(--r);
  color:var(--fg); background:var(--bg); overflow:hidden; isolation:isolate;
  transition:transform .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease), background-color .28s var(--ease), box-shadow .28s var(--ease);
}
.btn svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ --bg:var(--ember); --fg:#0D1A06; --bd:transparent; box-shadow:0 12px 30px -12px var(--glow); }
.btn-primary::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--molten);
  opacity:0; transition:opacity .3s var(--ease);
}
.btn-primary:hover{ box-shadow:0 20px 44px -14px var(--glow); }
.btn-primary:hover::before{ opacity:1; }
.btn-primary:hover svg{ transform:translateX(3px); }
.btn-ghost{ --bg:transparent; --fg:var(--chalk); --bd:var(--line-2); }
.btn-ghost:hover{ --bd:var(--ember); color:var(--chalk); background:rgba(103,214,51,.06); }
.btn-ghost:hover svg{ transform:translateX(3px); }
.btn-lg{ padding:18px 30px; font-size:14px; }
.btn-block{ width:100%; justify-content:center; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--chalk); border-bottom:1px solid var(--line-2); padding-bottom:3px;
  transition:color .25s var(--ease), border-color .25s var(--ease), gap .25s var(--ease);
}
.link-arrow svg{ width:15px; height:15px; transition:transform .25s var(--ease); }
.link-arrow:hover{ color:var(--ember); border-color:var(--ember); gap:.8em; }
.link-arrow:hover svg{ transform:translateX(3px); }

/* ---- Chips / badges ---- */
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:7px 12px; border:1px solid var(--line-2); border-radius:100px; color:var(--muted);
}
.chip svg{ width:14px; height:14px; color:var(--ember); }
.chip-solid{ background:var(--ember); color:var(--on-ember); border-color:transparent; font-weight:600; }
.chip-solid svg{ color:var(--on-ember); }

/* ============================================================
   TOP UTILITY STRIP
   ============================================================ */
.utility{
  border-bottom:1px solid var(--line);
  background:var(--ink-900);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.08em;
  color:var(--muted);
}
.utility .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:40px; gap:16px; }
.utility a{ transition:color .2s var(--ease); }
.utility a:hover{ color:var(--ember); }
.utility .u-left{ display:flex; gap:22px; align-items:center; }
.utility .u-right{ display:flex; gap:22px; align-items:center; }
.utility .dot{ color:var(--ember); }
@media (max-width:820px){
  .utility .u-left span.hide-sm, .utility .u-right a.hide-sm{ display:none; }
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(14,13,11,.72);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.scrolled{ border-bottom-color:var(--line); background:rgba(12,11,9,.86); }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:var(--nav-h); }

.brand{ display:inline-flex; align-items:center; gap:14px; flex-shrink:0; }
.brand img{ height:42px; width:auto; filter:invert(1); opacity:.96; }
.brand .brand-tag{
  border-left:1px solid var(--line-2); padding-left:14px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); line-height:1.35; max-width:150px;
}
@media (max-width:1080px){ .brand .brand-tag{ display:none; } }

.nav-toggle{ position:absolute; opacity:0; pointer-events:none; }

.site-header .nav{ display:flex; align-items:center; gap:8px; }
.nav-list{ display:flex; align-items:center; gap:4px; }
.nav-list a{
  position:relative; display:inline-flex; align-items:center;
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding:10px 14px; border-radius:var(--r);
  transition:color .22s var(--ease), background-color .22s var(--ease);
}
.nav-list a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:1px;
  background:var(--ember); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
}
.nav-list a:hover{ color:var(--chalk); }
.nav-list a:hover::after,
.nav-list a.active::after{ transform:scaleX(1); }
.nav-list a.active{ color:var(--chalk); }
.nav .nav-cta{ margin-left:10px; }

/* burger */
.burger{
  display:none; width:46px; height:46px; border:1px solid var(--line-2); border-radius:var(--r);
  align-items:center; justify-content:center; flex-direction:column; gap:5px; background:transparent;
  transition:border-color .25s var(--ease);
}
.burger span{ display:block; width:20px; height:2px; background:var(--chalk); transition:transform .3s var(--ease), opacity .2s var(--ease); }

@media (max-width:1180px){  /* desktopi navi ei mahtunud enam ~1100px juures ära */
  .burger{ display:inline-flex; }
  .site-header .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#0C0B09; border-bottom:1px solid var(--line);
    padding:14px var(--pad) 26px; gap:2px;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    /* visibility EI ole üleminekus: see peab vahetuma kohe, muidu jääb menüü
       üleminekuolekusse rippuma. Animeerime ainult kõrgust ja läbipaistvust. */
    transition:max-height .4s var(--ease), opacity .3s var(--ease), padding .4s var(--ease);
  }
  .site-header .nav-list{ flex-direction:column; align-items:stretch; gap:0; }
  .site-header .nav-list a{ padding:15px 6px; font-size:15px; border-bottom:1px solid var(--line); border-radius:0; }
  .site-header .nav-list a::after{ display:none; }
  .site-header .nav .nav-cta{ margin:16px 0 0; }
  /* Avatud olek: eelistame JS-i lisatud klassi (kindel ja testitav),
     märkeruut jääb varuvariandiks, kui JS ei tööta. */
  .site-header.nav-open .nav,
  .site-header .nav-toggle:checked ~ .nav{
    max-height:82vh !important; overflow-y:auto; opacity:1 !important; visibility:visible !important;
  }
  .site-header.nav-open .burger,
  .nav-toggle:checked ~ .burger{ border-color:var(--ember); }
  .site-header.nav-open .burger span:nth-child(1),
  .nav-toggle:checked ~ .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .site-header.nav-open .burger span:nth-child(2),
  .nav-toggle:checked ~ .burger span:nth-child(2){ opacity:0; }
  .site-header.nav-open .burger span:nth-child(3),
  .nav-toggle:checked ~ .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(54px,8vw,104px) clamp(48px,7vw,88px);
  border-bottom:1px solid var(--line);
}
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-bg .glow{
  position:absolute; width:min(120vw,1200px); height:900px;
  left:-8%; bottom:-40%;
  background:radial-gradient(50% 50% at 50% 50%, var(--glow) 0%, rgba(103,214,51,0) 68%);
  filter:blur(10px);
}
.hero-bg .glow2{
  position:absolute; right:-14%; top:-24%; width:760px; height:760px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(247,166,60,.14) 0%, rgba(247,166,60,0) 70%);
}
.hero-bg .grid{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(48px,7vw,92px) clamp(48px,7vw,92px);
  -webkit-mask-image:radial-gradient(120% 100% at 30% 0%, #000 20%, transparent 78%);
  mask-image:radial-gradient(120% 100% at 30% 0%, #000 20%, transparent 78%);
  opacity:.55;
}
.hero-watermark{
  position:absolute; z-index:0; right:-2%; bottom:-8%;
  font-family:var(--f-display); text-transform:uppercase;
  font-size:min(30vw,420px); line-height:.8; color:transparent;
  -webkit-text-stroke:1px rgba(245,239,228,.05);
  pointer-events:none; user-select:none;
}
.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(30px,4vw,64px); align-items:center; }

.hero-eyebrow-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:26px; }
.hero h1{
  font-family:var(--f-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(30px,8vw,112px); line-height:1.16; letter-spacing:.004em;
  margin-bottom:26px;
}
.hero h1 .l2{ color:var(--ember); }
.hero .hero-sub{ font-size:clamp(17px,1.5vw,21px); color:var(--muted); max-width:52ch; line-height:1.55; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-stats{
  display:flex; flex-wrap:wrap; gap:0; margin-top:44px;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.hero-stat{ flex:1 1 45%; padding:20px 22px; border-right:1px solid var(--line); }
.hero-stat:last-child{ border-right:0; }
.hero-stat .num{ font-family:var(--f-display); font-size:clamp(26px,3.6vw,46px); line-height:1.12; color:var(--chalk); }
.hero-stat .lbl{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:8px; }

/* hero visual: custom barbell */
.hero-visual{ position:relative; display:flex; flex-direction:column; align-items:flex-end; gap:22px; }
.barbell-frame{
  position:relative; width:100%; padding:34px 26px 30px;
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  background:linear-gradient(160deg, var(--ink-700), var(--ink-900));
  box-shadow:var(--shadow);
}
.barbell-frame .corner-tag{
  position:absolute; top:18px; left:22px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
}
.barbell-frame .weight-tag{
  position:absolute; top:18px; right:22px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--ember);
}
.barbell-svg{ width:100%; height:auto; margin-top:22px; }
.cred-chip{
  display:flex; align-items:center; gap:16px; width:100%;
  padding:18px 20px; border:1px solid var(--line-2); border-radius:var(--r-lg);
  background:var(--ink-800);
}
.cred-chip .medal{
  flex-shrink:0; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; background:var(--molten); color:var(--on-ember);
}
.cred-chip .medal svg{ width:24px; height:24px; }
.cred-chip .c-txt strong{ display:block; font-size:15px; color:var(--chalk); font-weight:700; letter-spacing:.01em; }
.cred-chip .c-txt span{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; color:var(--muted); }

@media (max-width:960px){
  .hero-inner{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .hero-visual{ align-items:stretch; }
  .hero-watermark{ display:none; }
}
@media (max-width:520px){
  .hero-stat{ flex:1 1 45%; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  border-block:1px solid var(--line); background:var(--ink-900);
  padding-block:20px; overflow:hidden; white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{ display:inline-flex; align-items:center; gap:30px; animation:marqx var(--marq-dur,34s) linear infinite; will-change:transform; }
/* marquee never pauses - it must always move */
.marquee .m-item{
  font-family:var(--f-display); text-transform:uppercase; font-size:clamp(22px,2.6vw,34px);
  letter-spacing:.02em; color:var(--chalk);
}
.marquee .m-item.ghost{ color:transparent; -webkit-text-stroke:1px var(--steel); }
.marquee .m-dot{ color:var(--ember); }
.marquee .m-dot svg{ width:20px; height:20px; }
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   ABOUT / KLUBIST
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:start; }
.about-copy p + p{ margin-top:20px; }
.about-copy .drop{ font-size:clamp(19px,1.7vw,23px); color:var(--chalk); line-height:1.5; font-weight:500; }

.pullquote{
  margin-top:36px; padding:28px 30px; border-left:3px solid var(--ember);
  background:var(--ink-800); border-radius:0 var(--r-lg) var(--r-lg) 0;
}
.pullquote p{ font-family:var(--f-display); text-transform:none; font-weight:400; font-size:clamp(20px,2vw,26px); line-height:1.18; letter-spacing:.01em; color:var(--chalk); }
.pullquote .attr{ margin-top:14px; font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; color:var(--faint); text-transform:uppercase; }

/* fact stack */
.fact-stack{ display:grid; gap:14px; }
.fact{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center;
  padding:22px 24px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ink-700);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.fact:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.fact .fnum{ font-family:var(--f-display); font-size:clamp(34px,4vw,52px); line-height:.9; color:var(--ember); min-width:2ch; }
.fact .ftxt strong{ display:block; font-size:15.5px; color:var(--chalk); font-weight:700; }
.fact .ftxt span{ color:var(--muted); font-size:14.5px; }

/* timeline */
.timeline{ margin-top:clamp(48px,6vw,80px); }
.timeline-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,1fr);
  gap:0; border-top:1px solid var(--line-2); position:relative; overflow-x:auto; scrollbar-width:thin;
  scroll-snap-type:x mandatory;
}
.tl-item{ padding:26px 26px 30px 0; border-right:1px solid var(--line); position:relative; scroll-snap-align:start; }
.tl-item:last-child{ border-right:0; }
.tl-item::before{
  content:""; position:absolute; top:-1px; left:0; width:44px; height:3px; background:var(--molten);
}
.tl-item .yr{ font-family:var(--f-display); font-size:clamp(26px,2.4vw,34px); color:var(--chalk); margin-top:20px; }
.tl-item .ev{ margin-top:10px; color:var(--muted); font-size:14.5px; padding-right:18px; }
@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; }
  .timeline-track{ grid-auto-columns:minmax(200px,80%); }
}

/* ============================================================
   GYMS / JÕUSAALID
   ============================================================ */
.feature-gyms{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.gym-card{
  position:relative; overflow:hidden;
  border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--ink-700);
  padding:clamp(26px,3vw,40px);
  display:flex; flex-direction:column; gap:20px; min-height:280px;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.gym-card::after{
  content:""; position:absolute; right:-30%; top:-30%; width:60%; height:70%;
  background:radial-gradient(50% 50% at 50% 50%, var(--glow), transparent 70%);
  opacity:0; transition:opacity .4s var(--ease);
}
.gym-card:hover{ transform:translateY(-4px); border-color:var(--ember); box-shadow:var(--shadow-sm); }
.gym-card:hover::after{ opacity:.5; }
.gym-card .gc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; position:relative; z-index:1; }
.gym-card h3{ font-family:var(--f-display); font-size:clamp(30px,3.4vw,44px); text-transform:uppercase; line-height:1.14; }
.gym-card .addr{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-family:var(--f-mono); font-size:13px; margin-top:4px; }
.gym-card .addr svg{ width:15px; height:15px; color:var(--ember); }
.gym-card .gc-body{ position:relative; z-index:1; color:var(--muted); }
.gym-card .gc-feats{ display:flex; flex-wrap:wrap; gap:8px; position:relative; z-index:1; }
.gym-card .gc-price{ position:relative; z-index:1; margin-top:auto; display:flex; align-items:baseline; gap:10px; }
.gym-card .gc-price .p{ font-family:var(--f-display); font-size:clamp(30px,3vw,40px); color:var(--chalk); }
.gym-card .gc-price .u{ font-family:var(--f-mono); font-size:13px; color:var(--faint); }

.gym-24{ font-family:var(--f-display); font-size:clamp(20px,2vw,26px); color:var(--ember); letter-spacing:.02em; }

.loc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:24px; }
.loc-card{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ink-800);
  padding:26px 24px; transition:border-color .3s var(--ease), transform .3s var(--ease), background-color .3s;
}
.loc-card:hover{ border-color:var(--line-2); transform:translateY(-3px); background:var(--ink-700); }
.loc-card .lc-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.loc-card h4{ font-family:var(--f-display); font-size:clamp(22px,2.2vw,28px); text-transform:uppercase; }
.loc-card .lc-index{ font-family:var(--f-mono); font-size:12px; color:var(--faint); }
.loc-card .lc-addr{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; margin-top:12px; }
.loc-card .lc-addr svg{ width:15px; height:15px; color:var(--ember); flex-shrink:0; }
.loc-card .lc-offer{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:7px; }
.tag{ font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:5px 11px; }
.tag.hot{ color:var(--ember); border-color:rgba(103,214,51,.35); }

.stebby-band{
  margin-top:clamp(40px,5vw,64px);
  display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center;
  padding:clamp(24px,3vw,34px) clamp(26px,3vw,40px);
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  background:linear-gradient(120deg, var(--ink-800), var(--ink-700));
}
.stebby-band .sb-icon{ width:56px; height:56px; border-radius:var(--r); background:var(--ink-600); display:grid; place-items:center; color:var(--ember); }
.stebby-band .sb-icon svg{ width:28px; height:28px; }
.stebby-band h4{ font-family:var(--f-display); font-size:clamp(20px,2vw,26px); text-transform:uppercase; }
.stebby-band p{ color:var(--muted); font-size:14.5px; margin-top:4px; max-width:60ch; }

@media (max-width:900px){
  .feature-gyms{ grid-template-columns:1fr; }
  .loc-grid{ grid-template-columns:1fr 1fr; }
  .stebby-band{ grid-template-columns:1fr; text-align:left; gap:18px; }
}
@media (max-width:560px){ .loc-grid{ grid-template-columns:1fr; } }

/* ============================================================
   TRAININGS + PRICING
   ============================================================ */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.price-card{
  border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--ink-700);
  padding:clamp(24px,2.6vw,32px); display:flex; flex-direction:column;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.price-card:hover{ border-color:var(--ember); transform:translateY(-3px); }
.price-card .pc-town{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.price-card .pc-town h4{ font-family:var(--f-display); font-size:clamp(26px,2.6vw,32px); text-transform:uppercase; }
.price-card .pc-town .pin{ color:var(--ember); }
.price-card .pc-town .pin svg{ width:18px; height:18px; }
.price-row{ display:grid; grid-template-columns:1fr auto; gap:14px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line); }
.price-row:last-child{ border-bottom:0; }
.price-row .pr-name{ font-size:15px; color:var(--chalk); font-weight:500; }
.price-row .pr-name small{ display:block; color:var(--faint); font-family:var(--f-mono); font-size:11.5px; letter-spacing:.04em; margin-top:3px; text-transform:uppercase; }
.price-row .pr-val{ font-family:var(--f-display); font-size:clamp(22px,2.2vw,28px); color:var(--chalk); white-space:nowrap; }
.price-row .pr-val small{ font-family:var(--f-mono); font-size:11px; color:var(--faint); font-weight:400; letter-spacing:.02em; }

.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:22px; }
.svc-card{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ink-800); padding:28px 26px;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.svc-card:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.svc-card .svc-ic{ width:44px; height:44px; border-radius:var(--r); background:var(--ink-600); color:var(--ember); display:grid; place-items:center; margin-bottom:18px; }
.svc-card .svc-ic svg{ width:22px; height:22px; }
.svc-card h4{ font-size:17px; font-weight:700; color:var(--chalk); letter-spacing:.01em; }
.svc-card p{ color:var(--muted); font-size:14px; margin-top:8px; }
.svc-card .svc-price{ margin-top:16px; font-family:var(--f-display); font-size:26px; color:var(--chalk); }
.svc-card .svc-price small{ font-family:var(--f-mono); font-size:12px; color:var(--faint); }

.disc-band{
  margin-top:22px; display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center;
  border:1px dashed var(--line-2); border-radius:var(--r-lg); padding:26px clamp(24px,3vw,36px);
  background:var(--ink-800);
}
.disc-band .db-title{ font-family:var(--f-display); font-size:clamp(22px,2.4vw,30px); text-transform:uppercase; line-height:1.14; max-width:none; white-space:nowrap; }
.disc-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.disc-list .d{ }
.disc-list .d .dv{ font-family:var(--f-display); font-size:clamp(26px,3vw,38px); color:var(--ember); line-height:1; }
.disc-list .d .dl{ margin-top:8px; color:var(--muted); font-size:14px; }

.note-line{ margin-top:22px; display:flex; align-items:center; gap:12px; color:var(--muted); font-size:14.5px; font-family:var(--f-mono); letter-spacing:.02em; }
.note-line svg{ width:18px; height:18px; color:var(--ember); flex-shrink:0; }

@media (max-width:900px){
  .price-grid{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:1fr; }
  .disc-band{ grid-template-columns:1fr; }
  .disc-list{ grid-template-columns:1fr; }
}

/* ============================================================
   TRAINERS
   ============================================================ */
.trainer-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.trainer-card{
  display:grid; grid-template-columns:auto 1fr; gap:24px;
  border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--ink-700);
  padding:clamp(24px,3vw,34px); transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.trainer-card:hover{ border-color:var(--ember); transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.avatar{
  position:relative; width:88px; height:88px; border-radius:50%;
  display:grid; place-items:center; flex-shrink:0;
  background:conic-gradient(from 140deg, var(--ink-600), var(--ink-800));
  border:1px solid var(--line-2);
}
.avatar::before{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  background:var(--molten); -webkit-mask:radial-gradient(circle, transparent 60%, #000 61%); mask:radial-gradient(circle, transparent 60%, #000 61%);
  opacity:.0; transition:opacity .35s var(--ease);
}
.trainer-card:hover .avatar::before{ opacity:1; }
.avatar span{ font-family:var(--f-display); font-size:30px; color:var(--chalk); }
.tc-body h3{ font-family:var(--f-display); font-size:clamp(24px,2.4vw,30px); text-transform:uppercase; line-height:1.14; }
.tc-role{ font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ember); margin-top:8px; }
.tc-bio{ color:var(--muted); font-size:14.5px; margin-top:14px; }
.tc-meta{ margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
.tc-honors{ margin-top:16px; display:grid; gap:8px; }
.tc-honors li{ display:flex; align-items:flex-start; gap:10px; color:var(--chalk); font-size:14px; }
.tc-honors li svg{ width:16px; height:16px; color:var(--ember); margin-top:3px; flex-shrink:0; }
.tc-contact{ margin-top:16px; font-family:var(--f-mono); font-size:12.5px; color:var(--faint); word-break:break-word; }
.tc-contact a:hover{ color:var(--ember); }
@media (max-width:460px){ .trainer-card{ grid-template-columns:1fr; } .avatar{ width:72px; height:72px; } }

/* ============================================================
   COMPETITIONS
   ============================================================ */
.comp-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.comp-card{
  position:relative; overflow:hidden;
  border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--ink-700);
  padding:clamp(26px,3vw,38px); min-height:220px; display:flex; flex-direction:column;
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.comp-card:hover{ transform:translateY(-4px); border-color:var(--ember); }
.comp-card .cc-idx{ font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; color:var(--faint); }
.comp-card h3{ font-family:var(--f-display); font-size:clamp(30px,3.6vw,46px); text-transform:uppercase; line-height:1.14; margin-top:14px; }
.comp-card p{ color:var(--muted); font-size:14.5px; margin-top:14px; max-width:46ch; }
.comp-card .cc-foot{ margin-top:auto; padding-top:22px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.comp-card .yr-badge{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em; color:var(--ember); border:1px solid rgba(103,214,51,.3); border-radius:100px; padding:5px 12px; }
.comp-card.big{ grid-column:span 2; background:linear-gradient(120deg, var(--ink-700), var(--ink-800)); }
.comp-card .cc-plate{ position:absolute; right:-40px; bottom:-40px; opacity:.06; color:var(--chalk); }
.comp-card .cc-plate svg{ width:220px; height:220px; }
@media (max-width:820px){ .comp-grid{ grid-template-columns:1fr; } .comp-card.big{ grid-column:span 1; } }

/* ============================================================
   STAY UPDATED / NEWSLETTER
   ============================================================ */
.update-band{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,4vw,60px); align-items:center;
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  background:linear-gradient(130deg, var(--ink-700), var(--ink-900));
  padding:clamp(30px,4vw,54px);
  position:relative; overflow:hidden;
}
.update-band::before{
  content:""; position:absolute; left:-10%; bottom:-60%; width:60%; height:160%;
  background:radial-gradient(50% 50% at 50% 50%, var(--glow), transparent 70%); opacity:.4;
}
.update-band h3{ position:relative; z-index:1; }
.nl-form{ position:relative; z-index:1; display:flex; gap:12px; flex-wrap:wrap; }
.nl-form .field{ flex:1 1 240px; }
.update-band .socials{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:860px){ .update-band{ grid-template-columns:1fr; } }

/* form fields */
.field{ position:relative; }
.field label{ display:block; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:9px; }
.input, .textarea, select.input{
  width:100%; background:var(--ink-900); border:1px solid var(--line-2); border-radius:var(--r);
  color:var(--chalk); padding:14px 16px; font:inherit; font-size:15px;
  transition:border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.input::placeholder,.textarea::placeholder{ color:#6d6456; }
.input:focus,.textarea:focus{ outline:none; border-color:var(--ember); background:var(--ink-800); box-shadow:0 0 0 3px rgba(103,214,51,.14); }
.textarea{ resize:vertical; min-height:130px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,4vw,64px); align-items:start; }
.contact-form{ display:grid; gap:18px; }
.cf-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-info{ display:grid; gap:14px; }
.info-card{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--ink-700); padding:22px 24px;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.info-card:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.info-card .ic-ic{ width:46px; height:46px; border-radius:var(--r); background:var(--ink-600); color:var(--ember); display:grid; place-items:center; }
.info-card .ic-ic svg{ width:22px; height:22px; }
.info-card .ic-lbl{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.info-card .ic-val{ font-size:16px; color:var(--chalk); font-weight:500; margin-top:3px; word-break:break-word; }
.info-card .ic-val a:hover{ color:var(--ember); }
.hours-card{
  border:1px solid var(--line-2); border-radius:var(--r-lg); padding:24px; background:linear-gradient(140deg,var(--ink-700),var(--ink-800));
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.hours-card .h-24{ font-family:var(--f-display); font-size:clamp(34px,4vw,52px); color:var(--ember); line-height:.9; }
.hours-card .h-txt{ font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; color:var(--muted); text-align:right; text-transform:uppercase; }
.form-consent{ font-size:12.5px; color:var(--faint); font-family:var(--f-mono); letter-spacing:.01em; line-height:1.5; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
@media (max-width:460px){ .cf-2{ grid-template-columns:1fr; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:24px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--f-display); text-transform:uppercase; font-size:clamp(18px,2vw,24px); color:var(--chalk);
  transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--ember); }
.faq summary .q-ic{ flex-shrink:0; width:32px; height:32px; border:1px solid var(--line-2); border-radius:50%; display:grid; place-items:center; color:var(--ember); transition:transform .3s var(--ease), border-color .3s; }
.faq summary .q-ic svg{ width:16px; height:16px; }
.faq details[open] summary .q-ic{ transform:rotate(45deg); border-color:var(--ember); }
.faq .faq-body{ padding:0 4px 26px; color:var(--muted); max-width:80ch; font-size:15px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ border-top:1px solid var(--line); background:var(--ink-900); padding-block:clamp(56px,7vw,88px) 34px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(28px,4vw,56px); }
.footer-brand img{ height:44px; filter:invert(1); opacity:.95; }
.footer-brand p{ color:var(--muted); font-size:14px; margin-top:18px; max-width:34ch; }
.footer-brand .fb-socials{ margin-top:20px; display:flex; gap:10px; }
.footer-brand .fb-socials a{ width:42px; height:42px; border:1px solid var(--line-2); border-radius:var(--r); display:grid; place-items:center; color:var(--muted); transition:color .25s var(--ease), border-color .25s var(--ease), transform .25s; }
.footer-brand .fb-socials a:hover{ color:var(--ember); border-color:var(--ember); transform:translateY(-2px); }
.footer-brand .fb-socials svg{ width:18px; height:18px; }
.footer-col h5{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:18px; }
.footer-col ul{ display:grid; gap:12px; }
.footer-col a{ color:var(--muted); font-size:14.5px; transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--ember); }
.footer-legal{ margin-top:clamp(40px,5vw,64px); padding-top:26px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
.footer-legal .legal-meta{ display:flex; flex-wrap:wrap; gap:22px; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.04em; color:var(--faint); }
.footer-legal .legal-meta span b{ color:var(--muted); font-weight:500; }
.footer-legal .copy{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; color:var(--faint); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* ============================================================
   REVEAL (JS additive; content visible by default)
   ============================================================ */
.reveal{ opacity:1; }
html.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--rd,0s); will-change:opacity,transform; }
html.js .reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  html.js .reveal.is-visible{ opacity:1 !important; transform:none !important; }
  .marquee-track{ animation:marqx var(--marq-dur,34s) linear infinite !important; }
}

/* ultrawide framing */
@media (min-width:1700px){
  :root{ --maxw:1360px; --maxw-wide:1560px; }
  .hero h1{ font-size:112px; }
}

/* ============================================================
   PHOTO TREATMENT (warm near-mono duotone, colour on hover)
   Images render fully visible without JS; effects are additive.
   ============================================================ */
.photo{ position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--ink-800); isolation:isolate; }
.photo img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.82) contrast(1.06) brightness(.84) sepia(.14);
  transition:filter .6s var(--ease), transform .9s var(--ease);
}
.photo::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,13,11,.08) 0%, rgba(14,13,11,.30) 55%, rgba(14,13,11,.74) 100%); }
.photo::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:soft-light;
  background:radial-gradient(130% 100% at 72% 6%, rgba(103,214,51,.30), transparent 62%); opacity:.75; }
.photo.hoverable{ cursor:default; }
.photo.hoverable:hover img{ filter:grayscale(.12) contrast(1.05) brightness(.94) saturate(1.06) sepia(0); transform:scale(1.055); }

/* parallax layer (JS sets --py); base scale keeps edges covered */
.photo[data-parallax] img{ transform:translate3d(0,var(--py,0),0) scale(1.1); transition:filter .6s var(--ease); }

/* image clip reveal */
.reveal-img{ }
html.js .reveal-img{ clip-path:inset(0 0 100% 0); }
html.js .reveal-img.is-visible{ clip-path:inset(0 0 0 0); transition:clip-path 1.05s var(--ease); }
html.js .reveal-img img{ transform:scale(1.16); transition:transform 1.35s var(--ease), filter .6s var(--ease); }
html.js .reveal-img.is-visible img{ transform:scale(1); }

/* scroll progress bar */
.scrollbar{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:1200; transform-origin:0 50%;
  transform:scaleX(var(--sp,0)); background:var(--molten); box-shadow:0 0 14px var(--glow); pointer-events:none; }

/* HERO framed photo */
.hero-photo{ width:100%; aspect-ratio:4/5; border:1px solid var(--line-2); box-shadow:var(--shadow); }
.hero-photo .hp-tag{ position:absolute; z-index:3; font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
.hero-photo .hp-tag.tl{ top:16px; left:18px; color:var(--chalk); }
.hero-photo .hp-tag.tr{ top:16px; right:18px; color:var(--ember); }
.hero-photo .hp-tag.bl{ bottom:16px; left:18px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.hero-photo .hp-tag.bl svg{ width:14px; height:14px; color:var(--ember); }

/* ABOUT team band */
.team-band{ position:relative; margin-top:clamp(48px,6vw,84px); min-height:clamp(300px,42vw,460px);
  display:flex; align-items:flex-end; border:1px solid var(--line-2); }
.team-band .tb-caption{ position:relative; z-index:3; padding:clamp(24px,3.4vw,44px); max-width:760px; }
.team-band .tb-caption p{ font-family:var(--f-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(22px,3vw,40px); line-height:1.2; margin-top:14px; }
.team-band .tb-caption p .ember-txt{ color:var(--ember); }

/* GYM card photo header */
.gym-card{ padding:0; overflow:hidden; gap:0; }
.gym-card .gc-photo{ position:relative; height:190px; flex-shrink:0; }
.gym-card .gc-photo .chip-solid{ position:absolute; z-index:3; top:16px; right:16px; }
.gym-card .gc-inner{ padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; gap:18px; flex:1; }
.gym-card:hover .gc-photo img{ transform:scale(1.06); filter:grayscale(.15) brightness(.9) contrast(1.05) sepia(0); }

/* COMPETITION photo-background feature cards */
.comp-card.has-bg{ border-color:var(--line-2); }
.comp-card .cc-bg{ position:absolute; inset:0; z-index:0; border-radius:inherit; }
.comp-card .cc-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg, rgba(12,11,9,.92) 8%, rgba(12,11,9,.60) 55%, rgba(12,11,9,.35) 100%); }
.comp-card .cc-bg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.7) contrast(1.08) brightness(.7) sepia(.12); transition:transform 1s var(--ease); }
.comp-card.has-bg > *:not(.cc-bg){ position:relative; z-index:1; }
.comp-card.has-bg:hover .cc-bg img{ transform:scale(1.06); }

/* TRAINER avatar photo */
.avatar.has-photo{ overflow:hidden; background:var(--ink-700); }
.avatar.has-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; border-radius:50%;
  filter:grayscale(.55) contrast(1.05) brightness(.96); transition:filter .5s var(--ease), transform .6s var(--ease); }
.trainer-card:hover .avatar.has-photo img{ filter:grayscale(.05) contrast(1.05); transform:scale(1.07); }

@media (max-width:520px){ .hero-photo{ aspect-ratio:1/1; } }

/* keep new motion honest under reduced-motion */
@media (prefers-reduced-motion:reduce){
  html.js .reveal-img{ clip-path:none !important; }
  html.js .reveal-img img{ transform:none !important; }
  .photo[data-parallax] img{ transform:scale(1.02) !important; }
  .scrollbar{ display:none !important; }
  .photo img, .comp-card .cc-bg img, .avatar.has-photo img{ transition:none !important; }
}



  /* seamless marquee: shift by one measured cycle, not by 50% */
  @keyframes marqx{ from{transform:translateX(0)} to{transform:translateX(calc(-1 * var(--marq-shift,50%)))} }

  .rv2{opacity:0;transform:translateY(22px);
    transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
  .rv2.on{opacity:1;transform:none}

  .loc-card,.ev,.tl-item,.fact,.price-card,.gym-card,.comp-card{
    transition:transform .35s var(--ease),border-color .35s var(--ease)}
  .loc-card:hover,.ev:hover,.gym-card:hover,.comp-card:hover{transform:translateY(-4px);border-color:var(--ember)}
  .fact .fnum{transition:transform .35s var(--ease);display:inline-block}
  .fact:hover .fnum{transform:scale(1.08)}

  .nav-list a{position:relative}
  .nav-list a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:1px;
    background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)}
  .nav-list a:hover::after,.nav-list a.active::after{transform:scaleX(1)}

  /* The client asked for motion to always run, so re-enable it for the few
     things we animate even when the OS asks to reduce motion. */
  @media (prefers-reduced-motion:reduce){
    .reveal,.reveal-img,.rv2{transition-duration:.75s !important}
    .marquee-track{animation-duration:var(--marq-dur,34s) !important;animation-iteration-count:infinite !important}
    .loc-card,.ev,.tl-item,.fact,.price-card,.gym-card,.comp-card,.nav-list a::after,.fact .fnum{
      transition-duration:.35s !important}
  }



  /* price value + unit must never collide: "30 € / kuus" */
  .pr-val small{margin-left:.45em}
  .pr-val small::before{content:"/ ";opacity:.65}

  h2,h3,.h2,.h3{overflow-wrap:break-word}
  html,body{max-width:100%}



  html{scroll-behavior:smooth}

  /* photos breathe on hover */
  .photo{overflow:hidden}
  .photo img{transition:transform 1s var(--ease),filter .6s var(--ease)}
  .photo:hover img{transform:scale(1.05)}

  /* primary button: lift + light sweep */
  .btn-primary{position:relative;overflow:hidden}
  .btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
    transform:skewX(-18deg);transition:left .75s var(--ease);pointer-events:none;z-index:1}
  .btn-primary:hover::after{left:135%}

  /* price rows highlight */
  .price-row{transition:background .28s var(--ease),padding-left .28s var(--ease)}
  .price-row:hover{background:rgba(255,255,255,.035);padding-left:8px}
  .pr-val{transition:color .28s var(--ease)}
  .price-row:hover .pr-val{color:var(--ember)}

  /* chips + tags */
  .chip,.tag{transition:border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
  .chip:hover,.tag:hover{transform:translateY(-2px);border-color:var(--ember)}

  /* eyebrow rule draws itself in as the section arrives */
  .eyebrow::before{transition:width .7s var(--ease) .15s}
  .reveal:not(.is-visible) .eyebrow::before,.rv2:not(.on) .eyebrow::before{width:0}

  /* FAQ */
  .faq summary{transition:color .25s var(--ease)}
  .faq summary:hover{color:var(--ember)}
  .q-ic{transition:transform .4s var(--ease),border-color .3s var(--ease)}
  details[open] .q-ic{transform:rotate(45deg);border-color:var(--ember)}

  /* contact + social */
  .info-card{transition:transform .3s var(--ease),border-color .3s var(--ease)}
  .info-card:hover{transform:translateY(-3px);border-color:var(--ember)}
  .fb-socials a{transition:transform .3s var(--ease),color .3s var(--ease)}
  .fb-socials a:hover{transform:translateY(-3px);color:var(--ember)}

  .site-header{transition:background .35s var(--ease),border-color .35s var(--ease)}
  .btn{transition:transform .28s var(--ease),background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}

  /* keep all of it alive when the OS asks to reduce motion (client request) */
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:smooth !important}
    .photo img,.btn,.btn-primary::after,.price-row,.pr-val,.chip,.tag,
    .eyebrow::before,.q-ic,.info-card,.fb-socials a,.site-header,.faq summary{
      transition-duration:.45s !important}
  }



  .loc-card{cursor:pointer;position:relative}
  .loc-card:focus-visible,.gym-card .addr:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:var(--r-xs)}
  .lc-map-hint{display:inline-flex;align-items:center;gap:.45em;margin-top:14px;
    font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--faint);transition:color .3s var(--ease)}
  .lc-map-hint svg{width:13px;height:13px}
  .loc-card:hover .lc-map-hint{color:var(--ember)}
  .gym-card .addr{cursor:pointer;transition:color .3s var(--ease)}
  .gym-card .addr:hover{color:var(--ember)}

  .mapx{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:24px;
    background:rgba(8,7,6,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
  .mapx.on{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s}
  .mapx-box{width:min(940px,100%);background:var(--ink-800);border:1px solid var(--line-2);
    border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
    transform:translateY(12px);transition:transform .35s var(--ease)}
  .mapx.on .mapx-box{transform:none}
  .mapx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px 16px}
  .mapx-t{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(20px,2.4vw,28px);line-height:1.14;color:var(--chalk)}
  .mapx-a{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--muted);margin-top:5px}
  .mapx-x{flex:none;width:38px;height:38px;border-radius:var(--r);border:1px solid var(--line-2);
    background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;
    transition:color .25s var(--ease),border-color .25s var(--ease)}
  .mapx-x:hover{color:var(--chalk);border-color:var(--ember)}
  .mapx-x svg{width:15px;height:15px;transform:rotate(45deg)}
  .mapx iframe{display:block;width:100%;height:min(58vh,440px);border:0;background:var(--ink-700)}
  .mapx-access{padding:18px 22px;border-top:1px solid var(--line)}
  .mapx-al{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ember);margin-bottom:8px}
  .mapx-ax{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
  .mapx-ax b{color:var(--chalk)}
  .mapx-hrs{display:inline-flex;align-items:center;gap:.4em;margin-top:6px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ember)}
  .mapx-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
  @media (max-width:640px){
    .mapx{padding:0}
    .mapx-box{width:100%;height:100dvh;border-radius:0;border:0;display:flex;flex-direction:column}
    .mapx iframe{flex:1;height:auto}
  }



  /* ==========================================================
   EKTACO COMPUCASH WIDGET
   Widget joonistatakse otse lehe DOM-i (mitte iframe'i), seega tohime
   selle vabalt ümber kujundada — vt migratsiooni §5. Muudame AINULT
   välimust; HTML-i, välju, tekste ega pakette siit muuta ei saa.
   Ektaco css.php laeb MEIE stiili JÄREL, seega on !important vajalik.
   ========================================================== */

.ticket-shop{margin-top:clamp(28px,3.5vw,48px);min-height:160px}

/* Ektaco maksesamm (kinnitus / pangavalik) tuleb Bootstrapi vaikevärviga
   #212529 — meie mustal taustal on see loetamatu. Katame kogu widgeti
   teksti ette ära. Spetsiifilisus on siin (1,0,0), nii et iga allpool
   olev #CCAppContent .klass reegel kirjutab selle vajadusel üle. */
#CCAppMainContainer,
#CCAppMainContainer *{color:var(--chalk) !important}
#CCAppMainContainer small,
#CCAppMainContainer .text-muted,
#CCAppMainContainer .small{color:var(--muted) !important}
/* summad ja read maksekokkuvõttes */
#CCAppContent table,#CCAppContent table *{color:var(--chalk) !important}
#CCAppContent table td,#CCAppContent table th{border-color:var(--line) !important}
#CCAppContent hr{border-color:var(--line) !important;opacity:1 !important}
/* pangaikoonid tumedal taustal: anna neile valge alus */
#CCAppContent img[src*="bank"],#CCAppContent img[src*="pank"],
#CCAppContent .payment-method img,#CCAppContent label img{
  background:#fff !important;border-radius:6px !important;padding:4px !important}

/* meie enda .wrap ja .btn ei tohi widgeti sees kehtida */
#CCAppContent .wrap{max-width:none !important;width:auto !important;padding:0 !important;margin:0 !important}
#CCAppContent .btn{
  font-family:var(--f-mono) !important;font-size:13px !important;font-weight:500 !important;
  letter-spacing:.12em !important;text-transform:uppercase !important;
  padding:14px 24px !important;border-radius:var(--r) !important;
  border:1px solid transparent !important;box-shadow:none !important;
  overflow:visible !important;isolation:auto !important;transform:none !important;
  cursor:pointer !important;transition:transform .25s var(--ease),background .25s var(--ease) !important;
}
#CCAppContent .btn::before,#CCAppContent .btn::after{content:none !important}

/* ---------- 1. samm: vahelehed ---------- */
#CCAppContent .nav-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line) !important}
#CCAppContent .nav-link{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted) !important;padding:12px 18px;border:0 !important;
  border-bottom:2px solid transparent !important;background:none !important;
  transition:color .25s var(--ease),border-color .25s var(--ease)}
#CCAppContent .nav-link:hover{color:var(--chalk) !important}
#CCAppContent .nav-link.active{color:var(--ember) !important;border-bottom-color:var(--ember) !important;background:none !important}

/* ---------- 1. samm: paketikaardid ---------- */
#CCAppContent .packages{margin-top:28px}
#CCAppContent .card{
  background:var(--ink-700) !important;border:1px solid var(--line-2) !important;
  border-radius:var(--r-lg) !important;overflow:hidden;height:100%;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
#CCAppContent .card:hover{border-color:var(--ember) !important;transform:translateY(-3px)}
#CCAppContent .card h3{
  margin:0;padding:18px 20px;
  background:var(--ember-soft) !important;
  border-bottom:1px solid var(--line) !important;
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(15px,1.4vw,18px);line-height:1.25;color:var(--chalk) !important}
#CCAppContent .card-body{padding:22px 20px;display:flex;flex-direction:column;gap:18px;align-items:stretch}
#CCAppContent .price{
  font-family:var(--f-display);font-size:clamp(30px,3.2vw,40px);line-height:1;color:var(--ember) !important}

/* OSTA nupp */
#CCAppContent .btn-select-product{
  display:inline-flex;align-items:center;justify-content:center;width:100%;
  background:var(--ember) !important;color:var(--on-ember) !important;
  box-shadow:0 12px 30px -12px var(--glow) !important}
#CCAppContent .btn-select-product:hover{transform:translateY(-2px) !important}

/* ---------- 2. samm: valitud paketi kokkuvõte ---------- */

#CCAppContent .summary h3{
  margin:0 0 18px;font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(19px,2vw,24px);line-height:1.2;color:var(--chalk) !important;
  background:none !important;border:0 !important;padding:0 !important}
#CCAppContent .summary-info{color:var(--muted) !important;font-size:14.5px;line-height:1.6}
#CCAppContent .summary-info *{color:inherit !important}
#CCAppContent .summary-info strong,#CCAppContent .summary-info b{color:var(--chalk) !important}
#CCAppContent .summary hr,#CCAppContent .summary-info hr{border-color:var(--line) !important}

/* MUUDA nupp */


/* ---------- 2. samm: vorm ---------- */
#CCAppContent .form-group{margin-bottom:14px}
#CCAppContent .form-control{
  width:100%;background:var(--ink-800) !important;border:1px solid var(--line-2) !important;
  color:var(--chalk) !important;border-radius:var(--r) !important;
  padding:14px 16px !important;font-family:var(--f-body);font-size:15px;
  transition:border-color .25s var(--ease)}
#CCAppContent .form-control::placeholder{color:var(--faint) !important;opacity:1}
#CCAppContent .form-control:focus{
  border-color:var(--ember) !important;outline:2px solid var(--ember);outline-offset:1px}
#CCAppContent .form-control.error,#CCAppContent .has-error .form-control{border-color:#ff5252 !important}

/* nõustumise linnuke */
#CCAppContent .custom-checkbox{
  display:flex;align-items:flex-start;gap:12px;position:relative;cursor:pointer;
  color:var(--chalk) !important;font-size:14.5px;line-height:1.5;padding:6px 0}
/* Ektaco peidab päris märkeruudu ja joonistab <span>-i. Meie näitame
   päris inputit — nii on see nähtav, klaviatuuriga kasutatav ja ligipääsetav. */
#CCAppContent .custom-checkbox input[type="checkbox"]{
  position:static !important;opacity:1 !important;visibility:visible !important;
  width:20px !important;height:20px !important;flex:none;margin:1px 0 0 !important;
  appearance:auto !important;-webkit-appearance:checkbox !important;
  accent-color:var(--ember);cursor:pointer;order:-1}
#CCAppContent .custom-checkbox span{display:none !important}

/* Ektaco seab nõustumise sildile musta värvi kõrgema spetsiifilisusega —
   siin läheb vaja pikemat selektorit, muidu on tekst mustal taustal must. */
#CCAppMainContainer #CCAppContent form .item label.custom-checkbox,
#CCAppMainContainer #CCAppContent form .item label.custom-checkbox *{
  color:var(--chalk) !important}
#CCAppMainContainer #CCAppContent form .item label.custom-checkbox a.btn-link{
  color:var(--ember) !important}

#CCAppContent .btn-link{
  display:inline !important;padding:0 !important;border:0 !important;background:none !important;
  font-family:var(--f-body) !important;font-size:inherit !important;font-weight:600 !important;
  letter-spacing:normal !important;text-transform:none !important;
  color:var(--ember) !important;text-decoration:underline !important;text-underline-offset:2px}
#CCAppContent .btn-link:hover{color:var(--ember-hi) !important}

/* EDASI nupp */
#CCAppContent #continueStep2,#CCAppContent button[type="submit"].btn{
  background:var(--ember) !important;color:var(--on-ember) !important;
  box-shadow:0 12px 30px -12px var(--glow) !important;margin-top:8px}
#CCAppContent #continueStep2:hover,#CCAppContent button[type="submit"].btn:hover{transform:translateY(-2px) !important}

/* veateade */
#CCAppContent .alert{
  border-radius:var(--r) !important;border:1px solid rgba(255,82,82,.45) !important;
  background:rgba(255,82,82,.10) !important;color:#ffb4b4 !important;padding:14px 16px;margin-bottom:14px}

#CCAppContent a,#CCAppContent a *{color:var(--ember) !important}
#CCAppContent a:hover{color:var(--ember-hi) !important}
#CCAppMainContainer{color:var(--chalk)}

/* Bootstrapi veerud ei tohi widgeti sees kokku kukkuda */
#CCAppContent .row,#CCAppContent .form-row{display:flex;flex-wrap:wrap;margin-left:-10px;margin-right:-10px}
#CCAppContent [class*="col-"]{padding-left:10px;padding-right:10px}
#CCAppContent .row-double{row-gap:22px}
@media (max-width:768px){
  #CCAppContent [class*="col-md-"]{flex:0 0 100%;max-width:100%}
}

/* ==========================================================
   PAKETILEHT (page-paketid.php)
   ========================================================== */
.tickets-halls{
  display:flex;align-items:stretch;gap:18px;flex-wrap:wrap;
  margin-top:clamp(22px,3vw,34px)}
.tickets-halls .th-item{
  flex:1 1 240px;background:var(--ink-700);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:22px 24px}
.tickets-halls .th-tag{
  display:inline-block;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  color:var(--ember);border:1px solid rgba(103,214,51,.4);border-radius:100px;padding:4px 11px}
.tickets-halls .th-name{
  margin:12px 0 6px;font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(26px,3vw,34px);line-height:1.14;color:var(--chalk)}
.tickets-halls .th-addr{
  margin:0;display:flex;align-items:center;gap:.5em;
  font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.tickets-halls .th-addr svg{width:14px;height:14px;color:var(--ember)}
.tickets-halls .th-plus{
  align-self:center;font-family:var(--f-display);font-size:32px;color:var(--ember);padding:0 4px}
@media (max-width:640px){.tickets-halls .th-plus{display:none}}



/* hero: väike selgitav rida CTA-de all */
.hero-note{
  margin-top:16px;
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--faint);
}
.hero-note strong{color:var(--chalk);font-weight:500}


/* treeningute sektsiooni lõpu CTA */
.training-cta{
  margin-top:clamp(30px,4vw,46px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:clamp(24px,3vw,34px);
  background:var(--ink-700);border:1px solid var(--line-2);border-radius:var(--r-lg)}
.training-cta .tc-text{flex:1 1 320px;min-width:0}
.training-cta h3{margin:0 0 8px}
.training-cta p{margin:0;color:var(--muted);font-size:15px;line-height:1.55;max-width:56ch}
.training-cta .btn{flex:0 0 auto}
@media (max-width:640px){
  .training-cta{flex-direction:column;align-items:stretch}
  .training-cta .btn{width:100%;justify-content:center}
}


/* ============================================================
   PUUTESIHTMÄRGID
   Mobiilis peab klikitav ala olema vähemalt 44x44 px, muidu on
   nuppu sõrmega raske tabada (WCAG 2.5.8 / Apple HIG).
   ============================================================ */
@media (max-width:1024px){
  .btn,.nav-cta{min-height:44px}
  .link-arrow{min-height:44px;display:inline-flex;align-items:center;gap:.5em}
  .fb-socials a,.socials a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav-list a{min-height:44px;display:flex;align-items:center}
}
.mapx-x{width:44px;height:44px}
#CCAppContent .btn{min-height:44px}


/* Turvavõrk: Ektaco widget kasutab samu klassinimesid (.nav, .nav-tabs) mis
   saidi menüü. Menüü reeglid on ülal päisega piiratud, kuid siin kinnitame
   veel kord, et widgeti vahelehed on alati nähtavad — ka mobiilis. */
#CCAppContent .nav,
#CCAppContent .nav-tabs{
  position:static !important;
  max-height:none !important;
  opacity:1 !important;
  visibility:visible !important;
  overflow:visible !important;
  flex-direction:row !important;
  background:none !important;
  padding:0 !important;
  border-bottom:1px solid var(--line) !important;
}
#CCAppContent .nav-link{visibility:visible !important;opacity:1 !important}


/* ============================================================
   SISULEHED (page.php, 404.php, index.php)
   ============================================================ */
.wrap-narrow{max-width:820px}

.page-content{margin-top:clamp(20px,2.6vw,32px);color:var(--muted);font-size:16px;line-height:1.7}
.page-content > *:first-child{margin-top:0}
.page-content p{margin:0 0 1.1em}
.page-content h2{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(22px,2.6vw,30px);line-height:1.14;color:var(--chalk);margin:1.8em 0 .6em}
.page-content h3{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(18px,2vw,23px);line-height:1.2;color:var(--chalk);margin:1.6em 0 .5em}
.page-content h4{color:var(--chalk);margin:1.4em 0 .4em;font-size:17px}
.page-content strong,.page-content b{color:var(--chalk)}
.page-content a{color:var(--ember);text-decoration:underline;text-underline-offset:2px}
.page-content a:hover{color:var(--ember-hi)}
.page-content ul,.page-content ol{margin:0 0 1.2em;padding-left:1.3em}
.page-content li{margin-bottom:.5em}
.page-content ul li::marker{color:var(--ember)}
.page-content ol li::marker{color:var(--ember);font-family:var(--f-mono);font-size:.9em}
.page-content blockquote{margin:1.4em 0;padding:16px 20px;border-left:2px solid var(--ember);
  background:var(--ink-700);border-radius:0 var(--r) var(--r) 0;color:var(--chalk)}
.page-content img{max-width:100%;height:auto;border-radius:var(--r-lg)}
.page-content table{width:100%;border-collapse:collapse;margin:1.2em 0}
.page-content th,.page-content td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.page-content th{color:var(--chalk);font-family:var(--f-mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase}
.page-content hr{border:0;border-top:1px solid var(--line);margin:2em 0}

.post-list{display:flex;flex-direction:column;gap:20px;margin-top:clamp(20px,2.6vw,32px)}
.post-item{padding:clamp(22px,2.6vw,30px);background:var(--ink-700);
  border:1px solid var(--line-2);border-radius:var(--r-lg)}
.post-item h2{margin:0}
.post-item h2 a{color:var(--chalk);text-decoration:none}
.post-item h2 a:hover{color:var(--ember)}
.post-meta{margin:8px 0 0;font-family:var(--f-mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

.page-links{margin-top:28px;display:flex;gap:8px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:13px}
.page-links a,.page-links .current{padding:10px 15px;border:1px solid var(--line-2);
  border-radius:var(--r);color:var(--muted);text-decoration:none;min-height:44px;
  display:inline-flex;align-items:center}
.page-links a:hover{border-color:var(--ember);color:var(--chalk)}
.page-links .current{border-color:var(--ember);color:var(--ember)}


/* ============================================================
   PILETILEHT — SAMMUD JA ID-KAARDI JUHIS
   Suurem kiri ja selge samm-sammuline ülesehitus: seda lehte
   kasutavad ka eakamad inimesed.
   ============================================================ */
.steps-block,.idcard-block{margin-top:clamp(38px,4.5vw,62px)}
.steps-intro{margin:10px 0 0;color:var(--muted);font-size:16px;line-height:1.6;max-width:60ch}

.big-steps{list-style:none;margin:clamp(22px,2.6vw,30px) 0 0;padding:0;
  display:grid;
  /* 2x2: annab reale ~60 tähemärki — loetav mõõt. Neli kitsast veergu
     suruks teksti liiga kokku. */
  grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
/* Kahte veergu alles siis, kui reale mahub loetav hulk teksti (~45 tähemärki).
   Tahvlis surub 2 veergu teksti liiga kitsaks. */
@media (max-width:1000px){.big-steps{grid-template-columns:1fr}}
.big-steps li{display:flex;gap:16px;align-items:flex-start;
  padding:24px;background:var(--ink-700);border:1px solid var(--line-2);border-radius:var(--r-lg)}
.big-steps .bs-num{flex:none;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:var(--ember);color:var(--on-ember);
  font-family:var(--f-display);font-size:20px;line-height:1}
.big-steps .bs-body{min-width:0}
.big-steps h3{margin:0 0 8px;font-family:var(--f-display);font-weight:400;
  text-transform:uppercase;font-size:19px;line-height:1.2;color:var(--chalk)}
.big-steps p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
.big-steps strong{color:var(--chalk)}

/* --- ID-kaart --- */
.idcard-block{padding:clamp(24px,3.4vw,40px);background:var(--ink-800);
  border:1px solid var(--line-2);border-radius:var(--r-lg)}
.idc-head h3,.idc-head .h3{margin:12px 0 0}
.idc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3vw,40px);align-items:start;margin-top:clamp(24px,3vw,34px)}
@media (max-width:1000px){.idc-grid{grid-template-columns:1fr}}

.idc-figure{margin:0;background:var(--ink-700);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:20px}
.idc-figure svg{width:100%;height:auto;display:block}
.idc-figure figcaption{margin-top:14px;color:var(--muted);font-size:14.5px;line-height:1.5;text-align:center}
.idc-figure figcaption strong{color:var(--chalk)}
.idc-reader{fill:var(--ink-800);stroke:var(--line-2);stroke-width:2}
.idc-reader-window{fill:var(--ink-900);stroke:var(--ember);stroke-width:2}
.idc-led{fill:var(--ember)}
.idc-card rect:first-child{fill:var(--ink-900);stroke:var(--line-2);stroke-width:2}
.idc-bars rect{fill:var(--chalk)}
.idc-label{fill:var(--faint);font-family:var(--f-mono);font-size:12px;letter-spacing:.14em}
.idc-hint{fill:var(--ember);font-family:var(--f-mono);font-size:11px;letter-spacing:.12em}
.idc-arrow{fill:none;stroke:var(--ember);stroke-width:3;stroke-dasharray:8 6;stroke-linecap:round}
.idc-arrow-label{fill:var(--ember);font-family:var(--f-mono);font-size:12px;letter-spacing:.1em}
#idcArrow path{fill:var(--ember)}

.idc-steps{list-style:none;counter-reset:idc;margin:0;padding:0;
  display:flex;flex-direction:column;gap:14px}
.idc-steps li{counter-increment:idc;position:relative;padding:18px 20px 18px 62px;
  background:var(--ink-700);border:1px solid var(--line-2);border-radius:var(--r-lg)}
.idc-steps li::before{content:counter(idc);position:absolute;left:20px;top:18px;
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--ember-soft);border:1px solid var(--ember);color:var(--ember);
  font-family:var(--f-mono);font-size:13px}
.idc-steps h3{margin:0 0 6px;font-size:17px;color:var(--chalk);
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;line-height:1.2}
.idc-steps p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
.idc-steps strong{color:var(--chalk)}

.idc-note,.idc-help{display:flex;gap:14px;align-items:flex-start;
  margin-top:20px;padding:18px 20px;border-radius:var(--r-lg)}
.idc-note{background:var(--ember-soft);border:1px solid rgba(103,214,51,.4)}
.idc-note svg{flex:none;width:20px;height:20px;color:var(--ember);margin-top:2px}
.idc-help{background:var(--ink-700);border:1px solid var(--line-2)}
.idc-note p,.idc-help p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.idc-note strong,.idc-help strong{color:var(--chalk)}
.idc-note a,.idc-help a{color:var(--ember);text-decoration:underline;text-underline-offset:2px}

/* ============================================================
   OSTUVORM — LOETAVUS EAKAMATELE
   ============================================================ */
.buy-help{margin-top:clamp(24px,3vw,34px);padding:22px 24px;
  background:var(--ink-700);border:1px solid var(--line-2);border-radius:var(--r-lg)}
.buy-help h3{margin:0 0 12px;font-size:18px;color:var(--chalk);
  font-family:var(--f-display);font-weight:400;text-transform:uppercase}
.buy-help ul{margin:0;padding-left:1.2em;color:var(--muted);font-size:15.5px;line-height:1.75}
.buy-help li::marker{color:var(--ember)}
.buy-help strong{color:var(--chalk)}

/* suurem kiri ja rohkem õhku widgeti vormis */
#CCAppContent .form-control{font-size:16.5px !important;padding:16px !important}
#CCAppContent .form-group{margin-bottom:18px}
#CCAppContent .custom-checkbox{font-size:15.5px !important}
/* JS-iga lisatud sildid iga välja kohal */




.idc-photo{fill:var(--ink-800);stroke:var(--line-2);stroke-width:2;stroke-dasharray:5 4}
.idc-caption{fill:var(--faint);font-family:var(--f-mono);font-size:11px;letter-spacing:.1em}
/* note-line sees peab tekst olema üks tervik, muidu venitab flex lingi laiali */
.note-line > span{flex:1 1 auto;min-width:0}


/* ============================================================
   OSTUVORM — lihtne ja rahulik
   Üks lühike silt välja kohal, ei mingeid tärne ega selgitusi.
   ============================================================ */
/* Ektaco seab siltidele ja kohatäidetele oma värvid !important-iga,
   seega vajame pikemat selektorit ja sama tugevust. */
#CCAppMainContainer #CCAppContent .jp-label,
#CCAppContent label.jp-label{
  display:block !important;margin:0 0 8px !important;
  font-family:var(--f-body) !important;font-size:14.5px !important;font-weight:600 !important;
  letter-spacing:0 !important;text-transform:none !important;
  color:var(--chalk) !important;opacity:1 !important}
/* kohatäide kordaks silti — peidame selle */
#CCAppContent .form-control.jp-labelled::placeholder{color:transparent !important;opacity:0 !important}
#CCAppContent .form-control.jp-labelled::-webkit-input-placeholder{color:transparent !important}
#CCAppContent .form-group{margin-bottom:22px}
#CCAppContent .form-control{padding:15px 16px !important;font-size:16px !important}
#CCAppContent .custom-checkbox{margin-top:8px;margin-bottom:6px}
#CCAppContent #continueStep2{margin-top:14px}

/* ============================================================
   TEKSTI HINGAMISRUUM
   Klassikalised loetavuse reeglid: reapikkus 45–75 tähemärki,
   reavahe ~1.7, kaartides rohkem sisepolsterdust.
   ============================================================ */
.big-steps{gap:20px}
.big-steps li{padding:30px 28px;gap:18px;align-items:flex-start}
.big-steps h3{margin:0 0 12px;font-size:20px;line-height:1.25}
.big-steps p{font-size:16px;line-height:1.7;max-width:60ch}
.big-steps .bs-num{width:44px;height:44px;font-size:21px}

.idc-steps{gap:16px}
.idc-steps li{padding:26px 28px 26px 68px}
.idc-steps li::before{left:26px;top:26px;width:30px;height:30px}
.idc-steps h3{margin:0 0 10px;font-size:18px;line-height:1.25}
.idc-steps p{font-size:16px;line-height:1.7;max-width:58ch}

.idcard-block{padding:clamp(28px,4vw,52px)}
.idc-head .h3,.idc-head h2{margin:14px 0 0}
.idc-grid{gap:clamp(28px,3.4vw,48px);margin-top:clamp(28px,3.4vw,40px)}
.idc-figure{padding:26px}
.idc-figure figcaption{margin-top:18px;font-size:15px;line-height:1.6}

.idc-note,.idc-help{margin-top:24px;padding:22px 24px;gap:16px}
.idc-note p,.idc-help p{font-size:15.5px;line-height:1.7;max-width:70ch}

.steps-block{margin-top:clamp(44px,5vw,72px)}
.steps-intro{margin-top:12px;font-size:16.5px;line-height:1.7}

.buy-help{padding:26px 28px;margin-top:clamp(28px,3.4vw,40px)}
.buy-help h3{margin-bottom:14px;font-size:19px}
.buy-help ul{font-size:16px;line-height:1.9}
.buy-help li{margin-bottom:4px}

/* lehe sissejuhatus ei tohi olla liiga lai — hoiab rea loetava pikkusena */
#paketid .section-head .lead{max-width:62ch;line-height:1.7}
.tickets-halls{gap:20px;margin-top:clamp(26px,3.4vw,38px)}
.tickets-halls .th-item{padding:26px 28px}
.tickets-halls .th-name{margin:14px 0 8px}


/* ============================================================
   TELLIMUSE KOKKUVÕTE — nagu tavalises e-poes
   Ektaco genereerib siia <table>. Kujundame selle kompaktseks
   kokkuvõtteks: toode vasakul, hind paremal, summa esile tõstetud.
   ============================================================ */
/* veerud ei tohi venida ühe kõrgusele — kokkuvõte jääks tühjaks tornina */
#CCAppContent .row{align-items:flex-start}

#CCAppContent .summary{
  background:var(--ink-700) !important;
  border:1px solid var(--line-2) !important;
  border-radius:var(--r-lg) !important;
  padding:24px 24px 22px !important;
  height:auto !important;
  color:var(--muted) !important}
#CCAppContent .summary *{color:inherit !important}
#CCAppContent .summary h3{
  margin:0 0 4px !important;font-size:15px !important;
  font-family:var(--f-mono) !important;font-weight:500 !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;
  color:var(--faint) !important}

#CCAppContent .summary-info{margin-top:14px}
#CCAppContent .summary-info table{width:100%;border-collapse:collapse}
#CCAppContent .summary-info td{
  padding:0;vertical-align:top;font-size:15px;line-height:1.5;border:0}
#CCAppContent .summary-info td:last-child{
  text-align:right;white-space:nowrap;padding-left:14px;
  font-variant-numeric:tabular-nums}

/* toote rida */
#CCAppContent .summary-info tr td{padding:14px 0}
#CCAppContent .summary-info tr:not(:last-child) td{
  border-bottom:1px solid var(--line) !important;color:var(--muted) !important}

/* summa rida */
#CCAppContent .summary-info tr:last-child td{
  padding-top:18px;padding-bottom:0;color:var(--chalk) !important}
#CCAppContent .summary-info tr:last-child td strong{
  font-weight:600;font-size:15px;color:var(--chalk) !important}
#CCAppContent .summary-info tr:last-child td:last-child{
  font-family:var(--f-display);font-size:30px;line-height:1;
  color:var(--ember) !important}

/* "Muuda" — tagasihoidlik tekstilink, mitte suur nupp */
#CCAppContent .btn-back{
  display:inline-flex !important;align-items:center;gap:.45em;
  margin-top:20px !important;padding:0 !important;
  background:none !important;border:0 !important;box-shadow:none !important;
  font-family:var(--f-body) !important;font-size:14.5px !important;
  font-weight:500 !important;letter-spacing:0 !important;text-transform:none !important;
  color:var(--muted) !important;text-decoration:underline !important;
  text-underline-offset:3px;min-height:0 !important}
#CCAppContent .btn-back:hover{color:var(--ember) !important;transform:none !important}

/* laial ekraanil jääb kokkuvõte kaasa kerides nähtavale */
@media (min-width:993px){
  #CCAppContent .summary{position:sticky;top:110px}
}

/* ühendatud märkuse kast: kaks lõiku */
.idc-note > div{min-width:0}
.idc-note p + p{margin-top:12px}
.idc-note p{margin:0}

/* lingid tekstiplokkides peavad olema selgelt lingid */
.note-line a,.idc-note a,.idc-help a,.inline-link{
  color:var(--ember) !important;text-decoration:underline;text-underline-offset:2px}
.note-line a:hover,.idc-note a:hover,.inline-link:hover{color:var(--ember-hi) !important}

/* silt peidus, kui Ektaco on vastava välja peitnud */
#CCAppMainContainer #CCAppContent .jp-label.jp-hidden,
#CCAppContent label.jp-label.jp-hidden{display:none !important}


/* päis jääb kerides nähtavale */
.site-header{position:sticky !important;top:0;z-index:1000}
/* ankrusse hüpates ei tohi päis sisu katta */
html{scroll-padding-top:calc(var(--nav-h) + 12px)}


/* ============================================================
   EKTACO — SISSELOGIMINE
   Ektaco kasutab Bootstrapi vaikelinke (sinine #007bff), mis on
   tumedal taustal praktiliselt nähtamatu. "Unustasin parooli" on
   nende markupis olemas, aga kasutaja lihtsalt ei näinud seda.
   ============================================================ */
#CCAppContent #forgotPassword{
  display:inline-flex;align-items:center;gap:.4em;
  margin-top:4px;padding:6px 0;
  font-family:var(--f-body) !important;font-size:15px !important;font-weight:600 !important;
  color:var(--ember) !important;
  text-decoration:underline !important;text-underline-offset:3px}
#CCAppContent #forgotPassword:hover{color:var(--ember-hi) !important}
#CCAppContent .text-right{text-align:left !important}

/* Bootstrapi vaikelingid widgeti sees üldiselt */
#CCAppMainContainer #CCAppContent a:not(.btn):not(.nav-link){
  color:var(--ember) !important}

/* "Tagasi" ei tohi näha välja nagu põhinupp */
#CCAppContent #CCAppDoBack{
  background:transparent !important;color:var(--muted) !important;
  border:1px solid var(--line-2) !important;box-shadow:none !important}
#CCAppContent #CCAppDoBack:hover{
  color:var(--chalk) !important;border-color:var(--ember) !important}

/* "Logi sisse" ja "Saada uus parool" on põhitegevused */
#CCAppContent #CCAppDoLogin,
#CCAppContent #CCAppDoForgot{
  background:var(--ember) !important;color:var(--on-ember) !important;
  box-shadow:0 12px 30px -12px var(--glow) !important}

/* nuppude rida hingab */
#CCAppContent .d-flex{display:flex !important;gap:12px;flex-wrap:wrap;
  align-items:center;justify-content:flex-start !important;margin-top:20px}
#CCAppContent .d-flex .text-left,#CCAppContent .d-flex .text-right{margin:0}

/* teated: viga punane, õnnestumine roheline (enne olid mõlemad punased) */
#CCAppContent .alert-danger{
  border:1px solid rgba(255,82,82,.45) !important;
  background:rgba(255,82,82,.10) !important;color:#ffb4b4 !important}
#CCAppContent .alert-success{
  border:1px solid rgba(103,214,51,.45) !important;
  background:var(--ember-soft) !important;color:var(--chalk) !important}

#CCAppContent #CCAppLoginForm{max-width:520px}


/* hero: treeneri valimise link (varem oli seal konkreetse treeneri foto+nimi) */
.cred-chip.cred-link{
  text-decoration:none;cursor:pointer;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.cred-chip.cred-link:hover{border-color:var(--ember);transform:translateY(-3px)}
.cred-chip.cred-link .cred-arrow{
  width:18px;height:18px;flex:none;margin-left:auto;color:var(--ember);
  transition:transform .3s var(--ease)}
.cred-chip.cred-link:hover .cred-arrow{transform:translateX(3px)}
.cred-chip.cred-link .c-txt strong{color:var(--chalk)}


/* ============================================================
   HINNAKIRI — piirkond + treener
   ============================================================ */
.pc-trainer{
  margin:10px 0 4px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember)}
.price-card .price-row .pr-name small{line-height:1.45;margin-top:4px}
.price-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* peresoodustuse selgitus */
.disc-note{
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);
  color:var(--muted);font-size:14.5px;line-height:1.6}
.disc-note a{color:var(--ember);text-decoration:underline;text-underline-offset:2px}
.disc-band{display:block}
.disc-band .db-title{margin-bottom:18px}
.disc-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* ============================================================
   TREENERID — ruudustik, kus iga kaart on OMA sisu pikkune

   Paigutus, nagu klient soovis:

       P  T
       P  K
       C  G

   Peetri kaart hoiab vasakut veergu kahe rea ulatuses, tema kõrval
   Tarmo ja Karel üksteise peal, ülejäänud treenerid nende all.
   `align-items:start` hoiab iga kasti täpselt oma sisu mõõtu — ükski
   kast ei venita end naabri kõrgusele.
   ============================================================ */
.trainer-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2vw,26px);
  align-items:start;
}
.trainer-card{
  display:block;
  height:auto;
  align-self:start;
}
/* pilt kaardi kohal, nimi selle all — ühtne kõigil treeneritel,
   ka Peetril; tema kaart on lihtsalt pikem, sest teksti on rohkem */
.trainer-card > .avatar{width:96px;height:96px;margin:0 0 18px}
.trainer-card .tc-body{display:block}
.trainer-card .tc-meta{margin-top:16px;padding-top:0}
.trainer-card .tc-bio{font-size:15.5px;line-height:1.65}
.trainer-card .tc-honors{margin:14px 0 0}
.trainer-card .tc-honors li{font-size:14.5px;line-height:1.5}

/* Peeter: esimene veerg, kaks rida kõrge */
.trainer-card.trainer-lead{
  grid-column:1;
  grid-row:span 2;
}
.trainer-card.trainer-lead .tc-bio{max-width:60ch}
.trainer-card.trainer-lead .tc-bio + .tc-bio{margin-top:12px}
.trainer-card.trainer-lead .tc-honors{margin-top:16px}

/* varem kokkuklapitud lisatekst — nüüd otse kaardil */
.tc-extra{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.tc-extra p{margin:0 0 12px;color:var(--muted);font-size:15.5px;line-height:1.65;max-width:60ch}
.tc-extra p:last-child{margin-bottom:0}
.tc-extra .tc-honors{margin:0 0 14px}

/* --- kitsamal ekraanil: Peeter üle terve rea, foto kõrval --- */
@media (max-width:860px){
  .trainer-card.trainer-lead{grid-column:1 / -1;grid-row:auto}
  .trainer-card.trainer-lead{
    display:grid;grid-template-columns:240px minmax(0,1fr);
    gap:clamp(20px,3vw,36px);align-items:start}
  .trainer-card.trainer-lead .avatar{width:100%;height:auto;aspect-ratio:1/1}
  .trainer-card.trainer-lead .tc-bio,
  .trainer-card.trainer-lead .tc-extra p{max-width:70ch}
}

/* --- üks veerg --- */
@media (max-width:720px){
  .trainer-grid{grid-template-columns:minmax(0,1fr)}
  .trainer-card.trainer-lead{display:block}
  .trainer-card.trainer-lead .avatar{width:96px;height:96px;aspect-ratio:auto}
}

/* ============================================================
   TEKSTIKASTID — sisu täidab kasti
   Varem oli tekstil max-width, mis jättis laias kastis poole
   tühjaks. Nüüd piirame KASTI, mitte teksti — nii jääb rida
   loetava pikkusega ja kast hoiab sisu ümber.
   ============================================================ */
.idc-note,.idc-help{max-width:82ch}
.idc-note p,.idc-help p{max-width:none}
.idc-note > div{flex:1 1 auto;min-width:0}

/* ============================================================
   EKTACO — nõustumise rida
   Ektaco sildis on paljas tekst; flex tegi igast sõnast eraldi
   elemendi ja vahed läksid suureks. Tavaline plokk + absoluutne
   märkeruut hoiab sõnavahed normaalsed ja joondab vasakule.
   ============================================================ */
/* NB! Ektaco element EI OLE <label> — varem nõudis see reegel
   `label.custom-checkbox` ja jäi seetõttu rakendumata. Alles jäi vanem
   `display:flex; gap:12px`, mis tegi igast sõnajupist eraldi flex-elemendi
   (sealt suured sõnavahed) ja tõstis `align-items:flex-start` tõttu
   märkeruudu teksti kohale. Siin ei mainita elemendi nime üldse. */
#CCAppMainContainer #CCAppContent .custom-checkbox,
#CCAppContent .custom-checkbox{
  display:block !important;position:relative !important;
  padding:6px 0 6px 30px !important;margin:16px 0 8px !important;
  line-height:1.65 !important;text-align:left !important;
  word-spacing:normal !important;letter-spacing:normal !important;
  gap:0 !important;align-items:initial !important;
  flex-wrap:initial !important;justify-content:initial !important}
/* märkeruut esimese tekstirea keskele */
#CCAppMainContainer #CCAppContent .custom-checkbox input[type="checkbox"],
#CCAppContent .custom-checkbox input[type="checkbox"]{
  position:absolute !important;left:0 !important;
  /* 6px = ploki ülapolster, 0.825em = pool reakõrgusest (1.65),
     9px = pool ruudust — nii satub ruut täpselt esimese rea keskele */
  top:calc(6px + 0.825em - 9px) !important;
  width:18px !important;height:18px !important;
  /* em peab lahenema SILDI kirjasuuruse järgi, mitte inputi oma
     vaikimisi 13.33px järgi — muidu läheb ruut paari piksli võrra üles */
  font-size:inherit !important;
  margin:0 !important;flex:none !important}
#CCAppContent .custom-checkbox a{white-space:nowrap}

/* ============================================================
   SOTSIAALMEEDIA IKOONID
   ============================================================ */
.socials-icons{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.soc-btn{
  width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:var(--r);color:var(--chalk);
  transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.soc-btn svg{width:20px;height:20px}
.soc-btn:hover{color:var(--ember);border-color:var(--ember);transform:translateY(-2px)}
.soc-inline{display:flex;gap:10px;align-items:center}
.soc-inline a{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:var(--r);color:var(--chalk);
  transition:color .25s var(--ease),border-color .25s var(--ease)}
.soc-inline a svg{width:18px;height:18px}
.soc-inline a:hover{color:var(--ember);border-color:var(--ember)}

/* ==========================================================
   PAROOLI LÄHTESTAMINE (/paketid/?pwToken=...)
   Leht näitab ainult kahte paroolivälja. Widget joonistab siiski
   oma vahelehed "Paketid / Logi sisse" — need on siin segavad,
   sest kasutaja tuli e-kirjast ühe konkreetse toiminguga.
   ========================================================== */
.jp-pw-reset #CCAppContent .nav-tabs,
.jp-pw-reset #CCAppContent .tab-content > .tab-pane:not(.active){display:none !important}
.jp-pw-reset .ticket-shop{max-width:520px;margin-left:auto;margin-right:auto}
.jp-pw-reset #CCAppContent .form-group{margin-bottom:20px}
.jp-pw-reset .section-head{text-align:left}

/* ==========================================================
   SAALIKAARDI FOTO — päris ülevaade, mitte meeleoluvõte
   Lehe üldine duotoon (.photo) sobib kangelaspildile, aga
   saalikaardil peab inimene NÄGEMA, mis saalis on: milline
   varustus, kui avar ruum. Seepärast siin peaaegu töötlemata
   pilt ja madalam kate.
   ========================================================== */
.gym-card .gc-photo{height:clamp(210px,17vw,260px)}
.gym-card .gc-photo img{
  filter:grayscale(.10) contrast(1.04) brightness(1.0) saturate(1.04) sepia(0) !important;
  object-position:50% 46%}
.gym-card .gc-photo::after{
  background:linear-gradient(180deg,rgba(14,13,11,0) 0%,rgba(14,13,11,.10) 60%,rgba(14,13,11,.52) 100%) !important}
.gym-card .gc-photo::before{opacity:.28 !important}
.gym-card:hover .gc-photo img{
  transform:scale(1.05);
  filter:grayscale(0) contrast(1.05) brightness(1.04) saturate(1.08) !important}

/* ==========================================================
   HERO — üks kesktelg
   Varem oli kaheveeruline asümmeetriline paigutus (tekst vasakul,
   foto paremal). Klient soovis lihtsat sümmeetrilist avalehte:
   kõik ühel keskteljel, foto teksti all.
   ========================================================== */
.hero-inner{
  display:block !important;
  text-align:center;
  max-width:960px;margin-inline:auto}
.hero-copy{max-width:820px;margin-inline:auto}
.hero-eyebrow-row{justify-content:center}
.hero .hero-sub{max-width:64ch;margin-inline:auto}
.hero-cta{justify-content:center}
.hero-note{text-align:center}

/* näitajate riba: neli võrdset lahtrit, sisu keskel */
.hero-stats{margin-inline:auto;max-width:820px}
.hero-stat{flex:1 1 0;min-width:150px;text-align:center}

/* foto teksti all, keskel ja rahulikuma kuvasuhtega —
   püstine 4:5 kaader sobis külgveergu, keskel mõjub laiem parem */
.hero-visual{
  display:block;margin:clamp(34px,4vw,56px) auto 0;
  max-width:820px}
.hero-photo{aspect-ratio:16/10;margin-inline:auto}
.hero-photo img{object-position:50% 32%}

@media (max-width:820px){
  .hero-photo{aspect-ratio:4/3}
  .hero-stat{flex:1 1 45%}
}
@media (max-width:520px){
  .hero-photo{aspect-ratio:1/1}
  .hero-cta .btn{width:100%;justify-content:center}
}

/* ==========================================================
   LEHTEDEVAHELINE ÜLEMINEK
   Ilma selleta vahetub leht järsu hüppega. Nüüd tuleb uus leht
   pehmelt sisse ja vana kaob välja, enne kui brauser navigeerib.

   NB! Ainult `opacity` — `transform` <body>-l looks uue
   sisaldusploki ja lõhuks kleepuva päise.
   ========================================================== */
@keyframes jpPageIn{ from{opacity:0} to{opacity:1} }
@keyframes jpMainIn{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

html.js body{ animation:jpPageIn .38s var(--ease) both; }
html.js #main{ animation:jpMainIn .55s .05s var(--ease) both; }

/* lahkumine: JS lisab klassi ja ootab ära, enne kui navigeerib */
html.js.is-leaving body{
  opacity:0;
  transition:opacity .26s var(--ease);
  animation:none;
}
html.js.is-leaving #main{ animation:none; }

/* ankrusse hüpped samal lehel jäävad sujuvaks */
html{ scroll-behavior:smooth; }

/* number ei tohi murduda ("alates 17" ja "€" läksid eri ridadele) */
.hero-stat .num{white-space:nowrap}

/* hero-foto on nüüd lehe keskne element, mitte külgveeru meeleolupilt —
   jätame duotooni alles, aga nii palju heledamaks, et saali ka näeks */
.hero-photo img{
  filter:grayscale(.42) contrast(1.05) brightness(.95) saturate(1.02) sepia(.06)}
.hero-photo::after{
  background:linear-gradient(180deg,rgba(14,13,11,0) 0%,rgba(14,13,11,.14) 58%,rgba(14,13,11,.62) 100%)}
.hero-photo::before{opacity:.42}

/* ==========================================================
   SAALI POP-UP — pildid saalist
   Iga saali "Vaata kaardil" aken näitab nüüd ka pilte just
   sellest saalist: esimene suur, ülejäänud väiksemad kõrval.
   Puhjast ja Ülenurmest pilte ei ole — seal jääb riba ära.
   ========================================================== */
.mapx-box{max-height:92vh;overflow-y:auto;overscroll-behavior:contain}
.mapx-shots{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:6px;
  padding:0 22px 18px;background:var(--ink-800)}
.mapx-shots img{
  display:block;width:100%;height:100%;object-fit:cover;
  aspect-ratio:4/3;border-radius:var(--r);border:1px solid var(--line-2);
  background:var(--ink-700)}
.mapx-shots img.is-lead{grid-row:span 1;aspect-ratio:4/3}

@media (max-width:640px){
  .mapx-shots{
    display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;padding:0 16px 14px;flex:none}
  .mapx-shots img{width:78%;flex:none;aspect-ratio:4/3}
}

/* ==========================================================
   STEBBY — saali valiku aken
   Stebbys on igal saalil eraldi müügipunkt, seega ei saa üks
   nupp viia "Stebbysse" — inimene valib siit saali.
   ========================================================== */
.steb-box{width:min(540px,100%)}
.steb-list{display:grid;gap:8px;padding:4px 22px 18px}
.steb-row{
  display:grid;grid-template-columns:1fr auto 18px;align-items:center;gap:14px;
  padding:16px 18px;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--ink-700);text-decoration:none;min-height:56px;
  transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease)}
.steb-row:hover,.steb-row:focus-visible{
  border-color:var(--ember);transform:translateY(-2px);background:var(--ember-soft)}
.steb-town{
  font-family:var(--f-display);font-size:21px;text-transform:uppercase;
  line-height:1.1;color:var(--chalk)}
.steb-addr{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.steb-arr{width:18px;height:18px;color:var(--ember);flex:none;
  transition:transform .25s var(--ease)}
.steb-row:hover .steb-arr{transform:translateX(3px)}
.steb-note{
  margin:0;padding:0 22px 16px;font-size:13.5px;line-height:1.6;color:var(--faint)}
.steb-note a{color:var(--ember);text-decoration:underline;text-underline-offset:2px}

@media (max-width:520px){
  .steb-row{grid-template-columns:1fr 18px;row-gap:4px}
  .steb-arr{grid-row:1 / span 2}
}

/* treeneri tegevuspiirkonnad — juhataja soovis, et need oleksid kõigil
   treeneritel näha, mitte ainult mõnel (tagasiside rida 36) */
.tc-where{
  margin-top:6px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.05em;
  line-height:1.5;color:var(--muted)}

/* päise riba: Tartu ja Valga 24/7 pidi rohkem silma paistma (rida 13) */
.utility .u-hero strong{color:var(--chalk);font-weight:600}
.utility .u-hero{font-size:13px}

/* "Üks pilet — kaks saali" pidi olema suuremalt (rida 52) */
.hero-note.hero-note-big{
  font-family:var(--f-body);font-size:clamp(15px,1.35vw,17.5px);
  letter-spacing:0;color:var(--muted);margin-top:22px}
.hero-note.hero-note-big strong{color:var(--chalk);font-weight:700}

/* ==========================================================
   ID-KAARDI JUHEND — päris lugeja foto + täpne joonis
   Vana joonis näitas vale lugejat (klubikaardi ala, mitte
   triipkoodi lugejat) ja triipkoodi vales kohas. Juhataja
   saatis oma foto turnikeest — kasutame seda, ja kaardi
   joonisel on triipkood nüüd õiges kohas, punase kastiga.
   ========================================================== */
.idc-figs{display:grid;gap:clamp(18px,2vw,26px);align-content:start}
.idc-shot{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-2);background:var(--ink-700)}
.idc-shot img{display:block;width:100%;height:auto}

/* nummerdatud märgid fotol */
.idc-pin{
  position:absolute;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--f-mono);font-size:14px;font-weight:600;
  box-shadow:0 4px 14px rgba(0,0,0,.45)}
.idc-pin.pin-1{top:16%;left:22%;background:var(--ink-900);color:var(--chalk);
  border:2px solid var(--chalk)}
.idc-pin.pin-2{top:56%;left:52%;background:var(--ember);color:var(--on-ember);
  border:2px solid var(--ember);
  box-shadow:0 0 0 6px rgba(103,214,51,.22),0 4px 14px rgba(0,0,0,.45)}

.idc-photo-fig figcaption{display:grid;gap:8px}
.idc-leg{display:flex;align-items:baseline;gap:10px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.idc-leg b{
  flex:none;width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;
  font-family:var(--f-mono);font-size:11.5px;font-weight:600;
  border:1px solid var(--line-2);color:var(--chalk)}
.idc-leg.is-hot b{background:var(--ember);color:var(--on-ember);border-color:var(--ember)}
.idc-leg.is-hot strong{color:var(--chalk)}

/* kaardi joonise osad */
.idc-chip{fill:var(--ink-600);stroke:var(--line-2);stroke-width:1.5}
.idc-chip-line{stroke:var(--line-2);stroke-width:1.2;fill:none}
.idc-faint rect{fill:var(--line-2)}
.idc-mark{fill:none;stroke:#ff4d4d;stroke-width:3}
.idc-marklbl{fill:#ff6b6b;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;font-weight:600}

@media (min-width:900px){
  .idc-figs{grid-template-columns:1fr}
}

/* kalendri süvalingid — TeamHub toetab ?tags=asukoht,treener, seega
   saab inimese suunata kohe õigesse vaatesse (tagasiside read 31, 34, 41, 46) */
.pc-cal,.tc-cal{
  display:inline-flex;align-items:center;gap:.5em;margin-top:14px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ember);text-decoration:none;min-height:44px;
  transition:color .25s var(--ease)}
.pc-cal svg,.tc-cal svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.pc-cal:hover,.tc-cal:hover{color:var(--ember-hi)}
.pc-cal:hover svg,.tc-cal:hover svg{transform:translateX(3px)}
.tc-cal{margin-top:16px}

/* ==========================================================
   TREENINGUTE KIRJELDUSED (tagasiside read 20 ja 45)
   Peeter kartis, et "leia sobiv treening" vorm toob laviini
   küsimusi stiilis "mida mulle soovitate". Nüüd on kirjeldused
   lehel olemas ja vorm on alles viimane abinõu.
   ========================================================== */
.tt-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(14px,1.6vw,20px);margin-bottom:clamp(30px,3.6vw,46px)}
.tt-card{
  border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--ink-700);
  padding:clamp(22px,2.4vw,28px);
  transition:border-color .35s var(--ease),transform .35s var(--ease)}
.tt-card:hover{border-color:var(--ember);transform:translateY(-3px)}
.tt-age{
  display:inline-block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember);margin-bottom:12px}
.tt-card h3{
  font-family:var(--f-display);font-size:clamp(19px,1.9vw,23px);
  text-transform:uppercase;line-height:1.16;margin-bottom:10px}
.tt-card p{color:var(--muted);font-size:15.5px;line-height:1.65}
.tt-card strong{color:var(--chalk)}

/* rida 34 — treeneri nimi hinnakaardil pidi kohe silma hakkama */
.pc-trainer{
  font-family:var(--f-body) !important;font-size:15px !important;font-weight:700 !important;
  letter-spacing:0 !important;text-transform:none !important;
  color:var(--chalk) !important;margin:8px 0 14px !important}

/* pop-upi tegevusnupud (read 40, 41) */
.mapx-foot{flex-wrap:wrap;gap:10px;justify-content:space-between !important;align-items:center}
.mapx-acts{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:560px){
  .mapx-foot{flex-direction:column;align-items:stretch}
  .mapx-acts{flex-direction:column}
  .mapx-foot .btn{justify-content:center}
}

/* rida 25 — treenerina klubiga liitumine */
.tr-join{
  grid-column:1 / -1;margin-top:clamp(18px,2vw,26px);
  border:1px dashed var(--line-2);border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,32px);background:var(--ink-800)}
.tr-join h3{font-family:var(--f-display);font-size:clamp(19px,1.9vw,23px);text-transform:uppercase;line-height:1.16}
.tr-join p{color:var(--muted);font-size:15.5px;line-height:1.65;margin:10px 0 16px;max-width:74ch}

/* rida 65 — klubi sportlaste tulemuste kutse */
.ath-band{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,2vw,26px);
  align-items:center;margin-bottom:clamp(22px,2.6vw,34px);
  border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--ink-700);
  padding:clamp(22px,2.6vw,30px)}
.ab-icon{
  width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:var(--r);
  background:var(--ember-soft);border:1px solid rgba(103,214,51,.32)}
.ab-icon svg{width:22px;height:22px;color:var(--ember)}
.ath-band h3{font-family:var(--f-display);font-size:clamp(18px,1.8vw,22px);text-transform:uppercase;line-height:1.16}
.ath-band p{color:var(--muted);font-size:15px;line-height:1.65;margin-top:8px;max-width:70ch}
@media (max-width:820px){
  .ath-band{grid-template-columns:auto minmax(0,1fr)}
  .ath-band .btn{grid-column:1 / -1;justify-content:center}
}

/* rida 36 — kes kirjadele vastab */
.ic-sub{display:block;margin-top:5px;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.05em;color:var(--faint)}

/* rida 48 — Ektaco paketikaardid tundusid udused: transform jätab
   elemendi omaette kihile ja tekst muutub hägusaks. Kompositsioonikiht
   maha ja teravustamine peale. */
#CCAppContent .card,#CCAppContent .card *{
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#CCAppContent .card{transform:none !important;will-change:auto !important;
  backface-visibility:visible !important}
#CCAppContent .card:hover{transform:none !important;border-color:var(--ember) !important}

/* ==========================================================
   KEELEVAHETAJA
   Viis keelt: eesti, vene, inglise, läti, soome. Lühendid,
   mitte lipud — lipp tähistab riiki, mitte keelt (vene keelt
   räägitakse ka Eestis, läti keelt Valga taga).
   ========================================================== */
.lang-switch{display:inline-flex;align-items:center;gap:2px;margin-right:16px}
.lang-opt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;padding:5px 7px;border-radius:var(--r-xs,6px);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  color:var(--faint);text-decoration:none;
  transition:color .22s var(--ease),background .22s var(--ease)}
.lang-opt:hover{color:var(--chalk);background:rgba(255,255,255,.05)}
.lang-opt.is-on{color:var(--on-ember);background:var(--ember);font-weight:600}
.u-right{display:flex;align-items:center;gap:0}
@media (max-width:720px){
  .u-mail{display:none}
  .lang-switch{margin-right:0;gap:0}
  .lang-opt{min-width:26px;padding:6px 4px;font-size:10.5px}
}

/* Navi sildid ei tohi murduda — vene ja läti keeles on sõnad pikemad
   ja "О клубе" läks kahele reale, mis lõi päise kõrguse paigast. */
.nav-list a{white-space:nowrap}
.brand .brand-tag{hyphens:auto}

/* ==========================================================
   DIAKRIITIKUD SUURTES PEALKIRJADES
   Anton on tihe display-font ja läti Ģ, Ķ, Ļ, Ņ sabad ning
   eesti Õ/Ä/Ö täpid jäävad tiheda reavahega kitsaks või
   lõikuvad ülemise reaga. Anname neis keeltes veidi rohkem
   õhku — muul juhul jääb kujundus täpselt samaks.
   ========================================================== */
html[lang^="lv"] .hero h1,
html[lang^="lv"] .h2,
html[lang^="lv"] .h3,
html[lang^="lv"] .tc-body h3,
html[lang^="lv"] .gym-card h3{line-height:1.26}
html[lang^="lv"] .hero h1{padding-bottom:.06em}

/* ==========================================================
   PIKAD SÕNAD KITSAL EKRAANIL
   Vene, läti ja soome liitsõnad on eesti omadest pikemad
   ("Сисеturvallisuusakatemian", "pašapkalpošanās") ja lükkasid
   kitsal telefoniekraanil sisu paar pikslit üle serva.
   Laseme neil vajadusel murduda — ainult siis, kui muidu ei mahu.
   ========================================================== */
.h2,.h3,.hero h1,.tc-body h3,.gym-card h3,.tt-card h3,
.idc-steps h3,.big-steps h3,.lc-head h4,.pc-town h4,
.lead,.tc-bio,.tt-card p,.idc-steps p,.big-steps p,
.faq-body,.mapx-ax,.ic-val{overflow-wrap:break-word}

/* pikad aadressid ja e-postid ei tohi kunagi kasti lõhkuda */
.ic-val a,.idc-note a,.buy-help a,.note-line a{overflow-wrap:anywhere}

/* Ektaco vidina oma märgistus võib kitsal ekraanil paar pikslit üle
   ulatuda. Meie seda parandada ei saa, aga saame hoida selle poe kastis,
   nii et LEHT ei hakkaks külgsuunas kerima. */
@media (max-width:640px){
  .ticket-shop{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Grid- ja flex-lapsed ei kahane vaikimisi alla oma sisu miinimumlaiuse.
   Pikemate sõnadega keeltes lükkas see ID-kaardi ploki kitsal ekraanil
   üle serva. min-width:0 lubab neil kokku tõmbuda. */
.idc-grid > *,
.idc-figs > *,
.idc-steps li,
.idc-steps li > *,
.big-steps li > *,
.tt-card > *,
.trainer-card > *{min-width:0}
.idc-figure svg{max-width:100%;height:auto}

/* ==========================================================
   PILETILEHE SELGUS
   Juhataja klõpsis "Tartu" kasti mitu korda ja ootas, et midagi
   juhtuks — kastid näevad välja nagu valik, aga saali valima ei
   peagi. Nüüd on see kirjas ja järgmine samm on selgelt näidatud.
   ========================================================== */
.th-note{
  display:flex;align-items:flex-start;gap:10px;
  margin:16px 0 0;padding:14px 18px;
  border:1px solid rgba(103,214,51,.30);border-radius:var(--r);
  background:var(--ember-soft);
  color:var(--chalk);font-size:15.5px;line-height:1.6}
.th-note svg{width:17px;height:17px;color:var(--ember);flex:none;margin-top:3px}

/* selge järgmine samm poe juurde */
.buy-jump{margin-top:clamp(20px,2.4vw,28px);display:flex;justify-content:center}
.buy-jump .btn{min-width:min(340px,100%);justify-content:center}
.bj-down{transform:rotate(90deg);transition:transform .3s var(--ease)}
.buy-jump .btn:hover .bj-down{transform:rotate(90deg) translateX(3px)}

/* kas ostmiseks peab sisse logima */
.login-help{
  margin-top:clamp(24px,3vw,36px);
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--ink-700);padding:clamp(24px,3vw,32px)}
.login-help h3{
  font-family:var(--f-display);font-size:clamp(19px,2vw,24px);
  text-transform:uppercase;line-height:1.16}
.lh-lead{margin-top:12px;color:var(--chalk);font-size:16.5px;line-height:1.65}
.lh-list{margin:18px 0 0;display:grid;gap:14px}
.lh-list li{
  display:block;padding-left:0;color:var(--muted);font-size:15.5px;line-height:1.65}
.lh-b{display:block;color:var(--chalk);font-weight:700;margin-bottom:3px}
.lh-tip{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--muted);font-size:15px;line-height:1.65}

/* ankru sihtkoht ei tohi jääda kleepuva päise alla */
#pood{scroll-margin-top:calc(var(--nav-h) + 24px)}
.lh-warn{border-top:0;margin-top:10px;padding-top:0;color:var(--faint);font-size:14.5px}

/* ==========================================================
   PILETILEHT — lühike tee ostuni
   Juhataja tagasiside: "kuidagi hästi keeruliselt üles ehitatud
   ja liiga palju infot". Pood on nüüd kohe pealkirja all; sammud
   ja ID-kaardi juhend jäid poe ALLA, kus nad ei sega ostmist.
   ========================================================== */
.buy-line{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
  margin:clamp(20px,2.4vw,28px) 0 0;padding:14px 18px;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--ink-700);
  color:var(--muted);font-size:15px;line-height:1.6}
.buy-line strong{color:var(--chalk)}
.buy-login{
  display:inline-flex;align-items:center;gap:.5em;margin-left:auto;
  color:var(--ember);font-weight:600;text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap;min-height:44px}
.buy-login svg{width:15px;height:15px;flex:none}
.buy-login:hover{color:var(--ember-hi)}
@media (max-width:560px){ .buy-login{margin-left:0} }

/* pood algab kohe — vähem õhku pealkirja ja poe vahel */
#pood{margin-top:clamp(20px,2.4vw,30px);scroll-margin-top:calc(var(--nav-h) + 20px)}

/* päise "Logi sisse" — seal, kus inimene seda ootab */
.u-login{
  display:inline-flex;align-items:center;gap:.45em;
  margin-right:16px;padding:5px 10px;border-radius:var(--r-xs,6px);
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--chalk);text-decoration:none;
  border:1px solid var(--line-2);
  transition:color .22s var(--ease),border-color .22s var(--ease)}
.u-login svg{width:13px;height:13px;color:var(--ember)}
.u-login:hover{color:var(--ember);border-color:var(--ember)}
@media (max-width:720px){ .u-login{margin-right:8px;padding:5px 8px;font-size:10.5px} }
.u-login{white-space:nowrap}
.utility .u-hero{white-space:nowrap}
@media (max-width:900px){ .utility .u-hero{white-space:normal} }

/* Kitsal ekraanil jääb sisselogimise nupule ainult ikoon — läti
   "Pieteikties" ja soome "Kirjaudu" on piisavalt pikad, et rida
   360px juures üle serva lükata. */
.u-login .ul-txt{margin-left:.45em}
@media (max-width:560px){
  .u-login .ul-txt{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .u-login{padding:6px 9px;margin-right:6px}
  .u-login svg{width:15px;height:15px}
  .utility .u-hero{white-space:normal}
}

/* ==========================================================
   POE LAADIMISTEADE
   Ilma selleta on Ektaco kast paar sekundit tühi ja kes sinna
   kerib, näeb hoopis järgmist plokki. Nüüd on näha, et paketid
   on tulemas.
   ========================================================== */
.shop-loading{
  display:flex;align-items:center;justify-content:center;gap:12px;
  min-height:200px;padding:24px;
  border:1px dashed var(--line-2);border-radius:var(--r-lg);
  color:var(--muted);font-family:var(--f-mono);font-size:13px;
  letter-spacing:.08em;text-transform:uppercase}
.sl-spin{
  width:18px;height:18px;flex:none;border-radius:50%;
  border:2px solid var(--line-2);border-top-color:var(--ember);
  animation:slSpin .8s linear infinite}
@keyframes slSpin{ to{ transform:rotate(360deg) } }