@import url('https://fonts.googleapis.com/css2?family=Pirata+One&display=swap');
/* ══════════════════════════════════════════════════════════════════
   trikito-espaceo-4.css — Espaceo merch sekce: dark streetwear skin.
   VŠE scoped pod body.tk-espaceo (třídu přidává kategorie JS jen na
   /espaceo* stránkách, ?tkesp=1 = testovací zapnutí). Zbytek e-shopu
   nedotčen. Monochrom: černá, bílá, beton. Blackletter jen v hero.
   ══════════════════════════════════════════════════════════════════ */

/* ── plocha stránky ── */
body.tk-espaceo{background:#0A0A0A}
body.tk-espaceo #content-wrapper{background:#0A0A0A}

/* ── přemapování tokenů kategorie reskinu ── */
body.tk-espaceo .tk-kat2{
  --ink:#F2F0EC; --mut:rgba(242,240,236,.58); --line:rgba(255,255,255,.14);
  --surf:#191919; --card:#141414; --paper:#0E0E0E; --papir:#141414;
  --body:#B9B5AD; --studio:#1E1E1E;
  --gold:#F2F0EC; --gold-d:#CFCCC6; --krem:#141414}

/* ── povrchy, které mají bílou napevno ── */
body.tk-espaceo .tk-kat2 .card{background:#141414;border-radius:4px;
  box-shadow:0 0 0 1px rgba(255,255,255,.07)}
body.tk-espaceo .tk-kat2 .card-im,
body.tk-espaceo .tk-kat2 .card.bez-orezu .card-im{background:#1B1B1B}
body.tk-espaceo .tk-kat2 .fbt{background:#141414;color:#F2F0EC;
  border-color:rgba(255,255,255,.16)}
body.tk-espaceo .tk-kat2 .fbt:hover{border-color:rgba(255,255,255,.45)}
body.tk-espaceo .tk-kat2 .fpanel{background:#161616;
  box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.09)}
body.tk-espaceo .tk-kat2 .bar--f{background:#1B1B1B}
body.tk-espaceo .tk-kat2 .st--obj::before{background:#F2F0EC}
body.tk-espaceo .tk-kat2 .ak:hover i{background:#0A0A0A}
body.tk-espaceo .tk-kat2 .card--promo{display:none}
/* žlutý kupon řádek nedává v merchi smysl */
body.tk-espaceo .tk-kat2 .kup{display:none}

/* skladem tečka/text ať svítí na tmavé */
body.tk-espaceo .tk-kat2 .st--ok{color:#7ED9A7}

/* ── header v dark režimu (jen na Espaceo stránkách) ── */
body.tk-espaceo .tk-hd3 .hd,
body.tk-espaceo .tk-hd3 .hd-main{background:#0A0A0A;color:#F2F0EC}
body.tk-espaceo .tk-hd3 .hd-main{border-bottom:1px solid rgba(255,255,255,.12)}
body.tk-espaceo .tk-hd3 .hd-lg img,
body.tk-espaceo .tk-hd3 .hd-tel .ic img,
body.tk-espaceo .tk-hd3 .hd-act .ic img{filter:invert(1)}
body.tk-espaceo .tk-hd3 .hd-tel,body.tk-espaceo .tk-hd3 .hd-tel b,
body.tk-espaceo .tk-hd3 .hd-tel small,
body.tk-espaceo .tk-hd3 .hd-act{color:#F2F0EC}
body.tk-espaceo .tk-hd3 .hd-srch input{background:#161616;color:#F2F0EC;
  border-color:rgba(255,255,255,.16)}
body.tk-espaceo .tk-hd3 .hd-srch input::placeholder{color:rgba(242,240,236,.45)}
body.tk-espaceo .tk-hd3 .hd-srch .lu{color:rgba(242,240,236,.6)}
body.tk-espaceo .tk-hd3 .sdrop{background:#161616;border-color:rgba(255,255,255,.14)}
body.tk-espaceo .tk-hd3 .sdrop .sr:hover,
body.tk-espaceo .tk-hd3 .sdrop .sr.act{background:#222}
body.tk-espaceo .tk-hd3 .sdrop .sr .n{color:#F2F0EC}
body.tk-espaceo .tk-hd3 .sdrop .sr .p{color:#F2F0EC}
body.tk-espaceo .tk-hd3 .sdrop .l{color:rgba(242,240,236,.5)}
body.tk-espaceo .tk-hd3 .chips a{color:#F2F0EC;border-color:rgba(255,255,255,.2)}

/* ── hero ── */
body.tk-espaceo .esp-hero{background:#0A0A0A;color:#F2F0EC;overflow:hidden}
body.tk-espaceo .esp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,44%);
  gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(28px,4vw,56px)}
body.tk-espaceo .esp-eyebrow{font-size:12px;font-weight:700;letter-spacing:.34em;
  text-transform:uppercase;color:rgba(242,240,236,.5);margin:0 0 14px}
body.tk-espaceo .esp-logo{font-family:'Pirata One',system-ui,serif;font-weight:400;
  font-size:clamp(64px,9vw,124px);line-height:.95;letter-spacing:.01em;
  color:#F2F0EC;margin:0 0 18px;text-transform:none}
body.tk-espaceo .esp-sub{font-size:clamp(15px,1.4vw,18px);line-height:1.55;
  color:rgba(242,240,236,.72);max-width:44ch;margin:0 0 26px}
body.tk-espaceo .esp-cta{display:flex;gap:10px;flex-wrap:wrap}
body.tk-espaceo .esp-cta a{display:inline-block;padding:12px 22px;
  border:1px solid rgba(255,255,255,.28);color:#F2F0EC;
  font-weight:700;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;transition:background .2s,color .2s,border-color .2s}
body.tk-espaceo .esp-cta a:hover{background:#F2F0EC;color:#0A0A0A;border-color:#F2F0EC}
body.tk-espaceo .esp-im{position:relative}
body.tk-espaceo .esp-im img{display:block;width:100%;height:clamp(340px,42vw,560px);
  object-fit:cover;object-position:50% 18%;filter:grayscale(.15) contrast(1.04)}
/* mini varianta pro podkategorie */
body.tk-espaceo .esp-hero--mini .esp-grid{grid-template-columns:1fr;padding-block:22px 6px}
body.tk-espaceo .esp-hero--mini .esp-logo{font-size:clamp(34px,4vw,52px);margin:0}
body.tk-espaceo .esp-hero--mini .esp-eyebrow{margin-bottom:8px}

/* ── lookbook pás ── */
body.tk-espaceo .esp-look{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.4vw,20px);margin:clamp(28px,4vw,52px) 0 8px}
body.tk-espaceo .esp-look img{display:block;width:100%;aspect-ratio:4/5;
  object-fit:cover;filter:grayscale(.15) contrast(1.04)}

/* ── prázdný stav v dark ── */
body.tk-espaceo .empty-content h1,body.tk-espaceo .empty-content h2{color:#F2F0EC}
body.tk-espaceo .empty-content h2:after{filter:invert(1)}
body.tk-espaceo .empty-content p{color:rgba(242,240,236,.6)!important}
body.tk-espaceo .empty-content .btn,body.tk-espaceo .empty-content a.btn{
  background:#F2F0EC!important;color:#0A0A0A!important}
body.tk-espaceo .empty-content .btn:hover{background:#fff!important}

/* ── mobil ── */
@media(max-width:760px){
  body.tk-espaceo .esp-grid{grid-template-columns:1fr}
  body.tk-espaceo .esp-im img{height:min(58vh,440px)}
  body.tk-espaceo .esp-look{grid-template-columns:1fr 1fr}
  body.tk-espaceo .esp-look img:nth-child(3){display:none}
}

/* ── dolaďky z testu ── */
/* search: rám formu na tmavou, vnitřek jednolitý */
body.tk-espaceo .tk-hd3 .hd-srch form{background:#161616;border-color:rgba(255,255,255,.24)}
/* texty karet dědily tmavou linkovou barvu */
body.tk-espaceo .tk-kat2 .card-n{color:#F2F0EC}
body.tk-espaceo .tk-kat2 .card-n:hover{color:#fff}
body.tk-espaceo .tk-kat2 .cz-h .now{color:#F2F0EC}
body.tk-espaceo .tk-kat2 .card-rt,body.tk-espaceo .tk-kat2 .card-rt em{color:rgba(242,240,236,.6)}
body.tk-espaceo .tk-kat2 .qadd{background:#232323;color:#F2F0EC;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
body.tk-espaceo .tk-kat2 .qadd:hover{background:#F2F0EC;color:#0A0A0A}
/* mobilní nativní lišta (lupa/košík/menu) do dark */
body.tk-espaceo .top-navigation-bar{background:#0A0A0A!important;
  border-color:rgba(255,255,255,.12)!important}
body.tk-espaceo .responsive-tools>a{color:#F2F0EC!important}
body.tk-espaceo .responsive-tools>a:before{color:#F2F0EC!important}
body.tk-espaceo .top-navigation-bar a,
body.tk-espaceo .top-navigation-bar a:before,
body.tk-espaceo .top-navigation-bar .cart-count:before{color:#F2F0EC!important}

/* ══════════ v2: hero grafiky, oprava h1, PDP v Espaceo stylu ══════════ */

/* nativní h1 mělo napevno tmavou; pod plným hero je jméno duplicitní */
body.tk-espaceo .tk-kat2 .kh h1{color:#F2F0EC!important}
body.tk-espaceo .esp-hero:not(.esp-hero--mini)+.khead .kh{display:none}

/* jeho grafiky po stranách hero (fade maskou, ať sedí na jakémkoli pozadí) */
body.tk-espaceo .esp-hero{position:relative}
body.tk-espaceo .esp-hero::before,
body.tk-espaceo .esp-hero::after{content:"";position:absolute;top:50%;
  width:min(34vw,520px);aspect-ratio:1;transform:translateY(-50%);
  background-size:contain;background-position:center;background-repeat:no-repeat;
  opacity:.5;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent 78%);
  mask-image:radial-gradient(closest-side,#000 45%,transparent 78%)}
body.tk-espaceo .esp-hero::before{left:max(-120px,-8vw);
  background-image:url(https://cdn.myshoptet.com/usr/www.trikito.cz/user/documents/upload/shoptet-build/espaceo-g-ruze.png)}
body.tk-espaceo .esp-hero::after{right:34%;
  background-image:url(https://cdn.myshoptet.com/usr/www.trikito.cz/user/documents/upload/shoptet-build/espaceo-g-kriz.png);opacity:.34}
body.tk-espaceo .esp-grid{position:relative;z-index:1}
body.tk-espaceo .esp-hero--mini::before,
body.tk-espaceo .esp-hero--mini::after{width:min(26vw,300px);opacity:.3}
body.tk-espaceo .esp-hero--mini::after{right:max(-60px,-4vw)}

/* ── PDP v Espaceo stylu ── */
body.tk-espaceo .tk-pdp{
  --ink:#F2F0EC; --mut:rgba(242,240,236,.58); --line:rgba(255,255,255,.14);
  --surf:#161616; --card:#141414; --paper:#0E0E0E; --papir:#161616;
  --body:#B9B5AD; --studio:#1E1E1E;
  --gold:#F2F0EC; --gold-d:#CFCCC6; --krem:#161616}
body.tk-espaceo.type-product,
body.tk-espaceo.type-product #content-wrapper{background:#0A0A0A}
body.tk-espaceo .tk-pdp .card{background:#141414}
body.tk-espaceo .tk-pdp .bar--f{background:#1B1B1B}
body.tk-espaceo .tk-pdp .cust .btn{background:#1B1B1B;color:#F2F0EC}
/* CTA: na dark bílé tlačítko s černým textem */
body.tk-espaceo .tk-pdp .add{background:#F2F0EC!important;color:#0A0A0A!important}
body.tk-espaceo .tk-pdp .add:hover{background:#fff!important;color:#0A0A0A!important}
/* velikosti/čipy: hover z tokenů (ink=bílá) -> text tmavý */
body.tk-espaceo .tk-pdp .vel:hover,
body.tk-espaceo .tk-pdp .pdp-vel button:hover{color:#0A0A0A}
body.tk-espaceo .tk-pdp .pdp-vel button.on{color:#0A0A0A}
/* certifikace: černé kresby -> bílé */
body.tk-espaceo .tk-pdp .pdp-claim img{filter:invert(1)}

/* ── PDP: pevné tmavé texty z pdp CSS na světlé (změřeno z DOM) ── */
body.tk-espaceo .tk-pdp :is(h1,h2,h3,h4,summary){color:#F2F0EC!important}
body.tk-espaceo .tk-pdp :is(p,li,em){color:rgba(242,240,236,.75)!important}
body.tk-espaceo .tk-pdp :is(strong,b){color:#F2F0EC!important}
body.tk-espaceo .tk-pdp .bc,body.tk-espaceo .tk-pdp .bc a,
body.tk-espaceo .tk-pdp .bc span,body.tk-espaceo .tk-pdp .bc b{color:rgba(242,240,236,.6)!important}
body.tk-espaceo .tk-pdp .pdp-o-h{color:#F2F0EC!important}
body.tk-espaceo .tk-pdp .pdp-cena,body.tk-espaceo .tk-pdp .pdp-c-top{color:#F2F0EC!important}
body.tk-espaceo .tk-pdp .pdp-c-druha{color:rgba(242,240,236,.55)!important}
body.tk-espaceo .tk-pdp .pdp-poc,body.tk-espaceo .tk-pdp .pdp-poc button{color:#F2F0EC!important}
body.tk-espaceo .tk-pdp .pdp-poc{background:#1B1B1B;border-color:rgba(255,255,255,.16)}
body.tk-espaceo .tk-pdp .pdp-dopr,body.tk-espaceo .tk-pdp .pdp-dopr-t{color:rgba(242,240,236,.78)!important}
body.tk-espaceo .tk-pdp .pdp-claim{color:#F2F0EC!important}
body.tk-espaceo .tk-pdp .pdp-dod img,body.tk-espaceo .tk-pdp .pdp-dopr img{filter:invert(1)}
/* CTA text pro jistotu i ve vnořených uzlech */
body.tk-espaceo .tk-pdp .add,body.tk-espaceo .tk-pdp .add *{color:#0A0A0A!important}

/* ── PDP spodek: popisové sekce, parametry, sticky lišta ── */
/* inline barvy z admin popisů poslouchají dark scope */
body.tk-espaceo .tk-pdp .obsah [style*="color"]{color:inherit!important}
body.tk-espaceo .tk-pdp .obsah .tk-final-section,
body.tk-espaceo .tk-pdp .obsah .tk-final-section.bg-gray{background:#141414!important}
body.tk-espaceo .tk-pdp .obsah .tk-final-section.no-border{background:transparent!important}
body.tk-espaceo .tk-pdp .obsah .tk-final-benefit-item{background:#1D1D1D;color:#F2F0EC}
body.tk-espaceo .tk-pdp .obsah .tk-final-benefit-item img{filter:invert(1)}
/* parametry: hodnoty byly tmavé napevno */
body.tk-espaceo .tk-pdp .pdp-par div,body.tk-espaceo .tk-pdp .pdp-par dd{color:#F2F0EC!important}
body.tk-espaceo .tk-pdp .pdp-par dt{color:rgba(242,240,236,.55)!important}
/* sticky lišta dole */
body.tk-espaceo .tk-pdp .pdp-lista{background:rgba(16,16,16,.96)!important;
  border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -12px 34px rgba(0,0,0,.5)}
body.tk-espaceo .tk-pdp .pdp-lista *{color:#F2F0EC}
body.tk-espaceo .tk-pdp .pdp-lista .add,
body.tk-espaceo .tk-pdp .pdp-lista .add *{color:#0A0A0A!important}
/* nadpisy v popisech mají inline barvy ze šablony — přebíjí je scope */
body.tk-espaceo .tk-pdp .obsah :is(h1,h2,h3,h4){color:#F2F0EC!important}
body.tk-espaceo .tk-pdp .obsah :is(h1,h2,h3,h4) *{color:inherit!important}
body.tk-espaceo .tk-pdp .obsah .trikito-cta-desc h4{color:#F2F0EC!important}

/* ══════════ v3: filtr lišta čitelná, karty bez bílých okrajů ══════════ */
body.tk-espaceo .tk-kat2 .tbw{color:#F2F0EC}
body.tk-espaceo .tk-kat2 .swl{color:#F2F0EC}
body.tk-espaceo .tk-kat2 .swi{background:rgba(255,255,255,.22)}
body.tk-espaceo .tk-kat2 .swl input:checked + .swi{background:#F2F0EC}
body.tk-espaceo .tk-kat2 .swl input:checked + .swi::after{background:#0A0A0A}
body.tk-espaceo .tk-kat2 .aktivy,body.tk-espaceo .tk-kat2 .ak{color:#F2F0EC}
/* lifestyle fotky 4:5 na plný formát karty (JS dodává verzi bez bílého
   CDN paddingu), ořez místo pruhů */
body.tk-espaceo .tk-kat2 .card-im{aspect-ratio:4/5;background:#1B1B1B}
body.tk-espaceo .tk-kat2 .card-im img{width:100%;height:100%;object-fit:cover}

/* ══════════ v4: prvky značky v pozadí celé stránky ══════════ */
/* obří E vlevo nahoře za obsahem + anděl vpravo dole, fixní (jemný
   parallax dojem), nízká viditelnost, vždy ZA kartami */
body.tk-espaceo::before{content:"";position:fixed;z-index:0;pointer-events:none;
  top:8vh;left:-12vw;width:min(52vw,780px);aspect-ratio:1;
  background:url(https://cdn.myshoptet.com/usr/www.trikito.cz/user/documents/upload/shoptet-build/espaceo-g-ecko.png) center/contain no-repeat;
  opacity:.06;transform:rotate(-8deg)}
body.tk-espaceo::after{content:"";position:fixed;z-index:0;pointer-events:none;
  bottom:-6vh;right:-6vw;width:min(44vw,640px);aspect-ratio:1;
  background:url(https://cdn.myshoptet.com/usr/www.trikito.cz/user/documents/upload/shoptet-build/espaceo-g-andel.jpg) center/contain no-repeat;
  opacity:.14;
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 75%);
  mask-image:radial-gradient(closest-side,#000 40%,transparent 75%)}
/* obsah nad vrstvami pozadí */
body.tk-espaceo #content-wrapper,body.tk-espaceo .tk-kat2,body.tk-espaceo .tk-pdp{
  position:relative;z-index:1}
body.tk-espaceo #content-wrapper{background:transparent}
body.tk-espaceo{background:#0A0A0A}
@media(max-width:760px){
  body.tk-espaceo::before{width:88vw;left:-24vw;opacity:.05}
  body.tk-espaceo::after{width:70vw}
}