/* ══════════════════════════════════════════════════════════════
   Rompe Design — Conversion-Bausteine (inc/conversion.php)
   Editorial-Stil: Off-White, feine Linien, 0-Radius, Outfit/Inter,
   Fraunces nur als <em>-Akzent. Keine Fake-Urgency.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Trust-Leiste unter dem Warenkorb-Button (PDP) ── */
.rompe-trust-points{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);background:#fff;margin:1.5rem 0 0}
.rompe-trust-point{display:flex;align-items:flex-start;gap:.7rem;padding:.85rem 1rem;font-size:.79rem;line-height:1.45;color:var(--text)}
.rompe-trust-point:nth-child(even){border-left:1px solid var(--border)}
.rompe-trust-point:nth-child(n+3){border-top:1px solid var(--border)}
.rompe-trust-point svg{width:18px;height:18px;flex:none;margin-top:.05rem;color:var(--primary);opacity:.8}
@media(max-width:560px){
  .rompe-trust-points{grid-template-columns:1fr}
  .rompe-trust-point:nth-child(even){border-left:0}
  .rompe-trust-point+.rompe-trust-point{border-top:1px solid var(--border)}
}

/* ── 2. Komplett-Look "Passt dazu" (PDP, nach den Produktdetails) ── */
.rompe-complete-look{clear:both;width:100%;margin-top:3.5rem;border-top:1px solid var(--border);padding-top:3rem;display:grid;grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);gap:3rem;align-items:start}
.rompe-complete-look__intro h2{font-size:clamp(1.9rem,3.5vw,3.2rem);letter-spacing:-.035em;line-height:.98;margin:0 0 1rem}
.rompe-complete-look__intro p{color:var(--text-light);font-size:.95rem;line-height:1.7;max-width:42ch;margin:0}
.rompe-complete-look__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.rompe-look-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);transition:border-color .25s ease,transform .25s ease}
.rompe-look-card:hover{border-color:var(--primary);transform:translateY(-3px)}
.rompe-look-card__img{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--bg-grey)}
.rompe-look-card__img img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .6s ease}
.rompe-look-card:hover .rompe-look-card__img img{transform:scale(1.04)}
.rompe-look-card__body{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.15rem 1.25rem}
.rompe-look-card__name{font-family:var(--font-h);font-weight:600;font-size:1.02rem;letter-spacing:-.015em;color:var(--primary);line-height:1.2}
.rompe-look-card__price{font-size:.88rem;color:var(--text)}
.rompe-look-card__price .woocommerce-Price-amount{font-weight:600}
.rompe-look-card__cta{margin-top:.5rem;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--primary);position:relative;align-self:flex-start}
.rompe-look-card__cta::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--primary);transform:scaleX(.35);transform-origin:left;transition:transform .25s ease}
.rompe-look-card:hover .rompe-look-card__cta::after{transform:scaleX(1)}
@media(max-width:900px){
  .rompe-complete-look{grid-template-columns:1fr;gap:2rem}
}

/* ── 3. Sticky-Kaufleiste mobil (<1000px) ── */
.rompe-sticky-buy{display:none}
@media(max-width:999.98px){
  .rompe-sticky-buy{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px));background:rgba(250,250,247,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--border);box-shadow:0 -12px 30px -18px rgba(0,0,0,.25);transform:translateY(105%);transition:transform .3s ease}
  .rompe-sticky-buy.is-visible{transform:none}
  .rompe-sticky-buy__info{display:flex;flex-direction:column;gap:.1rem;min-width:0}
  .rompe-sticky-buy__name{font-family:var(--font-h);font-weight:600;font-size:.9rem;letter-spacing:-.01em;color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rompe-sticky-buy__price{font-size:.8rem;color:var(--text-light)}
  .rompe-sticky-buy__price .woocommerce-Price-amount{font-weight:600;color:var(--text)}
  .rompe-sticky-buy__btn{flex:none;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  .rompe-sticky-buy{transition:none}
}

/* Linda-Pill (footer.php, Basis-Styles in main.css: bottom:24px/14px) würde
   mobil die rechte Hälfte der Sticky-Kaufleiste überdecken — auf Produkt-
   seiten deshalb per bottom-Offset ÜBER die Leiste heben (Leiste ist nur
   <1000px sichtbar; Offset = Leistenhöhe ~58px + Luft + Safe-Area). */
@media(max-width:999.98px){
  body.single-product .linda-bubble{bottom:calc(70px + env(safe-area-inset-bottom,0px))}
}

/* Kurzer Fokus-Impuls, wenn die Sticky-Leiste zum Größenwähler scrollt */
.rompe-flash{animation:rompeFlash 1.2s ease}
@keyframes rompeFlash{
  0%,100%{outline:2px solid transparent;outline-offset:6px}
  25%,60%{outline:2px solid var(--primary);outline-offset:3px}
}
@media(prefers-reduced-motion:reduce){
  .rompe-flash{animation:none}
}

/* ── 4. B2B-Konditionen-Zeile über dem Shop-Loop ── */
.rompe-b2b-note{display:flex;align-items:center;gap:.7rem;padding:.85rem 0;margin-bottom:2rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:.82rem;letter-spacing:.04em;color:var(--text-light);line-height:1.4}
.rompe-b2b-note svg{width:16px;height:16px;flex:none;color:var(--primary);opacity:.8}
.rompe-b2b-note strong{color:var(--primary);font-weight:700;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;margin-right:.15rem}
@media(max-width:560px){
  .rompe-b2b-note{font-size:.76rem}
}

/* ── 5. Kundenlogo-Streifen Startseite (Optik wie /referenzen/) ── */
.client-trust-strip{background:var(--bg);border-bottom:1px solid var(--border);padding:1.9rem 0}
.client-trust-strip__inner{display:flex;align-items:center;gap:1rem 3rem;flex-wrap:wrap}
.client-trust-strip__label{font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text-light);white-space:nowrap;display:inline-flex;align-items:center;gap:.6rem}
.client-trust-strip__label::after{content:'';width:32px;height:1px;background:var(--border)}
/* gleiche Logo-Optik wie .logo-strip auf page-referenzen.php: Graustufen, Hover Farbe */
.client-trust-strip .logo-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:1.75rem 3rem;flex:1;min-width:0;padding:0}
.client-trust-strip .logo-strip img{height:44px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.55;mix-blend-mode:multiply;transition:filter .25s ease,opacity .25s ease}
.client-trust-strip .logo-strip img:hover{filter:grayscale(0);opacity:1}
@media(max-width:640px){
  .client-trust-strip{padding:1.4rem 0}
  .client-trust-strip__inner{gap:1rem 1.5rem}
  .client-trust-strip .logo-strip{gap:1.25rem 1.75rem}
  .client-trust-strip .logo-strip img{height:34px;max-width:110px}
}

/* Finishing 07/2026: Auf Produktseiten sitzt die Linda-Bubble mobil höher
   (über der Sticky-Kaufleiste) — der Footer braucht dort entsprechend mehr
   Freiraum, damit Copyright + AGB nicht verdeckt werden. */
@media (max-width: 1100px) {
  body.single-product .footer-bottom { padding-bottom: 170px; }
}
