/* 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: gentle rounding and lift; amber add-to-cart. */
.woocommerce ul.products li.product {
    border-radius: var(--bark-radius);
    transition: transform .15s ease, box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: var(--bark-shadow);
}
.woocommerce ul.products li.product .button.add_to_cart_button {
    background-color: var(--bark-accent);
    border-color: var(--bark-accent);
    color: var(--bark-ink);
}
.woocommerce span.onsale {
    background: var(--bark-accent);
    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;
}
@media (max-width: 921px) {
    .ast-left-sidebar #content > .ast-container {
        flex-direction: column;
        gap: 0;
    }
    .ast-left-sidebar #secondary {
        flex-basis: auto;
        width: 100%;
        max-width: 100%;
    }
}

/* --- 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-size: 0.95rem;
    font-weight: 600;
    color: var(--bark-ink);
}
.bark-catnav-title { padding: 0.4rem 0; }
.bark-catnav-back {
    display: block;
    font-size: 0.85rem;
    color: #888;
    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: #999; 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: #888;
    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: #bbb;
    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-wood-dark);
    line-height: 1.4;
}
.bark-search-filter-note__button {
    width: 100%;
    box-sizing: border-box;
}

/* ------------------------------------------------------------
   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%; }
}

/* 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-wood-dark);
    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; }