/* ==========================================================================
   Heimatfotos Wishlist – Clean CSS (Grid + Cards + Hearts + Share + Single)
   ========================================================================== */

/* Base wrapper */
.hf-wl{
  max-width:1100px;
  margin:30px auto;
  padding:0 16px;
}

/* Header */
.hf-wl__header{
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.hf-wl__titlewrap{
  display:flex;
  gap:10px;
  align-items:center;
}
.hf-wl__title{
  margin:0;
  font-size:28px;
}
.hf-wl__titleedit{
  border:1px solid #ddd;
  background:#fff;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
}

/* Notice / states */
.hf-wl__notice{
  padding:10px 12px;
  border:1px solid #ffe0a3;
  background:#fff7e6;
  border-radius:8px;
}
.hf-wl__loading,
.hf-wl-empty,
.hf-wl-error{
  padding:18px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;
}

/* Share row */
.hf-wl__share label{
  display:block;
  font-size:12px;
  opacity:.75;
  margin-bottom:6px;
}
.hf-wl__share-row,
.hf-wl-share-row{
  display:flex;
  gap:8px;
  align-items:center;
}
.hf-wl__share input,
.hf-wl__share input[type="text"],
.hf-wl-share-input,
.hf-wl__share-row input{
  min-width:340px;
  max-width:100%;
  width:100%;
  padding:10px;
  border:1px solid #ddd;
  border-radius:8px;
}

.hf-wl__copybtn,
.hf-wl-copy-btn{
  cursor:pointer;
  border:1px solid #ddd;
  background:#fff;
  padding:6px 10px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.hf-wl__copymsg,
.hf-wl-copy-feedback{
  font-size:12px;
  color:#2e7d32;
}

/* ==========================================================================
   Grid layout
   ========================================================================== */
.hf-wl-grid{
  display:grid;
  gap:16px;
}
@media (min-width: 900px){
  .hf-wl-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 899px){
  .hf-wl-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Card
   ========================================================================== */
.hf-wl-card{
  display:flex;
  flex-direction:column;
  border:1px solid #e6e6e6;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}

/* 1:1 Bildbereich, zentriert, ohne Beschnitt */
.hf-wl-card__img{
  aspect-ratio: 1 / 1;
  width: 100%;
  background: #f5f5f5;
  border-bottom: 1px solid #eee;
  overflow: hidden;
}

/* Link/Wrapper füllt den 1:1 Bereich und zentriert Inhalt */
.hf-wl-card__img a,
.hf-wl-card__imglink{
  width: 100%;
  height: 100%;
  display: flex;                 /* wichtig für Zentrierung */
  align-items: center;           /* vertikal mittig */
  justify-content: center;       /* horizontal mittig */
  text-decoration: none;
}

/* Bild OHNE Beschnitt: passt komplett in den Container */
.hf-wl-card__img img,
.hf-wl-card__imglink img{
  display:block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;           /* keine Crops */
  object-position: center center;
}

/* Body */
.hf-wl-card__body{
  padding: 14px 14px 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.hf-wl-card__title{
  margin:0;
  font-weight:700;
  font-size:16px;
  line-height:1.3;
}

.hf-wl-card__meta{
  font-size:12px;
  opacity:.75;
}

/* Varianten */
.hf-wl-card__variants{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.hf-wl-variant{
  display:flex;
  flex-direction:column;
  gap:8px;
  border-top:1px solid #eee;
  padding-top:10px;
}

.hf-wl-variant__head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}

.hf-wl-variant__label{
  font-weight:600;
  font-size:14px;
}

.hf-wl-variant__added{
  font-size:12px;
  opacity:.6;
}

.hf-wl-variant__comment{
  opacity:.9;
  font-size:13px;
}

/* Actions Footer */
.hf-wl-variant__actions{
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Buttons */
.hf-wl-btn{
  border:1px solid #ddd;
  background:#fff;
  padding:7px 10px;
  border-radius:10px;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.hf-wl-iconbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1px solid #e2e2e2;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}
.hf-wl-iconbtn svg{
  width:18px;
  height:18px;
  display:block;
}


/* ==========================================================================
   Variants inside card
   ========================================================================== */
.hf-wl-card__variants{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.hf-wl-variant{
  display:flex;
  flex-direction:column;
  gap:8px;
  border-top:1px solid #eee;
  padding-top:10px;
}

.hf-wl-variant > div:not(:last-child) {
    margin-bottom: 15px;
}

.hf-wl-variant__head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.hf-wl-variant__label{
  font-size:12px;
  font-weight:300;
  width:50%;
}
.hf-wl-variant__added{
  font-size:12px;
  opacity:.75;
  width:50%;
}

.hf-wl-variant__comment{
  opacity:.9;
  font-size:13px;
}
.hf-wl-variant__comment--empty{
  min-height:1px;
}

/* Actions always visible and at the bottom */
.hf-wl-variant__actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Details button (text) */
.hf-wl-btn{
  border:1px solid #ddd;
  background:#fff;
  padding:7px 10px;
  border-radius:10px;
  cursor:pointer;
  text-decoration:none;
  color:inherit;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.hf-wl-btn--danger{
  border-color:#f1c0c0;
}

/* Icon buttons (note / delete) */
.hf-wl-iconbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1px solid #e2e2e2;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}
.hf-wl-iconbtn svg{
  width:18px;
  height:18px;
  display:block;
}

.hf-wl-comment-input{
  width:100%;
  box-sizing:border-box;
  border:1px solid #ddd;
  border-radius:8px;
  padding:6px 8px;
  font-size:13px;
}

.hf-wl-variant__comment--readonly{
  opacity:.85;
  font-size:13px;
}

.hf-wl-comment-input::placeholder {
  color: #999;
  font-style: italic;
  opacity: 0.5;     
}

.hf-wl-comment-input:focus::placeholder {
  color: #bbb;
}


/* ==========================================================================
   Toast
   ========================================================================== */
.hf-wl-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%) translateY(20px);
  opacity:0;
  background:#111;
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  z-index:999999;
  transition:.2s;
}
.hf-wl-toast.is-show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.hf-wl-toast.is-error{
  background:#8b0000;
}

/* ==========================================================================
   Heart buttons (shop + generic)
   ========================================================================== */
[data-hf-wl-heart]{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* Generic state class used by JS */
[data-hf-wl-heart].is-active,
[data-hf-wl-heart].is-in-wishlist{
  opacity:1;
}

/* Shop overlay heart (requires parent position:relative) */
.post_featured,
.item-box .post_featured,
.resultitem .post_featured{
  position:relative;
}

.hf-wl-heart{
  position:absolute;
  top:10px;
  right:10px;
  z-index:20;
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.9);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.hf-wl-heart svg{
  width:20px;
  height:20px;
}

/* Active state */
.hf-wl-heart.is-active{
  background:rgba(67,160,71,.95);
  border-color:rgba(67,160,71,.95);
  color:#fff;
}
.hf-wl-heart.is-active svg{
  fill:currentColor;
}

/* ==========================================================================
   Single product button under add-to-cart
   ========================================================================== */
.hf-wl-single{
  margin-top:12px;
}
.hf-wl-single-btn{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
}
.hf-wl-single-btn.is-active{
  font-weight:600;
}
.hf-wl-single-icon{
  font-size:16px;
}

/* Spinner */
.hf-wl-spinner{
  width:18px;
  height:18px;
  border:2px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.65);
  border-radius:50%;
  display:inline-block;
  vertical-align:middle;
  animation:hfWlSpin .8s linear infinite;
}

@keyframes hfWlSpin{
  to { transform: rotate(360deg); }
}

/* optional: nicer spacing in loading row */
.hf-wl__loading{
  display:flex;
  gap:10px;
  align-items:center;
}