/*
 * Holy Dog Product Enhancer — Tab CSS only.
 * This file ONLY styles the WooCommerce tab navigation.
 * It does NOT touch: layout, grid, product images, price, quantity, add-to-cart button.
 * The theme (Astra) controls all of that.
 */

/* ── TAB NAVIGATION ── */
.woocommerce-tabs ul.tabs {
    background: transparent !important;
    border-bottom: 2px solid #EDD4A0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove Astra/WC decorative pseudo-elements on the tab bar */
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
    display: none !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

.woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    margin-bottom: -2px !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.woocommerce-tabs ul.tabs li a {
    font-family: 'Nunito', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #B08860 !important;
    padding: 13px 20px !important;
    display: block !important;
    transition: color .22s !important;
    background: transparent !important;
}

.woocommerce-tabs ul.tabs li a:hover {
    color: #7A5030 !important;
    background: transparent !important;
}

.woocommerce-tabs ul.tabs li.active {
    border-bottom-color: #C8892A !important;
    background: transparent !important;
}

.woocommerce-tabs ul.tabs li.active a {
    color: #C8892A !important;
    background: transparent !important;
}

/* ── TAB PANEL ── */
.woocommerce-tabs .panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 24px 0 !important;
    margin: 0 !important;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE GRIDS — Tab content
═══════════════════════════════════════════════ */

/* 3-col card grids (Produktinfo cards, Bestellung steps) */
.hd-cards-grid,
.hd-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.hd-cards-grid-2 { grid-template-columns: repeat(2, 1fr); }
.hd-cards-grid-1 { grid-template-columns: 1fr; }

/* Nährwerte table — full width on mobile */
.hd-nut-wrap { max-width: 520px; width: 100%; }
.hd-nut-wrap table { width: 100%; }

/* Free-from grid inside Unverträglichkeiten */
.hd-free-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* ── Tablet (≤ 860px) ── */
@media (max-width: 860px) {
    .hd-cards-grid,
    .hd-steps-grid {
        grid-template-columns: 1fr 1fr;
    }
    .hd-cards-grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ── Mobile (≤ 600px) ── */
@media (max-width: 600px) {
    .hd-cards-grid,
    .hd-steps-grid,
    .hd-cards-grid-2,
    .hd-cards-grid-1 {
        grid-template-columns: 1fr !important;
    }
    .hd-free-grid {
        grid-template-columns: 1fr;
    }
    .hd-nut-wrap { max-width: 100%; }
    /* Shrink tab font on small screens */
    .woocommerce-tabs ul.tabs li a {
        padding: 12px 14px !important;
        font-size: 13px !important;
    }
}