:root{
    --bg:#0A0908;
    --bg-1:#131110;
    --bg-2:#1B1815;
    --ink:#F3EFE6;
    --ink-soft:#AEA398;
    --ink-faint:#78716A;
    --accent:#FF6A1F;
    --accent-2:#FFB27A;
    --accent-deep:#C2440F;
    --line:#5B9BD1;
    --border:rgba(243,239,230,.10);
    --border-strong:rgba(243,239,230,.22);

    --font-display:'Archivo', 'Arial Black', sans-serif;
    --font-body:'Manrope', -apple-system, Segoe UI, sans-serif;
    --font-mono:'IBM Plex Mono', 'Consolas', monospace;

    --sp-1:.25rem; --sp-2:.5rem; --sp-3:1rem; --sp-4:1.5rem;
    --sp-5:2.5rem; --sp-6:4.5rem; --sp-7:7rem;

    --container:1180px;
    --notch:16px;
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;max-width:100%;overflow-x:hidden;}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
  body{
    margin:0;
    max-width:100%;
    overflow-x:hidden;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  button{font:inherit;}
  ::selection{background:var(--accent);color:#12100D;}
  .container{
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:clamp(1.25rem,4vw,3rem);
    position:relative;
  }
  h1,h2,h3{
    font-family:var(--font-display);
    font-weight:800;
    letter-spacing:-.01em;
    text-wrap:balance;
    margin:0;
    color:var(--ink);
  }
  .eyebrow{
    font-family:var(--font-mono);
    font-size:.72rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--ink-soft);
    display:flex;
    align-items:center;
    gap:.6em;
  }
  .eyebrow::before{content:"+";color:var(--accent);font-weight:600;}
  p{margin:0;}
  .lead{max-width:52ch;color:var(--ink-soft);font-size:1.05rem;}

  .plus{
    position:absolute;
    color:var(--border-strong);
    font-family:var(--font-mono);
    font-size:1.1rem;
    line-height:1;
    pointer-events:none;
  }
  .plus.accent{color:var(--accent);opacity:.9;}

  /* ---------- buttons: notched "tag" corner ---------- */
  .btn{
    font-family:var(--font-mono);
    font-size:.8rem;
    letter-spacing:.04em;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:.6em;
    padding:.95em 1.5em .95em 1.3em;
    border:1.5px solid var(--ink);
    color:var(--ink);
    background:transparent;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
    transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
  }
  .btn::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%);
    transform:translateX(-130%);
    transition:transform .6s ease;
    pointer-events:none;
  }
  .btn:hover::after{transform:translateX(130%);}
  .btn:hover{transform:translateY(-1px);}
  .btn:disabled{opacity:.35;cursor:not-allowed;transform:none;}
  .btn-solid{background:linear-gradient(135deg, var(--accent), var(--accent-deep));border-color:var(--accent);color:#1A1108;font-weight:600;}
  .btn-solid:hover{background:linear-gradient(135deg, var(--accent-2), var(--accent));border-color:var(--accent-2);}
  .btn-ghost{border-color:var(--border-strong);color:var(--ink);}
  .btn-ghost:hover{border-color:var(--ink);background:var(--bg-2);}
  @media (prefers-reduced-motion:reduce){.btn::after{display:none;}}

  /* ---------- preloader ---------- */
  #preloader{
    position:fixed;inset:0;z-index:200;
    background:var(--bg);
    display:flex;align-items:center;justify-content:center;
    transition:opacity .6s ease;
  }
  #preloader.done{opacity:0;pointer-events:none;}
  .pre-inner{text-align:center;}
  .pre-num-wrap{position:relative;display:inline-block;}
  .pre-num{
    font-family:var(--font-display);
    font-weight:900;
    font-size:min(34vw,20rem);
    line-height:1;
    color:var(--bg-2);
    -webkit-text-stroke:1px var(--border-strong);
    user-select:none;
    display:block;
  }
  .pre-word{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    font-family:var(--font-mono);
    font-size:clamp(.85rem,2vw,1.1rem);
    letter-spacing:.3em;
    color:var(--ink);
    white-space:nowrap;
  }
  .pre-rule{width:min(70vw,420px);height:1px;background:var(--border-strong);margin:1.4rem auto 0;position:relative;}
  .pre-rule::after{
    content:"";position:absolute;left:0;top:-1px;height:2px;background:var(--accent);
    width:var(--pw,0%);
  }
  .pre-pct{
    margin-top:.9rem;
    font-family:var(--font-mono);
    font-size:.7rem;
    letter-spacing:.2em;
    color:var(--ink-faint);
    text-transform:uppercase;
    transition:opacity .25s ease;
  }
  #preInner{transition:opacity .25s ease;}

  .pre-logo-split{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:50vw;max-width:520px;min-width:240px;
    aspect-ratio:2560/269;
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
  }
  .pre-logo-split.show{opacity:1;}
  .pre-logo-layer{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;}
  /* cut lines follow the logo's own gaps; the notch around 93-100% keeps the G's
     spur/foot in one piece with the bottom arc instead of slicing through it */
  .pre-logo-top{clip-path:polygon(0 0, 100% 0, 100% 29.74%, 0 29.74%);}
  .pre-logo-mid{clip-path:polygon(0 29.74%, 100% 29.74%, 100% 40.15%, 92.97% 40.15%, 92.97% 66.91%, 0 66.91%);}
  .pre-logo-bottom{clip-path:polygon(0 66.91%, 92.97% 66.91%, 92.97% 40.15%, 100% 40.15%, 100% 100%, 0 100%);}
  .pre-logo-top,.pre-logo-bottom{transition:transform .6s cubic-bezier(.5,0,.2,1), opacity .6s ease;}
  .pre-logo-split.split .pre-logo-top{transform:translateY(-95vh);opacity:0;}
  .pre-logo-split.split .pre-logo-bottom{transform:translateY(95vh);opacity:0;}

  /* ---------- header ---------- */
  header{position:sticky;top:0;z-index:40;padding-top:.9rem;}
  .nav-shell{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem);}
  .nav-row{
    display:flex;align-items:center;justify-content:space-between;
    gap:var(--sp-4);
    padding:.7rem .8rem .7rem 1.1rem;
    background:color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter:blur(10px);
    border:1px solid var(--border);
    border-radius:3px;
  }
  .logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);}
  .logo-mark{height:22px;width:auto;display:block;}
  .menu-top .logo-mark{height:19px;}
  @media (max-width:720px){ .nav-cta{display:none;} }
  .menu-btn{
    display:flex;align-items:center;gap:.7rem;
    background:none;border:none;color:var(--ink);cursor:pointer;
    font-family:var(--font-mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
    padding:.5rem .3rem;
  }
  .menu-btn .bars{display:flex;flex-direction:column;gap:4px;width:22px;}
  .menu-btn .bars span{height:1.5px;background:var(--ink);display:block;}
  .menu-btn .bars span:nth-child(2){width:65%;}

  /* fullscreen menu overlay */
  #menuPanel{
    position:fixed;inset:0;z-index:100;
    background:var(--bg-1);
    display:flex;flex-direction:column;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s ease;
  }
  #menuPanel.open{opacity:1;visibility:visible;pointer-events:auto;}
  .menu-top{max-width:var(--container);margin-inline:auto;width:100%;padding:1.6rem clamp(1.25rem,4vw,3rem) 0;display:flex;justify-content:space-between;align-items:center;}
  .menu-close{background:none;border:1px solid var(--border-strong);color:var(--ink);cursor:pointer;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.1em;padding:.5rem .9rem;text-transform:uppercase;}
  .menu-body{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:var(--container);margin-inline:auto;width:100%;padding-inline:clamp(1.25rem,4vw,3rem);}
  .menu-links{list-style:none;margin:0;padding:0;}
  .menu-links li{border-top:1px solid var(--border);}
  .menu-links li:last-child{border-bottom:1px solid var(--border);}
  .menu-links a{
    display:flex;justify-content:space-between;align-items:center;
    padding:1.3rem .2rem;
    font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,5vw,3.2rem);
    text-decoration:none;color:var(--ink);
  }
  .menu-links a span{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-faint);}
  .menu-links a:hover{color:var(--accent);}
  .menu-foot{max-width:var(--container);margin-inline:auto;width:100%;padding:1.4rem clamp(1.25rem,4vw,3rem) 1.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-family:var(--font-mono);font-size:.76rem;color:var(--ink-soft);}

  /* ---------- marquee ---------- */
  .marquee{background:var(--bg-1);color:var(--ink-soft);overflow:hidden;white-space:nowrap;border-block:1px solid var(--border);}
  .marquee-track{display:inline-flex;animation:scroll 34s linear infinite;}
  .marquee span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;padding:.65rem 0;display:inline-flex;align-items:center;}
  .marquee span::after{content:"◆";margin-inline:1.4rem;color:var(--accent);font-size:.6rem;}
  @keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion:reduce){.marquee-track{animation:none;}}

  /* ---------- hero ---------- */
  .hero{padding-block:var(--sp-6) var(--sp-6);position:relative;overflow:clip;}
  /* Jeden symetrický "bodkový" žiar vystredený priamo na nadpis — do všetkých
     strán rovnako, nie pásmo svetla dopadajúce zhora. */
  .hero h1{position:relative;}
  .hero h1::before{
    content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:min(70vw,640px);aspect-ratio:1;
    background:radial-gradient(circle, color-mix(in srgb, var(--accent) 32%, transparent), transparent 70%);
    pointer-events:none;z-index:-1;
  }
  .hero::after{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(circle, var(--border-strong) 1px, transparent 1.4px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(60% 60% at 50% 20%, black, transparent 75%);
    mask-image:radial-gradient(60% 60% at 50% 20%, black, transparent 75%);
    pointer-events:none;z-index:0;
  }
  .hero-spot{
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(360px circle at var(--mx,50%) var(--my,15%), color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%);
    opacity:0;transition:opacity .4s ease;
  }
  .hero:hover .hero-spot{opacity:1;}
  @media (pointer:coarse){.hero-spot{display:none;}}
  .hero-inner{position:relative;z-index:1;text-align:center;max-width:840px;margin-inline:auto;}
  .hero-inner .eyebrow::before{content:none;}
  .hero h1{font-size:clamp(2.6rem,7vw,5.2rem);line-height:1.02;}
  .hero h1 .line-2{
    background:linear-gradient(100deg, var(--accent-2), var(--accent) 55%, var(--accent-deep));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero .lead{margin-inline:auto;margin-top:1.3rem;text-align:center;font-size:1.1rem;}
  .hero-actions{display:flex;gap:1rem;margin-top:var(--sp-5);flex-wrap:wrap;justify-content:center;}
  .hero-tags{margin-top:var(--sp-6);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;color:var(--ink-faint);text-transform:uppercase;}
  .ticket-strip{
    position:relative;z-index:1;margin-top:var(--sp-6);
    display:grid;grid-template-columns:repeat(4,1fr);
    border:1px solid var(--border-strong);
    background:linear-gradient(120deg, color-mix(in srgb, var(--bg-1) 85%, transparent), color-mix(in srgb, var(--accent) 6%, var(--bg-1) 85%));
    backdrop-filter:blur(6px);
  }
  .ticket-cell{padding:1.1rem 1.3rem;border-right:1px dashed var(--border-strong);text-align:center;}
  .ticket-cell:last-child{border-right:none;}
  .ticket-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
  .ticket-value{font-family:var(--font-display);font-weight:800;font-size:1.4rem;margin-top:.3rem;color:var(--ink);font-variant-numeric:tabular-nums;}

  /* ---------- section shell ---------- */
  section{padding-block:var(--sp-6);position:relative;}
  .section-head{
    display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);
    margin-bottom:var(--sp-5);flex-wrap:wrap;
    position:relative;padding-bottom:var(--sp-4);
  }
  .section-head::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:linear-gradient(90deg, var(--accent) 0%, var(--border-strong) 18%, var(--border) 60%, transparent 100%);
  }
  .section-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);}

  /* ambient gradient blobs — soften the transition between dark sections */
  .glow-blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:-1;opacity:.5;animation:drift 22s ease-in-out infinite alternate;}
  @keyframes drift{from{transform:translate(0,0) scale(1);}to{transform:translate(3%,-4%) scale(1.08);}}
  @media (prefers-reduced-motion:reduce){.glow-blob{animation:none;}}

  /* ---------- services bento ---------- */
  .bento{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);}
  .swatch{background:var(--bg);padding:var(--sp-4);display:flex;flex-direction:column;gap:.9rem;min-height:200px;position:relative;transition:background .15s ease;}
  .swatch:hover{background:var(--bg-1);}
  .swatch-bar{height:3px;width:2.2rem;background:var(--sw,var(--accent));}
  .swatch h3{font-size:1.05rem;letter-spacing:0;font-weight:700;}
  .swatch p{font-size:.86rem;color:var(--ink-soft);}
  .swatch svg{width:26px;height:26px;color:var(--ink-soft);}

  /* ---------- Google recenzie (len celkový prehľad, bez konkrétnych citácií —
     tie by na statickej stránke časom pôsobili opakovane/nezmenene) ---------- */
  .reviews-overview{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.9rem 1.6rem;
    padding:var(--sp-4) var(--sp-4);border:2px solid var(--accent);
    background:color-mix(in srgb, var(--accent) 8%, transparent);
  }
  .reviews-score{display:flex;align-items:baseline;gap:.5rem;}
  .reviews-score-num{font-family:var(--font-display);font-size:1.9rem;font-weight:900;line-height:1;}
  .reviews-stars{color:var(--accent);letter-spacing:.1em;font-size:1.1rem;}
  .reviews-count{color:var(--ink-soft);font-size:.92rem;margin:0;}

  /* ---------- process ---------- */
  .process{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);}
  .step{position:relative;padding:var(--sp-4);background:var(--bg);}
  .step-num{font-family:var(--font-display);font-size:2.4rem;font-weight:900;color:var(--bg-2);-webkit-text-stroke:1px var(--border-strong);line-height:1;}
  .step-tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--accent);margin-top:-1.6rem;display:block;}
  .step h3{font-size:1.3rem;margin-top:.8rem;}
  .step p{color:var(--ink-soft);font-size:.92rem;margin-top:.5rem;max-width:34ch;}

  /* ---------- portfolio: editorial tiles ---------- */
  .board{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);}
  .board-card{
    position:relative;
    aspect-ratio:4/3.1;
    overflow:hidden;
    border:1px solid var(--border);
    background:var(--tile-bg, linear-gradient(155deg, var(--bg-2), var(--bg-1)));
    display:flex;flex-direction:column;justify-content:space-between;
    padding:var(--sp-3);
    text-decoration:none;
    transition:border-color .2s ease;
  }
  .board-card:hover{border-color:var(--accent);}
  .board-card:hover .board-watermark{transform:scale(1.06) rotate(-2deg);opacity:.16;}
  .board-card:hover .board-view{opacity:1;transform:translateY(0);}
  /* Skutočná fotka realizácie namiesto len abstraktnej ikony — vidno reálnu prácu
     (dôvera zákazníka) a fotka je indexovateľná v Google Images (predtým sa
     reálna fotka zobrazila až po kliknutí, takže ju vyhľadávače nevideli). */
  .board-card-photo{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
    transition:transform .5s ease;
  }
  .board-card.has-photo:hover .board-card-photo{transform:scale(1.05);}
  .board-card.has-photo::after{
    content:"";position:absolute;inset:0;z-index:0;
    background:linear-gradient(180deg, rgba(10,9,8,.05) 0%, rgba(10,9,8,.25) 55%, rgba(10,9,8,.75) 100%);
  }
  .board-card.has-photo .board-watermark{display:none;}
  .board-card::before{
    content:"";position:absolute;inset:0;z-index:0;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%);
    opacity:0;transition:opacity .25s ease;pointer-events:none;
  }
  .board-card:hover::before{opacity:1;}
  @media (pointer:coarse){.board-card::before{display:none;}}
  .board-watermark{
    position:absolute;right:-8%;bottom:-12%;width:62%;color:var(--ink);opacity:.09;
    transition:transform .3s ease, opacity .3s ease;
  }
  .board-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1;}
  .board-cat{
    font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink);background:color-mix(in srgb, var(--bg) 55%, transparent);
    border:1px solid var(--border-strong);padding:.3rem .55rem;backdrop-filter:blur(4px);
  }
  .board-idx{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-faint);}
  .board-bottom{position:relative;z-index:1;}
  .board-card h3{font-size:1.2rem;letter-spacing:0;font-weight:700;}
  .board-mat{font-size:.82rem;color:var(--ink-soft);margin-top:.3rem;}
  .board-view{
    margin-top:.7rem;display:inline-flex;gap:.5em;align-items:center;
    font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--accent);
    opacity:0;transform:translateY(4px);transition:opacity .2s ease, transform .2s ease;
  }
  .board-pager{
    display:flex;gap:1.1rem;justify-content:center;margin-top:var(--sp-4);
    font-family:var(--font-mono);font-size:.78rem;color:var(--ink-faint);
  }
  .board-pager span:first-child{color:var(--accent);}

  /* ---------- portfolio lightbox ---------- */
  .lightbox{position:fixed;inset:0;z-index:250;display:flex;align-items:center;justify-content:center;padding:2rem;opacity:0;visibility:hidden;transition:opacity .2s ease;}
  .lightbox.open{opacity:1;visibility:visible;}
  .lightbox[hidden]{display:none;}
  .lightbox-overlay{position:absolute;inset:0;background:rgba(10,9,8,.9);}
  .lightbox-inner{position:relative;z-index:1;max-width:min(900px,90vw);max-height:90vh;display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--border-strong);}
  .lightbox-img{display:block;width:100%;max-height:70vh;object-fit:contain;background:var(--bg);}
  .lightbox-caption{padding:1.1rem 1.4rem 1.3rem;}
  .lightbox-caption h3{font-size:1.1rem;font-weight:700;}
  .lightbox-caption p{color:var(--ink-soft);margin-top:.3rem;font-size:.88rem;}
  .lightbox-close{
    position:absolute;top:-1.1rem;right:-1.1rem;width:2.4rem;height:2.4rem;border-radius:50%;
    background:var(--accent);color:#1A1108;border:none;font-size:1rem;cursor:pointer;z-index:2;
  }
  .lightbox-close:hover{background:var(--accent-2);}
  .lightbox-nav{
    position:absolute;top:50%;transform:translateY(-50%);width:2.6rem;height:2.6rem;border-radius:50%;
    background:rgba(10,9,8,.55);color:var(--ink);border:1px solid var(--border-strong);font-size:1.4rem;
    cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;line-height:1;
  }
  .lightbox-nav:hover{background:var(--accent);color:#1A1108;}
  .lightbox-prev{left:.7rem;}
  .lightbox-next{right:.7rem;}
  .lightbox-photo-caption{font-style:italic;}
  .lightbox-counter{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-faint);}
  @media (max-width:640px){
    .lightbox{padding:1rem;}
    .lightbox-close{top:-.6rem;right:0;}
    .lightbox-nav{width:2.2rem;height:2.2rem;font-size:1.2rem;}
  }

  /* ---------- FAQ ---------- */
  .faq-list{display:flex;flex-direction:column;gap:.8rem;max-width:800px;}
  .faq-item{
    border:1px solid var(--border-strong);background:var(--bg-1);padding:1.1rem 1.4rem;
  }
  .faq-item summary{
    cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:1.02rem;
    list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:"+";font-family:var(--font-mono);font-size:1.3rem;color:var(--accent);flex-shrink:0;
    transition:transform .2s ease;
  }
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item p{color:var(--ink-soft);margin-top:.9rem;font-size:.94rem;line-height:1.55;}

  /* ---------- credentials ---------- */
  .creds{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);}
  .cred{display:flex;flex-direction:column;gap:.5rem;}
  .cred-num{
    font-family:var(--font-display);font-size:2.4rem;font-weight:900;font-variant-numeric:tabular-nums;line-height:1;
    background:linear-gradient(135deg, var(--accent-2), var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .cred-label{font-size:.86rem;color:var(--ink-soft);max-width:22ch;}

  /* ---------- about ---------- */
  .about{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);align-items:start;}
  .about p{color:var(--ink-soft);margin-bottom:1rem;}
  .about p:last-child{margin-bottom:0;}
  .about-figures{border:1px solid var(--border-strong);display:grid;grid-template-columns:1fr 1fr;}
  .fig{padding:var(--sp-4);border-right:1px solid var(--border);border-bottom:1px solid var(--border);}
  .fig:nth-child(2n){border-right:none;}
  .fig-num{
    font-family:var(--font-display);font-size:2.1rem;font-weight:900;line-height:1;
    background:linear-gradient(135deg, var(--accent-2), var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .fig-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:.5rem;}

  /* ---------- eshop cta: printed sticker on dark ground ---------- */
  .cta{
    background:linear-gradient(155deg, var(--ink), #E6E0D2);color:#1A1611;padding:var(--sp-5);
    clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  }
  .cta h2{color:#161310;font-size:clamp(1.7rem,3.2vw,2.4rem);}
  .cta .eyebrow{color:var(--accent-deep);}
  .cta .eyebrow::before{color:var(--accent-deep);}
  .cta p.lead{color:#4A4338;margin-top:.7rem;max-width:52ch;}
  .cta .btn{margin-top:var(--sp-4);}
  .cta .btn-solid{background:#1A1611;border-color:#1A1611;color:var(--ink);}
  .cta .btn-solid:hover{background:#2A251E;border-color:#2A251E;}

  /* ---------- shop grid: real products ---------- */
  .shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-5);}
  .shop-card{
    border:1px solid var(--border-strong);background:var(--bg-1);
    display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
    transition:border-color .2s ease, transform .2s ease;
  }
  .shop-card:hover{border-color:var(--accent);transform:translateY(-3px);}
  .shop-card-media{aspect-ratio:3/4;overflow:hidden;position:relative;background:var(--bg-2);}
  .shop-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
  .shop-card:hover .shop-card-media img{transform:scale(1.06);}
  .shop-card-tag{
    position:absolute;top:10px;left:10px;z-index:1;
    font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink);background:color-mix(in srgb, var(--bg) 55%, transparent);
    border:1px solid var(--border-strong);padding:.3rem .55rem;backdrop-filter:blur(4px);
  }
  .shop-card-body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;flex:1;}
  .shop-card-name{font-size:.98rem;font-weight:700;line-height:1.35;}
  .shop-card-desc{font-size:.76rem;color:var(--ink-faint);line-height:1.5;margin:.4rem 0 0;}
  .shop-card-price{font-family:var(--font-mono);font-size:1.15rem;color:var(--accent);margin-top:.5rem;}
  .shop-card-discount{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft);margin-top:.3rem;}
  .shop-card-cta{
    margin-top:.7rem;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;
    color:var(--ink);background:transparent;border:1.5px solid var(--border-strong);
    padding:.65em .9em;cursor:pointer;text-align:left;
    transition:border-color .15s ease, background .15s ease, color .15s ease;
  }
  .shop-card-cta:hover{border-color:var(--accent);color:var(--accent);}
  .shop-card-cta.added{border-color:var(--accent);background:var(--accent);color:#1A1108;}
  .shop-note{margin-top:var(--sp-4);font-family:var(--font-mono);font-size:.76rem;color:var(--ink-faint);}

  /* ---------- t-shirt designer ---------- */
  /* Táto sekcia je zámerne svetlejšia než zvyšok (tmavého) webu — farby aj
     texty na potlači sa na svetlom pozadí lepšie odlíšia, podobne ako u
     konkurenčných konfigurátorov. Prepisuje len tokeny v rámci #navrhni. */
  #navrhni{
    --bg:#FAF8F4; --bg-1:#FFFFFF; --bg-2:#F0ECE4;
    --ink:#1A1108; --ink-soft:#5B5347; --ink-faint:#8C8375;
    --border:rgba(26,17,8,.12); --border-strong:rgba(26,17,8,.22);
    background:var(--bg); color:var(--ink); padding-top:var(--sp-6); padding-bottom:var(--sp-6);
  }
  /* Tri prísľuby pod nadpisom Navrhni si svoj kúsok — na celú šírku sekcie. */
  .navrhni-perks{
    display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-5) var(--sp-6);
    margin:var(--sp-5) 0 var(--sp-4);padding:1rem 0;
    border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  }
  .navrhni-perk{display:flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.82rem;color:var(--ink-soft);}
  .navrhni-perk svg{width:22px;height:22px;flex-shrink:0;color:var(--accent);}
  .navrhni-perks-note{text-align:center;font-size:.78rem;color:var(--ink-faint);margin:-.3rem 0 var(--sp-4);}
  .navrhni-perks-note a{color:var(--accent);}
  /* Rovnaký dvojstĺpcový grid ako .designer nižšie — vďaka tomu sa filtre
     vystredia iba nad ľavým stĺpcom (kde je samotné tričko), nie nad celou
     šírkou vrátane bočného panelu. */
  .designer-filters{display:grid;grid-template-columns:200px 1fr 340px;gap:var(--sp-5);margin-bottom:var(--sp-4);}
  .designer-filters-inner{grid-column:2;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-4) var(--sp-5);}
  .designer-filter-group{display:flex;flex-direction:column;gap:.5rem;}
  .designer-filter-group[hidden]{display:none;}
  .filter-pills{display:flex;flex-wrap:wrap;gap:.5rem;}
  .filter-pill{
    font-family:var(--font-mono);font-size:.78rem;padding:.5em 1em;
    border:1px solid var(--border-strong);background:transparent;color:var(--ink-soft);
    cursor:pointer;transition:border-color .15s ease, color .15s ease, background .15s ease;
  }
  .filter-pill:hover:not(:disabled){border-color:var(--ink);color:var(--ink);}
  .filter-pill.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);}
  .filter-pill:disabled{opacity:.4;cursor:not-allowed;}
  .filter-pill em{font-style:normal;font-size:.6rem;margin-left:.4em;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;}
  .designer-stage-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;width:100%;}
  /* Predok/zadok ako spojený segmentovaný prepínač (ako v profesionálnych
     editoroch potlače), nie samostatné pilulky. */
  .designer-view-tabs{
    display:inline-flex;margin-bottom:.9rem;padding:.25rem;
    background:var(--bg);border:1px solid var(--border-strong);
  }
  .designer-view-tabs .filter-pill{border:none;padding:.55em 1.5em;background:transparent;}
  .designer-view-tabs .filter-pill.active{
    background:var(--accent);color:#1A1108;font-weight:700;
  }
  .designer-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;display:none;}
  .designer-shirt.mode-photo svg{display:none;}
  .designer-shirt.mode-photo .designer-photo{display:block;}
  /* Fabric.js sets a fixed 300x340px inline size on its own wrapper; force it to
     track the stage box instead, so the canvas (and its print-area guide) stays
     aligned with the photo/svg at any size, including when zoomed. */
  .designer-shirt .canvas-container{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;}
  .designer-zoom-backdrop{position:fixed;inset:0;z-index:255;background:rgba(10,9,8,.88);}
  .designer-zoom-backdrop[hidden]{display:none;}
  /* !important je tu naschvál — pri rozdelenom zobrazení (predok+zadok naraz)
     má ".designer-canvas-wrap.split .designer-shirt" (nižšie v súbore) vyššiu
     špecifickosť ako len ".designer-shirt.zoomed" a bez !important by veľkosť
     pri zväčšení prebila späť na malú (220px) — presne toto sa dialo. */
  .designer-shirt.zoomed{
    position:fixed !important;top:50% !important;left:50% !important;transform:translate(-50%,-50%) !important;
    z-index:260;width:700px !important;max-width:82vw !important;max-height:82vh !important;box-shadow:0 24px 70px rgba(0,0,0,.65);
  }
  .zoom-close{
    position:absolute;top:-1.1rem;right:-1.1rem;width:2.4rem;height:2.4rem;border-radius:50%;
    background:var(--accent);color:#1A1108;border:none;font-size:1rem;cursor:pointer;z-index:2;display:none;
  }
  .designer-shirt.zoomed .zoom-close{display:block;}
  .zoom-close:hover{background:var(--accent-2);}

  /* Tri stĺpce: vľavo info o produkte (farba/veľkosť), stred plátno s cenou
     a tlačidlom pod ním, vpravo rozklikávacie "kocky" s nástrojmi. */
  .designer{display:grid;grid-template-columns:200px 1fr 340px;gap:var(--sp-5);align-items:start;}
  .designer-info{display:flex;flex-direction:column;gap:1.3rem;}
  .designer-stage{display:flex;flex-direction:column;align-items:center;gap:1rem;}
  /* Rovnaká biela ako pozadie na katalógových fotkách odevov — celý orámovaný
     obdĺžnik je teda jednotne biely (šedý rám ho zámerne oddeľuje od
     krémového pozadia stránky okolo neho). */
  .designer-canvas-wrap{
    width:100%;display:flex;justify-content:center;align-items:flex-start;gap:1.2rem;flex-wrap:wrap;padding:1.4rem;
    background:var(--bg-1);
    /* Rámik presne v rovnakej farbe ako výplň — nech okolo bieleho
       obdĺžnika s tričkom nie je vidno žiadny farebný okraj. */
    border:1px solid var(--bg-1);
  }
  .designer-shirt{
    /* width + max-width oddelene (nie min() s % vnútri) — v kombinácii s
       flex rodičom (.designer-canvas-wrap) sa % vnútri min() ako flex-basis
       nepredvídateľne prepočíta, kým samostatný max-width funguje spoľahlivo. */
    position:relative;width:320px;max-width:100%;aspect-ratio:300/340;
    filter:drop-shadow(0 14px 26px rgba(26,17,8,.18));
    transition:width .15s ease, outline-color .15s ease;
  }
  .designer-shirt svg{position:absolute;inset:0;width:100%;height:100%;display:block;transition:filter .15s ease;}
  .designer-shirt canvas{position:absolute;inset:0;width:100% !important;height:100% !important;cursor:grab;}
  /* Jemná zvislá vodiaca čiara presne v strede trička — pomáha zákazníkovi
     vycentrovať text/logo, ale nie je súčasťou návrhu (nezachytáva sa do
     náhľadu ani do finálnej potlače, je to len vizuálna pomôcka v editore). */
  .designer-center-guide{
    position:absolute;top:4%;bottom:4%;left:50%;width:0;
    border-left:1px dashed rgba(255,255,255,.6);
    mix-blend-mode:difference;
    pointer-events:none;
  }
  /* Keď má zákazník potlač aj vpredu aj vzadu, zobrazíme obe strany naraz
     vedľa seba namiesto prepínania záložkou. */
  .designer-canvas-wrap.split .designer-shirt{width:220px;max-width:46%;}
  .stage-label{
    display:none;position:absolute;top:-1.6rem;left:0;
    font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
  }
  .designer-canvas-wrap.split .stage-label{display:block;}
  .designer-canvas-wrap.split .designer-shirt{cursor:pointer;}
  .designer-canvas-wrap.split .designer-shirt.is-active{outline:2px solid var(--accent);outline-offset:6px;}
  .designer-canvas-wrap.split .designer-shirt.is-active .stage-label{color:var(--accent);}
  .designer-toolbar{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;}
  .toolbar-btn{
    display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-mono);font-size:.72rem;
    padding:.55em .85em;border:1px solid var(--border-strong);background:var(--bg-1);color:var(--ink-soft);
    cursor:pointer;transition:border-color .15s ease,color .15s ease;
  }
  .toolbar-btn:hover{border-color:var(--accent);color:var(--ink);}
  .toolbar-btn[hidden]{display:none;}
  .toolbar-icon{font-size:.95em;line-height:1;}
  .designer-hint{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);text-align:center;max-width:320px;}
  .designer-group{display:flex;flex-direction:column;gap:.5rem;}
  /* Všeobecný dvojstĺpcový riadok — používa ho aj panel tímovej objednávky
     (veľkosť/meno/číslo). */
  .designer-options-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
  @media (max-width:520px){.designer-options-row{grid-template-columns:1fr;}}
  /* Množstvo/zľavy/cena/poznámka/CTA na celú šírku pod celým konfigurátorom,
     všetko v jednom nízkom vodorovnom páse namiesto vysokej bočnej karty. */
  .designer-footer{
    grid-column:1 / -1;box-sizing:border-box;
    padding:1.1rem 1.3rem;margin-top:.4rem;
    background:var(--bg-2);border:1px solid var(--border-strong);
  }
  .designer-footer-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;}
  .designer-footer-qty{flex:0 0 auto;}
  .designer-footer-qty .qty-row input{width:80px;}
  /* Iba poznámka rastie a vyplní zvyšný priestor — ostatné majú svoju
     prirodzenú veľkosť, nech sa zmestia vedľa seba v jednom nízkom riadku. */
  .designer-footer .discount-table{flex:0 1 auto;}
  .designer-footer-note{flex:1 1 160px;}
  /* Cena a tlačidlo Pridať do košíka patria k sebe — držíme ich pohromade na
     konci riadku, nech sa nikdy nezalomia oddelene od seba. */
  .designer-footer-cta{flex:0 0 auto;display:flex;align-items:center;gap:1rem;}
  /* Cenový text vie byť dlhý ("16,90 € / ks (5 ks spolu ...) · potlač vpredu aj
     vzadu") — necháme ho zalomiť v rámci pevnej šírky namiesto toho, aby
     naťahoval celý riadok na jeden dlhý neprelomený reťazec. */
  .designer-footer .designer-price{
    flex:0 1 230px;max-width:230px;border-top:none;padding-top:0;
    flex-direction:column;align-items:flex-start;justify-content:center;gap:.2rem;
  }
  .designer-footer .btn{flex:0 0 auto;white-space:nowrap;}
  .designer-footer .designer-price-note{margin-top:.6rem;}
  /* Vpravo namiesto dlhého panelu so všetkým naraz len tri "kocky" — každá sa
     rozklikne a ukáže svoje ovládače, nech pravý stĺpec nie je taký vysoký. */
  .designer-tiles{display:flex;flex-direction:column;gap:.8rem;}
  .tool-tile{border:1px solid var(--border-strong);background:var(--bg-1);}
  .tool-tile-head{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;
    padding:.95rem 1.1rem;background:none;border:none;cursor:pointer;
    font-family:var(--font-mono);font-size:.85rem;font-weight:700;color:var(--ink);text-align:left;
    transition:color .15s ease;
  }
  .tool-tile-head:hover{color:var(--accent);}
  .tool-tile-chev{color:var(--ink-faint);font-size:.75em;transition:transform .15s ease;flex-shrink:0;}
  .tool-tile.open .tool-tile-head{color:var(--accent);border-bottom:1px solid var(--border);}
  .tool-tile.open .tool-tile-chev{transform:rotate(180deg);color:var(--accent);}
  .tool-tile-body{display:flex;flex-direction:column;gap:1.3rem;padding:1.1rem;}
  .tool-tile-body[hidden]{display:none;}
  .designer-material{font-size:.8rem;color:var(--ink-soft);margin:0;}
  .swatch-row{display:flex;flex-wrap:wrap;gap:.55rem;max-height:132px;overflow-y:auto;padding:.15rem .1rem;}
  .color-dot{
    width:24px;height:24px;border-radius:50%;background:var(--c);cursor:pointer;flex-shrink:0;
    border:2px solid var(--border-strong);padding:0;transition:border-color .15s ease, transform .15s ease;
  }
  .color-dot:hover{transform:scale(1.1);}
  .color-dot.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--bg-1), 0 0 0 3px var(--accent);}
  .designer-price-note{font-size:.72rem;color:var(--ink-faint);margin:-.5rem 0 0;}
  .designer-input,.designer-select{
    background:var(--bg);border:1px solid var(--border-strong);color:var(--ink);
    padding:.6em .7em;font-family:var(--font-body);font-size:.9rem;width:100%;
  }
  .designer-textarea{resize:vertical;min-height:4.4em;font-family:var(--font-body);}
  .designer-row{display:flex;gap:.6rem;align-items:center;}
  .designer-row .designer-select{flex:1;}
  .style-toggle{padding:.5em .9em !important;min-width:2.6em;justify-content:center;}
  .style-toggle.active{border-color:var(--accent) !important;color:var(--accent) !important;background:color-mix(in srgb, var(--accent) 14%, transparent);}
  .designer-color{width:38px;height:38px;padding:2px;border:1px solid var(--border-strong);background:var(--bg);cursor:pointer;}

  /* ---------- CMYK farebný panel (text na potlač / motívy z databázy) ---------- */
  .cmyk-field{display:flex;align-items:center;gap:.5rem;}
  .cmyk-field-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;}
  .cmyk-picker{position:relative;}
  .cmyk-trigger{
    width:38px;height:38px;padding:0;border:1px solid var(--border-strong);background:var(--bg);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .cmyk-swatch{width:26px;height:26px;border-radius:50%;border:2px solid var(--bg-1);box-shadow:0 0 0 1px var(--border-strong);display:block;}
  /* Farba motívu dostáva odlišný akcentový vzhľad, aby bolo na prvý pohľad
     jasné, že ide o iný ovládač než farba textu. */
  .cmyk-picker--motif .cmyk-trigger{border-style:dashed;border-color:var(--accent);}
  .cmyk-picker--motif .cmyk-swatch{box-shadow:0 0 0 1px var(--accent);}
  .cmyk-panel{
    position:absolute;bottom:calc(100% + .6rem);right:0;z-index:30;width:240px;
    background:var(--bg-1);border:1px solid var(--border-strong);padding:1rem;
    box-shadow:0 16px 40px rgba(0,0,0,.35);
  }
  .color-sv-wrap{position:relative;margin-bottom:.7rem;line-height:0;}
  .color-sv-wrap canvas{width:100%;height:130px;display:block;cursor:crosshair;border:1px solid var(--border-strong);}
  .color-sv-cursor{
    position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.6);
    transform:translate(-50%,-50%);pointer-events:none;top:0;left:100%;
  }
  .color-hue-slider{
    -webkit-appearance:none;appearance:none;width:100%;height:12px;margin-bottom:.7rem;cursor:pointer;outline:none;
    background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);border:1px solid var(--border-strong);
  }
  .color-hue-slider::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;
    border:2px solid var(--bg-1);box-shadow:0 0 0 1px rgba(0,0,0,.5);cursor:pointer;
  }
  .color-hue-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--bg-1);box-shadow:0 0 0 1px rgba(0,0,0,.5);cursor:pointer;}
  .cmyk-row-top{display:flex;gap:.6rem;margin-bottom:.5rem;}
  .cmyk-row-top .cmyk-actions{flex:1;margin-bottom:0;flex-direction:column;}
  .cmyk-eyedropper-status{font-size:.72rem;color:var(--ink-faint);margin:0 0 .6rem;}
  .cmyk-preview{width:44px;height:44px;flex-shrink:0;border:1px solid var(--border-strong);}
  .cmyk-sliders{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.8rem;}
  .cmyk-sliders label{
    display:grid;grid-template-columns:14px 1fr 42px;align-items:center;gap:.6rem;
    font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft);text-transform:uppercase;
  }
  .cmyk-num{
    font-family:var(--font-mono);font-size:.72rem;text-align:right;color:var(--ink);
    background:var(--bg);border:1px solid var(--border-strong);width:42px;padding:.2em .3em;
  }
  .cmyk-num:focus{outline:none;border-color:var(--accent);}
  .cmyk-sliders input[type=range]{
    -webkit-appearance:none;appearance:none;height:4px;background:var(--border-strong);outline:none;cursor:pointer;
  }
  .cmyk-sliders input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;
  }
  .cmyk-sliders input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;}
  .cmyk-actions{display:flex;gap:.5rem;margin-bottom:.8rem;}
  .cmyk-actions .btn{padding:.5em .7em;font-size:.78rem;white-space:nowrap;}
  .cmyk-actions .designer-input{font-family:var(--font-mono);font-size:.8rem;text-transform:uppercase;}
  .cmyk-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;}
  .cmyk-preset-swatch{width:100%;aspect-ratio:1;border:1px solid var(--border-strong);cursor:pointer;padding:0;}
  .cmyk-preset-swatch:hover{border-color:var(--accent);transform:scale(1.08);}
  .designer-price{
    display:flex;justify-content:space-between;align-items:baseline;
    border-top:1px dashed var(--border-strong);padding-top:1rem;
    font-family:var(--font-mono);
  }
  .designer-price-label{color:var(--ink-soft);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;}
  .designer-price strong{color:var(--accent);font-size:1.05rem;}
  .designer-price-total,.designer-price-placement{color:var(--ink-soft);font-size:.76rem;}
  @media (max-width:920px){
    .designer{grid-template-columns:1fr;}
    .designer-filters{grid-template-columns:1fr;}
    .designer-filters-inner{grid-column:1;}
    .designer-footer{max-width:none;}
  }
  /* Na mobile sa cena a tlačidlo "Pridať do košíka" vedľa seba nezmestia —
     tlačidlo bolo useknuté mimo viditeľnú šírku. Na užšej obrazovke ich preto
     zložíme pod seba a tlačidlo roztiahneme na celú šírku. */
  @media (max-width:600px){
    .designer-footer-cta{flex-direction:column;align-items:stretch;width:100%;}
    .designer-footer .designer-price{max-width:none;align-items:center;text-align:center;}
    .designer-footer .btn{width:100%;justify-content:center;}
  }

  /* Rozbaľovací filter — "Pre koho / Typ odevu / Značka" ako klik-a-vyber namiesto
     riadku tlačidiel, aby sa pri viacerých možnostiach zoznam len rozbalil. */
  .filter-dropdown{position:relative;}
  .filter-dropdown-trigger{
    font-family:var(--font-mono);font-size:.78rem;padding:.5em 1em;min-width:150px;
    border:1px solid var(--border-strong);background:var(--bg-1);color:var(--ink);
    cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.6em;
  }
  .filter-dropdown-trigger:hover{border-color:var(--accent);}
  .filter-dropdown-trigger .chev{color:var(--ink-faint);font-size:.7em;transition:transform .15s ease;}
  .filter-dropdown.open .filter-dropdown-trigger .chev{transform:rotate(180deg);}
  .filter-dropdown-panel{
    display:none;position:absolute;top:calc(100% + .4rem);left:0;z-index:40;
    flex-direction:column;flex-wrap:nowrap;gap:.2rem;min-width:100%;max-height:220px;overflow-y:auto;
    border:1px solid var(--border-strong);background:var(--bg-1);padding:.4rem;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
  }
  .filter-dropdown.open .filter-dropdown-panel{display:flex;}
  .filter-dropdown-panel .filter-pill{border:none;text-align:left;white-space:nowrap;}
  .filter-dropdown-panel .filter-pill.active{background:color-mix(in srgb, var(--accent) 14%, transparent);}

  /* ---------- motívy z databázy (Magnific) ---------- */
  .motif-search-row{display:flex;gap:.5rem;}
  .motif-search-row .designer-input{flex:1;}
  .motif-results{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;margin-top:.7rem;max-height:190px;overflow-y:auto;}
  .motif-result{
    position:relative;aspect-ratio:1;border:1px solid var(--border-strong);background:var(--bg);cursor:pointer;padding:.2rem;
    display:flex;align-items:center;justify-content:center;transition:border-color .15s ease;
  }
  .motif-result:hover{border-color:var(--accent);}
  .motif-result img{max-width:100%;max-height:100%;}
  .motif-result-badge{
    position:absolute;top:2px;right:2px;font-size:.55rem;line-height:1;font-family:var(--font-mono);
    background:var(--accent);color:#fff;padding:.15em .3em;letter-spacing:.02em;
  }
  .motif-status{font-size:.76rem;color:var(--ink-faint);font-family:var(--font-mono);}

  /* ---------- veľkostná tabuľka a zľavy podľa množstva ---------- */
  .size-chart-toggle{background:none;border:none;padding:0;color:var(--accent);font-family:var(--font-mono);font-size:.76rem;cursor:pointer;text-decoration:underline;text-underline-offset:2px;align-self:flex-start;}
  .size-chart-table{display:none;width:100%;border-collapse:collapse;margin-top:.6rem;font-size:.82rem;}
  .size-chart-table.open{display:table;}
  .size-chart-table th,.size-chart-table td{border:1px solid var(--border);padding:.4em .6em;text-align:center;}
  .size-chart-table th{background:var(--bg-2);font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;}
  .size-chart-note{font-size:.68rem;color:var(--ink-faint);margin-top:.4rem;}
  .qty-row{display:flex;align-items:center;gap:.6rem;}
  .qty-row input[type=number]{width:80px;}
  /* Množstevné zľavy vedľa seba (nie riadok pod riadkom), nech súhrn objednávky
     nie je vysoký. */
  .discount-table{display:flex;gap:.5rem;flex-wrap:nowrap;}
  .discount-tier{
    flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.15rem;
    padding:.4em .55em;border:1px solid var(--border);font-family:var(--font-mono);text-align:center;white-space:nowrap;
  }
  .discount-tier-qty{font-size:.68rem;color:var(--ink-soft);}
  .discount-tier-pct{font-size:.64rem;color:var(--ink-faint);}
  .discount-tier-price{font-size:.76rem;font-weight:700;color:var(--ink);}
  .discount-tier.active-tier{border-color:var(--accent);}
  .discount-tier.active-tier .discount-tier-price{color:var(--accent);}

  /* ---------- cart drawer ---------- */
  .cart-btn{
    position:relative;display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;background:none;border:1px solid var(--border-strong);color:var(--ink);cursor:pointer;
  }
  .cart-btn svg{width:17px;height:17px;}
  .cart-badge{
    position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;padding:0 4px;
    background:var(--accent);color:#1A1108;border-radius:9px;
    font-family:var(--font-mono);font-size:.62rem;font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
  .cart-badge[hidden]{display:none;}
  .cart-overlay{
    position:fixed;inset:0;z-index:110;background:rgba(0,0,0,.55);
    opacity:0;pointer-events:none;transition:opacity .3s ease;
  }
  .cart-overlay.open{opacity:1;pointer-events:auto;}
  .cart-drawer{
    position:fixed;top:0;right:0;bottom:0;z-index:111;width:min(420px,92vw);
    background:var(--bg-1);border-left:1px solid var(--border-strong);
    display:flex;flex-direction:column;
    transform:translateX(100%);transition:transform .35s ease;
  }
  .cart-drawer.open{transform:translateX(0);}
  .cart-head{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.3rem;border-bottom:1px solid var(--border);}
  .cart-head h3{font-size:1.05rem;font-weight:700;letter-spacing:0;}
  .cart-body{flex:1;overflow-y:auto;padding:1rem 1.3rem;}
  .cart-empty{color:var(--ink-faint);font-family:var(--font-mono);font-size:.85rem;padding:2rem 0;text-align:center;}
  .cart-item{display:grid;grid-template-columns:1fr auto auto;gap:.7rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--border);}
  .cart-item-thumb{width:38px;height:38px;object-fit:cover;border:1px solid var(--border-strong);flex-shrink:0;}
  .cart-item-name{font-size:.88rem;font-weight:600;line-height:1.3;}
  .cart-item-price{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-soft);margin-top:.2rem;}
  .cart-item-note{grid-column:1/-1;font-size:.78rem;color:var(--ink-soft);font-style:italic;margin:0;}
  .cart-team-list{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.3rem .6rem;font-size:.76rem;color:var(--ink-soft);font-family:var(--font-mono);}
  .cart-team-row{white-space:nowrap;}
  .cart-team-qty{font-family:var(--font-mono);font-size:.82rem;color:var(--ink-soft);}
  .cart-item-qty{display:flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.82rem;}
  .cart-qty-btn{width:22px;height:22px;border:1px solid var(--border-strong);background:none;color:var(--ink);cursor:pointer;line-height:1;}
  .cart-qty-btn:hover{border-color:var(--accent);color:var(--accent);}
  .cart-item-remove{background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:1rem;line-height:1;padding:.2rem;}
  .cart-item-remove:hover{color:var(--accent-deep);}
  .cart-foot{border-top:1px solid var(--border);padding:1.2rem 1.3rem 1.4rem;}
  .cart-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem;font-family:var(--font-mono);}
  .cart-total span:first-child{color:var(--ink-soft);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;}
  .cart-total span:last-child{font-size:1.3rem;font-weight:700;color:var(--accent);}
  .checkout-back{background:none;border:none;color:var(--ink-faint);font-family:var(--font-mono);font-size:.76rem;cursor:pointer;padding:0;margin-bottom:.9rem;}
  .checkout-back:hover{color:var(--ink);}

  /* ---------- Tímová objednávka (rovnaký dizajn, viacero veľkostí/mien/čísel naraz) ---------- */
  .tool-hint{font-size:.76rem;color:var(--ink-soft);margin:0 0 .3rem;line-height:1.5;}
  .team-overlay{
    position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.55);
    opacity:0;pointer-events:none;transition:opacity .3s ease;
  }
  .team-overlay.open{opacity:1;pointer-events:auto;}
  .team-modal{
    position:fixed;top:50%;left:50%;transform:translate(-50%,-48%);z-index:211;
    width:min(560px,92vw);max-height:86vh;
    background:var(--bg-1);border:1px solid var(--border-strong);
    display:flex;flex-direction:column;
    opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;
    box-shadow:0 30px 80px rgba(0,0,0,.5);
  }
  .team-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%);}
  .team-modal-head{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.3rem;border-bottom:1px solid var(--border);}
  .team-modal-head h3{font-size:1.05rem;font-weight:700;letter-spacing:0;}
  .team-modal-body{flex:1;overflow-y:auto;padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:1rem;}
  .team-modal-foot{border-top:1px solid var(--border);padding:1.1rem 1.3rem 1.3rem;}
  .team-roster-status{font-size:.8rem;color:var(--ink-faint);font-family:var(--font-mono);margin:0;}
  .team-roster-list{display:flex;flex-direction:column;gap:.5rem;}
  .team-roster-row{
    display:grid;grid-template-columns:52px 1fr 60px auto;gap:.6rem;align-items:center;
    padding:.5rem .6rem;border:1px solid var(--border);font-size:.85rem;
  }
  .team-roster-row .roster-size{font-family:var(--font-mono);font-weight:700;color:var(--accent);text-align:center;}
  .team-roster-row .roster-name{font-weight:600;}
  .team-roster-row .roster-number{font-family:var(--font-mono);color:var(--ink-soft);text-align:center;}
  .team-roster-row .roster-remove{background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:1rem;line-height:1;padding:.2rem;}
  .team-roster-row .roster-remove:hover{color:var(--accent-deep);}
  .checkout-summary{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-soft);margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px dashed var(--border-strong);}
  .dopyt-field-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
  .dopyt-field select{
    background:var(--bg);border:1px solid var(--border-strong);color:var(--ink);
    padding:.7em .8em;font-family:var(--font-body);font-size:.92rem;width:100%;
  }
  .dopyt-fieldset{border:1px dashed var(--border-strong);padding:1rem .9rem .3rem;margin:0 0 1.1rem;}
  .dopyt-fieldset legend{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);padding:0 .4em;}
  .dopyt-fieldset.critical{border-color:var(--accent);}
  .dopyt-fieldset.critical legend{color:var(--accent);}
  .dopyt-fieldset-note{font-size:.78rem;color:var(--ink-faint);margin:-.3rem 0 .8rem;}
  .dopyt-checkbox{display:flex;align-items:flex-start;gap:.6rem;font-family:var(--font-body);font-size:.82rem;color:var(--ink-soft);margin:.3rem 0 1.1rem;cursor:pointer;line-height:1.4;}
  .dopyt-checkbox input{margin-top:.2rem;accent-color:var(--accent);width:16px;height:16px;flex-shrink:0;}
  .dopyt-toggle{
    background:none;border:none;color:var(--accent);font-family:var(--font-mono);font-size:.76rem;
    cursor:pointer;padding:0;margin:-.4rem 0 1rem;text-decoration:underline;
  }
  .dopyt-error{color:var(--accent-2);font-family:var(--font-mono);font-size:.78rem;margin-top:.8rem;display:none;}

  /* ---------- fullscreen checkout ---------- */
  .checkout-panel{
    position:fixed;inset:0;z-index:130;background:var(--bg);
    display:flex;flex-direction:column;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s ease;
  }
  .checkout-panel.open{opacity:1;visibility:visible;pointer-events:auto;}
  .checkout-top{
    display:flex;justify-content:space-between;align-items:center;flex-shrink:0;
    padding:1.2rem clamp(1.25rem,4vw,3rem);border-bottom:1px solid var(--border);
  }
  .checkout-top .checkout-back{margin:0;}
  .checkout-scroll{flex:1;overflow-y:auto;}
  .checkout-body{
    max-width:var(--container);margin-inline:auto;
    padding:2.4rem clamp(1.25rem,4vw,3rem) 5rem;
    display:grid;grid-template-columns:1.5fr 1fr;gap:var(--sp-6);align-items:start;
    opacity:0;transform:translateY(22px);
    transition:opacity .5s ease .08s, transform .5s ease .08s;
  }
  .checkout-panel.open .checkout-body{opacity:1;transform:translateY(0);}
  .checkout-form{display:flex;flex-direction:column;gap:1.3rem;}
  .checkout-form .dopyt-fieldset .dopyt-fieldset{margin-top:.9rem;}
  .checkout-side{position:sticky;top:0;display:flex;flex-direction:column;gap:1.1rem;}
  /* dokončenie objednávky — svetlejšie a o čosi väčšie písmo pre lepšiu čitateľnosť */
  .checkout-panel .dopyt-field label{color:var(--ink-soft);font-size:.72rem;}
  .checkout-panel .dopyt-field input,.checkout-panel .dopyt-field textarea,.checkout-panel .dopyt-field select{font-size:1rem;}
  .checkout-panel .dopyt-fieldset legend{font-size:.72rem;color:var(--accent-2);}
  .checkout-panel .dopyt-fieldset-note{color:var(--ink-soft);font-size:.85rem;}
  .checkout-panel .dopyt-checkbox{color:var(--ink);font-size:.88rem;}
  .checkout-agree{font-size:.76rem;line-height:1.55;}
  .checkout-agree a{color:var(--accent);}
  .checkout-panel .checkout-back{color:var(--ink-soft);font-size:.82rem;}
  .checkout-side .label-key{font-size:.8rem;color:var(--ink-soft);}
  .checkout-side .label-val{font-size:1.02rem;}
  @media (prefers-reduced-motion:reduce){.checkout-body{transition:none;}}
  @media (max-width:860px){
    .checkout-body{grid-template-columns:1fr;}
    .checkout-side{position:static;}
  }

  /* ---------- contact: quick dopyt (revisual-style stepper) ---------- */
  .contact-top-row{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--sp-6);align-items:center;}
  .dopyt{border:1px solid color-mix(in srgb, var(--accent) 55%, var(--border-strong));background:var(--bg-1);}
  .dopyt-head{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.3rem;border-bottom:1px solid var(--border);}
  .dopyt-head h3{font-size:1rem;font-weight:700;letter-spacing:0;}
  .dopyt-indicator{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);}
  .dopyt-body{padding:1.5rem 1.3rem;}
  .dopyt-pills{display:flex;flex-wrap:wrap;gap:.6rem;}
  .dopyt-pill{
    font-family:var(--font-mono);font-size:.78rem;padding:.6em 1em;
    border:1px solid var(--border-strong);background:transparent;color:var(--ink-soft);
    cursor:pointer;transition:border-color .15s ease, color .15s ease;
  }
  .dopyt-pill:hover{border-color:var(--ink);color:var(--ink);}
  .dopyt-pill.active{border-color:var(--accent);color:var(--accent);}
  .dopyt-actions{display:flex;justify-content:flex-end;margin-top:1.4rem;gap:.8rem;}
  .dopyt-field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem;}
  .dopyt-field label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
  .dopyt-field input,.dopyt-field textarea{
    background:var(--bg);border:1px solid var(--border-strong);color:var(--ink);
    padding:.7em .8em;font-family:var(--font-body);font-size:.92rem;resize:vertical;
  }
  .dopyt-field input:focus,.dopyt-field textarea:focus{outline:1.5px solid var(--accent);outline-offset:1px;}
  .dopyt-confirm{padding:2rem 0;text-align:center;}
  .dopyt-confirm .ok{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--accent);}
  .dopyt-confirm p{color:var(--ink-soft);margin-top:.5rem;}

  .label-block{border:1px solid color-mix(in srgb, var(--accent) 55%, var(--border-strong));padding:var(--sp-5);position:relative;background:var(--bg-1);}
  .label-block::before,.label-block::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--line);opacity:.6;}
  .label-block::before{top:8px;left:8px;border-right:none;border-bottom:none;}
  .label-block::after{bottom:8px;right:8px;border-left:none;border-top:none;}
  .label-row{display:flex;justify-content:space-between;gap:1rem;padding-block:.75rem;border-bottom:1px solid var(--border);}
  .label-row:last-child{border-bottom:none;}
  .label-key{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
  .label-val{font-family:var(--font-mono);font-size:.92rem;text-align:right;color:var(--ink);}
  .contact-info-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);align-items:stretch;margin-top:var(--sp-6);}
  .contact-map{border:1px solid var(--border-strong);overflow:hidden;background:var(--bg-1);min-height:280px;}
  .contact-map iframe{width:100%;height:100%;border:0;}
  @media (max-width:780px){
    .contact-top-row{grid-template-columns:1fr;}
    .contact-info-row{grid-template-columns:1fr;}
    .contact-map{aspect-ratio:16/9;min-height:0;}
  }

  .contact-people-side{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-5);height:100%;}
  .person{border-top:1px solid var(--border);padding-top:var(--sp-3);}
  .person-role{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
  .person-name{font-size:1.2rem;font-weight:700;margin-top:.3rem;font-family:var(--font-display);}
  .person-phone{font-family:var(--font-mono);color:var(--ink-soft);margin-top:.2rem;}

  footer{border-top:1px solid var(--border);padding-block:var(--sp-4);margin-top:var(--sp-5);}
  .foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);}
  .socials{display:flex;gap:.9rem;}
  .socials a{color:var(--ink-faint);}
  .socials a:hover{color:var(--accent);}
  .socials svg{width:18px;height:18px;}

  @media (max-width:920px){
    .ticket-strip{grid-template-columns:repeat(2,1fr);}
    .ticket-cell:nth-child(2){border-right:none;}
    .bento{grid-template-columns:repeat(2,1fr);}
    .process{grid-template-columns:1fr;}
    .board{grid-template-columns:repeat(2,1fr);}
    .creds{grid-template-columns:repeat(2,1fr);}
    .about{grid-template-columns:1fr;}
    .cta{grid-template-columns:1fr;}
    .shop-grid{grid-template-columns:repeat(2,1fr);}
    .contact-grid{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    .bento{grid-template-columns:1fr;}
    .board{grid-template-columns:1fr;}
    .shop-grid{grid-template-columns:1fr;}
    .creds{grid-template-columns:1fr 1fr;}
    .ticket-strip{grid-template-columns:1fr 1fr;}
    .about-figures{grid-template-columns:1fr 1fr;}
  }
  /* ---------- floating contact bubble ---------- */
  .contact-bubble{
    position:fixed;right:0;top:50%;transform:translateY(-50%) translateX(calc(100% - 42px));
    z-index:60;display:flex;align-items:center;gap:.6rem;
    background:var(--accent);color:#1A1108;text-decoration:none;
    padding:.8em 1.1em;font-family:var(--font-mono);font-size:.78rem;font-weight:600;
    border-radius:6px 0 0 6px;
    transition:transform .25s ease, background .15s ease;
    box-shadow:-4px 4px 18px rgba(0,0,0,.35);
  }
  .contact-bubble:hover{transform:translateY(-50%) translateX(0);background:var(--accent-2);}
  .contact-bubble svg{width:18px;height:18px;flex-shrink:0;}
  @media (max-width:640px){
    .contact-bubble{transform:translateY(-50%) translateX(0);padding:.7em .8em;border-radius:8px 0 0 8px;}
    .contact-bubble span{display:none;}
  }

  /* ---------- footer legal block ---------- */
  .foot-legal{border-top:1px solid var(--border);padding-top:var(--sp-4);margin-top:var(--sp-4);text-align:center;}
  .foot-legal-label{
    font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent);margin-bottom:.7rem;
  }
  .foot-legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;margin-bottom:var(--sp-4);}
  .foot-legal-links a{
    font-family:var(--font-mono);font-size:.76rem;color:var(--ink-soft);text-decoration:none;
  }
  .foot-legal-links a:hover{color:var(--ink);}

  /* ---------- cookie consent banner ---------- */
  .cookie-banner{
    position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:200;
    max-width:640px;margin-inline:auto;
    background:var(--bg-1);border:1px solid var(--border-strong);
    padding:1.1rem 1.3rem;
    display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between;
  }
  .cookie-banner[hidden]{display:none;}
  .cookie-banner p{color:var(--ink-soft);font-size:.85rem;flex:1;min-width:220px;margin:0;}
  .cookie-banner a{color:var(--accent);}
  .cookie-actions{display:flex;gap:.6rem;flex-shrink:0;}
  .cookie-actions .btn{padding:.6em 1em;font-size:.74rem;}

  /* ---------- simple legal pages ---------- */
  .legal-page{max-width:760px;margin:0 auto;padding:7rem clamp(1.25rem,4vw,3rem) 4rem;}
  .legal-page h1{font-size:clamp(1.8rem,4vw,2.4rem);margin-bottom:1.6rem;text-wrap:balance;}
  .legal-page h2{font-size:1.05rem;margin:2rem 0 .7rem;color:var(--accent);text-transform:none;letter-spacing:0;}
  .legal-page p{color:var(--ink-soft);font-size:.94rem;margin-bottom:1rem;max-width:68ch;}
  .legal-page ul,.legal-page ol{color:var(--ink-soft);font-size:.94rem;margin:0 0 1rem;padding-left:1.3rem;}
  .legal-page li{margin-bottom:.4rem;}
  /* Vnorený a)/b)/c) zoznam už má písmeno ako súčasť textu — bez ďalšej odrážky navyše. */
  .legal-page li ul{list-style:none;padding-left:0;margin:.5rem 0 0;}
  .legal-page table{width:100%;border-collapse:collapse;margin-bottom:1.3rem;font-size:.86rem;}
  .legal-page td{border:1px solid var(--border);padding:.55rem .7rem;color:var(--ink-soft);vertical-align:top;}
  .legal-simple-header{
    position:sticky;top:0;z-index:40;padding:1.2rem clamp(1.25rem,4vw,3rem);
    background:color-mix(in srgb, var(--bg) 85%, transparent);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);
  }