/* ===================================================
   17. RESPONSIVE
   =================================================== */

@media (max-width: 1024px) {
    .woocommerce ul.products,
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .woocommerce-checkout form.checkout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hamburger { display: block; }
    .nav-right .nav-btn:not(.cart-btn) { display: none; }

    .main-content { padding: var(--s2) var(--s2) 0; }

    /* Produkte: 1 Spalte, horizontal wie Amazon */
    .woocommerce ul.products,
    .product-grid {
        grid-template-columns: 1fr;
        gap: var(--s2);
    }

    .woocommerce ul.products li.product {
        flex-direction: row;
        align-items: stretch;
        min-height: 120px;
    }

    /* Bild links */
    .woocommerce ul.products li.product .woocommerce-LoopProduct-link {
        display: flex;
        flex-direction: row;
        flex: 1;
        min-width: 0;
        text-decoration: none;
    }

    .woocommerce ul.products li.product a img {
        width: 120px;
        height: 120px;
        aspect-ratio: 1;
        flex-shrink: 0;
        object-fit: cover;
        border-bottom: none;
        border-right: 1px solid var(--color-border);
    }

    /* Titel + Preis rechts */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 15px;
        padding: var(--s2) var(--s2) 4px;
    }

    .woocommerce ul.products li.product .price {
        padding: 2px var(--s2) var(--s2);
    }

    /* Button unten rechts */
    .woocommerce ul.products li.product .button {
        margin: 0 var(--s2) var(--s2);
        align-self: flex-end;
    }

    /* Cart-Vorschläge (.product-card) ebenfalls horizontal */
    .product-card {
        flex-direction: row;
        align-items: stretch;
        min-height: 120px;
    }

    .product-card-image {
        width: 120px;
        flex-shrink: 0;
        aspect-ratio: 1;
    }

    .product-card-image img {
        width: 120px;
        height: 120px;
        object-fit: cover;
    }

    .product-card-info {
        flex: 1;
        min-width: 0;
        padding: var(--s2);
        justify-content: center;
    }

    .product-card-btn {
        padding-top: var(--s1);
    }

    .product-card-btn a {
        margin: 0;
    }

    /* Footer-Übergang auf Mobile: Kurven mit kleinerem Radius */
    .content-block::before,
    .content-block::after {
        width: var(--s2);
        height: var(--s2);
    }

    .content-block::before {
        -webkit-mask: radial-gradient(circle at top left, transparent var(--s2), #000 calc(var(--s2) + 1px));
                mask: radial-gradient(circle at top left, transparent var(--s2), #000 calc(var(--s2) + 1px));
    }

    .content-block::after {
        -webkit-mask: radial-gradient(circle at top right, transparent var(--s2), #000 calc(var(--s2) + 1px));
                mask: radial-gradient(circle at top right, transparent var(--s2), #000 calc(var(--s2) + 1px));
    }

    /* Einzelprodukt */
    .woocommerce div.product {
        grid-template-columns: 1fr;
        grid-template-areas:
            "gallery"
            "summary"
            "tabs";
    }

    .woocommerce div.product .summary {
        border-left: none;
        border-top: 1px solid var(--color-border);
        padding: var(--s3);
    }

    .woocommerce div.product .woocommerce-tabs {
        flex-direction: column;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs {
        flex-direction: row;
        flex-wrap: wrap;
        min-width: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    /* Account */
    .woocommerce-account .woocommerce {
        grid-template-columns: 1fr;
    }

    /* Warenkorb-Artikel-Tabelle (nur table.cart, nicht die Summen) */
    .woocommerce table.cart thead { display: none; }

    .woocommerce table.cart,
    .woocommerce table.cart tbody {
        display: block;
        width: 100%;
    }

    .woocommerce table.cart tr {
        display: grid;
        grid-template-columns: 56px 1fr auto;
        grid-template-areas:
            "remove name name"
            "thumb  price qty";
        align-items: center;
        gap: 6px var(--s2);
        padding: var(--s2);
        border-bottom: 1px solid var(--color-border);
    }

    .woocommerce table.cart td {
        display: block;
        border: none;
        padding: 0;
        width: auto;
    }

    .woocommerce table.cart td.product-remove { grid-area: remove; }
    .woocommerce table.cart td.product-thumbnail { grid-area: thumb; }
    .woocommerce table.cart td.product-thumbnail img { width: 56px; height: 56px; border-radius: var(--r-sm); }
    .woocommerce table.cart td.product-name { grid-area: name; }
    .woocommerce table.cart td.product-name a { font-size: 14px; }
    .woocommerce table.cart td.product-price {
        grid-area: price;
        font-size: 14px;
        color: var(--color-accent-light);
        font-weight: 600;
    }
    .woocommerce table.cart td.product-subtotal { display: none; }
    .woocommerce table.cart td.product-quantity { grid-area: qty; }
    .woocommerce table.cart td.product-quantity input {
        width: 56px;
        padding: 8px;
        text-align: center;
    }
    .woocommerce table.cart td.actions { display: block; padding: var(--s2); }

    /* Cart totals */
    .cart_totals { max-width: 100%; }

    /* Summen gestapelt: Label oben, Betrag eingerückt darunter */
    .cart_totals table tr {
        display: block;
        padding: var(--s2) 0;
        border-bottom: 1px solid var(--color-border);
    }

    .cart_totals table tr:last-child { border-bottom: none; }

    .cart_totals table th,
    .cart_totals table td {
        display: block;
        width: 100%;
        padding: 0;
        text-align: left;
        overflow: visible;
        white-space: normal;
    }

    .cart_totals table th {
        margin-bottom: 4px;
    }

    .cart_totals table td {
        padding-left: var(--s2);
        font-size: 16px;
        font-weight: 600;
    }

    /* Seiten */
    .content-block {
        padding: var(--s3) var(--s2);
        min-height: auto;
    }
}