/*!
 * cav-shop.css — shop archive: hero band, filter toolbar, product card, grid,
 * pagination, skeleton, empty, bundle banner. Briefing §4.
 */

.cav-shop{ padding-bottom: var(--cav-section-gap); }

/* SEO-Einleitungstext auf Kategorie-Archiven (archive-product.php). */
.cav-cat-intro{ max-width: 760px; margin: 4px 0 26px; color: var(--cav-ink-2,#5C574F); font-size: 15.5px; line-height: 1.65; }
.cav-cat-intro p{ margin: 0 0 10px; }
.cav-cat-intro p:last-child{ margin-bottom: 0; }

/* ===================== Hero (white card — shop.dc.html §4.1) ===================== */
.cav-shop-hero{ position:relative; overflow:hidden; background:#fff; border:1px solid rgba(140,136,130,0.18); border-radius:24px; padding:32px 38px 30px; box-shadow:0 24px 54px -34px rgba(42,58,82,0.4); margin:24px 0 0; }
.cav-shop-hero__glow{ position:absolute; border-radius:50%; pointer-events:none; }
.cav-shop-hero__glow--honey{ top:-90px; right:-50px; width:300px; height:300px; background:radial-gradient(circle at 38% 38%,rgba(217,164,65,0.16),rgba(217,164,65,0)); }
.cav-shop-hero__glow--teal{ bottom:-80px; left:22%; width:220px; height:220px; background:radial-gradient(circle at 50% 50%,rgba(46,139,134,0.1),rgba(46,139,134,0)); }
.cav-breadcrumb{ position:relative; font-size:13px; color: var(--cav-meta-text); font-weight:700; margin-bottom:18px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.cav-breadcrumb a{ color: var(--cav-meta-text); text-decoration:none; }
.cav-breadcrumb a:hover{ color: var(--cav-navy); }
.cav-breadcrumb .sep{ color: var(--cav-warm-light); }
.cav-breadcrumb .cur{ color: var(--cav-ink-2); }
.cav-shop-hero__row{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.cav-shop-hero__eyebrow{ display:inline-flex; align-items:center; gap:7px; background:rgba(217,164,65,0.14); border:1px solid rgba(217,164,65,0.45); color: var(--cav-honey-dark); font-size:11.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:5px 12px; border-radius:999px; margin-bottom:14px; }
.cav-shop-hero h1{ font-size:44px; margin:0; line-height:1.02; color: var(--cav-navy); }
.cav-shop-hero__intro{ font-size:16.5px; color: var(--cav-ink-2); margin:14px 0 0; max-width:600px; line-height:1.55; }
.cav-shop-hero__countbox{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; padding-bottom:4px; }
.cav-shop-hero__count{ font-family: var(--cav-font-head); font-weight:600; font-size:38px; color: var(--cav-honey); line-height:1; }
.cav-shop-hero__countlabel{ font-size:13px; font-weight:700; color: var(--cav-meta-text); text-transform:uppercase; letter-spacing:.6px; }
.cav-shop-hero__trust{ position:relative; display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:22px; }
.cav-shop-hero__trust span{ display:flex; align-items:center; gap:7px; background: var(--cav-hafer-2); border:1px solid rgba(140,136,130,0.2); color: var(--cav-ink-2); font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:999px; }
.cav-shop-hero__trust svg{ color: var(--cav-teal); }
@media (max-width:760px){ .cav-shop-hero{ padding:24px 22px; } .cav-shop-hero__row{ flex-direction:column; align-items:flex-start; gap:10px; } .cav-shop-hero h1{ font-size:34px; } }

/* ===================== Filter toolbar (§4.2) ===================== */
.cav-toolbar{
  position:static; z-index:30;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border-radius:18px !important; padding:11px 14px !important;
  box-shadow:0 18px 44px -26px rgba(42,58,82,0.45) !important; margin:18px 0 14px;
}
.cav-toolbar__label{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:13px; letter-spacing:.3px; color: var(--cav-navy); padding-right:4px; }
.cav-toolbar__label svg{ color: var(--cav-navy); }
.cav-toolbar__sort{ margin-left:auto; display:flex; align-items:center; gap:8px; flex:none; }
.cav-toolbar__sort label{ color: var(--cav-meta-text); font-weight:700; font-size:13.5px; }
.cav-toolbar__sort select{
  border:1.5px solid rgba(140,136,130,0.32); background:#fff;
  border-radius:999px; padding:9px 14px; font-family: var(--cav-font-body); font-weight:800; font-size:13.5px; color: var(--cav-navy); cursor:pointer;
}

.cav-facet{ position:relative; }
.cav-facet__btn{
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1.5px solid rgba(140,136,130,0.32); color: var(--cav-navy);
  border-radius:999px; padding:9px 15px; font-weight:800; font-size:14px; cursor:pointer;
}
.cav-facet__btn svg:first-child{ opacity:.7; }
.cav-facet.is-active .cav-facet__btn{ border-color: var(--cav-navy); }
.cav-facet__count{ min-width:18px; height:18px; padding:0 5px; background: var(--cav-teal); color:#fff; border-radius:999px; font-size:10.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.cav-facet__pop{
  position:absolute; top:calc(100% + 11px); left:0; z-index:50; min-width:250px;
  background:#fff; border:1px solid rgba(140,136,130,0.2); border-radius:16px;
  box-shadow:0 24px 50px -22px rgba(42,58,82,0.5); padding:16px; display:flex; flex-direction:column; gap:4px;
}
.cav-facet__chip{ display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:10px; cursor:pointer; font-size:14px; }
.cav-facet__chip:hover{ background: var(--cav-hafer); }
.cav-facet__chip input{ accent-color: var(--cav-navy); }

/* range slider */
.cav-range{ position:relative; height:30px; margin:6px 4px 0; }
.cav-range__track{ position:absolute; top:13px; left:0; right:0; height:4px; background: var(--cav-warm-light); border-radius:4px; }
.cav-range__fill{ position:absolute; height:100%; background: var(--cav-navy); border-radius:4px; }
.cav-range input[type=range]{
  position:absolute; top:0; left:0; width:100%; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none; height:30px;
}
.cav-range input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--cav-navy); cursor:pointer; }
.cav-range input[type=range]::-moz-range-thumb{ pointer-events:auto; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--cav-navy); cursor:pointer; }
.cav-range__out{ text-align:center; font-weight:600; color: var(--cav-navy); margin:8px 0 0; font-size:14px; }

/* active filters */
.cav-activefilters{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.cav-activefilters__list{ display:inline-flex; flex-wrap:wrap; gap:8px; }
.cav-active-chip{ display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--cav-card-border); border-radius:999px; padding:5px 11px; font-size:13px; color: var(--cav-navy); }
.cav-active-chip button{ border:0; background:none; cursor:pointer; color: var(--cav-meta-text); font-size:14px; line-height:1; }
.cav-activefilters__count{ margin-left:auto; color: var(--cav-meta-text); font-size:13px; }

/* ===================== Grid + cards (§4.3) ===================== */
.cav-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; }
.cav-grid > .cav-bundle-banner{ grid-column: 1 / -1; }

/* WooCommerce [products] shortcode / related output uses ul.products — grid it
   so cards laid out anywhere (home, related) match the archive. */
ul.products{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(4,1fr); gap:24px; }
ul.products li, ul.products > .cav-prod{ list-style:none; margin:0; }
@media (max-width:1100px){ ul.products{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:760px){ ul.products{ grid-template-columns: repeat(2,1fr); gap:16px; } }
@media (max-width:400px){ ul.products{ grid-template-columns: 1fr; } }

/* Card — exact spec from ProductCard.dc.html */
.cav-prod{ border-radius:16px; border:1px solid rgba(140,136,130,0.16); box-shadow:0 12px 30px -18px rgba(42,58,82,0.3); overflow:hidden; display:flex; flex-direction:column; height:100%; transition: transform .32s ease, box-shadow .32s ease; }
.cav-prod__media{ position:relative; width:100%; aspect-ratio: 63/89; background:var(--cav-cover-bg); overflow:hidden; }
.cav-prod__cover,.cav-prod__inner{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cav-prod__inner{ opacity:0; background:#fff; }
.cav-prod__link{ position:absolute; inset:0; z-index:1; }

.cav-prod-badge{ position:absolute; top:12px; left:12px; z-index:2; pointer-events:none; border-radius:999px; padding:5px 11px; font-size:11px; font-weight:800; letter-spacing:.3px; box-shadow:0 6px 14px -6px rgba(42,58,82,0.45); }
.cav-prod-badge--neu{ background: var(--cav-teal); color:#fff; }
.cav-prod-badge--bestseller{ background: var(--cav-honey); color:var(--cav-ink); }
.cav-prod__peek{ position:absolute; top:12px; left:12px; z-index:3; pointer-events:none; display:flex; align-items:center; gap:6px; background:#fff; border:1.5px solid rgba(140,136,130,0.4); color:var(--cav-ink); font-size:11.5px; font-weight:800; padding:5px 11px 5px 9px; border-radius:999px; box-shadow:0 6px 16px -6px rgba(42,58,82,0.5); opacity:0; }
.cav-prod__pdf{ position:absolute; top:12px; right:12px; z-index:2; pointer-events:none; display:flex; align-items:center; gap:6px; background:#fff; border:1.5px solid rgba(140,136,130,0.4); color: var(--cav-navy); font-size:12px; font-weight:800; padding:5px 11px 5px 9px; border-radius:999px; box-shadow:0 4px 10px -4px rgba(42,58,82,0.35); }

/* hover-reveal "In den Warenkorb" overlay on cover */
.cav-prod__add{ position:absolute; left:12px; right:12px; bottom:12px; z-index:4; display:flex; align-items:center; justify-content:center; gap:8px; background: var(--cav-navy); color:#fff; font-weight:800; font-size:13.5px; padding:11px 14px; border-radius:999px; box-shadow:0 12px 26px -10px rgba(42,58,82,0.75); text-decoration:none; transform: translateY(150%); opacity:0; transition: transform .34s ease, opacity .34s ease, background .15s; }
.cav-prod__add:hover{ background: var(--cav-navy-hover); color:#fff; }

@media (hover:hover){
  .cav-prod:hover{ transform: translateY(-6px); box-shadow:0 28px 54px -24px rgba(42,58,82,0.5); }
  .cav-prod__inner{ transition: opacity .35s ease; }
  .cav-prod:hover .cav-prod__inner{ opacity:1; }
  .cav-prod__peek{ transition: opacity .3s ease; }
  .cav-prod:hover .cav-prod__peek{ opacity:1; }
  .cav-prod:hover .cav-prod-badge{ opacity:0; }
  .cav-prod:hover .cav-prod__add{ transform: translateY(0); opacity:1; }
}
/* touch: no hover — show a compact add button persistently (Briefing §4.3) */
@media (hover:none){
  .cav-prod__add{ position:absolute; transform:none; opacity:1; }
}

.cav-prod__body{ padding:15px 16px 16px; display:flex; flex-direction:column; flex:1; }
.cav-prod__title{ font-family: var(--cav-font-head); font-weight:500; font-size:17px; color: var(--cav-navy); line-height:1.18; text-decoration:none; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; min-height:2.36em; overflow-wrap:break-word; }
.cav-prod__meta{ font-size:13px; font-weight:700; color: var(--cav-meta-text); margin-top:5px; }
.cav-prod__spacer{ flex:1; min-height:12px; }
.cav-prod__pricerow{ display:flex; align-items:baseline; gap:8px; margin-top:12px; }
.cav-prod__price{ font-family: var(--cav-font-head); font-weight:600; font-size:20px; color: var(--cav-navy); }
.cav-prod__price del{ color: var(--cav-meta-text); font-weight:600; font-size:14px; margin-right:4px; }
.cav-prod__pdfnote{ font-size:12.5px; font-weight:700; color: var(--cav-meta-text); }

/* bundle banner (§4.4) */
.cav-bundle-banner{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 28px; }
.cav-bundle-banner h3{ color:#fff; margin:.15em 0; }
.cav-bundle-banner p{ color: rgba(255,255,255,.82); margin:0; }
.cav-bundle-banner s{ color: rgba(255,255,255,.6); }
.cav-btn-honey{ background: var(--cav-honey); color: var(--cav-navy); }
.cav-btn-honey:hover{ background: var(--cav-honey-dark-2); color: var(--cav-navy); }

/* skeleton (§4.5) */
.cav-grid--skeleton{ margin-top:0; }
.cav-skel{ overflow:hidden; }
.cav-skel__media{ aspect-ratio:63/89; background: var(--cav-hafer-2); }
.cav-skel__line{ height:12px; margin:14px 15px 0; border-radius:6px; background: var(--cav-hafer-2); }
.cav-skel__line.short{ width:55%; }
.cav-skel,.cav-skel__media,.cav-skel__line{ position:relative; }
.cav-grid--skeleton::before{ content:""; }
@keyframes cav-shimmer{ 100%{ transform: translateX(100%); } }
.cav-skel__media::after,.cav-skel__line::after{
  content:""; position:absolute; inset:0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: cav-shimmer 1.3s infinite;
}

/* empty (§4.5) */
.cav-shop__empty{ grid-column:1/-1; text-align:center; padding:48px 20px; color: var(--cav-ink-2); }
.cav-shop__empty svg{ color: var(--cav-warm-light); }
.cav-shop__empty h3{ margin:.4em 0 .2em; }

/* pagination (§4.6) */
.cav-pagination{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; margin-top:42px; }
.cav-page{ min-width:40px; height:40px; padding:0 14px; border-radius:11px; border:1.5px solid var(--cav-card-border); background:#fff; color: var(--cav-navy); font-weight:800; font-size:14.5px; cursor:pointer; }
.cav-page.is-active{ background: var(--cav-navy); color:#fff; border-color: var(--cav-navy); }
.cav-page--more{ display:flex; align-items:center; gap:8px; border-color: var(--cav-navy); }
.cav-page--more:hover{ background: var(--cav-navy); color:#fff; }

.cav-grid.is-loading{ opacity:.4; pointer-events:none; }

/* ===================== Responsive (§9) ===================== */
@media (max-width:1100px){ .cav-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:760px){
  .cav-grid{ grid-template-columns: repeat(2,1fr); gap:16px; }
  .cav-shop-hero{ padding:24px 20px; }
  .cav-shop-hero__row{ flex-direction:column; align-items:flex-start; gap:6px; }
  .cav-toolbar{ top:74px; }
  .cav-prod__add-t{ display:none; }            /* compact add on touch */
  .cav-prod__add{ padding:9px; }
}
@media (max-width:400px){ .cav-grid{ grid-template-columns: repeat(2,1fr); gap:12px; } }

/* touch: no crossfade (§4.3) */
@media (hover:none){
  .cav-prod:hover .cav-prod__inner{ opacity:0; }
  .cav-prod:hover .cav-prod__cover{ opacity:1; }
  .cav-prod__peek{ display:none; }
}

/* ============ Mobile-Filter aufgeräumt ============ */
@media (max-width:760px){
  /* Toolbar: saubere 2-Spalten-Kacheln statt unruhigem Umbruch */
  .cav-toolbar{ display:grid !important; grid-template-columns:1fr 1fr; align-items:stretch; gap:8px; padding:12px !important; }
  .cav-toolbar__label{ display:none; }
  .cav-facet{ display:flex; }
  .cav-facet[data-cav-facet="preis"]{ grid-column:1 / -1; }
  .cav-facet__btn{ width:100%; justify-content:flex-start; padding:11px 14px; font-size:13.5px; }
  .cav-facet__btn > svg:last-child{ margin-left:auto; }
  /* Sortierung: eigene volle Zeile statt gequetschtem Link */
  .cav-toolbar__sort{ grid-column:1 / -1; margin-left:0; gap:10px; }
  .cav-toolbar__sort label{ text-decoration:none; flex:none; }
  .cav-toolbar__sort select{ flex:1; }
  /* Auswahl als Bottom-Sheet (nicht mehr abgeschnittenes Mini-Dropdown) */
  .cav-facet__pop{
    position:fixed; left:0; right:0; bottom:0; top:auto; min-width:0;
    border-radius:20px 20px 0 0; max-height:72vh; overflow:auto; padding:18px 18px 24px;
    box-shadow:0 -26px 60px -18px rgba(42,58,82,0.5); z-index:9999;
  }
  .cav-facet__chip{ padding:11px 10px; font-size:15px; }
}

/* „Zurücksetzen": richtiger Pill-Button statt unterstrichenem Text */
.cav-activefilters .cav-activefilters__reset{
  text-decoration:none; border:1.5px solid rgba(140,136,130,0.4); background:#fff;
  color: var(--cav-navy); border-radius:999px; padding:6px 15px; font-weight:800; font-size:13px;
  cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.cav-activefilters .cav-activefilters__reset:hover{ background: var(--cav-navy); color:#fff; border-color: var(--cav-navy); }

/* ============ Banner mobil kompakter (Shop-Hero + „Wunsch-Paket"-Bundle) ============ */
@media (max-width:600px){
  /* Shop-Hero schlanker: kleinere H1/Intro, Zähler inline, kompakte Trust-Pillen */
  .cav-shop-hero{ padding:18px 16px !important; border-radius:18px !important; margin-top:14px; }
  .cav-shop-hero__glow{ display:none; }
  .cav-shop-hero__eyebrow{ margin-bottom:8px; }
  .cav-shop-hero h1{ font-size:25px; }
  .cav-shop-hero__intro{ font-size:13.5px; margin-top:8px; }
  .cav-shop-hero__countbox{ flex-direction:row; align-items:baseline; gap:5px; }
  .cav-shop-hero__count{ font-size:22px; }
  .cav-shop-hero__countlabel{ font-size:11px; }
  .cav-shop-hero__trust{ gap:6px; margin-top:14px; }
  .cav-shop-hero__trust span{ font-size:11px; padding:5px 10px; }
  /* Bundle-Banner schlanker: kleineres Icon/Heading, Button voll breit */
  .cav-bundle-banner{ padding:16px !important; gap:12px !important; border-radius:16px !important; }
  .cav-bundle-banner > div:first-child{ width:42px !important; height:42px !important; border-radius:11px !important; }
  .cav-bundle-banner > div:first-child svg{ width:21px !important; height:21px !important; }
  .cav-bundle-banner > div:nth-child(2) > div:first-child > span:first-child{ font-size:17px !important; }
  .cav-bundle-banner > div:nth-child(2) > div:nth-child(2){ font-size:13px !important; }
  .cav-bundle-banner > a{ width:100%; justify-content:center !important; padding:11px 20px !important; font-size:14px !important; }
}

/* ============================================================
   Home-/Finder-Produktkarte (render_home_card) — global geladen,
   damit die Karte überall identisch aussieht (Startseite, Buchberater,
   verwandte Produkte). Lag vorher nur in der Theme-home.css → auf der
   Finder-Seite fehlte es, dadurch überlappten Details + beide Labels
   und der Details-Hover hatte keinen Navy-Hintergrund (weiß auf weiß).
   ============================================================ */
/* Karten-Titel: lange KDP-Titel auf 2 Zeilen klemmen, damit das Raster gleichmäßig bleibt */
.cav-hcard__title{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; min-height:2.3em; overflow-wrap:break-word;
}
/* Preis oben, darunter „Details" (sekundär) + Warenkorb (primär), gestapelt.
   Mobile: Warenkorb wird zum Icon. Voll breit → nie abgeschnitten. */
.cav-hcard__buy{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.cav-hcard__actions{ display:flex; flex-direction:column; gap:8px; }
.cav-hcard__details{ display:block; box-sizing:border-box; text-align:center; background:#fff; border:1.5px solid var(--cav-navy); color:var(--cav-navy); font-family:inherit; font-weight:800; font-size:13px; padding:8.5px 14px; border-radius:999px; text-decoration:none; white-space:nowrap; transition:background .15s ease, color .15s ease; }
.cav-hcard__details:hover{ background:var(--cav-navy); color:#fff; }
.cav-hcard__addbtn{ display:block; box-sizing:border-box; width:100%; text-align:center; white-space:nowrap; }
.cav-hcard__lbl-ic{ display:none; }
@media(max-width:640px){
  .cav-hcard__actions{ flex-direction:row; align-items:stretch; gap:8px; }
  .cav-hcard__details{ flex:1; font-size:12.5px; padding:9px 10px; }
  .cav-hcard__addbtn{ flex:none; width:auto; font-size:12.5px !important; padding:9px 18px !important; }
  .cav-hcard__lbl-lg{ display:none; }
  .cav-hcard__lbl-ic{ display:inline-flex; vertical-align:middle; }
}