/* ============================================================
   firemnikrabicky.cz — fk-404-1.css — v1
   Reskin nativni Shoptet 404 stranky do FK designu. CSS-only,
   ZADNY JS (na rozdil od ss-404-2, ktery stavel vlastni DOM -
   nativni FK texty "A safra! Neco se pokazilo." sedi k medvedovi,
   takze staci restyl nativniho .empty-content-404).

   DETEKCE: body.in-404 (Shoptet ji dava na kazdou neexistujici URL;
   404 je zaroven type-page - fk-docs-1.css ma proto :not(.in-404)).

   NATIVNI DOM:
     main#content .content-inner > .empty-content.empty-content-404
       > h1[data-testid=pageHeader] + h2 + p + p > a.btn.btn-default

   DEPLOY: upload /user/documents/upload/fk-404-1.css
           + <link rel="stylesheet" href="/user/documents/upload/fk-404-1.css?v=1">
           do Zahlavi (hned za fk-docs-1.css).
   ============================================================ */


/* ---- platno + frame ---- */
body.in-404 {
  background: #F4F0E6 !important;
}
body.in-404 #content-wrapper,
body.in-404 .content-wrapper-in,
body.in-404 main#content.content {
  background: transparent !important;
  box-shadow: none !important;
}
body.in-404 .sidebar,
body.in-404 aside.sidebar-left {
  display: none !important;
}
body.in-404 main#content.content {
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 100% !important;
  float: none !important;
  padding: 0 !important; /* nativni padding-left 35px po skrytem sidebaru */
}
/* nativni .content-inner: max-width 800px bez auto marginu -> scena vlevo;
   na 404 chceme plne platno */
body.in-404 main#content .content-inner {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* drobecky na 404 nedavaji smysl (vedou na neexistujici URL) */
body.in-404 .breadcrumbs-wrapper {
  display: none !important;
}


/* ---- scena ---- */
body.in-404 .empty-content-404 {
  position: relative;
  overflow: hidden;
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: clamp(16px, 2.5vw, 36px) 0 clamp(48px, 6vw, 88px);
  padding: clamp(56px, 8vw, 110px) clamp(16px, 3vw, 32px);
  /* jaspis.css addon: div,p,a,input maji Nunito !important -> nutny !important */
  font-family: 'Aspekta', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* obri "404" vodoznak v pozadi (leaf, jemny) */
body.in-404 .empty-content-404::before {
  content: '404';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Aspekta', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(190px, 30vw, 400px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  color: #5C765E;
  opacity: .09;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  z-index: 0;
  animation: fk-404-mark-in 1.2s cubic-bezier(.4, 0, .2, 1) .1s both;
}

body.in-404 .empty-content-404 > * {
  position: relative;
  z-index: 1;
}


/* ---- texty ---- */
body.in-404 .empty-content-404 h1 {
  font-family: 'Aspekta', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: clamp(32px, 4.6vw, 52px) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.08 !important;
  color: #1A2B1C !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  text-wrap: balance;
  animation: fk-404-fade-in .7s cubic-bezier(.4, 0, .2, 1) .25s both;
}
/* nativni shoptet-font ikona (preskrtnute kolecko) na h2::after - pryc */
body.in-404 .empty-content-404 h2::before,
body.in-404 .empty-content-404 h2::after {
  content: none !important;
  display: none !important;
}
body.in-404 .empty-content-404 h2 {
  font-family: 'Aspekta', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: clamp(17px, 1.8vw, 21px) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #6B7B6D !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  animation: fk-404-fade-in .7s cubic-bezier(.4, 0, .2, 1) .4s both;
}
body.in-404 .empty-content-404 p {
  font-family: 'Aspekta', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 15.5px;
  line-height: 1.6;
  color: #6B7B6D;
  max-width: 460px;
  margin: 0 0 8px;
  animation: fk-404-fade-in .7s cubic-bezier(.4, 0, .2, 1) .55s both;
}


/* ---- CTA "Zpet do obchodu" - pill forest (FK primary) ---- */
body.in-404 .empty-content-404 .btn,
body.in-404 .empty-content-404 a.btn-default {
  display: inline-block;
  margin-top: 18px;
  background: #223924 !important;
  background-image: none !important;
  color: #F4F0E6 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 15px 36px !important;
  font-family: 'Aspekta', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 750 !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: 0 14px 34px rgba(34, 57, 36, .18) !important;
  transition: background .25s cubic-bezier(.4, 0, .2, 1),
              transform .25s cubic-bezier(.4, 0, .2, 1),
              box-shadow .25s cubic-bezier(.4, 0, .2, 1);
}
body.in-404 .empty-content-404 .btn:hover,
body.in-404 .empty-content-404 a.btn-default:hover {
  background: #1A2B1C !important;
  color: #F4F0E6 !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(34, 57, 36, .24) !important;
}
body.in-404 .empty-content-404 .btn:focus-visible,
body.in-404 .empty-content-404 a.btn-default:focus-visible {
  outline: 2px solid #E1B124;
  outline-offset: 3px;
}


/* ---- animace ---- */
@keyframes fk-404-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fk-404-mark-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: .09; transform: scale(1); }
}


/* ---- mobil ---- */
@media (max-width: 640px) {
  body.in-404 .empty-content-404 {
    min-height: 52vh;
    padding: 64px 16px 56px;
  }
  body.in-404 .empty-content-404::before {
    font-size: clamp(150px, 52vw, 260px);
  }
}


/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  body.in-404 .empty-content-404::before,
  body.in-404 .empty-content-404 h1,
  body.in-404 .empty-content-404 h2,
  body.in-404 .empty-content-404 p {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body.in-404 .empty-content-404::before { opacity: .09 !important; }
  body.in-404 .empty-content-404 .btn,
  body.in-404 .empty-content-404 a.btn-default {
    transition: none !important;
  }
  body.in-404 .empty-content-404 .btn:hover,
  body.in-404 .empty-content-404 a.btn-default:hover {
    transform: none !important;
  }
}