/*
 * puzzlup-product.css  v1.4
 * Wird nur auf Produktseiten geladen.
 */



/* ──────────────────────────────────────────────────────────────
   PRODUKT-LAYOUT  38 % Bild / 56 % Text  (Flexbox)
────────────────────────────────────────────────────────────── */
.woocommerce div.product {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6%;
    align-items: flex-start;
}

/* Galerie-Spalte: Wrapper nur für die Galerie */
.woocommerce div.product .pzl-gallery-col {
    flex: 0 0 38%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Gleicher Selektor wie woocommerce-layout.css → gleiche Spezifität, lädt später → gewinnt */
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery {
    width: 100%;
    float: none;
    max-width: none;
}

/* Hauptbild: volle Breite, proportionale Höhe */
.woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Doppelter Abstand zur Breadcrumb, kein Abstand unten (Reviews füllen bis Rand) */
body.single-product .site-main {
    padding-top: calc(var(--space-xl) * 2);
    padding-bottom: 0;
}

/* Summary: rechte Spalte */
.woocommerce div.product .summary.entry-summary {
    flex: 0 0 56%;
    float: none;
    width: auto;
    max-width: none;
}

/* Verwandte Produkte / Upsells: volle Breite */
.woocommerce div.product .related,
.woocommerce div.product .up-sells {
    flex: 0 0 100%;
}

@media (max-width: 800px) {
    .woocommerce div.product {
        flex-direction: column;
    }
    .woocommerce div.product .pzl-gallery-col,
    .woocommerce div.product .summary.entry-summary {
        flex: 0 0 100%;
        width: 100%;
    }
}


/* ── Kurzbeschreibung ───────────────────────────────────────── */
.single-product .woocommerce-product-details__short-description {
    font-size: 1.1em;
}

.single-product .woocommerce-product-details__short-description p,
.pzl-description-content p {
    margin-bottom: 0.9em;
}

.single-product .woocommerce-product-details__short-description p:last-child,
.pzl-description-content p:last-child,
.pzl-product-section__content p:last-child {
    margin-bottom: 0;
}

.single-product .woocommerce-product-details__short-description p:first-child,
.pzl-description-content p:first-child,
.pzl-product-section__content p:first-child {
    margin-top: 0;
}

.single-product .woocommerce-product-details__short-description ul,
.single-product .woocommerce-product-details__short-description ol,
.pzl-description-content ul,
.pzl-description-content ol {
    margin-bottom: 0.9em;
    padding-left: 1.4em;
    list-style: disc;
}

.single-product .woocommerce-product-details__short-description ol,
.pzl-description-content ol {
    list-style: decimal;
}

.single-product .woocommerce-product-details__short-description li,
.pzl-description-content li {
    margin-bottom: 0.35em;
}

/* ──────────────────────────────────────────────────────────────
   BADGES
────────────────────────────────────────────────────────────── */
.pzl-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: var(--space-md) 0 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
}

.pzl-badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: .75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-decoration: none;
}

.pzl-badge--cat { background: #d0f0e0; color: #1a6640; }
.pzl-badge--cat:hover { background: #b8e8d0; color: #1a6640; }
.pzl-badge--tag { background: #ffcc02; color: #5c4300; }

/* ──────────────────────────────────────────────────────────────
   FEATURE-CHIPS
────────────────────────────────────────────────────────────── */

.pzl-badges-label {
    margin: 0 0 4px;
    font-size: .8rem;
    color: var(--text-muted);
}

.pzl-feature-chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin: var(--space-md) 0 var(--space-lg);
}

.pzl-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    padding: 9px 14px 9px 10px;
    min-width: 0;
    border: 1px solid rgba(0,0,0,0.1);
}

.pzl-chip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    flex-shrink: 0;
    overflow: hidden;
}

.pzl-chip-icon svg { display: block; }

.pzl-chip-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.pzl-chip-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}

.pzl-chip-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pzl-chip-value {
    font-size: .8rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 800px) {
    .pzl-feature-chips {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .pzl-feature-chips {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 320px) {
    .pzl-feature-chips {
        grid-template-columns: 1fr;
    }
}

/* ──────────────────────────────────────────────────────────────
   KAUFBUTTON
────────────────────────────────────────────────────────────── */
.single-product .cart {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.product-type-external .quantity { display: none !important; }


/* ──────────────────────────────────────────────────────────────
   SECTION DIVIDER
────────────────────────────────────────────────────────────── */
.pzl-divider {
    height: 1px;
    background: var(--border);
    margin: var(--space-xl) 0;
}

.pzl-section-divider {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: var(--space-xl) 0 var(--space-md);
}

.pzl-section-divider > span {
    flex: 1;
    height: 1.5px;
    background: linear-gradient(to right, transparent, #c8b8ff, transparent);
}

.pzl-related-heading {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--text);
    margin: 0 0 var(--space-lg);
}

/* ──────────────────────────────────────────────────────────────
   RELATED PRODUCTS
────────────────────────────────────────────────────────────── */
.related.products h2 { display: none; }

.related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--space-md) !important;
    margin: 0 !important;
}

@media (max-width: 992px) {
    .related.products ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .related.products ul.products { grid-template-columns: 1fr 1fr !important; }
}

.related.products ul.products li.product {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--border);
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex;
    flex-direction: column;
}

.related.products ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.related.products ul.products li.product a img {
    border-radius: 0;
    margin: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.related.products ul.products li.product h2.woocommerce-loop-product__title {
    font-family: var(--font-heading);
    font-size: .875rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    padding: 10px 12px 4px;
    margin: 0;
}

.related.products ul.products li.product .price {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-primary);
    padding: 0 12px;
}

.related.products ul.products li.product .button,
.related.products ul.products li.product a.button {
    display: block;
    margin: auto 12px 12px;
    background: var(--color-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    text-align: center;
    font-family: var(--font-heading) !important;
    font-size: .8rem !important;
    font-weight: 700 !important;
    padding: var(--space-sm) 0 !important;
    transition: background var(--transition);
    text-decoration: none;
}

.related.products ul.products li.product .button:hover {
    background: var(--color-primary-dark) !important;
}

/* ──────────────────────────────────────────────────────────────
   GALERIE
────────────────────────────────────────────────────────────── */
.woocommerce-product-gallery__wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}

.woocommerce-product-gallery .flex-viewport {
    margin-bottom: 10px;
}

.flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-sm) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.flex-control-thumbs li {
    width: calc(20% - 7px) !important;
    margin: 0 !important;
    float: none !important;
}

.flex-control-thumbs li img {
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: border-color var(--transition);
}

.flex-control-thumbs li img.flex-active,
.flex-control-thumbs li img:hover {
    border-color: var(--color-primary);
    opacity: 1;
}

/* ── Produktmeta ── */
.single-product .product_meta {
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: var(--space-md);
}
.single-product .product_meta a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
.single-product .product_meta a:hover { text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────
   PRODUCT SECTIONS (aufgelöste Tabs, inline in der Summary)
────────────────────────────────────────────────────────────── */
.pzl-product-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: var(--space-md) 0;
}

.pzl-product-section {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.pzl-product-section__title {
    font-family: var(--font-heading);
    font-size: .75rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary-light);
    border-bottom: 1px solid var(--border);
}

.pzl-product-section__content {
    padding: .75rem var(--space-md);
    font-size: .875rem;
    color: var(--text);
    line-height: 1.7;
}

/* Attributtabelle in "Zusätzliche Informationen" */
.pzl-product-section--additional_information .woocommerce-product-attributes {
    width: 100%;
    border-collapse: collapse;
}

.pzl-product-section--additional_information .woocommerce-product-attributes th,
.pzl-product-section--additional_information .woocommerce-product-attributes td {
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    font-size: .8rem;
    vertical-align: top;
}

.pzl-product-section--additional_information .woocommerce-product-attributes tr:last-child th,
.pzl-product-section--additional_information .woocommerce-product-attributes tr:last-child td {
    border-bottom: none;
}

.pzl-product-section--additional_information .woocommerce-product-attributes th {
    font-weight: 700;
    color: var(--color-primary-dark);
    width: 38%;
    padding-right: 12px;
}

/* Schmalerer Divider direkt in der Summary (vor Kategorien) */
.pzl-divider--summary {
    margin: 1.25rem 0 var(--space-md);
}

/* Kategorien in der Summary (unter Kaufbutton) */
.pzl-summary-categories {
    margin-top: 0;
}

/* ── Beschreibung (kein Card-Look) ── */
.pzl-description-content {
    font-size: .875rem;
    color: var(--text);
    line-height: 1.7;
}

/* ──────────────────────────────────────────────────────────────
   REZENSIONEN — Dark Theme (analog zum Blog-Kommentarbereich)
────────────────────────────────────────────────────────────── */
.single-product { overflow-x: clip; }

.pzl-reviews-full {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background: #252540;
    padding: var(--space-2xl) var(--space-lg);
    margin-top: var(--space-2xl);
}

.pzl-reviews-inner {
    max-width: var(--max-width, 1140px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--space-2xl);
    align-items: start;
}

@media (max-width: 992px) {
    .pzl-reviews-inner { grid-template-columns: 1fr; }
    .pzl-reviews-deco  { display: none; }
}

/* Deco-Spalte */
.pzl-reviews-deco {
    position: relative;
    top: 30px;
}

.pzl-reviews-deco svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 12px 40px rgba(0,0,0,.45));
}

/* Content-Spalte */
.pzl-reviews-content-col {
    max-width: 680px;
}

.pzl-reviews-full .pzl-product-sections { margin: 0; gap: 0; }

/* Sektionsinhalt */
.pzl-reviews-content { color: rgba(255,255,255,.75); line-height: 1.7; }
.pzl-reviews-content #reviews { padding: 0; }

/* Überschrift */
.pzl-reviews-full #reviews h2,
.pzl-reviews-full .woocommerce-Reviews-title {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    color: #fff;
    margin: 0 0 var(--space-lg);
}

/* ── Review-Liste ── */
.pzl-reviews-full .commentlist {
    list-style: none;
    margin: 0 0 var(--space-xl);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.pzl-reviews-full .commentlist li.review {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    list-style: none;
}

.pzl-reviews-full .comment_container { display: flex; gap: var(--space-md); align-items: flex-start; }

.pzl-reviews-full .comment_container img.avatar {
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.12);
    flex-shrink: 0;
}

.pzl-reviews-full .comment_container .comment-text { flex: 1; min-width: 0; }

/* Meta */
.pzl-reviews-full .woocommerce-review__author { font-weight: 700; color: #fff; }

.pzl-reviews-full .woocommerce-review__dash,
.pzl-reviews-full .woocommerce-review__published-date { color: rgba(255,255,255,.60); }

/* Sterne-Anzeige */
.pzl-reviews-full .star-rating::before      { color: rgba(255,255,255,.18) !important; }
.pzl-reviews-full .star-rating span::before { color: #ffcc02 !important; }

/* Bewertungstext */
.pzl-reviews-full .description p,
.pzl-reviews-full .comment-text p {
    color: rgba(255,255,255,.72);
    margin: var(--space-sm) 0 0;
}

/* Durchschnitt + "Noch keine Bewertung" */
.pzl-reviews-full .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    color: rgba(255,255,255,.55);
}

.pzl-reviews-full #reviews p { color: rgba(255,255,255,.55); }

/* ── Bewertungsformular ── */
.pzl-reviews-full #review_form_wrapper { margin-top: var(--space-xl); }

.pzl-reviews-full #reply-title,
.pzl-reviews-full .comment-reply-title {
    font-family: var(--font-heading);
    font-size: .875rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--space-md);
}

.pzl-reviews-full .comment-form label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,.60);
    margin-bottom: var(--space-xs);
}

.pzl-reviews-full .comment-form input[type="text"],
.pzl-reviews-full .comment-form input[type="email"],
.pzl-reviews-full .comment-form textarea {
    width: 100%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-md);
    color: #fff;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-body);
    transition: border-color var(--transition);
    outline: none;
    box-sizing: border-box;
}

.pzl-reviews-full .comment-form input[type="text"]:focus,
.pzl-reviews-full .comment-form input[type="email"]:focus,
.pzl-reviews-full .comment-form textarea:focus {
    border-color: var(--color-primary);
}

.pzl-reviews-full .comment-form input[type="text"]::placeholder,
.pzl-reviews-full .comment-form input[type="email"]::placeholder,
.pzl-reviews-full .comment-form textarea::placeholder {
    color: rgba(255,255,255,.28);
}

/* Stern-Auswahl */
.pzl-reviews-full p.stars a::before                          { color: rgba(255,255,255,.25) !important; }
.pzl-reviews-full p.stars a:hover::before,
.pzl-reviews-full p.stars.selected a.active::before,
.pzl-reviews-full p.stars.selected a::before                 { color: #ffcc02 !important; }

/* Submit-Button */
.pzl-reviews-full .comment-form input[type="submit"] {
    background: var(--color-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    padding: var(--space-sm) 1.75rem !important;
    cursor: pointer;
    transition: background var(--transition);
    margin-top: var(--space-sm);
}

.pzl-reviews-full .comment-form input[type="submit"]:hover {
    background: var(--color-primary-dark) !important;
}