/* =========================================================
   STAUFERGOLD — NOVAChild /themes/my-nova/custom.css
   CLEAN BASE + STARTSEITE + PLP CATEGORY HERO
   ========================================================= */

/* -------------------------
   1) Design Tokens
------------------------- */
:root{
  --sg-bg: #F8F6F2;
  --sg-surface: #FFFFFF;
  --sg-text: #26231F;
  --sg-heading: #1E1B18;
  --sg-muted: #6B645C;
  --sg-border: #E6E1DA;
  --sg-gold: #B89B5E;

  --sg-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sg-font-heading: Georgia, "Times New Roman", serif;

  /* Alias-Namen für spätere Blöcke */
  --sg-font-sans: var(--sg-font-ui);
  --sg-font-display: var(--sg-font-heading);

  --sg-maxw: 1240px;

  --sg-header-h: 84px;
  --sg-logo-h: 52px;
  --sg-nav-size: 14px;
  --sg-nav-weight: 600;
  --sg-nav-letter: .22px;

  --sg-icon-size: 18px;
  --sg-wa-size: 38px;
}
/* NOVA/Bootstrap Variablen harmonisieren */
:root{
  --primary: var(--sg-gold);
  --warning: var(--sg-gold);
  --yellow:  var(--sg-gold);
  --primary-rgb: 184,155,94;
  --warning-rgb: 184,155,94;
}

/* -------------------------
   2) Base Look & Feel
------------------------- */
html, body{
  background: var(--sg-bg);
  color: var(--sg-text);
  font-family: var(--sg-font-ui);
}
#main-wrapper{ background: var(--sg-surface); }

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family: var(--sg-font-heading) !important;
  color: var(--sg-heading) !important;
  font-weight: 600 !important;
}

a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--sg-gold); text-decoration: none; }

:focus-visible{
  outline: 2px solid rgba(184,155,94,.45);
  outline-offset: 2px;
}

.form-control, input, select, textarea{ border-radius: 12px !important; }
.btn{ border-radius: 999px !important; font-weight: 650; }
.btn-primary{
  background-color: var(--sg-gold) !important;
  border-color: var(--sg-gold) !important;
  color: #fff !important;
}
.btn-outline-primary{
  color: var(--sg-gold) !important;
  border-color: rgba(184,155,94,.55) !important;
}
.btn-outline-primary:hover{
  color: #fff !important;
  background: var(--sg-gold) !important;
  border-color: var(--sg-gold) !important;
}

/* Boxed Breite */
@media (min-width: 1300px){
  .container, .container-xl, .container-fluid-xl{
    max-width: var(--sg-maxw) !important;
  }
}

/* -------------------------
   3) Header Layout
------------------------- */
#jtl-nav-wrapper{
  border-bottom: 1px solid var(--sg-border);
}

#jtl-nav-wrapper > .container-fluid.container-fluid-xl{
  max-width: var(--sg-maxw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

@media (min-width: 992px){
  #jtl-nav-wrapper nav.navbar{
    min-height: var(--sg-header-h) !important;
    align-items: center !important;
    padding: 0 !important;
  }

  #jtl-nav-wrapper .toggler-logo-wrapper{
    display:flex !important;
    align-items:center !important;
    min-height: var(--sg-header-h) !important;
  }
  #jtl-nav-wrapper .navbar-brand{ padding:0 !important; }
  #jtl-nav-wrapper #shop-logo{
    height: var(--sg-logo-h) !important;
    width: auto !important;
  }

  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-inner{ padding-bottom:0 !important; }

  #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item > .nav-link{
    font-family: var(--sg-font-ui) !important;
    font-size: var(--sg-nav-size) !important;
    font-weight: var(--sg-nav-weight) !important;
    letter-spacing: var(--sg-nav-letter) !important;

    display:flex !important;
    align-items:center !important;

    min-height: var(--sg-header-h) !important;
    padding: 0 .95rem !important;

    line-height: 1.25 !important;
    color: var(--sg-text) !important;

    position: relative !important;
  }

  /* Menü-Underline (robust): als Background (kein ::before-Konflikt) */
  #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item > .nav-link{
    background-image: linear-gradient(var(--sg-gold), var(--sg-gold));
    background-repeat: no-repeat;
    background-position: 50% calc(100% - 14px);
    background-size: 0% 2px;
    transition: background-size .25s ease !important;
  }
  #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item > .nav-link::before{ content:none !important; }
  #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item:hover > .nav-link,
  #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item.hover > .nav-link,
  #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item > .nav-link:focus{
    color: var(--sg-gold) !important;
  }
  #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item:hover > .nav-link,
  #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item.hover > .nav-link,
  #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item.active > .nav-link{
    background-size: 100% 2px;
  }

  /* Icons rechts */
  #jtl-nav-wrapper #shop-nav{
    display:flex !important;
    align-items:center !important;
    gap: 10px !important;
    min-height: var(--sg-header-h) !important;
  }
  #jtl-nav-wrapper #shop-nav > li{
    display:flex !important;
    align-items:center !important;
    min-height: var(--sg-header-h) !important;
  }
  #jtl-nav-wrapper #shop-nav .nav-link{
    display:inline-flex !important;
    align-items:center !important;
    min-height: var(--sg-header-h) !important;
    padding: 0 .35rem !important;
    line-height: 1.25 !important;
    color: var(--sg-text) !important;
  }
  #jtl-nav-wrapper #shop-nav .nav-link i,
  #jtl-nav-wrapper #shop-nav .nav-link span.fas,
  #jtl-nav-wrapper #shop-nav .nav-link span.far,
  #jtl-nav-wrapper #shop-nav .nav-link svg{
    font-size: var(--sg-icon-size) !important;
    color: inherit !important;
    fill: currentColor !important;
  }
  #jtl-nav-wrapper #shop-nav .nav-link:hover,
  #jtl-nav-wrapper #shop-nav .nav-link:focus{
    color: var(--sg-gold) !important;
  }

  #jtl-nav-wrapper .cart-icon-dropdown-price{
    font-size: 12px !important;
    color: var(--sg-muted) !important;
    margin-left: 6px !important;
  }
}

@media (max-width: 991.98px){
  #jtl-nav-wrapper #shop-logo{ height: 40px !important; width:auto !important; }
}

/* Mobile-Menü: Kategorien sichtbar (wenn im Markup d-none d-lg-... steht) */
@media (max-width: 991.98px){
  #jtl-nav-wrapper #mainNavigation .nav-mobile-body .navbar-nav .nav-item.d-none.d-lg-inline-block,
  #jtl-nav-wrapper #mainNavigation .nav-mobile-body .navbar-nav .nav-item.d-none.d-lg-block{
    display:block !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-mobile-body .navbar-nav .nav-item.d-none.d-lg-flex{
    display:flex !important;
  }
}

/* optional: Suche ausblenden */
#jtl-nav-wrapper #shop-nav > li#search,
#jtl-nav-wrapper #search,
#jtl-nav-wrapper .search-wrapper-dropdown{ display:none !important; }
a.btn-skip-to[href="#search-header"]{ display:none !important; }

/* Vergleichsliste aus */
#shop-nav-compare,
#comparelist-dropdown-container{ display:none !important; }

/* WhatsApp Icon (Kreis statt Pill) */
@media (min-width: 992px){
  #jtl-nav-wrapper #shop-nav a.sg-wa-nav,
  #jtl-nav-wrapper #shop-nav a#sg-wa-nav,
  #jtl-nav-wrapper #shop-nav a[aria-label*="WhatsApp"],
  #jtl-nav-wrapper #shop-nav a[title*="WhatsApp"],
  #jtl-nav-wrapper #shop-nav a[href*="wa.me"]{
    width: var(--sg-wa-size) !important;
    height: var(--sg-wa-size) !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 2px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius: 999px !important;
    background: transparent !important;
    border: 1px solid rgba(15,107,87,.20) !important;
    box-shadow:none !important;

    color:#0f6b57 !important;
  }
  #jtl-nav-wrapper #shop-nav a.sg-wa-nav:hover,
  #jtl-nav-wrapper #shop-nav a#sg-wa-nav:hover,
  #jtl-nav-wrapper #shop-nav a[aria-label*="WhatsApp"]:hover,
  #jtl-nav-wrapper #shop-nav a[title*="WhatsApp"]:hover,
  #jtl-nav-wrapper #shop-nav a[href*="wa.me"]:hover{
    background: rgba(15,107,87,.10) !important;
    border-color: rgba(15,107,87,.30) !important;
  }
}

#jtl-nav-wrapper #shop-nav .sg-wa-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}
#jtl-nav-wrapper #shop-nav .sg-wa-label{
  display:none;
}

/* Gelb-Override aus NOVA (slick hover) */
.slick-slide a:hover,
.slick-slide a:focus{
  color: var(--sg-gold) !important;
}

/* -------------------------
   4) Produkt-Hover
------------------------- */
.product-wrapper .item-slider-desc,
.product-wrapper .productbox-title,
.product-wrapper .product-title{
  transition: color .12s ease-out;
}

.product-wrapper a:hover .item-slider-desc,
.product-wrapper a:hover .productbox-title,
.product-wrapper a:hover .product-title,
.product-wrapper a:focus .item-slider-desc,
.product-wrapper a:focus .productbox-title,
.product-wrapper a:focus .product-title{
  color: var(--sg-gold) !important;
}
.product-wrapper a:hover .price,
.product-wrapper a:focus .price{
  color: var(--sg-text) !important;
}

/* -------------------------
   5) STARTSEITE: Category Tiles („Shoppe nach Kategorien“)
   WICHTIG: Hintergrundbild NICHT überschreiben!
------------------------- */
.sg-cat-grid{ display:block; margin-top: 1.25rem; }

.sg-cat-tile{
  position: relative;
  border-radius: 16px;
  overflow: hidden;

  /* Bild kommt meist inline via style="background-image:url(...)" */
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  min-height: 260px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

/* Falls das Bild als CSS-Variable gesetzt wird (OPC nutzt z.B. --sg-tile-img) */
.sg-cat-tile[style*="--sg-tile-img"]{
  background-image: var(--sg-tile-img) !important;
}

/* Wenn OPC .sg-cat-tile in .sg-cat-tile verschachtelt, vermeide doppelte Effekte */
.sg-cat-tile .sg-cat-tile{
  min-height: inherit;
  border-radius: inherit;
  box-shadow: none;
}
.sg-cat-tile .sg-cat-tile::after{
  display: none;
}



/* Overlay als Pseudo-Element (ohne background-image zu zerstören) */
.sg-cat-tile::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,.18) 62%,
    rgba(0,0,0,.48) 100%
  );
}

.sg-cat-tile__link{
  position:absolute;
  inset:0;
  display:flex !important;
  align-items:flex-end !important;
  padding: 18px;
  text-decoration:none !important;
  color:#fff !important;
}

.sg-cat-tile__content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:90%;
}

.sg-cat-tile__title{
  font-weight:650;
  letter-spacing:.2px;
  font-size:16px;
  line-height:1.15;
}
.sg-cat-tile__cta{
  font-size:13px;
  opacity:.9;
}

@media (max-width: 991.98px){
  .sg-cat-tile{ min-height: 220px; }
}
@media (max-width: 575.98px){
  .sg-cat-tile{ min-height: 200px; }
}

/* Kategorien-Panel: OPC hat hier teils Inline-Schwarz → wir erzwingen „Boutique“ Light */
.sg-cats-panel{
  background-color: #F3F0EA !important;
  border: 1px solid rgba(31,31,31,.10) !important;
  border-radius: 22px !important;
}


/* -------------------------
   6) STARTSEITE: Trust Cards (Hero Benefits)
------------------------- */
.sg-trust-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0 auto;
  padding: 10px 0;
}
@media (max-width: 991.98px){
  .sg-trust-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px){
  .sg-trust-grid{ grid-template-columns: 1fr; }
}

.sg-trust-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;

  background:#fff;
  border:1px solid var(--sg-border);
  border-radius:16px;
  padding:26px 18px;

  text-decoration:none !important;
  color: var(--sg-text) !important;

  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.sg-trust-icon{
  width:54px;
  height:54px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:2px solid rgba(38,35,31,.15);
  margin-bottom:14px;
  color: var(--sg-text);
}
.sg-trust-icon svg{ width:22px; height:22px; }

.sg-trust-title{
  font-family: var(--sg-font-heading);
  font-weight:600;
  color: var(--sg-heading);
  font-size:16px;
  line-height:1.2;
}
.sg-trust-sub{
  margin-top:6px;
  font-size:13px;
  color: var(--sg-muted);
  line-height:1.2;
}

@media (hover:hover){
  .sg-trust-card:hover{
    transform: translateY(-2px);
    border-color: rgba(184,155,94,.40);
    box-shadow: 0 14px 32px rgba(0,0,0,.10);
  }
  .sg-trust-card:hover .sg-trust-icon{
    border-color: rgba(184,155,94,.55);
    color: var(--sg-gold);
  }
}

/* -------------------------
   7) PLP Kategorie-Hero (unter Breadcrumbs)
   - robust gegen unterschiedliche Einhängepositionen
------------------------- */

/* NOVA-Standardkopf ausblenden, wenn Custom-Hero aktiv ist */
#content-wrapper.has-sg-cat-hero #result-wrapper > picture,
#content-wrapper.has-sg-cat-hero #result-wrapper > .title,
#content-wrapper.has-sg-cat-hero #result-wrapper > .desc,
#content-wrapper.has-sg-cat-hero .productlist-header-description{
  display: none !important;
}

/* etwas weniger Luft oben */
#content-wrapper.has-sg-cat-hero{
  padding-top: .5rem !important;
}
@media (min-width: 992px){
  #content-wrapper.has-sg-cat-hero{
    padding-top: .75rem !important;
  }
}

#content-wrapper.has-sg-cat-hero .breadcrumb-wrapper{
  margin-bottom: .35rem !important;
}

/* Falls der Hero innerhalb einer .row landet, immer auf volle Breite ziehen */
#content-wrapper.has-sg-cat-hero .row > .sg-cat-hero{
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  order: -10 !important;
}

/* Hero selbst */
#content-wrapper.has-sg-cat-hero .sg-cat-hero{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto 1.6rem;
  position: relative;
}

/* Bildfläche */
#content-wrapper.has-sg-cat-hero .sg-cat-hero__imagewrap{
  width: 100%;
  aspect-ratio: 16 / 5;
  overflow: hidden;
  background: #f3f3f3;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 22px;
  position: relative;
}

#content-wrapper.has-sg-cat-hero .sg-cat-hero__imagewrap::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}

#content-wrapper.has-sg-cat-hero .sg-cat-hero__image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Textoverlay */
#content-wrapper.has-sg-cat-hero .sg-cat-hero__text{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.25rem 1.35rem;
  z-index: 2;
}

#content-wrapper.has-sg-cat-hero .sg-cat-hero__title{
  margin: 0 0 .5rem;
  font-family: var(--sg-font-display);
  font-weight: 650;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.2;
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.25);
}

#content-wrapper.has-sg-cat-hero .sg-cat-hero__desc{
  max-width: 80ch;
  font-family: var(--sg-font-sans);
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
  text-shadow: 0 2px 14px rgba(0,0,0,.25);
  margin: 0;
}

/* Main-Listing und Sidebar in normaler Reihenfolge halten */
#content-wrapper.has-sg-cat-hero #content > .row > .col-lg-8.col-xl-9{
  order: 2;
}
#content-wrapper.has-sg-cat-hero #content > .row > aside#sidepanel_left{
  order: 1;
}

@media (max-width: 767.98px){
  #content-wrapper.has-sg-cat-hero .sg-cat-hero{
    margin: 0 1rem 1.25rem;
  }

  #content-wrapper.has-sg-cat-hero .sg-cat-hero__imagewrap{
    aspect-ratio: 16 / 7;
    border-radius: 18px;
  }

  #content-wrapper.has-sg-cat-hero .sg-cat-hero__desc,
  #content-wrapper.has-sg-cat-hero .sg-cat-hero__desc p,
  #content-wrapper.has-sg-cat-hero .sg-cat-hero__desc div{
    font-size: .95rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
    max-width: 100%;
    text-overflow: ellipsis;
  }

  #content-wrapper.has-sg-cat-hero .sg-cat-hero__desc p,
  #content-wrapper.has-sg-cat-hero .sg-cat-hero__desc div{
    margin: 0 !important;
  }

  #content-wrapper.has-sg-cat-hero .sg-cat-hero__text{
    padding: 1rem 1rem;
  }
}
/* Bild: runde Ecken, saubere Proportion */
#content-wrapper.has-sg-cat-hero .sg-cat-hero__imagewrap{
  width:100%;
  aspect-ratio: 16 / 5;
  overflow:hidden;
  background:#f3f3f3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 22px;
  position:relative;
}
#content-wrapper.has-sg-cat-hero .sg-cat-hero__imagewrap::after{
  content:"";
  position:absolute;
  inset:0;
  /* Textbereich unten abdunkeln */
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
#content-wrapper.has-sg-cat-hero .sg-cat-hero__image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Text als Overlay im Bild */
#content-wrapper.has-sg-cat-hero .sg-cat-hero__text{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding: 1.25rem 1.35rem;
  z-index:2;
}
#content-wrapper.has-sg-cat-hero .sg-cat-hero__title{
  margin: 0 0 .5rem;
  font-family: var(--sg-font-display);
  font-weight: 650;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.2;
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.25);
}
#content-wrapper.has-sg-cat-hero .sg-cat-hero__desc{
  max-width: 80ch;
  font-family: var(--sg-font-sans);
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
  text-shadow: 0 2px 14px rgba(0,0,0,.25);
  margin: 0;
}

@media (max-width: 767.98px){
  #content-wrapper.has-sg-cat-hero .sg-cat-hero{
    margin: 0 1rem 1.25rem;
  }
  #content-wrapper.has-sg-cat-hero .sg-cat-hero__imagewrap{
    aspect-ratio: 16 / 7;
    border-radius: 18px;
  }
  #content-wrapper.has-sg-cat-hero .sg-cat-hero__desc,
  #content-wrapper.has-sg-cat-hero .sg-cat-hero__desc p,
  #content-wrapper.has-sg-cat-hero .sg-cat-hero__desc div{
    font-size: .95rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
    max-width: 100%;
    text-overflow: ellipsis;
  }
  #content-wrapper.has-sg-cat-hero .sg-cat-hero__desc p,
  #content-wrapper.has-sg-cat-hero .sg-cat-hero__desc div{
    margin: 0 !important;
  }
  #content-wrapper.has-sg-cat-hero .sg-cat-hero__text{
    padding: 1rem 1rem;
  }
}

/* =====================================================================
   Startseiten-Hero (OPC): Text besser lesbar
   ===================================================================== */
.sg-hero-bg{
  position: relative;
  overflow: hidden;
}
.sg-hero-bg::before{
  content:"";
  position:absolute;
  inset:0;
  /* links stärker abdunkeln, rechts auslaufen lassen */
  background: linear-gradient(90deg,
    rgba(0,0,0,.62) 0%,
    rgba(0,0,0,.42) 45%,
    rgba(0,0,0,.18) 62%,
    rgba(0,0,0,0) 78%
  );
  pointer-events:none;
  z-index:0;
}
.sg-hero-bg > *{
  position: relative;
  z-index: 1;
}
.sg-hero-bg h1,
.sg-hero-bg h2,
.sg-hero-bg h3,
.sg-hero-bg h4,
.sg-hero-bg p,
.sg-hero-bg a{
  color:#fff !important;
}
.sg-hero-bg h1,
.sg-hero-bg h2,
.sg-hero-bg h3{
  text-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.sg-hero-bg p,
.sg-hero-bg a{
  text-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.sg-hero-bg .btn{
  text-shadow:none;
}
.sg-hero-bg a{
  text-decoration: none !important;
}

/* =====================================================================
   Kategorieseite / Artikelliste: Abstand Breadcrumbs -> Kategorie-Bild
   (nur auf Produktlisten-Seiten via JS-Klasse)
   ===================================================================== */
body.sg-is-productlist #content-wrapper:not(.has-sg-cat-hero) .breadcrumb-wrapper{
  margin-bottom: .75rem !important;
}
body.sg-is-productlist #content-wrapper:not(.has-fluid):not(.has-sg-cat-hero){
  padding-top: 1.25rem !important;
}
@media (min-width: 992px){
  body.sg-is-productlist #content-wrapper:not(.has-fluid):not(.has-sg-cat-hero){
    padding-top: 1.75rem !important;
  }
}

body.sg-is-productlist #content-wrapper:not(.has-sg-cat-hero) #result-wrapper .productlist-header-description-image{
  margin: .5rem 0 1.25rem !important;
  border-radius: 0 !important; /* eckig */
}
body.sg-is-productlist #content-wrapper:not(.has-sg-cat-hero) #result-wrapper .productlist-header-description-image img,
body.sg-is-productlist #content-wrapper:not(.has-sg-cat-hero) #result-wrapper .productlist-header-description-image picture{
  display:block;
  width:100%;
}
body.sg-is-productlist #content-wrapper:not(.has-sg-cat-hero) #result-wrapper .productlist-header-description{
  margin-top: 0 !important;
}


/* =====================================================================
   Mobile: Unterkategorie-Texte auf 2 Zeilen begrenzen
   ===================================================================== */
@media (max-width: 767.98px){
  .content-cats-small .sub-categories .caption a,
  .sg-cat-tile__title{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: calc(1.3em * 2);
    word-break: break-word;
  }
}

/* =====================================================================
   Artikelkacheln: nur die echte Produktkachel veredeln
   - keine Eingriffe in Bildlogik / Hoverbild / Wawi-Reihenfolge
   ===================================================================== */
.productbox.productbox-column,
.productbox.productbox-hover.productbox-column{
  height: 100%;
}

.productbox.productbox-column .productbox-inner,
.productbox.productbox-hover.productbox-column .productbox-inner,
.productbox-wrapper .productbox-inner,
.product-wrapper .productbox-inner{
  background: #fff;
  border: 1px solid rgba(133, 104, 73, .12);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(64, 44, 28, .08);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.productbox.productbox-column:hover .productbox-inner,
.productbox.productbox-column:focus-within .productbox-inner,
.productbox.productbox-hover.productbox-column:hover .productbox-inner,
.productbox.productbox-hover.productbox-column:focus-within .productbox-inner,
.productbox-wrapper:hover .productbox-inner,
.product-wrapper:hover .productbox-inner{
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(64, 44, 28, .12);
  border-color: rgba(183, 144, 94, .22);
}

/* Bild oben sauber runden, Logik sonst unverändert lassen */
.productbox .productbox-image,
.product-wrapper .productbox-image,
.productbox .image-wrapper,
.product-wrapper .image-wrapper,
.productbox .productbox-image-wrapper,
.product-wrapper .productbox-image-wrapper,
.productbox .productbox-image-wrapper-inner,
.product-wrapper .productbox-image-wrapper-inner{
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.productbox .productbox-image-wrapper,
.product-wrapper .productbox-image-wrapper,
.productbox .image-wrapper,
.product-wrapper .image-wrapper{
  overflow: hidden;
}

/* Innenabstand nur für den Textbereich */
.productbox .caption,
.product-wrapper .caption,
.productbox .productbox-title,
.product-wrapper .productbox-title,
.productbox .product-title,
.product-wrapper .product-title,
.productbox .item-slider-desc,
.product-wrapper .item-slider-desc,
.productbox .price_wrapper,
.product-wrapper .price_wrapper,
.productbox .productbox-price,
.product-wrapper .productbox-price,
.productbox .prices,
.product-wrapper .prices,
.productbox .shortdesc,
.product-wrapper .shortdesc{
  padding-left: 1rem;
  padding-right: 1rem;
}

.productbox .caption,
.product-wrapper .caption,
.productbox .productbox-title,
.product-wrapper .productbox-title,
.productbox .product-title,
.product-wrapper .product-title,
.productbox .item-slider-desc,
.product-wrapper .item-slider-desc{
  margin-top: .55rem;
}

.productbox .price_wrapper,
.product-wrapper .price_wrapper,
.productbox .productbox-price,
.product-wrapper .productbox-price,
.productbox .prices,
.product-wrapper .prices{
  padding-bottom: 1rem;
}

/* Ribbon sauber innerhalb der Karte verankern */
.productbox .productbox-ribbon.ribbon,
.product-wrapper .productbox-ribbon.ribbon{
  left: 0;
  top: .85rem;
  z-index: 3;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

@media (min-width: 768px){
  .productbox.productbox-hover:hover .productbox-ribbon.ribbon,
  .productbox.productbox-hover:focus .productbox-ribbon.ribbon,
  .productbox.productbox-hover.focus .productbox-ribbon.ribbon{
    left: 0;
    top: .85rem;
  }
}

@media (max-width: 575.98px){
  .productbox.productbox-column .productbox-inner,
  .productbox.productbox-hover.productbox-column .productbox-inner,
  .productbox-wrapper .productbox-inner,
  .product-wrapper .productbox-inner{
    border-radius: 16px;
  }

  .productbox .productbox-image,
  .product-wrapper .productbox-image,
  .productbox .image-wrapper,
  .product-wrapper .image-wrapper,
  .productbox .productbox-image-wrapper,
  .product-wrapper .productbox-image-wrapper,
  .productbox .productbox-image-wrapper-inner,
  .product-wrapper .productbox-image-wrapper-inner{
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }

  .productbox .productbox-ribbon.ribbon,
  .product-wrapper .productbox-ribbon.ribbon{
    left: 0;
    top: .7rem;
  }
}

/* =========================================================
   PDP – nur Abrundung für Swatches + Bildvorschauen
   kein Hover, keine Outline, kein Zoom
   ========================================================= */

/* Swatches auf der Artikeldetailseite */
#product-offer .variations .swatches .col-auto > label,
#product-offer .variations .swatches .col-auto > label .square,
#product-offer .variations .swatches .col-auto > label .inner,
#product-offer .variations .swatches .col-auto > label img{
  border-radius: 14px !important;
}
/* PDP – Vorschau-Wrapper + Rahmen sicher abrunden */
#product-offer .product-detail-image-preview-bar a,
#product-offer .product-detail-image-preview-bar button,
#product-offer .product-detail-image-preview-bar .slick-slide,
#product-offer .product-detail-image-preview-bar .slick-slide > div,
#product-offer .product-detail-image-preview-bar .slick-slide > div > * ,
#product-offer .product-detail-image-preview-bar .product-image{
  border-radius: 14px !important;
  overflow: hidden !important;
}
#product-offer .variations .swatches .col-auto > label,
#product-offer .variations .swatches .col-auto > label .square,
#product-offer .variations .swatches .col-auto > label .inner{
  overflow: hidden !important;
}

/* weitere Bild-Vorschau unter dem Hauptbild */
#product-offer .product-detail-image-preview-bar .product-image{
  border-radius: 14px !important;
  overflow: hidden !important;
}