/* ==========================================================================
   Hoštecké kočky — KRABICE — component layer
   Binding: _spec/DESIGN.md §2.3, §2.4, §3. Base states are complete without JS.
   ========================================================================== */

/* ---------- Kraft band + corrugation edge (max ONE band per surface) ------ */
.kraft{
  background:var(--karton);
  color:var(--inkoust);
  position:relative;
}
.kraft::before,.kraft::after{
  content:"";position:absolute;left:0;right:0;height:6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath d='M0 6 A6 6 0 0 1 12 6' fill='none' stroke='%23A87E4C' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:12px 6px;
}
.kraft::before{ top:0; }
.kraft::after{ bottom:0; transform:scaleY(-1); }

/* ---------- The box ------------------------------------------------------ */
.krabice{
  position:relative;
  background:var(--karton);
  border:1.5px solid var(--karton-stin);
  box-shadow:var(--stin-krabice);
  padding:calc(var(--u) * 3);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s;
}

/* top flap geometry, drawn behind the content */
.krabice__klopy{ position:absolute;inset:0 0 auto 0;height:22px;overflow:hidden;pointer-events:none; }
.krabice__klopy span{
  position:absolute;top:0;width:50%;height:100%;
  background:var(--karton-stin);opacity:.5;
}
.krabice__klopy span:first-child{ left:0;  clip-path:polygon(0 0,100% 0,92% 100%,6% 100%); }
.krabice__klopy span:last-child{  right:0; clip-path:polygon(0 0,100% 0,94% 100%,8% 100%); }

/* A sealed lot: the two top flaps meet in a seam across the head of the box.
   Not a translucent sheet over the face: a real closed edge. */
.krabice--zavrena .krabice__klopy{ height:38px; }
.krabice--zavrena .krabice__klopy span{
  opacity:1;background:var(--karton);
  border-bottom:1.5px solid var(--karton-stin);
}
.krabice--zavrena .krabice__klopy span:first-child{ clip-path:none;left:0;border-right:1.5px solid var(--karton-stin); }
.krabice--zavrena .krabice__klopy span:last-child{ clip-path:none;right:0; }
.krabice--zavrena{ padding-top:calc(var(--u) * 6.5); }

a.krabice{ display:block;text-decoration:none;color:inherit; }

/* ---------- Photos live INSIDE a box opening ----------------------------- */
.ram{
  display:block;                /* used on <span>: inline boxes ignore aspect-ratio */
  background:var(--inkoust);
  border:1.5px solid var(--karton-stin);
  overflow:hidden;
  aspect-ratio:3 / 4;
  max-width:480px;              /* photo law: never wider, never full-bleed */
}
.ram img{ width:100%;height:100%;object-fit:cover;display:block; }

/* ---------- Label -------------------------------------------------------- */
.stitek{
  background:var(--stitek-bila);
  border:1px solid var(--inkoust);
  padding:calc(var(--u) * 2.5);
}
.stitek__radek{
  font-family:var(--zaznam);font-size:14px;line-height:1.9;
  display:flex;gap:calc(var(--u) * 1.5);align-items:baseline;
  border-bottom:1px dotted rgb(36 29 21 / .28);
}
.stitek__radek:last-child{ border-bottom:0; }
.stitek__klic{ font-weight:600;letter-spacing:.04em;flex:0 0 auto;text-transform:uppercase;font-size:12px; }
.stitek__hodnota{ flex:1 1 auto; }
.stitek__radek--skrtnuty .stitek__hodnota{ position:relative; }
.stitek__radek--skrtnuty .stitek__hodnota::after{
  content:"";position:absolute;left:0;top:52%;height:1.5px;width:100%;
  background:var(--inkoust);transform-origin:left;
}

/* ---------- Buttons: stamped, pressed ------------------------------------ */
.razitko{
  display:inline-block;font-family:var(--rec);font-weight:700;font-size:1.05rem;
  background:var(--inkoust);color:var(--papir);
  border:0;padding:14px 26px;cursor:pointer;text-decoration:none;
  transition:transform .09s ease,box-shadow .09s ease;
  box-shadow:0 3px 0 var(--karton-stin);
}
.razitko:hover{ transform:translateY(1px); box-shadow:0 2px 0 var(--karton-stin); }
.razitko:active{ transform:translateY(3px); box-shadow:0 0 0 var(--karton-stin); }
.razitko[disabled]{ opacity:.45;cursor:not-allowed;transform:none;box-shadow:none; }
.odkaz-prosty{ text-decoration:underline;text-underline-offset:3px; }

/* ---------- Chips -------------------------------------------------------- */
.cip{
  display:inline-block;font-family:var(--zaznam);font-size:13px;font-weight:600;
  padding:4px 10px;background:var(--papir-vpad);color:var(--inkoust);
  border:1px solid rgb(36 29 21 / .2);
}
.cip--signal{ background:var(--signal);border-color:var(--signal); color:var(--inkoust); }
.cip--ukazka{
  font-family:var(--znaceni);text-transform:uppercase;letter-spacing:.08em;font-size:12px;
  background:transparent;border:1.5px solid var(--inkoust);
}

/* ==========================================================================
   NA PŮL — the signature mechanic.
   Base state (no JS, reduced motion, print): the half-chip is VISIBLE.
   Information is never motion-gated.
   ========================================================================== */
.cena{ display:inline-flex;flex-direction:column;gap:5px;align-items:flex-start; }
.cena__hodnota{
  position:relative;display:inline-block;
  font-family:var(--zaznam);font-weight:600;font-size:1.05em;
  font-variant-numeric:tabular-nums;line-height:1.25;
}
.cena__pul{ display:block; transition:transform .26s cubic-bezier(.2,.7,.2,1); }
.cena__pul--h{ clip-path:inset(0 0 50% 0); }
.cena__pul--d{ clip-path:inset(50% 0 0 0);position:absolute;inset:0; }
.cena__kocce{
  font-family:var(--zaznam);font-size:13px;font-weight:600;
  background:var(--signal);color:var(--inkoust);   /* ink on signal, ~7:1 */
  padding:3px 9px;white-space:nowrap;
}

/* JS on + motion allowed: the chip waits, then the digits shear apart. */
@media (prefers-reduced-motion:no-preference){
  html.js .cena__kocce{
    opacity:0;transform:translateY(-4px);
    transition:opacity .2s ease,transform .26s cubic-bezier(.2,.7,.2,1);
  }
  html.js .cena.je-rozpulena .cena__kocce{ opacity:1;transform:none; }
  html.js .cena.je-rozpulena .cena__pul--h{ transform:translateY(-3px); }
  html.js .cena.je-rozpulena .cena__pul--d{ transform:translateY(3px); }
}

/* ---------- Header ------------------------------------------------------- */
.hlavicka{
  position:sticky;top:0;z-index:40;background:var(--papir);
  border-bottom:1px solid var(--inkoust);
}
.hlavicka__vnitrek{
  display:flex;align-items:center;gap:calc(var(--u) * 3);
  padding-block:12px;
}
.znacka{ display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto; }
.znacka svg,.znacka img{ height:40px;width:auto;display:block; }
.znacka__jmeno{ font-family:var(--rec);font-weight:700;font-size:1rem;line-height:1.1;letter-spacing:.01em; }
.hlavicka__nav{ display:flex;gap:calc(var(--u) * 3);margin-left:auto; }
.hlavicka__nav a{ text-decoration:none;font-weight:500; }
.hlavicka__nav a:hover{ text-decoration:underline;text-underline-offset:4px; }
.soucet{ display:inline-flex;align-items:center;gap:6px; }

.burger{ display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer; }
.burger span{ display:block;width:26px;height:2px;background:var(--inkoust);margin:5px 0; }

/* mobile overlay = the inside of a box */
.prekryv{
  position:fixed;inset:0;width:100vw;height:100vh;height:100svh;
  background:var(--karton);z-index:60;display:none;
  padding:calc(var(--u) * 3);
}
.prekryv[data-otevreno="1"]{ display:flex;flex-direction:column;gap:calc(var(--u) * 2);justify-content:center; }
.prekryv__klopy{ position:absolute;top:0;left:0;right:0;height:64px;overflow:hidden;pointer-events:none; }
.prekryv__klopy span{ position:absolute;top:0;width:50%;height:100%;background:var(--karton-stin);opacity:.45; }
.prekryv__klopy span:first-child{ left:0;clip-path:polygon(0 0,100% 0,92% 100%,6% 100%); }
.prekryv__klopy span:last-child{ right:0;clip-path:polygon(0 0,100% 0,94% 100%,8% 100%); }
.prekryv a{
  font-family:var(--znaceni);text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(2rem,8vw,3rem);text-decoration:none;
}
/* close button sits ABOVE the flap graphics and is a 48px target */
.prekryv__zavrit{
  position:absolute;top:10px;right:10px;z-index:2;
  width:48px;height:48px;min-width:48px;min-height:48px;
  background:var(--papir);border:1.5px solid var(--inkoust);
  font-size:24px;line-height:1;cursor:pointer;
}

@media (max-width:820px){
  .hlavicka__nav,.hlavicka .soucet{ display:none; }
  .burger{ display:block; }
}

/* ---------- Grids -------------------------------------------------------- */
.mrizka{ display:grid;gap:var(--zlab); }
/* Grid children default to min-width:auto and refuse to shrink below their
   content. Every grid on this site opts out, or 390px overflows. */
.mrizka > *,.dvousloup > *,.aukce > *,.adresa-sekce > *,.dopad__spodek > *,
.hero__mrizka > *,.pata__mrizka > *{ min-width:0; }
.mrizka--4{ grid-template-columns:repeat(4,1fr); }
.mrizka--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:960px){ .mrizka--4{ grid-template-columns:repeat(2,1fr); } .mrizka--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .mrizka--4,.mrizka--3{ grid-template-columns:1fr; } }

.hlava-rady{ display:flex;align-items:baseline;justify-content:space-between;gap:var(--zlab);margin-bottom:calc(var(--u) * 4); }

/* ---------- Bid ladder --------------------------------------------------- */
.zebrik{ background:var(--papir-vpad);border:1px solid rgb(36 29 21 / .18);padding:calc(var(--u) * 2); }
.zebrik ol{ list-style:none;margin:0;padding:0; }
.zebrik li{
  font-family:var(--zaznam);font-size:14px;font-variant-numeric:tabular-nums;
  display:flex;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px dotted rgb(36 29 21 / .22);
}
.zebrik li:last-child{ border-bottom:0; }
.zebrik li b{ margin-left:auto;font-weight:600; }
.zebrik__kocka{ height:20px;width:auto; }

/* ---------- Receipt fragment (M5) ---------------------------------------- */
.uctenka{ background:var(--stitek-bila);border:1px solid var(--inkoust);padding:calc(var(--u) * 2);max-width:520px; }
.uctenka div{
  display:flex;gap:12px;font-family:var(--zaznam);font-size:13.5px;
  font-variant-numeric:tabular-nums;padding:6px 0;border-bottom:1px dotted rgb(36 29 21 / .25);
}
.uctenka div:last-child{ border-bottom:0; }
.uctenka b{ margin-left:auto;font-weight:600; }

/* ---------- Stamp (PŘIKLEPNUTO) ------------------------------------------ */
.razeno{
  font-family:var(--znaceni);text-transform:uppercase;letter-spacing:.06em;
  color:var(--inkoust);border:3px solid var(--inkoust);
  padding:8px 18px;transform:rotate(-6deg);display:inline-block;
  font-size:clamp(1rem,2.4vw,1.5rem);background:transparent;
}

/* ---------- Footer ------------------------------------------------------- */
.pata{ background:var(--papir-vpad);border-top:1px solid var(--inkoust);padding-block:calc(var(--u) * 6); }
.pata a{ text-decoration:none;border-bottom:1px solid rgb(36 29 21 / .35); }
.pata__spodek{
  margin-top:calc(var(--u) * 4);padding-top:calc(var(--u) * 2);
  border-top:1px solid rgb(36 29 21 / .25);
  display:flex;flex-wrap:wrap;gap:var(--zlab);justify-content:space-between;
  font-size:14px;
}
.poznamka-ukazka{ font-family:var(--zaznam);font-size:12.5px;max-width:62ch; }

/* ---------- Motion: everything below is enhancement only ----------------- */
@media (prefers-reduced-motion:no-preference){
  html.js .krabice--zvedatelna:hover{ transform:translateY(-4px);box-shadow:var(--stin-krabice-zvednuta); }
}