/* ============================================================
   stelazekepno.pl :: komponenty uzupełniające Tailwind
   (stany interaktywne: nawigacja, dropdown, slider, galeria)
   ============================================================ */

/* ---- Linki nawigacji ---- */
.nav-link{
  padding:.62rem .85rem;border-radius:.6rem;font-weight:600;color:#33383b;
  transition:background .15s,color .15s;
}
.nav-link:hover{background:#f6efe7;color:#8a5f37}

/* ---- Nawigacja: desktop vs mobile ---- */
.main-nav{display:none}
@media(min-width:1024px){
  .main-nav{display:flex}
}
/* panel mobilny – wysuwany off-canvas (drawer) */
@media(max-width:1023px){
  nav.main-nav{
    display:flex;
    position:fixed;top:0;left:0;bottom:0;z-index:60;
    width:min(86vw,360px);
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;
    box-shadow:22px 0 50px -20px rgba(31,34,36,.5);
    padding:0 0 1.5rem;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(calc(-100% - 40px));
    transition:transform .34s cubic-bezier(.4,0,.2,1);
  }
  .main-nav.open{transform:translateX(0)}
  .main-nav .nav-link,
  .main-nav .drop-trigger{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;text-align:left;
    padding:.95rem 1rem;border-bottom:1px solid #f1f1f1;border-radius:0;
    font-size:1.0625rem;font-weight:600;color:#33383b;
  }
  .main-nav .nav-link:hover,
  .main-nav .drop-trigger:hover{background:#faf7f2;color:#8a5f37}
  .has-drop{position:static}
  /* strzałka rozwijania */
  .drop-trigger svg{transition:transform .25s ease;flex:0 0 auto}
  .has-drop.open .drop-trigger svg{transform:rotate(180deg)}
  /* nagłówek panelu (Menu + zamknij) */
  .drawer-head{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    position:sticky;top:0;z-index:1;background:#fff;
    margin:0;padding:.7rem .5rem .7rem .8rem;border-bottom:1px solid #eee;
  }
  .drawer-logo{display:inline-flex;flex:0 1 auto}
  .drawer-logo img{height:3rem;width:auto;display:block}
  .drawer-close{
    width:3.25rem;height:3.25rem;display:grid;place-items:center;flex:0 0 auto;
    border-radius:9999px;background:#f3f4f6;color:#33383b;font-size:2rem;line-height:1;
    transition:background .15s;
  }
  .drawer-close:hover{background:#e9ebee}
}
/* przyciemnione tło pod panelem */
.nav-overlay{
  position:fixed;inset:0;z-index:55;
  background:rgba(31,34,36,.5);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s;
}
.nav-overlay.open{opacity:1;visibility:visible}
@media(min-width:1024px){.nav-overlay,.drawer-head{display:none}}
#navToggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#navToggle.active span:nth-child(2){opacity:0}
#navToggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- Mega dropdown ---- */
.drop-menu{display:none}
@media(min-width:1024px){
  .drop-menu{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.5rem}
  .has-drop:hover .drop-menu{display:grid}
  /* mostek, by najechanie nie gubiło menu */
  .has-drop::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
}
@media(max-width:1023px){
  .drop-menu{
    display:block;overflow:hidden;
    max-height:0;opacity:0;padding-left:0;
    transition:max-height .32s ease,opacity .25s ease;
  }
  .has-drop.open .drop-menu{max-height:70vh;opacity:1}
  .drop-menu>div{margin:0}
  .drop-menu a{
    display:block;width:100%;text-align:left;
    padding:.85rem 1rem;margin:0;border-bottom:1px solid #f1f1f1;border-radius:0;
    font-size:1.0625rem;font-weight:400;
  }
  .drop-menu a:hover{background:#faf7f2;color:#8a5f37}
}

/* ---- Breadcrumb (okruszki) – na mobilnej jedna linia z przewijaniem ---- */
nav.text-\[13\.5px\] > div{display:flex;align-items:center;flex-wrap:wrap;gap:.1rem}
@media(max-width:640px){
  nav.text-\[13\.5px\] > div{
    flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
            mask-image:linear-gradient(to right,#000 88%,transparent);
  }
  nav.text-\[13\.5px\] > div::-webkit-scrollbar{display:none}
  nav.text-\[13\.5px\] > div > *{flex:0 0 auto}
}

/* ---- Pasek filtra / sortowania (strona główna) ---- */
.filter-chip{
  display:inline-flex;align-items:center;white-space:nowrap;
  padding:.5rem .95rem;border-radius:9999px;font-size:.875rem;font-weight:600;
  color:#3d4346;background:#f3f4f6;transition:background .15s,color .15s;
}
.filter-chip:hover{background:#f6efe7;color:#8a5f37}
.filter-chip.active{background:#33383b;color:#fff}

/* ---- Slider banerów ---- */
.hero-slider .slides{display:grid}
.hero-slider .slide{grid-area:1 / 1;opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:0}
.hero-slider .slide.active{opacity:1;pointer-events:auto;z-index:1}
.hero-slider .dot.active{background:#fff;width:1.5rem;border-radius:9999px}

/* ---- Galeria produktu ---- */
[data-gallery] .thumb.active{border-color:#a57447}

/* ---- Pola formularza (label .form-field) ---- */
.form-field{display:block;font-weight:600;font-size:.875rem;color:#33383b}
.form-field input,.form-field textarea{
  width:100%;margin-top:.4rem;padding:.65rem .8rem;
  border:1px solid #d8dde2;border-radius:.7rem;font:inherit;font-weight:400;color:#33383b;
  background:#fff;transition:border-color .15s,box-shadow .15s;
}
.form-field input:focus,.form-field textarea:focus{
  outline:0;border-color:#a57447;box-shadow:0 0 0 3px rgba(165,116,71,.15);
}
.form-field textarea{resize:vertical}

/* ---- Treść HTML z panelu (opis długi, blog) ---- */
.rich-text{font-size:1.0625rem;line-height:1.7}
.rich-text p{margin:0 0 1em}
.rich-text h2{font-size:1.5rem;font-weight:700;color:#33383b;margin:1.4em 0 .5em}
.rich-text h3{font-size:1.25rem;font-weight:700;color:#33383b;margin:1.2em 0 .5em}
.rich-text ul{list-style:disc;padding-left:1.4em;margin:0 0 1em}
.rich-text ol{list-style:decimal;padding-left:1.4em;margin:0 0 1em}
.rich-text li{margin:.3em 0}
.rich-text a{color:#a57447;text-decoration:underline}
.rich-text img{border-radius:.75rem;margin:1em 0}
.rich-text strong{color:#33383b}

/* ---- Fallback line-clamp (gdyby CDN nie miał pluginu) ---- */
.line-clamp-2,.line-clamp-3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-2{-webkit-line-clamp:2}
.line-clamp-3{-webkit-line-clamp:3}