/* =========================================================================
   Barek Ogrodowy — strona Koszyk
   --------------------------------------------------------------------
   Layout desktop: items LEFT (1.6fr) + summary RIGHT (1fr, sticky)
   Mobile: stack — items na górze, summary pod nimi
   --------------------------------------------------------------------
   UWAGA: bazowy selector to `section.barek-cart` (nie samo `.barek-cart`)
   żeby nie kolidowało z `<a class="barek-cart">` (ikona koszyka w headerze).
   Dziedziczone klasy `.barek-cart__*` używane na podstronie różnią się od
   `.barek-cart__icon` / `.barek-cart__count` z headera, więc nie kolidują.
   ========================================================================= */

section.barek-cart {
    /* !important — Divi (przez .et_pb_section / .entry-content > section) nadpisuje padding;
       musimy wymusić, żeby treść nie chowała się pod fixed-headerem. */
    padding-top: calc(var(--barek-header-height) + var(--barek-space-7)) !important;
    padding-bottom: var(--barek-section-py);
    padding-left: 0;
    padding-right: 0;
    background: var(--barek-white);
    color: var(--barek-text);
    font-family: var(--barek-font-body);

    /* Full-bleed — łamanie ograniczenia szerokości rodzica (Divi .et_pb_row).
       Bez tego cart siedzi w wąskim kontenerze Divi (~1080 px) zamiast
       wypełniać całą szerokość strony.
       Inner z max-width: 1400 px (z main.css) sam centruje treść. */
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    box-sizing: border-box;
}

/* .barek-cart__inner — max-width / margin / padding-x w main.css (shared container) */

/* ============================================================
   HEADER (eyebrow + H1)
   ============================================================ */

.barek-cart__header {
    margin-bottom: var(--barek-space-6);
}

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

.barek-cart__heading {
    margin: 0;
    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);
}

/* WC notices (errors, success messages) */
.barek-cart__notices {
    margin-bottom: var(--barek-space-5);
}

.barek-cart__notices:empty {
    display: none;
}

/* Wymuszamy widoczność tekstu — domyślne style WC mają tekst prawie tego
   samego koloru co tło. !important wszędzie żeby pobić WC + Divi. */
.barek-cart__notices ul,
.barek-cart__notices .woocommerce-message,
.barek-cart__notices .woocommerce-error,
.barek-cart__notices .woocommerce-info {
    margin: 0 0 var(--barek-space-3) !important;
    padding: var(--barek-space-4) var(--barek-space-5) !important;
    border-radius: var(--barek-radius-md) !important;
    font-size: var(--barek-text-sm) !important;
    line-height: 1.5 !important;
    list-style: none !important;
    background-image: none !important;
    box-shadow: none !important;
    text-align: left !important;
    display: flex;
    align-items: center;
    gap: var(--barek-space-3);
    font-weight: 500;
}

.barek-cart__notices .woocommerce-message {
    background-color: rgba(124, 139, 112, 0.14) !important;
    color: var(--barek-dark) !important;
    border-left: 4px solid var(--barek-green) !important;
}

.barek-cart__notices .woocommerce-message::before {
    content: '\2713'; /* checkmark ✓ */
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--barek-green);
    color: var(--barek-white);
    border-radius: 50%;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
}

.barek-cart__notices .woocommerce-error {
    background-color: rgba(232, 101, 28, 0.10) !important;
    color: var(--barek-dark) !important;
    border-left: 4px solid var(--barek-orange) !important;
}

.barek-cart__notices .woocommerce-error::before {
    content: '!';
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--barek-orange);
    color: var(--barek-white);
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

.barek-cart__notices .woocommerce-info {
    background-color: var(--barek-cream) !important;
    color: var(--barek-dark) !important;
    border-left: 4px solid var(--barek-muted) !important;
}

/* Linki wewnątrz notice'ów (np. "Cofnij?" przy usuwaniu pozycji) */
.barek-cart__notices a {
    margin-left: auto;
    color: var(--barek-orange) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

.barek-cart__notices a:hover {
    color: var(--barek-orange-hover) !important;
}

/* ============================================================
   LAYOUT — items + summary
   ============================================================ */

.barek-cart__layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--barek-space-7);
    align-items: start;
}

/* ============================================================
   ITEMS LIST
   ============================================================ */

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

.barek-cart__items-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--barek-space-3);
    margin-top: var(--barek-space-4);
    padding-top: var(--barek-space-5);
    border-top: 1px solid var(--barek-line);
}

.barek-cart__back-link {
    color: var(--barek-muted);
    font-size: var(--barek-text-sm);
    text-decoration: none;
    transition: color var(--barek-duration) var(--barek-ease);
}

.barek-cart__back-link:hover,
.barek-cart__back-link:focus-visible {
    color: var(--barek-orange);
}

/* ============================================================
   POJEDYNCZA POZYCJA — 3-kolumnowy grid (image | main | remove)
   ┌─────┬──────────────────────────────┬───┐
   │     │ Bransoletka sowa              │   │
   │     │ Wzór: A | Tekst: B            │   │
   │ IMG │ 200,00 zł / szt               │ × │
   │     ├───────────────────────────────┤   │
   │     │ [− 1 +]            200,00 zł │   │
   └─────┴──────────────────────────────┴───┘
   __main = flex column (info na górze, footer z qty+subtotal na dole)
   ============================================================ */

.barek-cart-item {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    column-gap: var(--barek-space-4);
    padding: var(--barek-space-4);
    align-items: start;
    background: var(--barek-white);
    border: 1px solid var(--barek-line);
    border-radius: var(--barek-radius-md);
    transition: border-color var(--barek-duration) var(--barek-ease);
}

.barek-cart-item:hover {
    border-color: var(--barek-orange-soft);
}

.barek-cart-item__image {
    display: block;
    width: 88px;
    height: 88px;
    border-radius: var(--barek-radius-sm);
    overflow: hidden;
    background: var(--barek-cream);
    align-self: start;
}

/* Main area = info (top) + footer (bottom). Flex column. */
.barek-cart-item__main {
    display: flex;
    flex-direction: column;
    gap: var(--barek-space-3);
    min-width: 0;
    text-align: left;
}

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

.barek-cart-item__info {
    min-width: 0;
    text-align: left;
}

.barek-cart-item__name {
    margin: 0 0 var(--barek-space-2);
    font-family: var(--barek-font-body);
    font-size: var(--barek-text-md);
    font-weight: 700;
    line-height: 1.3;
    color: var(--barek-dark);
}

.barek-cart-item__meta {
    margin: 0 0 var(--barek-space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.barek-cart-item__meta li {
    font-size: var(--barek-text-xs);
    color: var(--barek-muted);
    line-height: 1.4;
}

.barek-cart-item__meta-label {
    font-weight: 600;
    color: var(--barek-text);
}

.barek-cart-item__meta-value {
    color: var(--barek-muted);
}

.barek-cart-item__unit-price {
    font-size: var(--barek-text-sm);
    color: var(--barek-muted);
    font-weight: 500;
}

.barek-cart-item__unit-suffix {
    color: var(--barek-muted);
}

/* WC outputs <span class="woocommerce-Price-amount amount">125,00&nbsp;<span class="woocommerce-Price-currencySymbol">zł</span></span> */
.barek-cart-item__unit-price .amount,
.barek-cart-item__subtotal .amount {
    color: var(--barek-text);
    font-weight: 600;
}

/* ----- Footer row: qty (left) + subtotal (right) w jednej linii ----- */
.barek-cart-item__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--barek-space-3);
    padding-top: var(--barek-space-3);
    border-top: 1px solid var(--barek-line);
}

/* ----- Quantity selector ----- */
.barek-cart-item__qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--barek-line);
    border-radius: var(--barek-radius-pill);
    overflow: hidden;
    height: 40px;
    flex-shrink: 0;
}

.barek-cart-item__qty-btn {
    width: 36px;
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--barek-text);
    font-size: var(--barek-text-md);
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    transition: background var(--barek-duration) var(--barek-ease),
                color var(--barek-duration) var(--barek-ease);
}

.barek-cart-item__qty-btn:hover,
.barek-cart-item__qty-btn:focus-visible {
    color: var(--barek-orange);
    background: var(--barek-orange-soft);
}

.barek-cart-item__qty input[type="number"] {
    width: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--barek-line);
    border-right: 1px solid var(--barek-line);
    text-align: center;
    font-family: var(--barek-font-body);
    font-size: var(--barek-text-sm);
    font-weight: 600;
    color: var(--barek-text);
    -moz-appearance: textfield;
}

.barek-cart-item__qty input[type="number"]::-webkit-outer-spin-button,
.barek-cart-item__qty input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.barek-cart-item__qty input[type="number"]:focus {
    outline: none;
    background: var(--barek-orange-soft);
}

/* ----- Subtotal ----- */
.barek-cart-item__subtotal {
    display: inline-flex;
    align-items: baseline;
    gap: var(--barek-space-2);
    text-align: right;
    flex-shrink: 0;
}

.barek-cart-item__subtotal-label {
    font-size: var(--barek-text-xs);
    color: var(--barek-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
}

.barek-cart-item__subtotal-value {
    font-size: var(--barek-text-md);
    font-weight: 700;
    color: var(--barek-orange);
}

.barek-cart-item__subtotal-value .amount {
    color: var(--barek-orange);
}

/* ----- Remove ----- */
.barek-cart-item__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--barek-muted);
    border-radius: 50%;
    text-decoration: none;
    align-self: start;
    transition: color var(--barek-duration) var(--barek-ease),
                background var(--barek-duration) var(--barek-ease);
}

.barek-cart-item__remove:hover,
.barek-cart-item__remove:focus-visible {
    color: var(--barek-orange);
    background: var(--barek-orange-soft);
}

.barek-cart-item__remove svg {
    display: block;
}

/* ============================================================
   SUMMARY (sidebar)
   ============================================================ */

.barek-cart__summary {
    position: sticky;
    top: calc(var(--barek-header-height) + var(--barek-space-3));
    padding: var(--barek-space-6);
    background: var(--barek-cream);
    border-radius: var(--barek-radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--barek-space-4);
}

.barek-cart__summary-heading {
    margin: 0;
    font-family: var(--barek-font-body);
    font-size: var(--barek-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--barek-dark);
}

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

.barek-cart__totals-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--barek-space-3);
    font-size: var(--barek-text-sm);
    color: var(--barek-text);
}

.barek-cart__totals-row .amount {
    color: var(--barek-text);
    font-weight: 500;
}

.barek-cart__totals-row-muted {
    color: var(--barek-muted);
    font-style: italic;
    font-size: var(--barek-text-xs);
}

.barek-cart__totals-row--coupon {
    color: var(--barek-green);
}

.barek-cart__totals-row--coupon .barek-cart__totals-row-discount {
    color: var(--barek-green);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--barek-space-2);
}

.barek-cart__totals-coupon-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(124, 139, 112, 0.18);
    color: var(--barek-green);
    text-decoration: none;
    font-size: 11px;
    line-height: 1;
}

.barek-cart__totals-coupon-remove:hover {
    background: var(--barek-green);
    color: var(--barek-white);
}

.barek-cart__totals-row--total {
    margin-top: var(--barek-space-2);
    padding-top: var(--barek-space-3);
    border-top: 1px solid var(--barek-line);
    font-size: var(--barek-text-md);
    font-weight: 600;
}

.barek-cart__totals-row--total .barek-cart__totals-row-total-value,
.barek-cart__totals-row--total .amount {
    font-size: var(--barek-text-xl);
    font-weight: 700;
    color: var(--barek-orange);
}

/* ----- Coupon ----- */
.barek-cart__coupon {
    display: flex;
    gap: var(--barek-space-2);
}

.barek-cart__coupon input[type="text"] {
    flex: 1;
    padding: var(--barek-space-2) var(--barek-space-3);
    background: var(--barek-white);
    border: 1px solid var(--barek-line);
    border-radius: var(--barek-radius-md);
    font-family: var(--barek-font-body);
    font-size: var(--barek-text-sm);
    color: var(--barek-text);
    transition: border-color var(--barek-duration) var(--barek-ease);
}

.barek-cart__coupon input[type="text"]:focus {
    outline: none;
    border-color: var(--barek-orange);
    box-shadow: 0 0 0 3px var(--barek-orange-soft);
}

.barek-cart__coupon-btn {
    padding: 0 var(--barek-space-4);
    background: var(--barek-white);
    color: var(--barek-dark);
    border: 1px solid var(--barek-line);
    border-radius: var(--barek-radius-md);
    font-family: var(--barek-font-body);
    font-size: var(--barek-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    cursor: pointer;
    transition: border-color var(--barek-duration) var(--barek-ease),
                color var(--barek-duration) var(--barek-ease);
}

.barek-cart__coupon-btn:hover {
    border-color: var(--barek-orange);
    color: var(--barek-orange);
}

/* ----- Buttons ----- */
.barek-cart__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Faza 2 redesign — primary lg = 44 px */
    height: 44px;
    padding: 0 var(--barek-space-5);
    border-radius: var(--barek-radius-pill);
    font-family: var(--barek-font-body);
    font-size: var(--barek-text-sm);
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background var(--barek-duration) var(--barek-ease),
                color var(--barek-duration) var(--barek-ease),
                border-color var(--barek-duration) var(--barek-ease),
                transform var(--barek-duration-fast) var(--barek-ease);
}

.barek-cart__btn--primary {
    background: var(--barek-orange);
    color: var(--barek-white);
    border-color: var(--barek-orange);
}

.barek-cart__btn--primary:hover,
.barek-cart__btn--primary:focus-visible {
    background: var(--barek-orange-hover);
    border-color: var(--barek-orange-hover);
    color: var(--barek-white);
    transform: translateY(-1px);
}

.barek-cart__btn--ghost {
    background: transparent;
    color: var(--barek-muted);
    border-color: var(--barek-line);
    height: 40px;
    font-size: var(--barek-text-xs);
    padding: 0 var(--barek-space-4);
}

.barek-cart__btn--ghost:hover,
.barek-cart__btn--ghost:focus-visible {
    color: var(--barek-orange);
    border-color: var(--barek-orange);
}

.barek-cart__checkout {
    width: 100%;
}

.barek-cart__summary-note {
    margin: 0;
    font-size: var(--barek-text-xs);
    color: var(--barek-muted);
    text-align: center;
    line-height: 1.5;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.barek-cart__empty {
    text-align: center;
    max-width: 480px;
    margin: var(--barek-space-7) auto;
    padding: var(--barek-space-7) var(--barek-space-5);
}

.barek-cart__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: 0 auto var(--barek-space-5);
    border-radius: 50%;
    background: var(--barek-orange-soft);
    color: var(--barek-orange);
}

.barek-cart__empty-text {
    margin: 0 0 var(--barek-space-6);
    font-size: var(--barek-text-base);
    line-height: 1.6;
    color: var(--barek-muted);
}

/* ============================================================
   ERROR (gdy WC nieaktywny)
   ============================================================ */

.barek-cart-error {
    padding: var(--barek-space-6);
    background: var(--barek-cream);
    border-left: 3px solid var(--barek-orange);
    border-radius: var(--barek-radius-md);
    color: var(--barek-text);
}

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

/* Tablet */
@media (max-width: 1024px) {
    section.barek-cart {
        padding-top: calc(var(--barek-header-height) + var(--barek-space-6)) !important;
    }
    /* .barek-cart__inner padding-x — w main.css */
    .barek-cart__layout {
        grid-template-columns: 1fr;
        gap: var(--barek-space-6);
    }
    .barek-cart__summary {
        position: static;
    }
}

/* Mobile (≤640) — kompaktowy item card */
@media (max-width: 640px) {
    section.barek-cart {
        padding-top: calc(var(--barek-header-height) + var(--barek-space-5)) !important;
        padding-bottom: var(--barek-section-py-mobile);
    }
    /* .barek-cart__inner padding-x — w main.css */
    .barek-cart__heading {
        font-size: var(--barek-text-2xl);
    }
    .barek-cart-item {
        grid-template-columns: 72px 1fr auto;
        column-gap: var(--barek-space-3);
    }
    .barek-cart-item__image {
        width: 72px;
        height: 72px;
    }
    .barek-cart-item__name {
        font-size: var(--barek-text-sm);
    }
    .barek-cart-item__subtotal-value {
        font-size: var(--barek-text-base);
    }
    .barek-cart__items-footer {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: var(--barek-space-2);
    }
    .barek-cart__btn--ghost {
        width: 100%;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .barek-cart-item,
    .barek-cart-item__qty-btn,
    .barek-cart-item__remove,
    .barek-cart__back-link,
    .barek-cart__coupon input,
    .barek-cart__coupon-btn,
    .barek-cart__btn,
    .barek-cart__totals-coupon-remove {
        transition: none;
    }
}