/*!
 * 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); }

/* ===================== 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-warm); font-weight:700; margin-bottom:18px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.cav-breadcrumb a{ color: var(--cav-warm); 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-warm); 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-warm); 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-warm); font-size:14px; line-height:1; }
.cav-activefilters__count{ margin-left:auto; color: var(--cav-warm); 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:#EDE8DD; 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:#33322E; }
.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:#33322E; 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; }
.cav-prod__meta{ font-size:13px; font-weight:700; color: var(--cav-warm); 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-warm); font-weight:600; font-size:14px; margin-right:4px; }
.cav-prod__pdfnote{ font-size:12.5px; font-weight:700; color: var(--cav-warm); }

/* 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: 1fr; } }

/* 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; }
}