/* assets/tile-accordion.css */
.hofa-card-tab-widget {
    --cols: 3;
}

.hofa-card-tab-widget--cols-1 {
    --cols: 1;
}

.hofa-card-tab-widget--cols-2 {
    --cols: 2;
}

.hofa-card-tab-widget--cols-3 {
    --cols: 3;
}

.hofa-card-tab-widget--cols-4 {
    --cols: 4;
}

.hofa-card-tab-widget--cols-5 {
    --cols: 5;
}

.hofa-card-tab-widget--cols-6 {
    --cols: 6;
}


.hofa-card-tab-widget__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: 20px;
}

/* Fallback styles*/
.hofa-card-tab-widget.hofa-card-tab-tile-fallback {
    border: 1px solid silver;
    border-radius: 15px;
    background: #f3f3f3;
    width: 100%;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    min-width: 150px;
}

.hofa-card-tab-widget__container.hofa-card-tab-tile-fallback {
    width: 100%;
    height: 100%;
}


/* padding für fallback */
.hofa-card-tab-widget.hofa-card-tab-tile-fallback > div {
    padding: 15px;
}

.hofa-card-tab-widget.hofa-card-tab-tile-fallback:hover {
    box-shadow: 3px 5px 10px hsla(0, 0%, 0%, 0.5);
    -webkit-transition: box-shadow ease-in-out .15s;
    transition: box-shadow ease-in-out .15s;
}

.hofa-card-tab-widget__image.hofa-card-tab-tile-fallback {
    place-items: center;
    margin: 0 0 0.5rem;
}

.hofa-card-tab-widget__title.hofa-card-tab-tile-fallback {
}

.hofa-card-tab-widget__desc.hofa-card-tab-tile-fallback {
}

.hofa-card-tab-widget__woo-price.hofa-card-tab-tile-fallback {
    margin: 0 0 1.21575rem;
}

.hofa-card-tab-widget[aria-hidden="true"] {
    display: none;
}

/* ganzes tile anklickbar - nur 1. DIV*/
.pointer-class > div {
    cursor: pointer;
}

.hofa-card-tab-widget > div:first-child {
    display: grid;
    height: 100%;
}

@media (max-width: 768px) {
    .hofa-card-tab-widget__grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .hofa-card-tab-widget__grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 14px;
    }
}