/* ============================================
   Einzelprodukt-Seite
   Azubischule.TV v2
   ============================================ */

/* ============================================
   Produktcontainer — 2-Spalten-Layout
   ============================================ */
.single-product div.product {
    background: var(--azub-white);
    border-radius: var(--azub-radius-xl);
    padding: var(--azub-spacing-2xl);
    box-shadow: var(--azub-shadow-md);
    margin-bottom: var(--azub-spacing-2xl);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--azub-spacing-2xl);
    align-items: start;
}

/* Elemente über volle Breite (Tabs, Related Products) */
.single-product div.product .woocommerce-tabs,
.single-product div.product .related.products,
.single-product div.product .up-sells {
    grid-column: 1 / -1;
}

/* ============================================
   Produktbilder
   ============================================ */
.single-product div.product div.images {
    margin-bottom: 0;
    position: sticky;
    top: calc(var(--azub-header-height) + var(--azub-spacing-lg));
}

.single-product div.product div.images img {
    border-radius: var(--azub-radius-lg);
    width: 100%;
    height: auto;
}

.single-product div.product div.images .woocommerce-product-gallery__image {
    overflow: hidden;
    border-radius: var(--azub-radius-lg);
}

/* Galerie-Thumbnails */
.single-product div.product div.images .flex-control-thumbs {
    margin-top: var(--azub-spacing-md);
    display: flex;
    gap: var(--azub-spacing-sm);
}

.single-product div.product div.images .flex-control-thumbs li {
    border-radius: var(--azub-radius-md);
    overflow: hidden;
    opacity: 0.6;
    transition: opacity var(--azub-transition-base);
    cursor: pointer;
}

.single-product div.product div.images .flex-control-thumbs li:hover,
.single-product div.product div.images .flex-control-thumbs li .flex-active {
    opacity: 1;
}

/* ============================================
   Produktinformationen (rechte Spalte)
   ============================================ */
.single-product div.product .summary {
    display: flex;
    flex-direction: column;
}

/* ============================================
   Produkttitel
   ============================================ */
.single-product div.product .product_title {
    font-family: var(--azub-font-heading);
    font-size: 2.125rem;
    font-weight: 700;
    color: var(--azub-black);
    margin-bottom: var(--azub-spacing-md);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* ============================================
   Preis — Gross, in Akzentgrün
   ============================================ */
.single-product div.product p.price,
.single-product div.product span.price {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--azub-accent);
    margin-bottom: var(--azub-spacing-lg);
    font-feature-settings: 'tnum';
    line-height: 1.3;
}

.single-product div.product p.price del,
.single-product div.product span.price del {
    color: var(--azub-medium-gray);
    font-size: 1.125rem;
    font-weight: 400;
    margin-right: var(--azub-spacing-sm);
}

.single-product div.product p.price ins,
.single-product div.product span.price ins {
    text-decoration: none;
}

/* Steuerhinweis */
.single-product div.product .woocommerce-price-suffix {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--azub-medium-gray);
}

/* ============================================
   Kurzbeschreibung
   ============================================ */
.single-product div.product .woocommerce-product-details__short-description {
    color: var(--azub-dark-gray);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: var(--azub-spacing-xl);
    padding-bottom: var(--azub-spacing-lg);
    border-bottom: 1px solid var(--azub-border);
}

.single-product div.product .woocommerce-product-details__short-description p:last-child {
    margin-bottom: 0;
}

/* ============================================
   Variationen (variable Produkte)
   ============================================ */
.single-product div.product .variations {
    margin-bottom: var(--azub-spacing-lg);
    border-collapse: separate;
    border-spacing: 0 var(--azub-spacing-sm);
}

.single-product div.product .variations td {
    padding: var(--azub-spacing-sm) 0;
    vertical-align: middle;
}

.single-product div.product .variations td.label label {
    font-family: var(--azub-font-body);
    font-weight: 600;
    color: var(--azub-black);
    font-size: 0.9375rem;
}

.single-product div.product .variations td.value select {
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--azub-border);
    border-radius: var(--azub-radius-sm);
    font-family: var(--azub-font-body);
    font-size: 0.9375rem;
    color: var(--azub-dark-gray);
    background-color: var(--azub-white);
    min-width: 220px;
    cursor: pointer;
    transition: border-color var(--azub-transition-base);
}

.single-product div.product .variations td.value select:focus {
    border-color: var(--azub-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.12);
}

.single-product div.product .variations .reset_variations {
    font-size: 0.8125rem;
    color: var(--azub-medium-gray);
    margin-top: var(--azub-spacing-xs);
}

/* ============================================
   "In den Warenkorb" — Prominenter CTA
   ============================================ */
.single-product div.product .single_add_to_cart_button {
    padding: 1rem 2.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    border-radius: var(--azub-radius-sm);
    min-width: 240px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(21, 128, 61, 0.2);
}

.single-product div.product .single_add_to_cart_button:hover {
    box-shadow: 0 6px 20px rgba(21, 128, 61, 0.3);
    transform: translateY(-2px);
}

/* Mengenfeld */
.single-product div.product .quantity {
    margin-right: var(--azub-spacing-md);
}

.single-product div.product .quantity .qty {
    padding: 0.875rem;
    border: 1px solid var(--azub-border);
    border-radius: var(--azub-radius-sm);
    font-family: var(--azub-font-body);
    font-size: 1rem;
    font-weight: 500;
    width: 70px;
    text-align: center;
    transition: border-color var(--azub-transition-base);
}

.single-product div.product .quantity .qty:focus {
    border-color: var(--azub-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.12);
}

/* Warenkorb-Formular (Menge + Button) */
.single-product div.product form.cart {
    display: flex;
    align-items: center;
    gap: var(--azub-spacing-md);
    margin-bottom: var(--azub-spacing-xl);
    flex-wrap: wrap;
}

/* ============================================
   Verfügbarkeit / Lagerbestand
   ============================================ */
.single-product div.product .stock {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: var(--azub-spacing-md);
    display: flex;
    align-items: center;
    gap: var(--azub-spacing-xs);
}

.single-product div.product .stock.in-stock {
    color: var(--azub-accent);
}

.single-product div.product .stock.in-stock::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--azub-accent);
}

.single-product div.product .stock.out-of-stock {
    color: var(--azub-error);
}

.single-product div.product .stock.out-of-stock::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--azub-error);
}

/* ============================================
   Produkt-Meta (SKU, Kategorien, Tags)
   ============================================ */
.single-product div.product .product_meta {
    margin-top: var(--azub-spacing-xl);
    padding-top: var(--azub-spacing-lg);
    border-top: 1px solid var(--azub-border);
    font-size: 0.8125rem;
    color: var(--azub-medium-gray);
    line-height: 2;
}

.single-product div.product .product_meta > span {
    display: block;
    margin-bottom: var(--azub-spacing-xs);
}

.single-product div.product .product_meta a {
    color: var(--azub-accent);
    font-weight: 500;
}

.single-product div.product .product_meta a:hover {
    color: var(--azub-accent-hover);
}

/* ============================================
   Produkt-Tabs (Beschreibung, Bewertungen)
   ============================================ */
.single-product div.product .woocommerce-tabs {
    margin-top: var(--azub-spacing-xl);
    padding-top: var(--azub-spacing-xl);
    border-top: 1px solid var(--azub-border);
}

.single-product div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 0 0 var(--azub-spacing-lg);
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--azub-border);
    list-style: none;
}

.single-product div.product .woocommerce-tabs ul.tabs::before {
    display: none;
}

.single-product div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

.single-product div.product .woocommerce-tabs ul.tabs li::before,
.single-product div.product .woocommerce-tabs ul.tabs li::after {
    display: none;
}

.single-product div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: var(--azub-spacing-md) var(--azub-spacing-xl);
    font-family: var(--azub-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--azub-medium-gray);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--azub-transition-base);
    text-decoration: none;
}

.single-product div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--azub-accent);
    border-bottom-color: var(--azub-accent);
}

.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--azub-black);
}

/* Tab-Inhalt */
.single-product div.product .woocommerce-tabs .panel {
    padding: var(--azub-spacing-lg) 0;
    line-height: 1.7;
    color: var(--azub-dark-gray);
}

.single-product div.product .woocommerce-tabs .panel h2 {
    font-family: var(--azub-font-heading);
    font-size: 1.375rem;
    margin-bottom: var(--azub-spacing-md);
    color: var(--azub-black);
}

.single-product div.product .woocommerce-tabs .panel p {
    margin-bottom: var(--azub-spacing-md);
}

.single-product div.product .woocommerce-tabs .panel ul,
.single-product div.product .woocommerce-tabs .panel ol {
    margin-bottom: var(--azub-spacing-md);
    padding-left: var(--azub-spacing-xl);
}

.single-product div.product .woocommerce-tabs .panel li {
    margin-bottom: var(--azub-spacing-xs);
    line-height: 1.7;
}

/* ============================================
   Verwandte Produkte / Upsells
   ============================================ */
.single-product div.product .related.products > h2,
.single-product div.product .up-sells > h2 {
    font-family: var(--azub-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--azub-spacing-lg);
    color: var(--azub-black);
}

.single-product div.product .related.products ul.products,
.single-product div.product .up-sells ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--azub-spacing-lg);
}

/* ============================================
   Angebots-Badge auf Einzelproduktseite
   ============================================ */
.single-product div.product span.onsale {
    position: absolute;
    top: var(--azub-spacing-lg);
    right: var(--azub-spacing-lg);
    left: auto;
    background-color: var(--azub-accent);
    color: var(--azub-white);
    border-radius: var(--azub-radius-sm);
    font-family: var(--azub-font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.375rem 1rem;
    line-height: 1.5;
    min-height: auto;
    min-width: auto;
    z-index: 2;
}

/* ============================================
   Responsives Design
   ============================================ */
@media (max-width: 768px) {
    /* Einzelspalten-Layout auf Mobilgeräten */
    .single-product div.product {
        grid-template-columns: 1fr;
        padding: var(--azub-spacing-lg);
        gap: var(--azub-spacing-lg);
    }

    .single-product div.product div.images {
        position: static;
    }

    .single-product div.product .product_title {
        font-size: 1.5rem;
    }

    .single-product div.product p.price,
    .single-product div.product span.price {
        font-size: 1.375rem;
    }

    /* CTA volle Breite */
    .single-product div.product .single_add_to_cart_button {
        width: 100%;
        min-width: auto;
    }

    .single-product div.product form.cart {
        flex-direction: column;
        align-items: stretch;
    }

    .single-product div.product .quantity {
        margin-right: 0;
        margin-bottom: var(--azub-spacing-sm);
    }

    .single-product div.product .quantity .qty {
        width: 100%;
    }

    /* Tabs kompakt */
    .single-product div.product .woocommerce-tabs ul.tabs {
        flex-wrap: wrap;
    }

    .single-product div.product .woocommerce-tabs ul.tabs li a {
        padding: var(--azub-spacing-sm) var(--azub-spacing-md);
        font-size: 0.8125rem;
    }

    /* Verwandte Produkte */
    .single-product div.product .related.products ul.products,
    .single-product div.product .up-sells ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--azub-spacing-md);
    }
}

@media (max-width: 480px) {
    .single-product div.product {
        padding: var(--azub-spacing-md);
        border-radius: var(--azub-radius-lg);
    }

    .single-product div.product .product_title {
        font-size: 1.375rem;
    }

    .single-product div.product .related.products ul.products,
    .single-product div.product .up-sells ul.products {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   React ProductDetail Component
   ============================================ */

.azub-pd-panel {
    background: var(--azub-white);
    border: 1px solid var(--azub-border);
    border-radius: var(--azub-radius-xl);
    padding: var(--azub-spacing-xl);
    box-shadow: var(--azub-shadow-md);
    display: flex;
    flex-direction: column;
    gap: var(--azub-spacing-lg);
    position: sticky;
    top: calc(var(--azub-header-height) + var(--azub-spacing-lg));
}

.azub-pd-panel__header {
    display: flex;
    flex-direction: column;
    gap: var(--azub-spacing-sm);
}

/* Type badge */
.azub-pd-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-self: flex-start;
}

.azub-pd-badge--online   { background: #dcfce7; color: var(--azub-accent); }
.azub-pd-badge--praesenz { background: #f0f7e0; color: #4a7c26; }

/* Price */
.azub-pd-panel__price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--azub-accent);
    line-height: 1.1;
    font-family: var(--azub-font-heading);
}

.azub-pd-panel__price .woocommerce-Price-amount {
    font-feature-settings: 'tnum';
}

.azub-pd-panel__price-note {
    font-size: 0.8125rem;
    color: var(--azub-medium-gray);
    margin: 0;
}

/* Attributes table */
.azub-pd-attrs {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.azub-pd-attrs tr + tr td,
.azub-pd-attrs tr + tr th {
    border-top: 1px solid var(--azub-border);
}

.azub-pd-attrs th,
.azub-pd-attrs td {
    padding: 0.5rem 0;
    vertical-align: top;
    line-height: 1.4;
}

.azub-pd-attrs th {
    color: var(--azub-medium-gray);
    font-weight: 500;
    width: 42%;
    padding-right: var(--azub-spacing-md);
}

.azub-pd-attrs td {
    color: var(--azub-dark-gray);
    font-weight: 500;
}

/* Availability */
.azub-pd-stock {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--azub-dark-gray);
}

.azub-pd-stock__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.azub-pd-stock__dot--green { background: var(--azub-accent); }
.azub-pd-stock__dot--red   { background: var(--azub-error); }

/* Actions */
.azub-pd-panel__actions {
    display: flex;
    gap: var(--azub-spacing-md);
    align-items: center;
}

/* Qty stepper */
.azub-pd-qty {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--azub-border);
    border-radius: var(--azub-radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.azub-pd-qty__btn {
    width: 2.25rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 1.125rem;
    color: var(--azub-dark-gray);
    cursor: pointer;
    transition: background var(--azub-transition-fast);
    line-height: 1;
}

.azub-pd-qty__btn:hover:not(:disabled) {
    background: var(--azub-light-gray);
}

.azub-pd-qty__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.azub-pd-qty__val {
    min-width: 2rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--azub-black);
    border-left: 1px solid var(--azub-border);
    border-right: 1px solid var(--azub-border);
    padding: 0 0.25rem;
    line-height: 2.5rem;
}

/* Add to cart button */
.azub-pd-panel__cta {
    flex: 1;
    padding: 0.75rem 1.25rem;
    background: var(--azub-accent);
    color: var(--azub-white);
    border: none;
    border-radius: var(--azub-radius-md);
    font-family: var(--azub-font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--azub-transition-base);
    white-space: nowrap;
}

.azub-pd-panel__cta:hover:not(:disabled) {
    background: var(--azub-accent-hover);
}

.azub-pd-panel__cta:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.azub-pd-panel__cta--success {
    background: var(--azub-success);
}

/* Feedback message */
.azub-pd-msg {
    font-size: 0.875rem;
    margin: 0;
    padding: 0.625rem 0.875rem;
    border-radius: var(--azub-radius-md);
}

.azub-pd-msg--success {
    background: var(--azub-accent-light);
    color: var(--azub-accent);
}

.azub-pd-msg--error {
    background: #fee2e2;
    color: var(--azub-error);
}

/* Cart link */
.azub-pd-panel__cart-link {
    display: block;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--azub-accent);
    text-decoration: none;
}

.azub-pd-panel__cart-link:hover {
    text-decoration: underline;
}

/* Trust badges */
.azub-pd-trust {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem var(--azub-spacing-md);
    padding-top: var(--azub-spacing-md);
    border-top: 1px solid var(--azub-border);
}

.azub-pd-trust li {
    font-size: 0.75rem;
    color: var(--azub-medium-gray);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.azub-pd-trust li::before {
    content: '✓';
    color: var(--azub-accent);
    font-weight: 700;
}

/* Loading skeleton */
.azub-pd-panel--loading {
    gap: var(--azub-spacing-md);
}

@keyframes azub-pd-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.azub-pd-skel {
    border-radius: var(--azub-radius-sm);
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 800px 100%;
    animation: azub-pd-shimmer 1.4s infinite;
}

.azub-pd-skel--badge  { height: 1.25rem; width: 6rem; }
.azub-pd-skel--price  { height: 2.5rem;  width: 8rem; }
.azub-pd-skel--line   { height: 1rem;    width: 100%; }
.azub-pd-skel--short  { width: 70%; }
.azub-pd-skel--btn    { height: 2.75rem; width: 100%; margin-top: 0.5rem; border-radius: var(--azub-radius-md); }

/* Mobile */
@media (max-width: 768px) {
    .azub-pd-panel {
        position: static;
    }

    .azub-pd-panel__actions {
        flex-direction: column;
    }

    .azub-pd-panel__cta {
        width: 100%;
        text-align: center;
    }

    .azub-pd-qty {
        align-self: flex-start;
    }
}

/* ── Waitlist Form ─────────────────────────────────────────────────── */
.azub-pd-waitlist {
    display: flex;
    flex-direction: column;
    gap: var(--azub-spacing-md);
    margin-top: var(--azub-spacing-md);
}

.azub-pd-waitlist__intro {
    font-size: 0.875rem;
    color: var(--azub-dark-gray);
    line-height: 1.6;
    margin: 0;
}

.azub-pd-waitlist__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.azub-pd-waitlist__field label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--azub-dark-gray);
}

.azub-pd-waitlist__field input {
    padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--azub-border);
    border-radius: var(--azub-radius-md);
    font-family: var(--azub-font-body);
    font-size: 0.9375rem;
    color: var(--azub-black);
    background: var(--azub-white);
    transition: border-color var(--azub-transition-base);
    width: 100%;
}

.azub-pd-waitlist__field input:focus {
    outline: none;
    border-color: var(--azub-accent);
    box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.1);
}

.azub-pd-waitlist--success {
    padding: var(--azub-spacing-md);
    background: var(--azub-accent-light);
    border-radius: var(--azub-radius-md);
}

.azub-pd-waitlist__ok {
    font-size: 0.9375rem;
    color: var(--azub-accent);
    font-weight: 600;
    margin: 0;
}