/* ==========================================================================
   The shop. KRABICE realized: hero, lots, goods, the address label, the count.
   Base states are complete: no-JS and reduced-motion render the finished page.
   ========================================================================== */

.znacka__jmeno{ font-size:.92rem; }
.kosik{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-weight:500;white-space:nowrap;
}
.hlavicka__nav{ margin-left:auto; }
.soucet{ gap:8px; }
.soucet .cip{ transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.soucet-prirustek{ transform:scale(1.12); }
@media (max-width:1080px){ .kosik span.zaznam{ display:none; } }
@media (max-width:820px){ .kosik{ display:none; } }

/* ==========================================================================
   S1 HERO — M1 SLOŽENÍ
   ========================================================================== */
.hero{
  min-height:calc(100svh - 62px);
  display:flex;align-items:center;
  padding-block:clamp(32px,6vw,72px);
}
.hero__mrizka{
  display:grid;grid-template-columns:minmax(280px,46%) 1fr;
  gap:clamp(24px,4vw,64px);align-items:center;width:100%;
}
.hero__krabice{ position:relative; }
.karton{ width:100%;height:auto;display:block;overflow:visible;
  filter:drop-shadow(0 18px 30px rgb(36 29 21 / .18)); }

.karton g{ transform-box:fill-box; }
.karton__vrch  { transform-origin:50% 100%; }
.karton__bok   { transform-origin:0% 50%; }
.karton__klopa--l{ transform-origin:100% 100%; }
.karton__klopa--p{ transform-origin:0% 100%; }

.hero__text{ min-width:0; }
.hero__nadpis{ margin:0; }
.hero__radek{ display:block;overflow:hidden; }
.hero__radek > span,.hero__radek{ will-change:auto; }

.hero__pul{
  display:inline-block;margin-top:calc(var(--u) * 3);
  background:var(--signal);color:var(--inkoust);
  padding:8px 16px;font-size:1rem;font-weight:600;
  transform:rotate(-2deg);
}
.hero__akce{
  margin-top:calc(var(--u) * 5);
  display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u) * 3);
}

@media (max-width:860px){
  .hero{ min-height:0; }
  .hero__mrizka{ grid-template-columns:1fr; }
  .hero__krabice{ max-width:340px; }
}

/* ---- the choreography: enhancement only ---- */
@media (prefers-reduced-motion:no-preference){
  html.js .hero.slozeni-pripraveno .karton__vrch{ transform:scaleY(0); }
  html.js .hero.slozeni-pripraveno .karton__bok{ transform:scaleX(0); }
  html.js .hero.slozeni-pripraveno .karton__klopa--l{ transform:rotate(38deg); opacity:0; }
  html.js .hero.slozeni-pripraveno .karton__klopa--p{ transform:rotate(-38deg); opacity:0; }
  html.js .hero.slozeni-pripraveno .karton{ filter:drop-shadow(0 0 0 rgb(36 29 21 / 0)); }
  html.js .hero.slozeni-pripraveno .hero__radek{ }
  html.js .hero.slozeni-pripraveno .hero__radek span{ display:block;transform:translateY(46px); }
  html.js .hero.slozeni-pripraveno .hero__pul{ opacity:0;transform:rotate(-2deg) scale(1.05); }
  html.js .hero.slozeni-pripraveno .hero__akce{ opacity:0; }

  /* act 1: the blank folds up (0 to 650 ms) */
  html.js .hero.slozeni-bezi .karton__vrch{
    transform:scaleY(1);transition:transform .46s cubic-bezier(.3,0,.25,1) .06s;
  }
  html.js .hero.slozeni-bezi .karton__bok{
    transform:scaleX(1);transition:transform .46s cubic-bezier(.3,0,.25,1) .2s;
  }
  /* act 2: settle, the shadow arrives (650 to 900 ms) */
  html.js .hero.slozeni-bezi .karton{
    filter:drop-shadow(0 18px 30px rgb(36 29 21 / .18));
    transition:filter .3s ease .65s;
  }
  /* act 3: the flaps open outward (900 to 1400 ms) */
  html.js .hero.slozeni-bezi .karton__klopa--l{
    transform:rotate(0);opacity:1;transition:transform .5s cubic-bezier(.3,0,.25,1) .9s,opacity .2s ease .9s;
  }
  html.js .hero.slozeni-bezi .karton__klopa--p{
    transform:rotate(0);opacity:1;transition:transform .5s cubic-bezier(.3,0,.25,1) .98s,opacity .2s ease .98s;
  }
  /* act 4: the contents rise out (1200 to 1900 ms) */
  html.js .hero.slozeni-bezi .hero__radek span{
    transform:translateY(0);
    transition:transform .6s cubic-bezier(.2,.7,.2,1) calc(1.2s + var(--i,0) * .12s);
  }
  /* act 5: the split line stamps in (2100 ms) */
  html.js .hero.slozeni-bezi .hero__pul{
    opacity:1;transform:rotate(-2deg) scale(1);
    transition:opacity .12s ease 2.1s,transform .18s cubic-bezier(.2,1.5,.4,1) 2.1s;
  }
  html.js .hero.slozeni-bezi .hero__akce{ opacity:1;transition:opacity .3s ease 2.2s; }
}

/* The auction band sits a tone darker so the kraft lots read against it. */
.pas-aukce{ background:var(--karton-stin); }
.pas-aukce .krabice{ background:var(--karton);border-color:#8E6A3D; }
.pas-aukce .krabice--zavrena .krabice__klopy span{ background:#BE8F58;border-color:#8E6A3D; }

/* ==========================================================================
   Lots
   ========================================================================== */
.lot{ position:relative;padding-top:calc(var(--u) * 4.5); }
.lot__ukazka{ position:absolute;top:12px;right:12px;z-index:2; }
.lot__jmeno{ margin:0 0 6px;font-size:1.1rem; }
.lot__obsah{ font-size:12.5px;opacity:.8;margin:0 0 calc(var(--u) * 2);text-transform:uppercase;letter-spacing:.03em; }
.lot__radek{ font-size:13.5px;margin:0 0 4px;display:flex;justify-content:space-between;gap:12px; }
.lot__radek b{ font-weight:600; }
.lot .cena{ margin-top:calc(var(--u) * 1.5); }
.lot__odpocet{
  margin:calc(var(--u) * 2) 0 0;font-size:13px;
  border-top:1px dotted rgb(36 29 21 / .3);padding-top:8px;
}
.lot.posledni-podani .lot__odpocet{ color:var(--signal-tmavy);font-weight:600; }
.lot.priklepnuto{ opacity:.9; }

/* ==========================================================================
   Goods
   ========================================================================== */
.zbozi{
  display:flex;flex-direction:column;gap:calc(var(--u) * 1.5);
  text-decoration:none;color:inherit;
  background:var(--stitek-bila);border:1px solid var(--karton-stin);
  padding:calc(var(--u) * 2);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s;
}
.zbozi__ram{ display:block;aspect-ratio:4 / 3; }
/* A printed card is shown whole, sitting on paper, never cropped to fill. */
.ram--tisk{ background:var(--papir-vpad);border-color:var(--karton-stin); }
.ram--tisk img{ object-fit:contain;padding:10px; }
.zbozi__jmeno{ margin:0;font-size:1rem;font-weight:600; }
@media (prefers-reduced-motion:no-preference){
  html.js .zbozi:hover{ transform:translateY(-4px);box-shadow:var(--stin-krabice); }
}

/* ==========================================================================
   S4 NA PŮL explainer — one line, no card
   ========================================================================== */
.napul{
  text-align:center;padding-block:calc(var(--rytmus) * .8);
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 4);
}
.napul__veta{
  font-family:var(--rec);font-weight:600;
  font-size:clamp(1.15rem,2.3vw,1.6rem);line-height:1.35;
  max-width:30ch;margin:0;
}
.napul__ukazka{ align-items:center; }
.napul__ukazka .cena__hodnota{ font-size:2rem; }
/* The explainer teaches the mechanic, so its example is permanently split. */
html.js .napul__ukazka .cena__kocce{ opacity:1;transform:none; }
@media (prefers-reduced-motion:no-preference){
  html.js .napul__ukazka .cena__pul--h{ transform:translateY(-3px); }
  html.js .napul__ukazka .cena__pul--d{ transform:translateY(3px); }
}

/* ==========================================================================
   S5 ADRESA
   ========================================================================== */
.adresa-sekce{
  display:grid;grid-template-columns:minmax(0,640px) 1fr;
  gap:calc(var(--zlab) * 2);align-items:center;
}
@media (max-width:900px){ .adresa-sekce{ grid-template-columns:1fr; } }
.adresa .stitek__radek{ line-height:2.1; }
.adresa__text p{ max-width:44ch; }

.stitek__radek--skrtnuty .stitek__hodnota::after{ transform:scaleX(1); }
@media (prefers-reduced-motion:no-preference){
  html.js .adresa.adresa-ceka .stitek__radek--skrtnuty .stitek__hodnota::after{ transform:scaleX(0); }
  html.js .adresa.adresa-ceka .adresa__novy{ opacity:0; }
  html.js .adresa.adresa-tiskne .stitek__radek--skrtnuty .stitek__hodnota::after{
    transform:scaleX(1);transition:transform .3s ease .5s;
  }
  html.js .adresa.adresa-tiskne .adresa__novy{ opacity:1;transition:opacity .3s ease .85s; }
}

/* ==========================================================================
   S6 Impact
   ========================================================================== */
.dopad__fakta{ margin-bottom:calc(var(--u) * 6); }
.fakt{ margin:0;font-size:1rem;line-height:1.4; }
.fakt b{
  display:block;font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:600;
  line-height:1.1;margin-bottom:6px;
}
.dopad__spodek{
  display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--zlab) * 2);align-items:start;
}
@media (max-width:780px){ .dopad__spodek{ grid-template-columns:1fr; } }
.dopad__popisek{ margin:0 0 10px;opacity:.7; }
.dopad__soucet .cip{ font-size:1.35rem;padding:8px 14px; }
.dopad__odkaz{ margin-top:calc(var(--u) * 5); }

/* ==========================================================================
   Footer grid
   ========================================================================== */
.pata__mrizka{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--zlab);
  font-size:14.5px;line-height:1.7;
}
@media (max-width:820px){ .pata__mrizka{ grid-template-columns:repeat(2,1fr);gap:calc(var(--u) * 4); } }
@media (max-width:460px){ .pata__mrizka{ grid-template-columns:1fr; } }
.pata__mrizka p{ margin:0; }
.pata__znacka{ margin-bottom:10px;display:block; }

/* ==========================================================================
   Auction detail
   ========================================================================== */
.drobky{ font-size:13px;padding-block:calc(var(--u) * 3);opacity:.8; }
.drobky a{ text-decoration:none;border-bottom:1px solid rgb(36 29 21 / .3); }

.aukce{
  display:grid;grid-template-columns:7fr 5fr;gap:calc(var(--zlab) * 2);
  align-items:start;padding-bottom:var(--rytmus);
}
@media (max-width:900px){ .aukce{ grid-template-columns:1fr; } }

.lot-velky{ position:relative;padding-top:calc(var(--u) * 7); }
.lot-velky .lot__ukazka{ right:auto;left:12px; }
.lot-velky__ram{
  display:block;aspect-ratio:4 / 3;max-width:none;
  margin-bottom:calc(var(--u) * 2);
}
.lot-velky__obsah{
  font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;margin:0;opacity:.85;
}

/* the hammer waits over the box seam, cocked through the final minute */
.kladivo{
  position:absolute;top:-30px;left:50%;width:132px;opacity:0;
  transform-origin:16% 55%;transform:translateX(-50%) rotate(-35deg);
  transition:opacity .2s ease,transform .09s cubic-bezier(.3,0,.2,1);
  filter:drop-shadow(0 4px 6px rgb(36 29 21 / .3));
  z-index:3;
}
.aukce.posledni-podani .kladivo{ opacity:1; }
.aukce.priklepnuto .kladivo{ opacity:1;transform:translateX(-50%) rotate(0); }

.lot-velky__razitko{
  position:absolute;top:44%;left:50%;margin:0;
  transform:translate(-50%,-50%) rotate(-6deg) scale(1.18);
  opacity:0;transition:opacity .12s ease,transform .18s cubic-bezier(.2,1.5,.4,1);
  background:rgb(244 238 225 / .82);
}
.aukce.priklepnuto .lot-velky__razitko{ opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(1); }

.aukce__panel{ padding:calc(var(--u) * 4); }
.aukce__jmeno{ font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 8px; }
.aukce__puvod{ font-size:14.5px;opacity:.85;margin:0 0 calc(var(--u) * 3); }
.aukce__popisek{ display:block;opacity:.7;margin-bottom:6px; }
.aukce__odpocet{ margin:0 0 calc(var(--u) * 3); }
.aukce__cas{ font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:600;display:block; }
.aukce.posledni-podani .aukce__cas{ color:var(--signal-tmavy); }
.aukce__radky{ margin:0 0 calc(var(--u) * 3); }
.aukce__radky .stitek__radek{ margin:0; }
.aukce__soucasne{ margin:0 0 calc(var(--u) * 2); }
.aukce__soucasne .cena__hodnota{ font-size:1.9rem; }
.aukce__stav{ display:inline-flex;align-items:center;gap:7px;margin:0 0 calc(var(--u) * 2); }
.chip-nabeh{ transform:translateY(-3px); }
.aukce__hlaska{ margin:0 0 calc(var(--u) * 2);font-weight:600; }

.prihoz{ margin-bottom:calc(var(--u) * 4); }
.prihoz__radek{ display:flex;gap:10px;margin-bottom:10px; }
.prihoz input[type=number]{
  flex:1 1 auto;min-width:0;background:var(--papir-vpad);
  border:1.5px solid var(--inkoust);padding:12px 14px;font-size:1.05rem;
  font-family:var(--zaznam);font-weight:600;color:var(--inkoust);
}
.prihoz__cipy{ display:flex;gap:8px;margin-bottom:10px; }
.prihoz__cipy .cip{ cursor:pointer;font-family:var(--zaznam); }
.prihoz__cipy .cip:hover{ background:var(--signal);border-color:var(--signal); }
.prihoz__chyba{ margin:0 0 8px;font-size:14px;color:var(--signal-tmavy);font-weight:600; }
.prihoz__hlidat{ margin:0;font-size:14.5px; }
.prihoz__hlidat label{ display:flex;gap:8px;align-items:center;cursor:pointer; }

.zebrik__vic{ margin:10px 0 0;font-size:13px;opacity:.75;text-decoration:underline;cursor:pointer; }
.zebrik li span:first-child{ opacity:.75; }
.aukce__pul-veta{
  margin:calc(var(--u) * 3) 0 0;padding-top:calc(var(--u) * 2);
  border-top:1px solid rgb(36 29 21 / .25);font-weight:600;
}

/* ==========================================================================
   Shop + shelter pages
   ========================================================================== */
.hlava-strany{ padding-block:calc(var(--u) * 3) calc(var(--u) * 6); }
.hlava-strany h1{ max-width:20ch;margin-bottom:calc(var(--u) * 2); }
.hlava-strany__pod{ max-width:56ch;font-size:1.1rem;margin:0; }

.filtry{ display:flex;flex-wrap:wrap;gap:10px;margin-bottom:calc(var(--u) * 5); }
.filtry .cip{ text-decoration:none; }
.filtry__aktivni{ background:var(--inkoust);color:var(--papir);border-color:var(--inkoust); }

.sekce-zbozi{ padding-bottom:var(--rytmus); }
.zbozi{ position:relative; }
.zbozi__ukazka{ position:absolute;top:14px;left:14px;z-index:2;background:var(--stitek-bila); }
.zbozi__popis{ font-size:14px;margin:0;opacity:.85;flex:1 1 auto; }
.zbozi__do-krabice{ align-self:flex-start;font-size:.95rem;padding:10px 18px; }
.zbozi--hlavni{ border-color:var(--inkoust);border-width:1.5px; }

.dodani h2{ margin-bottom:calc(var(--u) * 4); }
.dodani__pozn{ margin:10px 0 0;font-size:14px;opacity:.85; }
.dodani__poukaz{ margin-top:calc(var(--u) * 3);font-size:15px; }

/* ---- shelter ---- */
.pocty{ padding-bottom:var(--rytmus); }
.tutu__stitek{ margin:0 0 10px;opacity:.7; }
.tutu p{ max-width:52ch; }

.kocky{ margin-top:calc(var(--u) * 2); }
.kocka{ margin:0; }
.kocka .ram{ max-width:none;width:100%; }
.kocka figcaption{ display:block;padding-top:12px;font-size:14px;line-height:1.5; }
.kocka figcaption b{ display:block;font-family:var(--rec);font-size:1.05rem;margin-bottom:4px; }
.kocka figcaption span{ opacity:.88; }

.adopce__mrizka{
  display:grid;grid-template-columns:200px 1fr;gap:calc(var(--zlab) * 2);align-items:center;
}
.adopce__mrizka > *{ min-width:0; }
@media (max-width:760px){ .adopce__mrizka{ grid-template-columns:1fr; } }
.adopce__emblem img{ width:100%;max-width:200px;height:auto;display:block; }
.adopce p{ max-width:54ch; }
.adopce__ucet{ font-size:15px; }
.adopce__dan{ font-size:14px;opacity:.85; }

.penize__pozn{ max-width:44ch;margin-top:calc(var(--u) * 2); }
.sbirka{
  display:block;text-decoration:none;color:inherit;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s;
}
.sbirka b{ display:block;font-family:var(--rec);font-size:1.1rem;margin-bottom:8px; }
.sbirka span{ font-size:14.5px;opacity:.88; }
@media (prefers-reduced-motion:no-preference){
  html.js .sbirka:hover{ transform:translateY(-3px);box-shadow:var(--stin-krabice); }
}

/* Tutu ships as a case record: we have no photograph of her. */
.tutu__spis{ max-width:720px;padding:calc(var(--u) * 4); }
.tutu__spis h2{ margin-bottom:calc(var(--u) * 3); }
.tutu__radky{ margin-bottom:calc(var(--u) * 3); }
.tutu__radky .stitek__radek{ margin:0; }
.tutu__text{ max-width:52ch;margin:0 0 .8em; }
.tutu__pozn{ margin:0;font-family:var(--zaznam);font-size:13px;opacity:.72; }

/* Back to the proposal. This is Veldon-facing navigation, so it lives with the
   demo notice rather than in the shop's own nav. */
.zpet-nabidka{ white-space:nowrap;border-bottom:1.5px solid var(--signal);text-decoration:none; }
.zpet-nabidka:hover{ background:var(--signal); }