/*
 * Bergmann – Product Display CSS
 * Include from bergmann.php enqueue. 
 * Covers: specs table, swatches, color tabs, product description.
 */

/* ─── Specs table ─────────────────────────────────────────────────────────── */
.berg-specifications {
    margin: 24px 0;
}
.berg-specifications h3 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--berg-mid, #888);
    margin-bottom: 12px;
}
.berg-specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--berg-border, #e0e0dc);
}
.berg-spec-row {
    display: contents;
}
.berg-spec-row dt,
.berg-spec-row dd {
    padding: 8px 4px;
    border-bottom: 1px solid var(--berg-border, #e0e0dc);
    font-size: 0.85rem;
    margin: 0;
}
.berg-spec-row dt {
    font-weight: 600;
    color: var(--berg-text, #2a2a2a);
    padding-right: 12px;
}
.berg-spec-row dd {
    color: var(--berg-mid, #666);
}
@media (max-width: 480px) {
    .berg-specs-grid { grid-template-columns: 1fr; }
}

/* ─── Product description ─────────────────────────────────────────────────── */
.berg-product-description {
    margin: 20px 0;
    font-size: 16px;
    line-height: 1.7;
    color: #444;
}
.berg-product-description p { margin-bottom: 15px; }
.berg-product-description p:last-child { margin-bottom: 0; }

/* Suppress WC variation description — we use our own via shortcode */
.woocommerce-variation-description { display: none !important; }

/* ─── Color swatches (shared — simple + variable products) ───────────────── */
.berg-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 0 16px;
    align-items: flex-start;  /* prevent label from pushing sibling swatches down */
}

.berg-swatch {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    outline: none;
    transition: border-color 0.15s, transform 0.12s;
    flex-shrink: 0;
}

.berg-swatch:hover,
.berg-swatch:focus-visible {
    border-color: var(--berg-primary-light, #8a9a84);
    transform: scale(1.06);
}

.berg-swatch[aria-checked="true"] {
    border: 4px solid var(--berg-primary-light, #8a9a84);
    box-shadow: 0 0 0 2px #fff;
    transform: scale(1.06);
}

.berg-swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.berg-swatch-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #8a9a84;
}

.berg-swatch.out-of-stock {
    opacity: 0.45;
    cursor: default;
}
.berg-swatch.out-of-stock::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-linear-gradient(
        -45deg, transparent, transparent 4px,
        rgba(255,255,255,0.55) 4px, rgba(255,255,255,0.55) 5px
    );
}

/* ─── Swatch wrap — label directly below its own swatch ─────────────────── */
.berg-swatch-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 50px;          /* matches swatch size — label stays within swatch bounds */
}
.berg-swatch-wrap__label {
    display: none;
    font-size: 10px;
    color: var(--berg-primary, #4a4f4a);
    margin-top: 4px;
    white-space: normal;  /* allow wrapping to 2 lines */
    word-break: break-word;
    text-align: center;
    width: 100%;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

/* ─── Selected color label — single label below the swatch row (non-ladyline) ── */
.berg-selected-color-label {
    min-height: 1.4em;
    font-size: 10px;
    color: var(--berg-primary, #4a4f4a);
    margin: 6px 0 4px;
    letter-spacing: 0.02em;
    text-align: center;
}

/* ─── Color tabs (Lady Line) ─────────────────────────────────────────────── */
.berg-color-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.berg-color-tab {
    padding: 6px 18px;
    border-radius: 30px;
    border: none;
    background: var(--berg-bg-sage) !important;
    color: var(--berg-primary, #4a4f4a);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    line-height: 1.4;
    outline: none;
}
.berg-color-tab:hover {
    filter: brightness(0.93);
}
.berg-color-tab.is-active {
    background: var(--berg-primary) !important;
    color: #fff;
}

.berg-color-panel { display: none; }
.berg-color-panel.is-active { display: block; }

/* ─── Tabbed swatches container (Lady Line) ──────────────────────────────── */
.berg-tabbed-swatches { margin: 16px 0; }

/* Suppress native WC pa_farbe dropdown when our swatch UI is present */
.variations_form tr[data-attribute_name="attribute_pa_farbe"],
.variations_form .variation-attribute-pa_farbe,
.woocommerce-variation-attribute-pa_farbe { display: none !important; }
.variations_form .reset_variations { display: none !important; }

/* ─── Gallery image sizing ───────────────────────────────────────────────── */
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}