/* =========================================================
   SKALDWERK – DARK MODE FARBPALETTE
   ========================================================= */
:root {
  --skw-bg: #171C24;
  --skw-surface: #202833;
  --skw-field: #293442;
  --skw-text: #F1F3F5;
  --skw-muted: #B8C1CC;
  --skw-border: #3A4654;
  --skw-link: #8DBAFF;
  --skw-button: #2864B8;
  --skw-button-hover: #3474C5;
  --skw-accent: #D7E66B;
}

html,
body,
#main-container,
#main,
.site,
.site-content,
.site-main,
.ct-container-full,
.ct-content,
.ct-content-container,
.content-area {
  background-color: var(--skw-bg) !important;
  color: var(--skw-text);
}

body,
.site,
.site-content,
.site-main,
.entry-content {
  color: var(--skw-text);
}

.ct-header,
.ct-header [data-row],
.ct-header [data-column],
.ct-header .ct-container {
  /* Hintergrund kommt aus den Blocksy-Header-Einstellungen,
     damit Standard- und Sticky-Header transparent bleiben. */
  color: var(--skw-text);
}

.ct-footer,
.ct-footer [data-row],
.site-footer {
  background-color: var(--skw-surface) !important;
  color: var(--skw-text);
}

body a,
.entry-content a,
.woocommerce a:not(.button):not(.add_to_cart_button) {
  color: var(--skw-link);
}

body a:hover,
.entry-content a:hover,
.woocommerce a:not(.button):not(.add_to_cart_button):hover {
  color: var(--skw-accent);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.woocommerce input.input-text,
.woocommerce select,
.woocommerce textarea {
  background-color: var(--skw-field) !important;
  color: var(--skw-text) !important;
  border-color: var(--skw-border) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--skw-muted) !important;
  opacity: 1;
}

input[type="submit"],
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single_add_to_cart_button,
.add_to_cart_button,
.ct-button {
  background-color: var(--skw-button) !important;
  border-color: var(--skw-button) !important;
  color: #FFFFFF !important;
}

input[type="submit"]:hover,
.wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.single_add_to_cart_button:hover,
.add_to_cart_button:hover,
.ct-button:hover {
  background-color: var(--skw-button-hover) !important;
  border-color: var(--skw-button-hover) !important;
  color: #FFFFFF !important;
}

.woocommerce ul.products li.product:not(.product-category),
.wc-block-grid__product {
  background-color: var(--skw-surface) !important;
  color: var(--skw-text);
  border-color: var(--skw-border);
}

.woocommerce-loop-product__title,
.product_title,
.woocommerce div.product .product_title,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content p,
.entry-content li {
  color: var(--skw-text);
}

.woocommerce table.shop_table,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout #payment,
.woocommerce-checkout-review-order-table {
  background-color: var(--skw-surface) !important;
  color: var(--skw-text) !important;
  border-color: var(--skw-border) !important;
}

/* Rotierender Top-Banner – 6 Texte, linksbündig, 10 s je Text */
.promo-rotator{
position: relative;
display: block;
overflow: hidden;
min-height: 1.4em;
white-space: nowrap;
}

.promo-rotator span{
position: absolute;
left: 0;
width: 100%;
transform: translateY(6px);
opacity: 0;
animation: promoRotateSmooth 36s ease-in-out infinite;
animation-fill-mode: both;
}

/* Delays: 0,10,20,30,40,50 s */
.promo-rotator span:nth-child(1){animation-delay:0s;}
.promo-rotator span:nth-child(2){animation-delay:6s;}
.promo-rotator span:nth-child(3){animation-delay:12s;}
.promo-rotator span:nth-child(4){animation-delay:18s;}
.promo-rotator span:nth-child(5){animation-delay:24s;}
.promo-rotator span:nth-child(6){animation-delay:30s;}

/* Smoothere Animation */
@keyframes promoRotateSmooth{
0%   {opacity:0; transform:translateY(6px);}
2%   {opacity:1; transform:translateY(0);}
15%  {opacity:1; transform:translateY(0);}
17%  {opacity:0; transform:translateY(-4px);}
100% {opacity:0; transform:translateY(-4px);}
}


/* === MOBILE OPTIMIERUNG PROMO-BANNER === */
@media (max-width: 768px) {

.promo-rotator {
min-height: 2.4em;
font-size: 13px;
text-align: center;
white-space: normal;
line-height: 1.3;
}

.promo-rotator span {
width: 100%;
left: 0;
white-space: normal;
padding: 0 10px;
}

}


/* =========================================================
   PRODUKT-KACHELN – AUSGEWOGENES RASTER
   Desktop: 4 Spalten | Tablet: 3 | Handy: 2
   ========================================================= */

.woocommerce ul.products:not(:has(> li.product-category)) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.woocommerce ul.products:not(:has(> li.product-category)) li.product {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product:not(.product-category) a.woocommerce-LoopProduct-link {
  text-decoration: none !important;
}

.woocommerce ul.products li.product:not(.product-category) .woocommerce-loop-product__title {
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.woocommerce ul.products li.product:not(.product-category) a.woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1100px) {
  .woocommerce ul.products:not(:has(> li.product-category)) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .woocommerce ul.products:not(:has(> li.product-category)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}


/* Mobile: Produktübersicht */
@media (max-width: 768px) {

.woocommerce-loop-product__title,
.wc-block-grid__product-title,
.product-title,
h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
font-size: 13px !important;
line-height: 1.3 !important;
}

.price {
font-size: 13px !important;
}

}


/* Mobile: Menü */
@media (max-width: 768px) {

.ct-panel .menu a,
.ct-panel .sub-menu a,
.ct-panel .ct-menu-link {
font-size: 12px !important;
line-height: 1.3 !important;
}

.ct-panel .menu a,
.ct-panel .sub-menu a {
padding: 14px 16px !important;
display: block;
}

.ct-panel .menu > li > a,
.ct-panel .sub-menu > li > a {
padding-top: 8px !important;
padding-bottom: 8px !important;
}

.ct-panel .menu > li {
margin-bottom: 10px;
border-bottom: none !important;
}

.ct-panel .menu > li > a {
color: #ffffff !important;
font-weight: 700 !important;
font-size: 17px !important;
line-height: 1.35 !important;
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 16px !important;
box-shadow: 0 8px 22px rgba(0,0,0,0.16) !important;
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.ct-panel .menu > li > a:hover,
.ct-panel .menu > li > a:focus {
background: rgba(255,255,255,0.08) !important;
border-color: rgba(255,255,255,0.14) !important;
}

.ct-panel .menu > li > a:active,
.ct-panel .sub-menu a:active {
transform: scale(0.985);
}

.ct-panel .sub-menu a {
color: #B8C1CC !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
opacity: 0.96;
padding-left: 18px !important;
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(255,255,255,0.05) !important;
border-radius: 12px !important;
margin-bottom: 7px;
padding: 12px 14px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important;
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease !important;
}

.ct-panel .sub-menu {
margin-top: 8px !important;
margin-left: 4px !important;
width: 100%;
}

.ct-panel .ct-toggle-dropdown {
opacity: 1;
margin-left: 8px !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px !important;
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.14) !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.16) !important;
color: #dfe8ff !important;
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease !important;
}

.ct-panel .ct-toggle-dropdown svg {
width: 14px !important;
height: 14px !important;
}

.ct-panel .ct-toggle-dropdown:active {
transform: scale(0.95);
background: rgba(255,255,255,0.14) !important;
border-color: rgba(255,255,255,0.20) !important;
}

.ct-panel-content {
padding: 18px 16px 22px !important;
}

.ct-panel .menu > li + li {
margin-top: 2px;
}

.ct-panel .current-menu-item > a,
.ct-panel .current-menu-ancestor > a {
color: #ffffff !important;
border-color: rgba(120,169,245,0.45) !important;
box-shadow: 0 0 0 1px rgba(120,169,245,0.22), 0 8px 22px rgba(0,0,0,0.22) !important;
}

}


/* === MOBILE OPTIMIERUNG PRODUKTSEITE === */
@media (max-width: 768px) {

.product_title {
font-size: 18px !important;
line-height: 1.3 !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
font-size: 16px !important;
}

.woocommerce-product-details__short-description {
font-size: 14px !important;
line-height: 1.4 !important;
}

.woocommerce div.product {
padding-left: 10px !important;
padding-right: 10px !important;
}

.woocommerce div.product div.images {
margin-bottom: 10px !important;
}

.woocommerce div.product div.thumbnails img {
width: 60px !important;
}

.single_add_to_cart_button {
font-size: 14px !important;
padding: 12px !important;
}

.variations select {
font-size: 14px !important;
padding: 10px !important;
}

}


/* === MOBILE STANDARD-SEITEN === */
@media (max-width: 768px) {

.entry-content,
.ct-content-container,
.content-area {
padding-left: 14px !important;
padding-right: 14px !important;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-title {
font-size: 20px !important;
line-height: 1.25 !important;
}

.entry-content p,
.entry-content li {
font-size: 14px !important;
line-height: 1.5 !important;
}

.entry-content ul {
padding-left: 18px !important;
}

.entry-content p {
margin-bottom: 10px !important;
}

.entry-title {
margin-bottom: 12px !important;
}

.entry-content {
max-width: 100% !important;
}

}


/* === SKALDWERK PRODUCT BOX === */

.skw-landing.skw-product-box{
--bg:#202833;
--surface:#293442;
--text:#F1F3F5;
--muted:#B8C1CC;
--line:#3A4654;
--accent:#2864B8;
--accent-dark:#1E4F91;
--shadow:0 10px 28px rgba(0,0,0,0.28);
max-width:1200px;
margin:0 auto;
padding:0;
color:var(--text);
font-family:inherit;
line-height:1.65;
}

.skw-product-card{
display:grid;
gap:22px;
}

.skw-product-header{
background:linear-gradient(135deg,#202833 0%,#293442 100%);
border:1px solid var(--line);
border-radius:26px;
padding:42px 34px;
box-shadow:var(--shadow);
}

.skw-product-title{
margin:0;
font-size:clamp(30px,4vw,46px);
line-height:1.12;
font-weight:800;
color:var(--text);
}

@media (max-width: 768px) {

.woocommerce-product-gallery ol,
.woocommerce-product-gallery .flex-control-nav,
.woocommerce-product-gallery .flex-control-thumbs {
display: none !important;
}

}


/* === Kompakte Farbvorschau im Shop === */

.skw-swatches {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 5px;
width: 100%;
min-height: 27px;
margin: 8px 0 10px;
overflow: hidden;
}

.skw-swatch {
display: block;
flex: 0 0 25px;
width: 25px;
height: 25px;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #d8dce1;
border-radius: 4px;
background: #ffffff;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.skw-swatch:hover {
z-index: 2;
transform: scale(1.08);
border-color: #7f8994;
box-shadow: 0 2px 7px rgba(0,0,0,0.16);
}

.skw-swatch img {
display: block;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover;
object-position: center;
}


/* Ab der sechsten Farbe ausblenden */

.skw-swatches .skw-swatch:nth-child(n + 6) {
display: none !important;
}


/* Anzeige für weitere Farben, zum Beispiel „+12“ */

.skw-swatch-more {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
height: 25px;
min-width: 32px;
margin: 0;
padding: 0 5px;
border: 1px solid #3A4654;
border-radius: 4px;
background: #293442;
color: #F1F3F5;
font-size: 10px;
line-height: 1;
font-weight: 700;
text-decoration: none;
box-sizing: border-box;
transition: background-color 0.15s ease, border-color 0.15s ease;
}

.skw-swatch-more:hover {
border-color: #78A9F5;
background: #3A4654;
color: #F1F3F5;
}


/* === Mobile Produktübersicht und Farbvorschau === */

@media (max-width: 768px) {

.woocommerce ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}

.woocommerce ul.products li.product {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}

.skw-swatches {
gap: 4px;
min-height: 24px;
margin-top: 6px;
margin-bottom: 8px;
}

.skw-swatch {
flex-basis: 22px;
width: 22px;
height: 22px;
border-radius: 3px;
}

.skw-swatch-more {
height: 22px;
min-width: 28px;
padding: 0 4px;
font-size: 9px;
}

}


/* === Bilder-speichern unterdrücken === */

img {
-webkit-user-drag: none;
user-select: none;
pointer-events: auto;
}

.woocommerce div.product div.images img,
.woocommerce ul.products li.product img {
-webkit-user-drag: none;
user-select: none;
}


/* === FPD-Personalisieren-Button === */

/*
 * FPD ist nur am Hauptartikel hinterlegt.
 * Deshalb wird der echte FPD-Startbutton direkt angesprochen.
 * FPD/WooCommerce steuert selbst, wann der Button angezeigt wird.
 */

#fpd-start-customizing-button,
.fpd-start-customizing-button {
width: 100% !important;
min-height: 48px !important;
padding: 12px 18px !important;
margin: 10px 0 !important;

background: #2864B8 !important;
background-size: auto !important;
color: #ffffff !important;
border: none !important;
border-radius: 8px !important;
font-weight: 700 !important;
text-align: center !important;
text-decoration: none !important;
box-sizing: border-box !important;
position: relative !important;
overflow: hidden !important;
box-shadow: 0 8px 20px rgba(0,0,0,0.18) !important;

animation: skw-fpd-pulse 1.8s infinite ease-in-out !important;

transition:
transform 0.2s ease,
box-shadow 0.2s ease !important;
}

#fpd-start-customizing-button:hover,
.fpd-start-customizing-button:hover {
color: #ffffff !important;
transform: translateY(-1px) scale(1.02) !important;
animation: skw-fpd-pulse 1.8s infinite ease-in-out !important;
background: #3474C5 !important;
box-shadow: 0 10px 24px rgba(0,0,0,0.24) !important;
}

#fpd-start-customizing-button::after,
.fpd-start-customizing-button::after {
content: "";
position: absolute;
inset: 0;
border-radius: 8px;

background: linear-gradient(
120deg,
transparent 30%,
rgba(255,255,255,0.55) 50%,
transparent 70%
);

opacity: 0.45;
animation: skw-shine 3s linear infinite !important;
pointer-events: none;
}

@keyframes skw-fpd-pulse {
0%   { transform: scale(1); }
50%  { transform: scale(1.04); }
100% { transform: scale(1); }
}

@keyframes skw-shine {
0%   { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}


/* Blocksy Thumbnail-Leiste komplett ausblenden */

.woocommerce-product-gallery ol li .ct-media-container {
display: none !important;
}


/* Falls noch Platz übrig bleibt */

.woocommerce-product-gallery ol {
display: none !important;
}


/* Hauptbild volle Breite */

.woocommerce div.product div.images {
width: 100% !important;
max-width: 100% !important;
}


/* === Kurzbeschreibung und Variantenbeschreibung ausblenden === */

/* Kurzbeschreibung direkt unter dem Preis */

.single-product .woocommerce-product-details__short-description {
display: none !important;
}


/* Beschreibung der ausgewählten Variante */

.single-product .woocommerce-variation-description {
display: none !important;
}


/* =========================================================
   SKALDWERK – PROFESSIONELLE KATEGORIE-KARTEN
   Optik passend zur Startseite
   ========================================================= */


/* Kategorie-Grid:
   Nur wenn tatsächlich Produktkategorien dargestellt werden */

.woocommerce ul.products:has(> li.product-category) {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;

width: 100% !important;
max-width: 1090px !important;

margin-left: auto !important;
margin-right: auto !important;

padding: 0 !important;
}


/* Einzelne Kategorie-Karte */

.woocommerce ul.products li.product-category {
position: relative !important;

width: 100% !important;
min-width: 0 !important;

margin: 0 !important;
padding: 0 !important;

overflow: hidden !important;

border-radius: 20px !important;

background: #202833 !important;

box-shadow:
0 10px 28px rgba(0,0,0,0.28),
0 2px 8px rgba(0,0,0,0.18) !important;

transition:
transform 0.25s ease,
box-shadow 0.25s ease !important;
}


/* Hover-Effekt */

.woocommerce ul.products li.product-category:hover {
transform: translateY(-4px) !important;

box-shadow:
0 18px 38px rgba(0,0,0,0.36),
0 4px 12px rgba(0,0,0,0.22) !important;
}


/* Komplette Karte klickbar */

.woocommerce ul.products li.product-category > a {
position: relative !important;

display: block !important;

width: 100% !important;
height: 100% !important;

overflow: hidden !important;

border-radius: 20px !important;

text-decoration: none !important;
}


/* Kategorie-Bild */

.woocommerce ul.products li.product-category img {
display: block !important;

width: 100% !important;
height: auto !important;

aspect-ratio: 1.32 / 1 !important;

margin: 0 !important;
padding: 0 !important;

object-fit: cover !important;
object-position: center !important;

border-radius: 20px !important;

transition:
transform 0.45s ease,
filter 0.35s ease !important;
}


/* Bild beim Hover leicht vergrößern */

.woocommerce ul.products li.product-category:hover img {
transform: scale(1.035) !important;
}


/* Dunkler Verlauf unten */

.woocommerce ul.products li.product-category > a::before {
content: "";

position: absolute !important;

left: 0 !important;
right: 0 !important;
bottom: 0 !important;

height: 44% !important;

z-index: 2 !important;

pointer-events: none !important;

background:
linear-gradient(
to top,
rgba(10,24,40,0.82) 0%,
rgba(10,24,40,0.48) 42%,
rgba(10,24,40,0.12) 72%,
rgba(10,24,40,0.00) 100%
) !important;
}


/* Kategoriename */

.woocommerce ul.products li.product-category
.woocommerce-loop-category__title {

display: block !important;

position: absolute !important;

left: 24px !important;
right: 74px !important;
bottom: 22px !important;

z-index: 4 !important;

margin: 0 !important;
padding: 0 !important;

color: #ffffff !important;

font-size: clamp(22px, 2.2vw, 31px) !important;
line-height: 1.08 !important;

font-weight: 800 !important;

text-align: left !important;

letter-spacing: -0.02em !important;

text-shadow:
0 2px 6px rgba(0,0,0,0.28) !important;
}


/* WooCommerce Artikelanzahl ausblenden */

.woocommerce ul.products li.product-category
.woocommerce-loop-category__title .count {
display: none !important;
}


/* Weißer Pfeilbutton wie auf der Startseite */

.woocommerce ul.products li.product-category > a::after {

content: "→";

position: absolute !important;

top: 20px !important;
right: 20px !important;

z-index: 5 !important;

display: flex !important;

align-items: center !important;
justify-content: center !important;

width: 38px !important;
height: 38px !important;

border-radius: 50% !important;

background: rgba(255,255,255,0.96) !important;

color: #172b44 !important;

font-size: 19px !important;
line-height: 1 !important;

font-weight: 500 !important;

box-shadow:
0 5px 14px rgba(0,0,0,0.14) !important;

transition:
transform 0.22s ease,
background 0.22s ease,
box-shadow 0.22s ease !important;
}


/* Pfeil reagiert beim Hover */

.woocommerce ul.products li.product-category:hover > a::after {
transform: translateX(3px) !important;
background: #ffffff !important;
box-shadow:
0 7px 18px rgba(0,0,0,0.18) !important;
}


/* Einzelne Kategorie:
   nicht unnötig über die gesamte Seitenbreite ziehen */

.woocommerce ul.products:has(> li.product-category:only-child) {
grid-template-columns: minmax(0, 540px) !important;
justify-content: start !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

.woocommerce ul.products:has(> li.product-category) {
gap: 14px !important;
}

.woocommerce ul.products li.product-category
.woocommerce-loop-category__title {
left: 19px !important;
right: 62px !important;
bottom: 18px !important;
font-size: 23px !important;
}

.woocommerce ul.products li.product-category > a::after {
top: 16px !important;
right: 16px !important;
width: 36px !important;
height: 36px !important;
}

}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 768px) {

/* Kategorieansicht:
   eine große Karte pro Reihe */

.woocommerce ul.products:has(> li.product-category) {
grid-template-columns: 1fr !important;
gap: 14px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}


/* Auch einzelne Kategorie nutzt mobil die volle Breite */

.woocommerce ul.products:has(> li.product-category:only-child) {
grid-template-columns: 1fr !important;
}


.woocommerce ul.products li.product-category {
border-radius: 16px !important;

box-shadow:
0 7px 20px rgba(0,0,0,0.30),
0 2px 5px rgba(0,0,0,0.18) !important;
}


.woocommerce ul.products li.product-category > a {
border-radius: 16px !important;
}


.woocommerce ul.products li.product-category img {
aspect-ratio: 1.4 / 1 !important;
border-radius: 16px !important;
}


.woocommerce ul.products li.product-category
.woocommerce-loop-category__title {
left: 18px !important;
right: 60px !important;
bottom: 17px !important;

font-size: 22px !important;
line-height: 1.1 !important;
}


.woocommerce ul.products li.product-category > a::before {
height: 48% !important;
}


.woocommerce ul.products li.product-category > a::after {
top: 14px !important;
right: 14px !important;

width: 35px !important;
height: 35px !important;

font-size: 18px !important;
}


/* Auf Touchgeräten kein störendes Hochspringen */

.woocommerce ul.products li.product-category:hover {
transform: none !important;
}


.woocommerce ul.products li.product-category:hover img {
transform: none !important;
}

}
/* =========================================================
   SKALDWERK – FIBOSEARCH DARK MODE
   Bestehendes CSS bleibt unverändert.
   Dieser Block überschreibt nur die FiboSearch-Darstellung.
   ========================================================= */

/* ---------- Suchfeld / Pirx-Hintergrund ---------- */

/* Weißen Außenbereich des FiboSearch-Pirx-Layouts entfernen */
.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp {
  background: transparent !important;
}

/* Suchfeld-Grundfläche */
.dgwt-wcas-sf-wrapp {
  background: transparent !important;
}

/* Eingabefeld */
.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  background: var(--skw-field) !important;
  color: var(--skw-text) !important;
  border: 1px solid var(--skw-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* Fokus */
.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus {
  background: var(--skw-field) !important;
  color: var(--skw-text) !important;
  border-color: var(--skw-link) !important;
  box-shadow: 0 0 0 2px rgba(141,186,255,0.14) !important;
}

/* Platzhalter */
.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder,
.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::-webkit-input-placeholder,
.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:-moz-placeholder,
.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::-moz-placeholder,
.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:-ms-input-placeholder {
  color: var(--skw-muted) !important;
  opacity: 1 !important;
}


/* ---------- Lupen-Icon ---------- */

/* FiboSearch-Lupe im Eingabefeld */
.dgwt-wcas-ico-magnifier,
.dgwt-wcas-ico-magnifier-handler {
  width: 21px !important;
  height: 21px !important;
}

/* Such-Icon rechts im Feld */
.dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit,
.dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:hover {
  color: var(--skw-text) !important;
}

/* FiboSearch SVG-Farben */
.dgwt-wcas-ico-magnifier path,
.dgwt-wcas-ico-magnifier-handler path {
  fill: var(--skw-text) !important;
}

/* X / Suchtext löschen */
.dgwt-wcas-close path,
.dgwt-wcas-close svg {
  fill: var(--skw-muted) !important;
  color: var(--skw-muted) !important;
}


/* ---------- Live-Suchergebnisse ---------- */

/* Komplette Ergebnisbox */
.dgwt-wcas-suggestions-wrapp,
.dgwt-wcas-details-wrapp {
  background: var(--skw-surface) !important;
  border: 1px solid var(--skw-border) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.32) !important;
}

/* Einzelne Vorschläge */
.dgwt-wcas-suggestion {
  background: var(--skw-surface) !important;
  color: var(--skw-text) !important;
  border-color: var(--skw-border) !important;
}

/* Hover / aktives Ergebnis */
.dgwt-wcas-suggestion:hover,
.dgwt-wcas-suggestion-selected {
  background: var(--skw-field) !important;
}

/* Produkttitel */
.dgwt-wcas-st,
.dgwt-wcas-st-title,
.dgwt-wcas-suggestion-product .dgwt-wcas-st {
  color: var(--skw-text) !important;
}

/* Beschreibung / Zusatzinfos */
.dgwt-wcas-sd,
.dgwt-wcas-suggestion .dgwt-wcas-sd {
  color: var(--skw-muted) !important;
}

/* Preise */
.dgwt-wcas-sp,
.dgwt-wcas-sp *,
.dgwt-wcas-sp .woocommerce-Price-amount,
.dgwt-wcas-sp .woocommerce-Price-currencySymbol {
  color: var(--skw-muted) !important;
}

/* Produktbilder */
.dgwt-wcas-si img {
  background: #ffffff;
  border-radius: 5px;
}

/* Überschriften innerhalb der Vorschläge */
.dgwt-wcas-suggestion-headline,
.dgwt-wcas-suggestion-headline span {
  background: var(--skw-surface) !important;
  color: var(--skw-muted) !important;
  border-color: var(--skw-border) !important;
}


/* ---------- "Alle Produkte anzeigen" ---------- */

.dgwt-wcas-suggestion-more {
  background: var(--skw-surface) !important;
  color: var(--skw-link) !important;
  border-top: 1px solid var(--skw-border) !important;
}

.dgwt-wcas-suggestion-more:hover,
.dgwt-wcas-suggestion-more.dgwt-wcas-suggestion-selected {
  background: var(--skw-field) !important;
  color: var(--skw-text) !important;
}


/* ---------- Loader ---------- */

.dgwt-wcas-preloader {
  opacity: 0.8;
}


/* ---------- Mobile Overlay ---------- */

.dgwt-wcas-overlay-mobile {
  background: var(--skw-bg) !important;
}

.dgwt-wcas-overlay-mobile .dgwt-wcas-sf-wrapp {
  background: var(--skw-bg) !important;
}

.dgwt-wcas-overlay-mobile input[type="search"].dgwt-wcas-search-input {
  background: var(--skw-field) !important;
  color: var(--skw-text) !important;
  border-color: var(--skw-border) !important;
}


/* ---------- Header-Lupe von Blocksy ----------
   Nur das Header-Icon größer.
   FiboSearch selbst bleibt funktional unangetastet.
   --------------------------------------------- */

.ct-header [data-id="search"] .ct-icon,
.ct-header [data-id="search"] svg,
header [data-id="search"] .ct-icon,
header [data-id="search"] svg {
  width: 24px !important;
  height: 24px !important;
}

.ct-header [data-id="search"] > a,
.ct-header [data-id="search"] > button,
header [data-id="search"] > a,
header [data-id="search"] > button {
  min-width: 38px !important;
  min-height: 38px !important;
}


/* SKALDWERK 0.9.72 – TB product cards: show the complete imported garment.
   Only TB cards are affected; no sizing changes for other products. */
.woocommerce ul.products li.product.skwm-tb-card .ct-media-container,
.woocommerce ul.products li.product.skwm-tb-card .ct-image-container,
.woocommerce ul.products li.product.skwm-tb-card .woocommerce-loop-product__link .ct-media-container {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background-color: #fff;
}
.woocommerce ul.products li.product.skwm-tb-card .ct-media-container img,
.woocommerce ul.products li.product.skwm-tb-card .ct-image-container img,
.woocommerce ul.products li.product.skwm-tb-card img.wp-post-image {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

/* SKALDWERK – full image in the Blocksy / Woo single product gallery. */
.single-product .woocommerce-product-gallery__image img,
.single-product .ct-product-gallery img,
.single-product .flexy-items img,
.single-product .flexy-item img {
  width: 100%;
  height: auto !important;
  object-fit: contain !important;
}
.single-product .woocommerce-product-gallery__wrapper,
.single-product .ct-product-gallery,
.single-product .flexy-items {overflow: hidden;}

/* Blocksy uses an SVG icon with inherited color, sometimes nested in a shadow-like wrapper.
   Keep the round button light but force a visible dark arrow glyph. */
.single-product .flexy-arrow,
.single-product [class*="flexy-arrow"],
.single-product .ct-product-gallery [class*="slider-arrow"],
.single-product .woocommerce-product-gallery [class*="slider-arrow"] {
  --theme-icon-color: #313b49 !important;
  --theme-icon-hover-color: #313b49 !important;
  --theme-text-color: #313b49 !important;
  color: #313b49 !important;
}
.single-product .flexy-arrow svg,
.single-product [class*="flexy-arrow"] svg,
.single-product .ct-product-gallery [class*="slider-arrow"] svg {
  color: #313b49 !important;
  fill: #313b49 !important;
  stroke: #313b49 !important;
}
/* Woo themes occasionally paint their arrow using pseudo elements. */
.single-product .flexy-arrow::before,
.single-product .flexy-arrow::after {color: #313b49 !important;}