/* Icons are tied to panel IDs, so optional tabs can safely be omitted. */
.product-info .vass-product-tabs-column joomla-tab#product[view] > div[role="tablist"] > button[role="tab"] {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center !important;
    align-content: center;
    justify-items: center;
    gap: 5px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 6px 8px !important;
    white-space: normal !important;
    overflow-wrap: normal;
    font-size: 13px !important;
    line-height: 1.15 !important;
    letter-spacing: 0;
    border-radius: 999px !important;
}

.product-info .vass-product-tabs-column joomla-tab#product[view] > div[role="tablist"] > button[role="tab"]::before {
    content: "" !important;
    display: block !important;
    position: static !important;
    flex: 0 0 18px;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: currentColor !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-mask: var(--vass-tab-icon) center / contain no-repeat;
    mask: var(--vass-tab-icon) center / contain no-repeat;
}

.product-info .vass-product-tabs-column joomla-tab#product[view] > div[role="tablist"] > button[aria-controls="description"] {
    --vass-tab-icon: url("icons/list.svg");
}

.product-info .vass-product-tabs-column joomla-tab#product[view] > div[role="tablist"] > button[aria-controls="tab1-content"] {
    --vass-tab-icon: url("icons/camera.svg");
}

.product-info .vass-product-tabs-column joomla-tab#product[view] > div[role="tablist"] > button[aria-controls="product-faqs"] {
    --vass-tab-icon: url("icons/circle-help.svg");
}

.product-info .vass-product-tabs-column joomla-tab#product[view] > div[role="tablist"] > button[aria-controls="reviews"] {
    --vass-tab-icon: url("icons/star.svg");
}

.product-info .vass-product-tabs-column joomla-tab#product[view] > div[role="tablist"] > button[aria-controls="related-products"] {
    --vass-tab-icon: url("icons/boxes.svg");
}

/* Other optional EShop tabs keep their label without an empty icon block. */
.product-info .vass-product-tabs-column joomla-tab#product[view] > div[role="tablist"] > button[role="tab"]:not([aria-controls="description"]):not([aria-controls="tab1-content"]):not([aria-controls="product-faqs"]):not([aria-controls="reviews"]):not([aria-controls="related-products"]) {
    grid-template-columns: minmax(0, 1fr);
}

.product-info .vass-product-tabs-column joomla-tab#product[view] > div[role="tablist"] > button[role="tab"]:not([aria-controls="description"]):not([aria-controls="tab1-content"]):not([aria-controls="product-faqs"]):not([aria-controls="reviews"]):not([aria-controls="related-products"])::before {
    content: none !important;
    display: none !important;
}

.product-info .vass-product-tabs-column joomla-tab#product[view] > div[role="tablist"] > button[role="tab"]:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 3px !important;
}

@media (max-width: 1199px) {
    .product-info .vass-product-tabs-column joomla-tab#product[view] > div[role="tablist"] > button[role="tab"] {
        height: 42px !important;
        min-height: 42px !important;
    }
}

@media (max-width: 767px) {
    .product-info .vass-product-tabs-column joomla-tab#product[view] > div[role="tablist"] > button[role="tab"] {
        flex: 0 0 132px !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
    }
}