:root {
    --hbpim-table-border-color: #ddd;
    --hbpim-dark-blue: #005a9a;
    --hbpim-light-blue: #F6F9FC;
    --hbpim-light-gray: #F9F9F9;
    --hbpim-button-hover-background: #0090F7;
    --hbpim-unavailable-color: #d3d3d3;
    --hbpim-font-size: clamp(14px, 1.1vw, 15px);
    --hbpim-table-padding-header: .45rem .45rem;
    --hbpim-table-padding-body: .35rem .45rem;
}

/* Frontend-Variantentabelle. Nur innerhalb des HBPIM-Shortcodes wirksam. */
.hbpim-variants { width: 100%; margin: 1.5rem 0 2rem; }
.hbpim-variants__heading { margin: 0 0 0.8rem; font-size: 30px !important;color: var(--hbpim-dark-blue) !important; }
.hbpim-variants__notice { margin: 0 0 1rem; padding: .7rem 1rem; border: 1px solid #d5d5d5; }
.hbpim-variants__scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hbpim-variants__scroll:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.hbpim-variants__table { min-width: 950px; width: 100%; border-collapse: collapse; font-size: var(--hbpim-font-size); font-variant-numeric: tabular-nums; }
.hbpim-variants__table th {  padding: var(--hbpim-table-padding-header); text-align: left; border-bottom: 1px solid #ddd; vertical-align: middle; white-space: nowrap; }
.hbpim-variants__table td {  padding: var(--hbpim-table-padding-header); text-align: left; border-bottom: 1px solid #ddd; vertical-align: middle; white-space: nowrap; }
.hbpim-variants__table thead th { background: var(--hbpim-dark-blue); color: #fff; font-weight: 600; }
/*.hbpim-variants__table tbody tr:nth-child(even) { background: var(--hbpim-light-gray); }*/
.hbpim-variants__table tbody tr:hover { background: #f3f6f9; }
.hbpim-variants__pos { font-weight: 600; }
.hbpim-variants__price { font-weight: 600; }
.hbpim-variants__price .amount { white-space: nowrap; }
.hbpim-variants__stock { min-width: 105px; }
.hbpim-variants__form { display: flex; gap: .5rem; align-items: center; margin: 0; }
.hbpim-variants__qty { box-sizing: border-box; width: 64px !important; min-width: 64px; max-width: 64px; height: 36px; padding: .35rem !important; text-align: center; margin: 0 !important; }
input.hbpim-variants__qty { height: 40px !important; border-radius: 0 !important; border: 1px solid #333 !important;}

.hbpim-variants__button { font-size:var(--hbpim-font-size) !important; position: relative; z-index: 0; white-space: nowrap; cursor: pointer; padding: .52rem .8rem; min-height: 36px; border: 0; border-radius: 0px; background: #005a9a00; color: #fff; font: inherit; font-size:var(--hbpim-font-size); }
.hbpim-variants__unavailable { color: var(--hbpim-unavailable-color); }

.hbpim-variants__button:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--hbpim-dark-blue);
    z-index: -2;
    top: 0;
    left: 0;
    transition: all .3s ease-out;
}

.hbpim-variants__button:after{
    content: "";
    position: absolute;
    width: 0%;
    height: 100%;
    background: #0090F7;
    z-index: -1;
    top: 0;
    left: 0;
    transition: all .3s ease-out;
}

.hbpim-variants__button:hover:after{
    width: 100%;
}

/* Allgemeine Eigenschaften; unabhängig vom Avada-Tabellenstyling anpassbar. */
.hbpim-properties { width: 100%; margin: 1.5rem 0 2rem; }
.hbpim-properties__heading { margin: 0 0 0.8rem; font-size: 30px !important; font-weight: 600; color: var(--hbpim-dark-blue) !important;}
.hbpim-properties__table { width: 100%; border-collapse: collapse; font-size: var(--hbpim-font-size); }
.hbpim-properties__table th { padding: var(--hbpim-table-padding-header); text-align: left; border-bottom: 1px solid #ddd; }
.hbpim-properties__table td {  padding: var(--hbpim-table-padding-header); text-align: left; border-bottom: 1px solid #ddd; }
.hbpim-properties__table thead th { font-weight: 600; background: var(--hbpim-dark-blue); color: #fff; }
.hbpim-properties__table tbody th { width: 48%; font-weight: 400; }
/*.hbpim-properties__table tbody tr:nth-child(even) { background: var(--hbpim-light-gray); }*/

/* 0.8.0: Drei lesbare Bereiche: Produktname | Maße | Preis, Verfügbarkeit, Anzahl.
   Abstände bei Bedarf zentral anpassen, ohne die bestehenden Tabellenstile zu ändern. */
.hbpim-variants {
    --hbpim-gap-name-values: 24px;
    --hbpim-gap-values-actions: 42px;
}
.hbpim-variants__table { min-width: 1160px; }
.hbpim-variants__table .hbpim-variants__col--name { min-width: 200px; }
.hbpim-variants__table .hbpim-variants__col--spec { text-align: center; }
.hbpim-variants__table .hbpim-variants__group-start--specs { padding-left: var(--hbpim-gap-name-values); }
.hbpim-variants__table .hbpim-variants__group-start--actions { padding-left: var(--hbpim-gap-values-actions); }
.hbpim-variants__table .hbpim-variants__col--price { min-width: 118px; text-align: right; }
.hbpim-variants__table .hbpim-variants__col--stock { min-width: 130px; text-align: center; }
.hbpim-variants__table .hbpim-variants__col--order { min-width: 245px; }
.hbpim-variants__table tbody tr.unavailable {color: var(--hbpim-unavailable-color); }

/* Allgemeine PIM-Merkmale: grüner Haken (1), graues Kreuz (0), ohne Hintergrund. */
.hbpim-properties__boolean {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    background: none;
    border: 0;
}
.hbpim-properties__boolean--true { color: #148959; }
.hbpim-properties__boolean--false { color: #a5aab0; }


/* 1.4.0: Rein grafische Verfügbarkeit ohne Text und ohne Tooltip.
   Rot: 0 (rote Kontur), Orange: 1–5 (zwei Balken), Grün: >5 (drei Balken).
   Unbekannte Bestandsmenge: neutral; Statusklassen sind für Avada/CSS nutzbar. */
.hbpim-variants {
    --hbpim-stock-bar-width: 12px;
    --hbpim-stock-bar-height: 20px;
    --hbpim-stock-bar-gap: 3px;
    --hbpim-stock-neutral: #dedede;
    --hbpim-stock-red: #e33b42;
    --hbpim-stock-orange: #f5a623;
    --hbpim-stock-green: #158c43;
}
.hbpim-availability {
    display: inline-flex;
    align-items: center;
    gap: var(--hbpim-stock-bar-gap);
    vertical-align: middle;
}
.hbpim-availability__bar {
    box-sizing: border-box;
    display: block;
    width: var(--hbpim-stock-bar-width);
    height: var(--hbpim-stock-bar-height);
    background: var(--hbpim-stock-neutral);
    border: 1px solid transparent;
}
.hbpim-availability--outofstock .hbpim-availability__bar:first-child {
    background: transparent;
    border-color: var(--hbpim-stock-red);
}
.hbpim-availability--lowstock .hbpim-availability__bar:nth-child(-n+2) {
    background: var(--hbpim-stock-orange);
}
.hbpim-availability--instock .hbpim-availability__bar {
    background: var(--hbpim-stock-green);
}

/* 1.9.0: STEP-Dateien nur bei geprüfter Zuordnung; auch bei nicht kaufbaren Varianten. */
.hbpim-variants__table .hbpim-variants__col--step { min-width: 85px; text-align: center; }
.hbpim-variants__row--unavailable .hbpim-variants__step-link { color: var(--hbpim-dark-blue); }

/* 1.9.2: Die genaue Menge wird nur nach berechtigtem AJAX-Abruf eingesetzt. */
.hbpim-variants .hbpim-availability-count { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }


@media (max-width: 800px) {
    .hbpim-variants__table .hbpim-variants__col--name { min-width: unset; }
    .hbpim-variants__table { min-width: unset; }
    .hbpim-variants__table .hbpim-variants__col--price {min-width: unset; }
.hbpim-variants__table .hbpim-variants__col--stock { min-width: unset;  }
.hbpim-variants__table .hbpim-variants__col--order { min-width: unset; }
}