/* SSA B3 (08.10.2026): Performance, Sicherheit, Barrierefreiheit, Mobil */

/* --- Hero als WebP (PNG-Fallback steht in custom.css) --- */
.ssa-premium-hero-bg{background-image:image-set(url('/bilder/intern/banners/hero1_premium_shishas.webp') type('image/webp'),url('/bilder/intern/banners/hero1_premium_shishas.png') type('image/png'))!important}

/* --- FontAwesome lokal (kein use.fontawesome.com mehr) --- */
@font-face{font-family:'Font Awesome 5 Free';font-style:normal;font-weight:900;font-display:block;src:url('/templates/NOVAChild/themes/my-nova/fonts/fa-solid-900.woff2') format('woff2')}
@font-face{font-family:'Font Awesome 5 Free';font-style:normal;font-weight:400;font-display:block;src:url('/templates/NOVAChild/themes/my-nova/fonts/fa-regular-400.woff2') format('woff2')}
@font-face{font-family:'Font Awesome 5 Brands';font-style:normal;font-weight:400;font-display:block;src:url('/templates/NOVAChild/themes/my-nova/fonts/fa-brands-400.woff2') format('woff2')}

/* --- Menü: Zähler wie "Pod Salt (2)" ausblenden --- */
.more-subcategories{display:none!important}

/* --- Desktop-Kategorieleiste (ersetzt die 5 fest verdrahteten Header-Links) --- */
.ssa-top-nav-items{display:none!important}
.ssa-catbar{display:none}
@media (min-width:993px){
  .ssa-catbar{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;column-gap:1.6rem;padding:.15rem 1rem;background:#fff;border-top:1px solid #ece7df;font-family:'Geist Sans',system-ui,sans-serif;font-weight:500;font-size:.92rem}
  .ssa-catbar a{display:inline-block;padding:.55rem .15rem;color:#1d2733;text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
  .ssa-catbar a:hover{color:#d6443f}
  .ssa-catbar a[aria-current="page"]{color:#d6443f;border-bottom-color:#d6443f}
  .ssa-catbar a.ssa-catbar-sale{font-weight:500}
  .ssa-catbar a.ssa-catbar-sale[aria-current="page"]{color:#d6443f}
  .ssa-catbar-badge{display:inline-block;margin-right:.4rem;padding:.05rem .38rem;border-radius:999px;background:#d6443f;color:#fff;font-size:.72rem;font-weight:700;line-height:1.35;vertical-align:.06em}
}

/* --- Sichtbarer Fokus --- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible{outline:2px solid #1d2733!important;outline-offset:2px!important;box-shadow:0 0 0 5px rgba(255,255,255,.92)!important}

/* --- Cookie-Banner: Ablehnen gleichwertig zu Alle akzeptieren --- */
#consent-banner-btn-close,button#consent-banner-btn-close,button#consent-banner-btn-close.consent-btn{background:#1d2733!important;background-color:#1d2733!important;color:#fff!important;border:2px solid #1d2733!important;border-radius:999px!important;padding:.75rem 1.5rem!important;font-family:'Geist Sans',sans-serif!important;font-weight:600!important;text-decoration:none!important;box-shadow:0 4px 16px rgba(29,39,51,.22)!important}
#consent-banner-btn-close:hover{background:#0f161d!important;border-color:#0f161d!important;color:#fff!important}

/* --- Mobil --- */
@media (max-width:767.98px){
  /* Cookie-Banner kompakt */
  #consent-manager.active:not(.mini){max-height:34vh!important;overflow:auto!important}
  #consent-manager #consent-banner{padding:.55rem .7rem .6rem!important}
  #consent-manager .consent-banner-icon{display:none!important}
  #consent-manager .consent-banner-description .consent-display-2{font-size:.95rem!important;line-height:1.2!important;margin:0 0 .25rem!important;display:block}
  #consent-manager .consent-banner-description p{font-size:.76rem!important;line-height:1.3!important;margin:0 0 .3rem!important}
  #consent-manager .consent-banner-description a{font-size:.76rem!important}
  #consent-manager .consent-btn-helper{display:grid!important;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.4rem}
  #consent-manager .consent-btn-helper>div{margin:0!important;padding:0!important;width:auto!important}
  #consent-manager .consent-btn-helper>.consent-accept{order:1}
  #consent-manager .consent-btn-helper>div:nth-child(3){order:2}
  #consent-manager .consent-btn-helper>div:nth-child(2){order:3;grid-column:1/-1}
  #consent-manager .consent-btn-helper .consent-btn{padding:.5rem .6rem!important;font-size:.85rem!important;min-height:44px!important;margin:0!important}
  #consent-manager #consent-banner-btn-settings{min-height:40px!important}

  /* Kategorie-Kacheln (Marken) zweispaltig statt 1 Kachel pro Bildschirm */
  .row.row-eq-height.content-cats-small,.content-cats-small.content-cats-small{display:grid!important;grid-template-columns:1fr 1fr;gap:.6rem!important;row-gap:.6rem!important;margin-left:0!important;margin-right:0!important;margin-bottom:1.5rem!important}
  .content-cats-small>.col,.content-cats-small>div{max-width:none!important;width:auto!important;flex:none!important;padding:0!important;margin:0!important}
  .content-cats-small .sub-categories>a{padding:.5rem .5rem 0!important}
  .content-cats-small .subcategories-image{height:72px!important;min-height:72px!important;max-height:72px!important;padding:.3rem!important}
  .content-cats-small .subcategories-image img{max-height:60px!important}
  .content-cats-small .sub-categories>div{padding:.55rem .7rem .7rem!important;gap:.3rem!important}
  .content-cats-small .caption a{font-size:.9rem!important}
  .content-cats-small .sub-categories ul{display:none!important}

  /* Kategorie-Intro einklappbar */
  .ssa-collapsible.ssa-collapsed{max-height:5.4em;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
  .ssa-more-btn{display:inline-block;margin:-.6rem 0 1rem;min-height:44px;padding:.5rem .9rem;border:1px solid #b3302b;border-radius:999px;background:#fff;color:#b3302b;font:600 .88rem 'Geist Sans',sans-serif;cursor:pointer}
}

/* --- Tap-Ziele >= 44 px (Touch/Tablet) --- */
@media (max-width:991.98px){
  .ssa-qty{min-height:44px}
  .ssa-qty-btn{width:44px;min-height:44px}
  #burger-menu,.navbar-toggler{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0}
  .ssa-mnav-search-btn{min-width:44px;min-height:44px}
  header .nav-icons a.nav-link,header .nav-link-custom{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  #consent-settings-btn{width:44px!important;height:44px!important}
  .breadcrumb-link,.breadcrumb a{display:inline-block;padding:.75rem .3rem;margin:-.75rem -.3rem}
  .ssa-brand-pill{min-height:44px;display:inline-flex;align-items:center}
  .withdrawal-link{min-height:44px;display:inline-flex!important;align-items:center}
  .slick-dots button,.slick-dots li,.carousel-indicators li,.owl-dot,.swiper-pagination-bullet,.nivo-control{position:relative}
  .slick-dots button::after,.carousel-indicators li::after,.owl-dot::after,.swiper-pagination-bullet::after,.nivo-control::after{content:"";position:absolute;inset:-14px}
}

/* ===== B4 (08.10.2026) ===== */

/* Fokusring Formularfelder in Shop-Rot (kontraststark auf Weiß, ca. 6,5:1) */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b3302b!important;outline-offset:2px!important;box-shadow:0 0 0 5px rgba(255,255,255,.92)!important}
/* Checkout (custom.css: body.is-checkout input:focus ohne Outline) und weitere Felder mit höherer Spezifität */
html body :is(input,select,textarea):not([type="hidden"]):focus-visible{outline:3px solid #b3302b!important;outline-offset:2px!important;box-shadow:0 0 0 5px rgba(255,255,255,.92)!important}
/* Suchfeld und Mengenfeld: custom.css nimmt per ID-Selektor den Rahmen weg, der Ring sitzt daher am umgebenden Feld */
form:has(#search-header:focus-visible),#quantity-grp:has(#quantity:focus-visible){outline:3px solid #b3302b!important;outline-offset:2px!important;box-shadow:0 0 0 5px rgba(255,255,255,.92)!important}
html body :is(#search-header,#quantity):focus-visible{outline:none!important;box-shadow:none!important}
@supports not selector(:has(*)){
  html body :is(#search-header,#quantity):focus-visible{outline:3px solid #b3302b!important;outline-offset:-3px!important}
}

/* Checkout: Kategorieleiste ausblenden (Header bleibt reduziert) */
body.is-checkout .ssa-catbar{display:none!important}

/* Cookie-Banner offen: Fingerabdruck-Icon (Banner-Deko und Einstellungs-Button) ausblenden */
#consent-manager.active:not(.mini) .consent-banner-icon,#consent-manager.active:not(.mini) #consent-settings-btn{display:none!important}

/* Textlinks mobil/Tablet: Tap-Fläche ca. 44 px ohne Änderung des Zeilenbilds */
@media (max-width:991.98px){
  #footer p a,#sidebox126 a,#footer .footnote-vat a,#footer #system-credits a,.price-note a,.footnote-vat a,#ssa-cc-pdp a,#ppc-productDetails-instalment-banner a{display:inline-block;padding:.85rem .3rem;margin:-.85rem -.3rem}
  #footer nav.ssa-footer-service a{display:inline-block;padding:.75rem .1rem}
  #footer .box-normal-link,#footer .box-linkgroup a{display:flex;align-items:center;min-height:44px}
  html body .withdrawal-link-wrapper a.withdrawal-link.btn{padding:.85rem .5rem!important;margin:-.85rem -.5rem!important}
  ul.info-essential a{display:flex;align-items:center;min-height:44px}
  .question-on-item .btn-link,#z1655{min-height:44px}
  .nav-tabs .nav-link,#logo .navbar-brand,.ssa-sb-btn{min-height:44px}
  .breadcrumb-link,.breadcrumb a{padding:.85rem .3rem;margin:-.85rem -.3rem}
}

/* --- F (08.10.2026): Cookie-Banner Desktop und Mobil: "Alle akzeptieren" und "Ablehnen" identisch gewichtet (gleiche Größe, gleicher Stil, beide gefüllt) --- */
#consent-banner-btn-all,button#consent-banner-btn-all,button#consent-banner-btn-all.consent-btn{background:#1d2733!important;background-color:#1d2733!important;color:#fff!important;border:2px solid #1d2733!important;border-radius:999px!important;padding:.75rem 1.5rem!important;font-family:'Geist Sans',sans-serif!important;font-weight:600!important;text-decoration:none!important;box-shadow:0 4px 16px rgba(29,39,51,.22)!important}
#consent-banner-btn-all:hover{background:#0f161d!important;border-color:#0f161d!important;color:#fff!important}

/* SSA H2b (08.10.2026) */
.ssa-marquee-wrap{overflow:hidden!important;max-width:100vw}
.checkout-steps .ssa-step-short{font-size:.78rem;font-weight:600;letter-spacing:.02em;text-transform:none;white-space:nowrap}
@media (max-width:767.98px){
  .checkout-steps .step{flex:1 1 0;min-width:0;padding-left:.25rem;padding-right:.25rem}
  .checkout-steps .step-content{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center}
  .checkout-steps .step a{display:block}
  .cart-summary .price,.cart-dropdown-total-item-price,.total-sum,.price_overall,.basket-summary .price{white-space:nowrap}
}

/* Produktkarten Listen: oben gerundet, gleich hoch, Kaufleiste unten bündig */
#result-wrapper .productbox .productbox-image{border-radius:17px 17px 0 0!important}
#result-wrapper .product-wrapper{display:flex}
#result-wrapper .product-wrapper>.productbox{flex:1 1 auto;display:flex;flex-direction:column}
#result-wrapper .productbox>form.form-basket{flex:1 1 auto;display:flex;flex-direction:column}
#result-wrapper .productbox .productbox-inner{flex:1 1 auto;display:flex;flex-direction:column}
#result-wrapper .productbox .productbox-inner>.row{flex:1 1 auto;align-content:flex-start}
#result-wrapper .productbox .ssa-add-wrap{margin-top:auto}
#result-wrapper .product-list{align-items:stretch!important}

/* Letzte Karte hatte keinen margin-bottom (NOVA :not(:last-child)) und wurde dadurch hoeher gestreckt: Abstand per row-gap */
#result-wrapper #product-list .product-wrapper{margin-bottom:0!important}
#result-wrapper #product-list{row-gap:4rem}