/* Produkt-/Wunschlisten-Komponenten — nur auf Seiten mit Produktkarten,
   Wunschlisten-Zeilen oder dem grünen Formular-Panel geladen (siehe assets/styles.css
   fuer die gemeinsame Basis: Reset, Typografie, Nav, Buttons).
   Handgeschrieben, keine Tailwind-Direktiven -> kein Build-Schritt noetig. */

/* gallery tile */
.tile{ position:relative; display:block; overflow:hidden; background:var(--greige); }
.tile .ph{
  width:100%; height:100%; object-fit:contain; display:block;
  filter:saturate(.82) sepia(.12) brightness(.99) contrast(1.02);
  transition:transform .9s cubic-bezier(.16,1,.3,1), filter .6s ease, opacity .25s ease;
  will-change:transform;
}
.tile::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(150deg, rgba(63,86,69,.10), rgba(75,63,54,.04) 45%, transparent 70%);
  mix-blend-mode:multiply; opacity:.9; transition:opacity .6s ease;
}
.tile:hover .ph{ transform:scale(1.045); filter:saturate(.95) sepia(.05) contrast(1.03); }
.tile:hover::before{ opacity:.5; }
.tile:focus-visible{ outline:2px solid var(--gruen); outline-offset:3px; }

.cap{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-top:.65rem; }
.cap .arrow{ transition:transform .5s cubic-bezier(.16,1,.3,1); display:inline-block; }
.tile-wrap:hover .arrow{ transform:translateX(4px); }
.cap .name{ position:relative; }
.cap .name::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--gruen);
  transition:width .5s cubic-bezier(.16,1,.3,1);
}
.tile-wrap:hover .cap .name::after{ width:100%; }

/* horizontal collection strip */
.strip{
  display:flex; gap:1.25rem; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; padding-bottom:.25rem;
}
.strip::-webkit-scrollbar{ display:none; }
.strip-card{ flex:0 0 82%; }
/* reduced motion: ambient drift is off, so reinstate snap for manual scroll */
@media (prefers-reduced-motion: reduce){
  .strip{ scroll-snap-type:x mandatory; }
  .strip-card{ scroll-snap-align:start; }
}
@media (min-width:640px){ .strip{ gap:1.5rem; } .strip-card{ flex:0 0 46%; } }
@media (min-width:1024px){ .strip-card{ flex:0 0 31.2%; } }

/* strip arrow controls */
.strip-nav{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; width:44px; border:1px solid rgba(168,157,145,.55);
  background:rgba(239,232,223,.6); color:var(--braun); cursor:pointer;
  transition:transform .4s cubic-bezier(.16,1,.3,1), background .4s ease, border-color .4s ease, opacity .4s ease;
}
.strip-nav:hover{ background:#745E4F; color:var(--beige); border-color:#745E4F; transform:translateY(-2px); }
.strip-nav:active{ transform:translateY(0); }
.strip-nav:focus-visible{ outline:2px solid var(--gruen); outline-offset:3px; }
.strip-nav:disabled{ opacity:.32; cursor:default; pointer-events:none; }

/* seamless cross-page transition (Chromium MPA View Transitions) */
@view-transition{ navigation:auto; }

/* ===== Produktgalerie (Kollektion) — leicht versetztes Raster ===== */
.gallery{ display:grid; grid-template-columns:1fr; gap:2rem 1.5rem; }
@media (min-width:640px){ .gallery{ grid-template-columns:1fr 1fr; gap:2.5rem 1.75rem; } }
@media (min-width:1024px){ .gallery{ grid-template-columns:repeat(3,1fr); column-gap:2rem; row-gap:3.25rem; } }
/* mittlere/alternierende Spalte nach unten versetzt */
@media (min-width:640px) and (max-width:1023px){ .gallery > .pcard:nth-child(2n){ transform:translateY(2.25rem); } }
@media (min-width:1024px){ .gallery > .pcard:nth-child(3n+2){ transform:translateY(3rem); } }

.pcard{ position:relative; }
.pcard-media-wrap{ position:relative; }
.pcard-media{ position:relative; display:block; }
.pcard-media:focus-visible{ outline:2px solid var(--gruen); outline-offset:3px; }
/* hover-overlay: preis + bestand (bewusst ohne Beschreibungstext — reine
   Kaufinfo, keine Lesearbeit beim Durchstöbern der Kachelübersicht) */
.pcard-info{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  display:flex; flex-direction:column; justify-content:flex-end; gap:.5rem;
  padding:1.4rem 1.4rem 4.4rem; opacity:0; transition:opacity .5s cubic-bezier(.16,1,.3,1);
  background:linear-gradient(to top, rgba(75,63,54,.78), rgba(75,63,54,.18) 58%, transparent);
}
.pcard-info .bestand{ font-family:'Jost',sans-serif; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#f0d9b8; transform:translateY(8px); transition:transform .55s cubic-bezier(.16,1,.3,1); }
.pcard:hover .pcard-info, .pcard:focus-within .pcard-info{ opacity:1; }
.pcard:hover .pcard-info .bestand, .pcard:focus-within .pcard-info .bestand{ transform:none; }

/* Bildanzahl-Punkte: zeigen auf einen Blick, wie viele Fotos ein Produkt hat.
   Sitzen direkt über dem Wunschlisten-Button, ein Punkt pro Bild, aktuelles Bild hervorgehoben. */
.pcard-dots{
  position:absolute; left:1.1rem; right:1.1rem; bottom:3.7rem; z-index:3;
  display:flex; justify-content:center; align-items:center; gap:.4rem;
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
.pcard-dots .dot{
  width:5px; height:5px; border-radius:999px; background:rgba(255,251,244,.55);
  transition:background-color .3s ease, transform .3s ease;
}
.pcard-dots .dot.active{ background:#fff; transform:scale(1.35); }
.pcard:hover .pcard-dots, .pcard:focus-within .pcard-dots{ opacity:1; }

/* wunschlisten-button im bild (erscheint bei hover) */
.wish-btn{
  position:absolute; left:1.1rem; right:1.1rem; bottom:1.1rem; z-index:3;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1rem; border:none; cursor:pointer;
  background:var(--beige); color:#745E4F;
  font-family:'Jost',sans-serif; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  opacity:0; transform:translateY(8px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease;
}
.pcard:hover .wish-btn, .pcard:focus-within .wish-btn{ opacity:1; transform:none; }
.wish-btn:hover{ background:#fff; }
.wish-btn:active{ transform:translateY(1px); }
.wish-btn:focus-visible{ outline:2px solid var(--beige); outline-offset:2px; opacity:1; transform:none; }
.wish-btn.added{ background:#745E4F; color:var(--beige); }
/* touch-geräte: overlay + button dauerhaft sichtbar (kein hover) */
@media (hover:none){
  .pcard-info{ opacity:1; }
  .pcard-info .bestand{ transform:none; }
  .wish-btn{ opacity:1; transform:none; }
  .pcard-dots{ opacity:1; }
}

/* Bild-Pfeile: durch die Unterbilder eines Produkts blättern (Desktop: nur bei Hover,
   Touch/Mobile: dauerhaft sichtbar, siehe @media (hover:none) unten). */
.prod-arrow{
  position:absolute; top:50%; z-index:4;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border:1px solid rgba(75,63,54,.22); border-radius:999px;
  background:rgba(255,251,244,.86); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#745E4F; cursor:pointer; line-height:0;
  box-shadow:0 8px 20px -10px rgba(39,27,20,.35);
  opacity:0; pointer-events:none;
  transform:translateY(-50%);
  transition:opacity .3s ease, background-color .3s ease, color .3s ease, transform .26s cubic-bezier(.19,1,.22,1);
}
.prod-arrow svg{ width:16px; height:16px; }
.prod-arrow[data-prev]{ left:.65rem; }
.prod-arrow[data-next]{ right:.65rem; }
.prod-arrow:hover{ background:#fffaf0; color:var(--gruen); transform:translateY(-50%) scale(1.07); }
.prod-arrow:active{ transform:translateY(-50%) scale(.94); }
.prod-arrow:focus-visible{ outline:2px solid var(--gruen); outline-offset:2px; opacity:1; pointer-events:auto; }
.pcard:hover .prod-arrow, .pcard:focus-within .prod-arrow{ opacity:1; pointer-events:auto; }
/* touch-geräte: Pfeile dauerhaft sichtbar, kein Hover nötig */
@media (hover:none){
  .prod-arrow{ opacity:1; pointer-events:auto; }
}

/* Mobile: Beschreibung/Preis/Bestand-Text auf der Karte ausblenden — ohne Hover
   steht er sonst dauerhaft und überladen auf jedem Bild. Wunschlisten-Button
   bleibt erreichbar, Name/Kategorie unter dem Bild bleiben sichtbar. Desktop
   (Hover-Reveal) bleibt unverändert. */
@media (max-width: 720px){
  .pcard-info{ display:none; }
}

/* ===== Wunschliste (warenkorb-artig) ===== */
.wl-row{ display:grid; grid-template-columns:84px 1fr auto; gap:1.1rem 1.25rem; align-items:center; padding:1.4rem 0; border-bottom:1px solid rgba(168,157,145,.32); }
@media (min-width:640px){ .wl-row{ grid-template-columns:104px 1fr auto auto; gap:1.5rem; } }
.wl-thumb{ aspect-ratio:1/1; background:var(--greige); overflow:hidden; }
.wl-thumb img{ width:100%; height:100%; object-fit:cover; filter:saturate(.85) sepia(.1); }
.qty{ display:inline-flex; align-items:center; border:1px solid rgba(168,157,145,.55); }
.qty button{ width:34px; height:34px; background:transparent; border:none; cursor:pointer; color:var(--braun); font-size:15px; line-height:1; transition:background .25s ease; }
.qty button:hover{ background:rgba(168,157,145,.2); }
.qty button:focus-visible{ outline:2px solid var(--gruen); outline-offset:-2px; }
.qty input{ width:42px; height:34px; border:none; border-left:1px solid rgba(168,157,145,.45); border-right:1px solid rgba(168,157,145,.45); text-align:center; background:transparent; color:var(--braun); font-family:'Jost',sans-serif; font-size:14px; -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.wl-remove{ background:none; border:none; cursor:pointer; color:var(--taupe); font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.06em; transition:color .3s ease; }
.wl-remove:hover{ color:var(--braun); }
.wl-remove:focus-visible{ outline:2px solid var(--gruen); outline-offset:2px; }

/* formular (auf dunklem grünen panel) */
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field label{ font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gruen); }
/* labels über dem grünen panel müssen hell sein */
[data-form] .field label{ color:rgba(239,232,223,.92); }
.field input, .field textarea{
  background:rgba(255,255,255,.94); border:1px solid rgba(168,157,145,.55); color:var(--braun);
  font-family:'Jost',sans-serif; font-size:14.5px; padding:.7rem .85rem; transition:border-color .3s ease, box-shadow .3s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:#7a7064; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--beige); box-shadow:0 0 0 2px rgba(239,232,223,.45); background:#fff; }

@media (prefers-reduced-motion: reduce){
  .pcard-info, .pcard-info .bestand, .wish-btn, .prod-arrow, .pcard-dots, .pcard-dots .dot{ transition:none !important; }
  .tile .ph{ transition:none !important; }
}