/* BarkShop — shop listing, category archives, product page, search results. */

/* Shop and category tiles: the whole product image, centred on a white tile, never cropped
   (pairs with woocommerce_thumbnail_cropping=uncropped). */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: var(--bark-background);
    width: 100%;
    height: auto;
}

/* Product cards: white card, a fixed square image box, a two-line title, prominent price, the
   unit price, and the pine button pinned to the bottom so every card in a row lines up. */
.woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
    background: var(--bark-paper);
    border: 1px solid var(--bark-border);
    border-radius: var(--bark-radius-card);
    padding: .75rem .75rem 1.1rem;
    text-align: left;
    transition: transform .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product .ast-loop-product__link,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link { display: block; }
.woocommerce ul.products li.product .ast-loop-product__link img,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin: 0;
    border-radius: 13px;
    background: var(--bark-image-bg);
}
/* The title is clamped to two lines (the full name stays in the markup for assistive
   technology and in the product page); the price block has a fixed height whether or not a
   unit price follows, so every card in a row is the same height. */
/* Two-line title box: the height is an exact multiple of a line height set in rem, so a phone
   that inflates text (font boosting, text-size-adjust) or ignores line-clamp still clips between
   lines, never through the middle of one. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    --bark-card-title-line: 1.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: var(--bark-card-title-line);
    height: calc(2 * var(--bark-card-title-line));
    overflow-wrap: anywhere;
    padding: 0;
    margin: .7rem 0 .2rem;
}
.woocommerce ul.products li.product .price {
    display: block;
    min-height: 3.1em;
    margin: .2rem 0 0;
    line-height: 1.3;
}
.woocommerce ul.products li.product .bark-unit-price { margin: 0 0 .4rem; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .button.add_to_cart_button { margin-top: auto; }
.woocommerce ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: var(--bark-shadow);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    font-family: var(--bark-font-body);
    font-size: .95rem;
    font-weight: 600;
    color: var(--bark-ink);
}
.woocommerce ul.products li.product .price { font-size: 1.1rem; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .button.add_to_cart_button {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: .7rem;
    background-color: var(--bark-primary);
    border-color: var(--bark-primary);
    color: var(--bark-on-primary);
}
.woocommerce ul.products li.product .button:hover { background-color: var(--bark-primary-dark); }
.woocommerce span.onsale {
    background: var(--bark-sun);
    color: var(--bark-ink);
    border-radius: 999px;
}

/* ------------------------------------------------------------
   Layout: filters in a fixed left column, products in the main column. #secondary and #primary
   are siblings inside .ast-container; Astra's desktop flex row is unreliable here, so it is
   asserted explicitly. The content width itself comes from bin/setup-theme.php.
   ------------------------------------------------------------ */
.ast-left-sidebar #content > .ast-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 32px;
}
.ast-left-sidebar #secondary {
    flex: 0 0 270px;
    width: 270px;
    max-width: 270px;
    margin: 0;
    padding: 0;
    border: 0;
}
.ast-left-sidebar #primary {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding-left: 0;
    border: 0;
}
/* Phones and small tablets: the sidebar is an off-canvas drawer, opened by the "Filtry i
   kategorie" button above the products (inc/shop-filters.php, assets/js/shop-filters.js).
   The off-canvas rules are scoped to .bark-js, which inc/assets.php prints in the document head
   and drops again on load unless assets/js/shop-filters.js reports the drawer as built. The
   stacked-width reset below is deliberately outside that scope, so a listing without a working
   script shows the sidebar as an ordinary full-width block above the products.
   The breakpoint comes from PHP (BARK_DRAWER_MEDIA_QUERY) and must match the query below. */
.bark-filters-toggle,
.bark-filters-close { display: none; }
@media (max-width: 921px) {
    .ast-left-sidebar #content > .ast-container {
        flex-direction: column;
        gap: 0;
    }
    /* Stacked layout: the sidebar is a full-width block whether or not the script runs. */
    .ast-left-sidebar #secondary {
        width: 100%;
        max-width: 100%;
        flex-basis: auto;
    }
    .bark-js .ast-left-sidebar #secondary {
        position: fixed;
        inset: 0;
        z-index: 10000;
        overflow-y: auto;
        padding: 1rem 1rem 3rem;
        background: var(--bark-background);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .25s ease, visibility 0s linear .25s;
    }
    /* Astra puts .ast-left-sidebar on <body>, so the open state is a body class too. */
    .bark-js body.bark-filters-open.ast-left-sidebar #secondary {
        transform: none;
        visibility: visible;
        transition: transform .25s ease;
    }
    .bark-js body.bark-filters-open { overflow: hidden; }
    .bark-js .bark-filters-toggle {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        margin: 0 0 1rem;
        padding: .6rem 1rem;
        border: 2px solid var(--bark-primary);
        border-radius: var(--bark-radius);
        background: var(--bark-background);
        color: var(--bark-primary);
        font-weight: 700;
        cursor: pointer;
    }
    .bark-filters-toggle-icon::before { content: "☰"; }
    .bark-js .bark-filters-close {
        display: block;
        width: 100%;
        margin: 0 0 1rem;
        padding: .7rem 1rem;
        border-radius: var(--bark-radius);
        background: var(--bark-primary);
        color: var(--bark-on-primary);
        font-weight: 700;
        cursor: pointer;
    }
}
@media (prefers-reduced-motion: reduce) {
    .bark-js .ast-left-sidebar #secondary { transition: none; }
}

/* --- Category drill-down navigation --- */
.bark-catnav {
    margin: 0 0 1.2rem;
    padding: 0 0.2rem 1rem;
    border-bottom: 1px solid var(--bark-border);
}
.bark-catnav-title,
.bark-stock-title,
.woof .woof_container_inner > h4 {
    font-family: var(--bark-font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bark-ink);
}
.bark-catnav-title { padding: 0.4rem 0; }
.bark-catnav-back {
    display: block;
    font-size: 0.85rem;
    color: var(--bark-muted);
    text-decoration: none;
    margin: 0.2rem 0;
}
.bark-catnav-back:hover { color: var(--bark-primary); }
.bark-catnav-current {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bark-primary);
    margin: 0.2rem 0 0.5rem;
}
a.bark-catnav-current.bark-catnav-root {
    display: block;
    text-decoration: none;
}
.bark-catnav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bark-catnav-list li { margin: 0; }
.bark-catnav-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 0.42rem 0;
    font-size: 0.92rem;
    color: var(--bark-text);
    text-decoration: none;
    border-bottom: 1px solid var(--bark-surface);
}
.bark-catnav-list a:hover { color: var(--bark-primary); }
.bark-catnav-count,
.bark-stock-count,
.woof_checkbox_count,
.woof_count { color: var(--bark-muted); font-size: 0.82em; }

/* --- Availability filter --- */
.bark-stock-filter {
    padding: 0 0.2rem 0.8rem;
    border-bottom: 1px solid var(--bark-border);
}
.bark-stock-title { padding: 0.8rem 0; }
.bark-stock-list { list-style: none; margin: 0; padding: 0; }
.bark-stock-row { margin: 0 0 4px; font-size: 0.9rem; }
.bark-stock-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}
.bark-stock-row input { flex: 0 0 auto; margin: 0; }
.bark-stock-name { flex: 1 1 auto; }

/* WOOF's built-in category and tag facets stay hidden: categories are the drill-down above and
   tags are not a filter. (Default taxonomies WOOF keeps on with no switch to remove.) */
.woof_container_product_cat,
.woof_container_product_tag { display: none; }

/* --- Facet container + collapsible accordion title bar --- */
.woof .woof_container { margin: 0; border-bottom: 1px solid var(--bark-border); }
.woof .woof_container_inner { padding: 0; }
.woof .woof_container_inner > h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 0.8rem 0.2rem;
    cursor: pointer;
    user-select: none;
}
.woof .woof_front_toggle {
    margin-left: auto;
    color: var(--bark-muted);
    font-size: 0.8rem;
    line-height: 1;
    text-decoration: none;
}
.woof .woof_block_html_items { padding: 0 0.2rem 0.8rem; }

/* --- One-line checkbox rows: checkbox left, label + count right. WOOF injects literal <br>
   between li/input/label — hide them, then flex the row. --- */
.woof_list.woof_list_checkbox,
.woof_childs_list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woof_list.woof_list_checkbox li br,
.woof_childs_list br { display: none; }
.woof_list.woof_list_checkbox li {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 0 4px;
    line-height: 1.3;
    font-size: 0.9rem;
}
.woof_list.woof_list_checkbox .woof_childs_list {
    flex: 0 0 100%;
    margin: 4px 0 4px 22px;
}
.woof_list.woof_list_checkbox li > input.woof_checkbox_term[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
}
.woof_list.woof_list_checkbox li > label.woof_checkbox_label {
    flex: 1 1 auto;
    margin: 0;
    cursor: pointer;
}

/* Greyed-out options when no products match the current selection, sunk below the available
   ones (WOOF disables zero-count inputs; inc/shop-filters.php sorts server-side too). */
.woof_list.woof_list_checkbox { display: flex; flex-direction: column; }
.woof_list.woof_list_checkbox > li { order: 0; }
.woof_list.woof_list_checkbox > li:has(input.woof_checkbox_term:disabled) { order: 1; opacity: .5; }
.woof_list.woof_list_checkbox > li.woof_open_hidden_li { order: 2; }
.woof_list.woof_list_checkbox li > input.woof_checkbox_term:disabled + label.woof_checkbox_label {
    color: var(--bark-muted);
    cursor: default;
}
.woof_checkbox_count,
.woof_count { margin-left: 4px; }

/* "Pokaż więcej / mniej" toggle. */
a.woof_open_hidden_li_btn {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--bark-primary);
    text-decoration: none;
    cursor: pointer;
}

/* Search results: the facets cannot work there, so the sidebar is one button to the shop. */
.bark-search-filter-note {
    text-align: center;
    padding: 18px 14px;
    border: 1px solid var(--bark-border);
    border-radius: var(--bark-radius);
    background: var(--bark-surface);
}
.bark-search-filter-note__text {
    margin: 0 0 12px;
    font-size: .95em;
    color: var(--bark-text);
    line-height: 1.4;
}
.bark-search-filter-note__button {
    width: 100%;
    box-sizing: border-box;
}

/* Breadcrumb: WooCommerce inherits a light grey here; muted text (4.7:1) and pine links. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-breadcrumb { color: var(--bark-muted); }
.woocommerce .woocommerce-breadcrumb a,
.woocommerce-breadcrumb a { color: var(--bark-primary); text-decoration: underline; }

/* ------------------------------------------------------------
   Single product
   ------------------------------------------------------------ */

/* Main gallery image in a fixed box. BaseLinker photos mix tall portraits and wide shots, so the
   default gallery let a tall image run nearly full-screen. The box roughly matches the summary
   column; tall products get thin side bars, wide ones thin top/bottom bars. The flexslider
   writes inline heights, hence the overrides. */
.single-product .woocommerce-product-gallery { background: var(--bark-background); }
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery__wrapper { max-height: 480px !important; }
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__wrapper > a > img {
    height: 480px !important;
    max-height: 62vh !important;
    width: 100% !important;
    object-fit: contain !important;
    background: var(--bark-background);
}
@media (max-width: 600px) {
    .single-product .woocommerce-product-gallery .flex-viewport,
    .single-product .woocommerce-product-gallery__wrapper { max-height: 360px !important; }
    .single-product .woocommerce-product-gallery__image img,
    .single-product .woocommerce-product-gallery__wrapper > a > img {
        height: 360px !important;
        max-height: 56vh !important;
    }
}

/* Product description grid imported from BaseLinker (.section > .item-6/.item-12): clean
   semantic markup with no CSS, recreated as a responsive two-column image/text layout. */
.single-product .section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin: 1.5rem 0;
}
.single-product .section > .item { box-sizing: border-box; }
.single-product .section > .item-6 { flex: 1 1 calc(50% - 0.75rem); min-width: 260px; }
.single-product .section > .item-12 { flex: 1 1 100%; }
.single-product .section .image-item img {
    max-width: 100%;
    max-height: 480px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--bark-radius);
}
.single-product .section > .item-12 .image-item { text-align: center; }
.single-product .section .text-item h1,
.single-product .section .text-item h2 { font-size: 1.4rem; line-height: 1.25; margin: 0 0 .6rem; }
.single-product .section .text-item p,
.single-product .section .text-item li { line-height: 1.6; }
.single-product .section .text-item ul { padding-left: 1.2rem; }
@media (max-width: 600px) {
    .single-product .section > .item-6 { flex-basis: 100%; }
}

/* Stock status: WooCommerce's light green fails contrast on cream; pine for in stock, deep
   terracotta for out of stock (both AA). */
.woocommerce div.product p.stock,
.woocommerce div.product .stock.in-stock { color: var(--bark-primary); font-weight: 600; }
.woocommerce div.product .stock.out-of-stock { color: var(--bark-accent-deep); font-weight: 600; }

/* Product legal info: unit price per kg/l, sealed-food and return-cost notice before add-to-cart. */
.bark-unit-price { display: block; font-size: .8rem; font-weight: 400; opacity: .8; margin: .1rem 0 0; }
.bark-product-legal-notice {
    font-size: .85rem;
    line-height: 1.5;
    background: var(--bark-surface);
    border-left: 3px solid var(--bark-primary);
    padding: .6rem .8rem;
    margin: 0 0 1rem;
}
.bark-product-legal-notice p { margin: 0 0 .4rem; }
.bark-product-legal-notice p:last-child { margin-bottom: 0; }

/* Delivery timing under the add-to-cart button (88-delivery-info.php): the rule, never a date. */
.bark-delivery-info {
    font-size: .9rem;
    line-height: 1.5;
    background: var(--bark-paper);
    border: 1px solid var(--bark-border);
    border-left: 4px solid var(--bark-primary);
    border-radius: 6px;
    padding: .7rem .9rem;
    margin: .2rem 0 1.2rem;
}
.bark-delivery-info strong { color: var(--bark-primary); }