/* Ergänzungen für Shop-Funktionen. style.css bleibt unverändert. */

/* Header rechts: CTA + Warenkorb */
.hb-header-right { display: flex; align-items: center; gap: 24px; }
.hb-cart-link { position: relative; display: inline-flex; align-items: center; background: none; border: 0; padding: 4px; color: var(--gold); }
.hb-cart-link .ui-icon { width: 22px; height: 22px; }
.hb-cart-count { position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--gold); color: var(--black); font-size: 9px; line-height: 16px; text-align: center; font-weight: 500; }
.hb-cart-link.is-empty { display: none; } /* leer = Header wie im Original */

/* Alle Kollektionslinks auch auf kleinen Bildschirmen erreichbar halten. */
#navigation { overflow-y: auto; overscroll-behavior-y: contain; }
#navigation > a { flex-shrink: 0; }

/* Produkt-Dialog: Variante + Warenkorb */
.detail-copy .hb-add-form { margin-top: 22px; }
.hb-variant { display: block; margin-bottom: 16px; }
.hb-variant span { display: block; font-size: 9px; letter-spacing: 1.6px; color: #c9b592; margin-bottom: 8px; text-transform: uppercase; }
.hb-variant select { width: 100%; background: transparent; color: var(--white); border: 0; border-bottom: 1px solid #bda07966; padding: 8px 0; font: inherit; font-size: 14px; outline: 0; border-radius: 0; }
.hb-variant select:focus-visible { border-bottom-color: var(--gold); }
.hb-variant option { background: #0d0c0b; }
.detail-copy .hb-add-button { width: 100%; margin-top: 0; border-color: var(--gold); color: #fff; }
.detail-copy .hb-add-button:disabled { opacity: .45; cursor: default; }
.detail-copy .hb-shop-link { width: 100%; }
.hb-add-status { font-size: 12px; color: #d4bb98; margin-top: 12px; }

/* Warenkorb als Seitenleiste */
dialog.hb-cart { margin: 0 0 0 auto; height: 100svh; max-height: 100svh; width: 440px; max-width: 100vw; border-width: 0 0 0 1px; display: flex; flex-direction: column; }
dialog.hb-cart:not([open]) { display: none; }
.hb-cart-head { padding: 34px 32px 22px; border-bottom: 1px solid var(--border); }
.hb-cart-head h2 { font-size: 34px; margin-top: 10px; }
.hb-cart-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; transition: opacity .2s; }
.hb-cart-body.is-busy { opacity: .5; pointer-events: none; }
.hb-cart-empty { padding: 34px 32px; color: var(--muted); font-size: 14px; }
.hb-cart-error { margin: 18px 32px 0; color: #e0b38a; font-size: 12px; }
.hb-lines { list-style: none; margin: 0; padding: 8px 32px; flex: 1; }
.hb-line { display: grid; grid-template-columns: 74px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid #bda07918; }
.hb-line img, .hb-line-noimg { width: 74px; height: 92px; object-fit: cover; background: #191817; display: block; }
.hb-line h3 { font: 400 15px/1.4 'Outfit', sans-serif; }
.hb-line-info p { font-size: 12px; color: var(--muted); margin-top: 4px; }
.hb-qty { display: inline-flex; align-items: center; margin-top: 12px; border: 1px solid #bda07945; }
.hb-qty button { background: none; border: 0; width: 30px; height: 30px; color: var(--gold); font-size: 16px; }
.hb-qty span { min-width: 22px; text-align: center; font-size: 13px; }
.hb-line-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; font-size: 13px; color: #c1ad8b; white-space: nowrap; }
.hb-remove { background: none; border: 0; padding: 0; font-size: 10px; letter-spacing: 1px; color: #7e776c; text-decoration: underline; }
.hb-cart-foot { padding: 24px 32px 30px; border-top: 1px solid var(--border); }
.hb-subtotal { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; letter-spacing: 1.6px; color: #c9b592; }
.hb-subtotal strong { font: 400 22px 'Bodoni Moda', Georgia, serif; letter-spacing: 0; color: var(--white); }
.hb-cart-note { font-size: 11px; line-height: 1.65; color: #7e776c; margin: 14px 0 20px !important; }
.hb-cart-note a { color: #b9a582; text-decoration: underline; }
.hb-checkout { width: 100%; border-color: var(--gold); color: #fff; }

@media (max-width: 700px) {
  .hb-header-right { gap: 16px; }
  .hb-header-right:has(.hb-cart-link:not(.is-empty)) .header-cta { display: none; }
  .hb-cart-head, .hb-lines, .hb-cart-foot { padding-left: 22px; padding-right: 22px; }
  .hb-cart-empty { padding-left: 22px; }
}

/* Dynamisch aus Shopify geladene Inhalte */
.hb-status { padding: 80px 24px; text-align: center; color: var(--muted); }
.hb-status a { color: inherit; text-decoration: underline; }
.hb-desc ul, .hb-desc ol { margin: 8px 0 12px 1.2em; padding: 0; }
.hb-desc li { margin: 2px 0; }
.hb-desc p { margin: 0 0 10px; }

/* Hinweis „DEV-Modus“ in der Warenkorb-Überschrift */
.hb-dev-badge { display: block; margin-top: 10px; padding: 6px 10px; width: fit-content; font: 500 11px/1.3 'Outfit', sans-serif; letter-spacing: .08em; color: #080808; background: #e0b84c; }

/* Logo: handschriftliche Signatur aus harrybrunner.com */
.header-logo img{width:auto;height:64px;object-fit:contain}
.footer-logo img{width:auto;height:120px;object-fit:contain;margin:auto;opacity:.92;transition:opacity .3s}
.footer-logo:hover img{opacity:1}
header.scrolled .header-logo img{height:52px}
@media(max-width:700px){.header-logo img{height:46px}header.scrolled .header-logo img{height:40px}.footer-logo img{height:86px}}

/* Galerie im Produkt-Dialog */
.hb-gallery{min-width:0;background:#191817;display:flex;flex-direction:column}
.hb-g-stage{position:relative;flex:1;min-height:500px;display:flex}
.hb-g-track{display:flex;flex:1;min-width:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.hb-g-track::-webkit-scrollbar{display:none}
.hb-g-track:focus-visible{outline-offset:-4px}
.hb-g-track>img{flex:0 0 100%;width:100%;height:100%;min-height:500px;object-fit:contain;scroll-snap-align:center;scroll-snap-stop:always}
.hb-g-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid #bda07977;background:#0d0c0bcc;color:var(--gold);font-size:24px;line-height:1;padding:0 0 3px;display:grid;place-items:center;z-index:2}
.hb-g-nav.prev{left:12px}.hb-g-nav.next{right:12px}
.hb-g-nav:hover{background:#bda07925}
.hb-g-count{position:absolute;left:14px;bottom:12px;font-size:10px;letter-spacing:1.5px;color:#a59b8d;background:#0d0c0bb0;padding:4px 9px;z-index:2}
.hb-g-thumbs{display:flex;gap:8px;overflow-x:auto;padding:10px;background:#0d0c0b;scrollbar-width:none}
.hb-g-thumbs::-webkit-scrollbar{display:none}
.hb-g-thumbs button{flex:0 0 64px;height:64px;padding:0;border:1px solid transparent;background:#191817;opacity:.55;transition:opacity .25s,border-color .25s}
.hb-g-thumbs button[aria-selected=true]{opacity:1;border-color:var(--gold)}
.hb-g-thumbs button:hover{opacity:1}
.hb-g-thumbs img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.hb-g-stage{min-height:0;height:300px}.hb-g-track>img{min-height:0}.hb-g-nav{display:none}.hb-g-thumbs button{flex-basis:54px;height:54px}}
@media(prefers-reduced-motion:reduce){.hb-g-track{scroll-behavior:auto}}

/* Portrait-Signatur: Original-Logo statt Schriftart */
.portrait-wrap .portrait-signature img,.portrait-wrap:hover .portrait-signature img{width:auto;height:clamp(64px,6.4vw,100px);object-fit:contain;mix-blend-mode:normal;filter:none;transform:none;transition:none}
@media(max-width:700px){.portrait-wrap .portrait-signature img,.portrait-wrap:hover .portrait-signature img{height:68px}}

/* ---------- Highlight „The Duck Ring“ (ersetzt vorübergehend den Collector’s Drop) ---------- */
.duck{position:relative;isolation:isolate;display:grid;grid-template-columns:1.15fr 1fr;gap:6%;align-items:center;padding-top:90px;padding-bottom:120px}
.duck[hidden]{display:none}
.duck.duck-no-image{grid-template-columns:1fr}
.duck-bg{position:absolute;top:6%;left:0;width:100%;text-align:center;white-space:nowrap;font:500 clamp(80px,13vw,210px) 'Outfit',sans-serif;letter-spacing:-6px;color:#fff;opacity:.025;z-index:-1;overflow:hidden;pointer-events:none}
.duck-visual{position:relative;width:calc(100% + 40px);margin-left:-40px}
.duck-visual button:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.duck-visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter .8s}
.duck-main{all:unset;cursor:pointer;position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden}
.duck-main img{object-fit:contain;object-position:50% 50%;filter:brightness(.92) contrast(1.05);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 58%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 58%,transparent 100%)}
.duck-main:hover img{transform:scale(1.04);filter:brightness(1) contrast(1.08)}
.duck-caption{display:block;margin-top:18px;font-size:9px;letter-spacing:2px;color:#77705f;writing-mode:horizontal-tb}
.duck-copy{container-type:inline-size;max-width:470px}
.duck h2{font-size:clamp(36px,4vw,60px);line-height:1.08;margin:14px 0 24px;overflow-wrap:anywhere}
.duck .intro{max-width:420px}
.duck-buy{margin-top:28px}
.duck-copy .detail-price{margin:0;color:var(--gold)}
.duck-copy small{display:block;margin-top:12px;font-size:11px;color:var(--muted)}
.duck-cta{width:100%;margin-top:20px;border-color:var(--gold);color:#fff}
@media(prefers-reduced-motion:reduce){.duck-visual img{transition:none}.duck-main:hover img{transform:none}}
@media(max-width:1050px){.duck{gap:4%;grid-template-columns:1fr 1fr}.duck-visual{width:calc(100% + 20px);margin-left:-20px}}
@media(max-width:700px){
  .duck{display:flex;flex-direction:column;padding-top:40px;padding-bottom:65px;gap:0}
  .duck-bg{top:30px;font-size:17vw;letter-spacing:-2px}
  .duck-visual{width:100%;margin:0 0 34px}
  .duck-caption{font-size:8px;letter-spacing:1.5px}
  .duck-copy{text-align:center;max-width:none;width:100%}
  .duck .intro{margin-inline:auto}
  .duck h2{font-size:clamp(40px,13cqi,58px);margin:10px 0 20px}
  .duck-cta{margin-top:26px}
}
