/* =========================================================================
   Barek Ogrodowy — sekcja Produkt
   --------------------------------------------------------------------
   Layout desktop: 1.1fr / 1fr — galeria po lewej, info po prawej.
   Mobile: stack — galeria na górze, info pod nią.
   Zawiera: gallery (main + thumbs), nazwa, cena, opis,
   placeholder personalizacji, qty selector, add to cart.
   ========================================================================= */

.barek-product {
    padding: var(--barek-section-py) 0;
    background: var(--barek-white);
    color: var(--barek-text);
    font-family: var(--barek-font-body);
}

.barek-product__inner {
    /* max-width / margin / padding-x — w main.css (shared container 1400 px) */
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--barek-space-8);
    align-items: start;
}

/* ============================================================
   GALERIA
   ============================================================ */

.barek-product__gallery {
    display: flex;
    flex-direction: column;
    gap: var(--barek-space-4);
}

.barek-product__main-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--barek-radius-lg);
    background: var(--barek-cream);
}

.barek-product__main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--barek-duration) var(--barek-ease);
}

.barek-product__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--barek-space-2);
}

.barek-product__thumb {
    width: 72px;
    height: 72px;
    padding: 0;
    background: var(--barek-cream);
    border: 2px solid transparent;
    border-radius: var(--barek-radius-md);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--barek-duration) var(--barek-ease),
                opacity var(--barek-duration) var(--barek-ease);
    opacity: 0.6;
}

.barek-product__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.barek-product__thumb:hover,
.barek-product__thumb:focus-visible {
    opacity: 1;
}

.barek-product__thumb.is-active {
    border-color: var(--barek-orange);
    opacity: 1;
}

/* ============================================================
   INFO (prawa strona)
   ============================================================ */

.barek-product__info {
    display: flex;
    flex-direction: column;
}

.barek-product__eyebrow {
    margin: 0 0 var(--barek-space-3);
    font-size: var(--barek-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    color: var(--barek-orange);
}

.barek-product__heading {
    margin: 0 0 var(--barek-space-4);
    font-family: var(--barek-font-body);
    font-size: var(--barek-text-3xl);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--barek-dark);
}

.barek-product__price {
    margin: 0 0 var(--barek-space-5);
    font-size: var(--barek-text-xl);
    font-weight: 700;
    color: var(--barek-orange);
}

/* WC sam wsadza <span class="amount">, <ins>, <del> — nadpisujemy */
.barek-product__price ins {
    text-decoration: none;
    color: var(--barek-orange);
}
.barek-product__price del {
    margin-right: var(--barek-space-2);
    color: var(--barek-muted);
    font-weight: 500;
    text-decoration: line-through;
}

.barek-product__short-description {
    margin: 0 0 var(--barek-space-6);
    font-size: var(--barek-text-md);
    line-height: 1.7;
    color: var(--barek-muted);
}

.barek-product__short-description p {
    margin: 0 0 var(--barek-space-3);
}

.barek-product__short-description p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   PRZYCISK "KUP TERAZ" — otwiera modal kreatora personalizacji
   ============================================================ */

.barek-product__buy-now {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Faza 2 redesign — primary lg = 44 px */
    height: 44px;
    padding: 0 var(--barek-space-6);
    margin: 0 0 var(--barek-space-3);
    background: var(--barek-orange);
    color: var(--barek-white);
    border: 0;
    border-radius: var(--barek-radius-pill);
    font-family: var(--barek-font-body);
    font-size: var(--barek-text-sm);
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(232, 101, 28, 0.25);
    transition: background var(--barek-duration) var(--barek-ease),
                transform var(--barek-duration-fast) var(--barek-ease),
                box-shadow var(--barek-duration) var(--barek-ease);
}

.barek-product__buy-now:hover,
.barek-product__buy-now:focus-visible {
    background: var(--barek-orange-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(200, 84, 15, 0.32);
}

.barek-product__buy-now:active {
    transform: translateY(0);
}

/* Fallback form — ukryta wizualnie, używana tylko w razie potrzeby przez JS */
.barek-product__fallback-form {
    display: none;
}

/* Shipping note pod CTA */
.barek-product__shipping-note {
    margin: 0;
    font-size: var(--barek-text-xs);
    color: var(--barek-muted);
    letter-spacing: 0.3px;
}

/* ============================================================
   FALLBACK gdy brak produktu w WC
   ============================================================ */

.barek-product.is-fallback .barek-product__main-image {
    background: repeating-linear-gradient(
        45deg,
        var(--barek-cream),
        var(--barek-cream) 12px,
        rgba(124, 139, 112, 0.08) 12px,
        rgba(124, 139, 112, 0.08) 24px
    );
}

.barek-product.is-fallback .barek-product__main-image img {
    opacity: 0.4;
}

.barek-product.is-fallback .barek-product__buy-now {
    pointer-events: none;
    opacity: 0.5;
}

/* ============================================================
   BREAKPOINTY
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
    .barek-product {
        padding: var(--barek-section-py-tablet) 0;
    }
    .barek-product__inner {
        gap: var(--barek-space-6);
        /* padding-x — w main.css */
    }
    .barek-product__heading {
        font-size: var(--barek-text-2xl);
    }
}

/* Mobile (≤ 880) — stack galeria nad info */
@media (max-width: 880px) {
    .barek-product__inner {
        grid-template-columns: 1fr;
        gap: var(--barek-space-6);
    }
    .barek-product__main-image {
        aspect-ratio: 1 / 1;
        max-width: 520px;
        margin: 0 auto;
        width: 100%;
    }
    .barek-product__thumbs {
        justify-content: center;
    }
}

/* Mobile small */
@media (max-width: 640px) {
    .barek-product {
        padding: var(--barek-section-py-mobile) 0;
    }
    /* .barek-product__inner padding-x — w main.css */
    .barek-product__heading {
        font-size: var(--barek-text-xl);
    }
    .barek-product__price {
        font-size: var(--barek-text-lg);
    }
    .barek-product__buy-now {
        width: 100%;
        height: 48px; /* mobile tap target większy */
        padding: 0 var(--barek-space-5);
    }
    .barek-product__thumb {
        width: 60px;
        height: 60px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .barek-product__main-image img,
    .barek-product__thumb,
    .barek-product__buy-now {
        transition: none;
    }
}