/* HERBELIN – „Passend dazu“ Schmuck-Block im neuen Produktlayout (Herrenuhren)
   Stand 22.10.2026 · Entwurf · nicht installiert
   Farben/Schriften wie PDP-Entwurf V19; alle Werte mit Rückfall, falls die Tokens fehlen. */
.hbps{
  --hbps-navy:var(--navy,#0d1b2a);--hbps-gold:var(--gold,#c9a961);--hbps-gold-text:var(--gold-text,#9c7b34);
  --hbps-ivory:var(--ivory,#faf7f2);--hbps-grey:var(--shop-grey,#f2f2f2);--hbps-line:var(--line-soft,#e6e2d9);
  --hbps-muted:var(--muted,#6b675f);
  font-family:var(--body,'Mulish',system-ui,sans-serif);
  background:#fff;padding:72px 32px;overflow:hidden;
}
.hbps *{box-sizing:border-box}
.hbps-in{max-width:1200px;margin:0 auto;min-width:0}
.hbps-head{text-align:center;max-width:820px;margin:0 auto 28px}
.hbps-eye{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--hbps-gold-text);font-weight:700}
.hbps h2{font-family:var(--display,'Monument Extended','Mulish',sans-serif)!important;font-weight:400;color:var(--hbps-navy);
  font-size:clamp(20px,2.2vw,28px);line-height:1.25;letter-spacing:.01em;margin:10px 0 10px;text-transform:none}
.hbps-head p{font-size:14.5px;color:var(--hbps-muted);margin:0 auto;max-width:640px;line-height:1.55}

.hbps-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hbps-card{margin:0;padding:0;min-width:0}
.hbps-card a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--hbps-navy)}
.hbps-pic{display:block;aspect-ratio:1;background:var(--hbps-grey);border-radius:12px;overflow:hidden;margin-bottom:12px}
.hbps-pic img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hbps-card a:hover .hbps-pic img{transform:scale(1.04)}
.hbps-card a:focus-visible{outline:2px solid var(--hbps-gold);outline-offset:4px;border-radius:12px}
.hbps-k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--hbps-muted);margin-bottom:4px}
.hbps-n{font-size:14px;font-weight:600;line-height:1.35;color:var(--hbps-navy)}
.hbps-p{margin-top:6px;font-size:14px;color:var(--hbps-navy)}
.hbps-p .woocommerce-Price-amount{font-weight:600}
.hbps-p small{font-size:12px;color:var(--hbps-muted);font-weight:400}
.hbps-more{text-align:center;margin:28px 0 0;font-size:14px;color:var(--hbps-muted)}
.hbps-more a{color:var(--hbps-navy);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Handy + Tablet hochkant: eine wischbare Reihe, die Seite selbst scrollt nie seitlich */
@media (max-width:900px){
  .hbps{padding:48px 16px}
  .hbps-head{margin-bottom:20px}
  .hbps-row{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:0 -16px;padding:0 16px 6px;scroll-padding-inline:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hbps-row::-webkit-scrollbar{display:none}
  .hbps-card{flex:0 0 62%;max-width:280px;scroll-snap-align:start}
  .hbps-n{font-size:13.5px}
  .hbps-more{display:flex;flex-direction:column;gap:8px;margin-top:20px}
  .hbps-more span[aria-hidden]{display:none}
}
@media (prefers-reduced-motion:reduce){.hbps-pic img{transition:none}}

/* V3 28.10.2026: kompakte Reihe in der rechten Spalte – wie herbelin.com */
.hbps-r{font-family:var(--hbpn-body,'Mulish',system-ui,sans-serif);margin:28px 0 0;min-width:0}
.hbps-r *{box-sizing:border-box}
.hbps-r-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.hbps-r h2{font-family:var(--hbpn-body,'Mulish',sans-serif)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--hbpn-navy,#0d1b2a)!important;margin:0!important;line-height:1.4}
.hbps-r-nav{display:flex;gap:8px;flex:none}
.hbps-r-nav button{width:30px;height:30px;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:var(--hbpn-panel,#f5f4f1);color:var(--hbpn-navy,#0d1b2a);font-size:14px;line-height:30px;cursor:pointer;transition:background .2s}
.hbps-r-nav button:hover:not(:disabled){background:var(--hbpn-line-soft,#e6e2d9)}
.hbps-r-nav button:disabled{opacity:.4;cursor:default}
.hbps-r .hbps-r-row{list-style:none;margin:0!important;padding:0!important;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.hbps-r-row::-webkit-scrollbar{display:none}
.hbps-r .hbps-r-row .hbps-c{flex:0 0 calc((100% - 16px) / 3);min-width:0;margin:0!important;padding:0;scroll-snap-align:start;background:var(--hbpn-panel,#f5f4f1);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.hbps-c-pic{display:block;aspect-ratio:1;padding:12%}
.hbps-c-pic img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;margin:0;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hbps-c:hover .hbps-c-pic img{transform:scale(1.05)}
.hbps-c-f{display:flex;align-items:flex-end;gap:8px;padding:0 12px 12px;margin-top:auto}
.hbps-c-t{flex:1;min-width:0;text-decoration:none;color:var(--hbpn-navy,#0d1b2a)}
.hbps-c-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:600;line-height:1.3}
.hbps-c-p{display:block;margin-top:3px;font-size:12px;color:var(--hbpn-muted,#6b675f)}
.hbps-c-cart{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--hbpn-navy,#0d1b2a);color:#fff!important;transition:background .2s}
.hbps-c-cart:hover{background:var(--hbpn-navy-deep,#06101c)}
@media (max-width:900px){
  .hbps-r .hbps-r-row .hbps-c{flex-basis:44%}
  .hbps-r h2{font-size:11px!important;letter-spacing:.1em!important}
}
/* V3b: volle Breite unter Galerie + Kaufbereich – 4 Karten nebeneinander, Abstände wie herbelin.com */
body.hbpn .hbpn-slot.hbpn-slot--nach_kaufbox{max-width:none;margin:0}
.hbpn-slot--nach_kaufbox .hbps-r{max-width:none;margin:0;padding:0}   /* Lage (bündig links/rechts, Abstand oben) setzt pdp-neu.js */
.hbpn-slot--nach_kaufbox .hbps-r .hbps-r-row .hbps-c{flex-basis:calc((100% - 24px) / 4)}
.hbpn-slot--nach_kaufbox .hbps-c-n{font-size:14px}
.hbpn-slot--nach_kaufbox .hbps-c-p{font-size:13px}
.hbpn-slot--nach_kaufbox .hbps-c-f{padding:0 16px 16px}
.hbpn-slot--nach_kaufbox .hbps-c-cart{width:44px;height:44px}
@media (max-width:900px){
  .hbpn-slot--nach_kaufbox .hbps-r{margin-top:32px}
  .hbpn-slot--nach_kaufbox .hbps-r .hbps-r-row .hbps-c{flex-basis:44%}
}