/**
 * B GREEN — category / search listing (PLP) design layer.
 *
 * Presentation ONLY, scoped to the catalog body classes and to the REAL Hyvä
 * markup hooks. No template/markup change, so every feature is preserved:
 * layered-navigation filters (kept in the sidebar — the design's inline toolbar
 * filters are intentionally NOT reproduced, to avoid breaking layered nav),
 * sorting, pagination, add-to-cart and price rendering all keep working.
 * Matches the design's editorial type, square crops, hairline toolbar + pager.
 */
:root {
    --bg-accent: #425034;
    --bg-accent-hover: #323C27;
    --bg-ink-heading: #3E3E37;
    --bg-ink-body: #57564D;
    --bg-ink-soft: #85847A;
    --bg-ink-faint: #ABAA9F;
    --bg-hairline: #E6E3D9;
    --bg-paper-warm: #F7F5EF;
    --bg-serif: 'Playfair Display', Georgia, serif;
}

/* --- Category header as an editorial hero (within the content column) ------ */
.catalog-category-view .page-title,
.catalogsearch-result-index .page-title {
    font-family: var(--bg-serif);
    font-weight: 500;
    color: var(--bg-ink-heading);
    letter-spacing: -0.018em;
    font-size: clamp(38px, 4vw, 64px);
    line-height: 1.05;
}
.catalog-category-view .category-description,
.catalog-category-view .category-view .prose { color: var(--bg-ink-body); }
.catalog-category-view .category-description p { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.7; max-width: 60ch; }

/* --- Toolbar: hairline frame + square selects ----------------------------- */
.catalog-category-view .actions-toolbar,
.catalogsearch-result-index .actions-toolbar {
    border-top: 1px solid var(--bg-hairline);
    border-bottom: 1px solid var(--bg-hairline);
    padding-top: 16px;
    padding-bottom: 16px;
    margin-bottom: 40px;
}
.catalog-category-view .toolbar-amount { color: var(--bg-ink-soft); letter-spacing: 0.06em; }
.catalog-category-view .sorter-options,
.catalog-category-view .limiter-options,
.catalog-category-view select[data-role="sorter"] {
    font-family: 'Nunito Sans', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--bg-ink-heading);
    border-radius: 0;
}

/* --- Product cards --------------------------------------------------------- */
.catalog-category-view .product-item-photo,
.catalogsearch-result-index .product-item-photo { background: var(--bg-paper-warm); overflow: hidden; }
.catalog-category-view .product-item img,
.catalogsearch-result-index .product-item img { border-radius: 0; }
/* Hyvä centres the packshot (object-contain + absolute), which left the beige box
   showing in the corners. Make the image FILL the whole photo box instead. */
.catalog-category-view .product-item .product-image-photo,
.catalogsearch-result-index .product-item .product-image-photo {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    transform: none !important;
}
/* Brand rule: everything square — the circular badge becomes a square label. */
.catalog-category-view .ProductBadge,
.catalogsearch-result-index .ProductBadge {
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 6px 12px !important;
    top: 0 !important;
    left: 0 !important;
}
.catalog-category-view .ProductBadge p { font-size: 10.5px !important; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.catalog-category-view .product-item-link,
.catalogsearch-result-index .product-item-link {
    font-family: var(--bg-serif);
    font-size: 19px;
    color: var(--bg-ink-heading);
    transition: color 0.2s;
}
.catalog-category-view .product-item:hover .product-item-link { color: var(--bg-accent); }
.catalog-category-view .product-item .price,
.catalog-category-view .product-item [data-price-type],
.catalog-category-view .product-item .price-wrapper,
.catalogsearch-result-index .product-item .price { color: var(--bg-accent); font-weight: 700; }

/* --- No-sidebar mode: full-width products + horizontal filter bar ---------- */
/* Toggled by Stores > Config > B GREEN (bgreen_frontend/catalog/hide_sidebar);
   the observer moves the filters + category widget to the top of the content. */
.bg-plp-nosidebar .sidebar.sidebar-main { display: none !important; }
.bg-plp-nosidebar .columns { display: block !important; }
.bg-plp-nosidebar .column.main { width: 100% !important; max-width: none !important; float: none !important; }

/* The moved layered-nav filters -> a horizontal bar above the grid. */
.bg-plp-nosidebar .column.main > .block.filter,
.bg-plp-nosidebar .column.main .filter {
    border-top: 1px solid var(--bg-hairline);
    border-bottom: 1px solid var(--bg-hairline);
    margin-bottom: 32px;
    padding: 10px 0;
}
.bg-plp-nosidebar .filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    align-items: center;
}
.bg-plp-nosidebar .filter-options-item { border: none; margin: 0; position: relative; }
.bg-plp-nosidebar .filter-options-title {
    font-family: 'Nunito Sans', system-ui, sans-serif;
    font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    font-size: 12.5px; color: var(--bg-ink-heading);
    border: 1px solid var(--bg-hairline); padding: 10px 16px; border-radius: 0; cursor: pointer;
}
/* Dropdown content floats under its title (Alpine open/close is preserved). */
.bg-plp-nosidebar .filter-options-content {
    position: absolute; z-index: 30; top: 100%; left: 0; min-width: 220px;
    background: #fff; border: 1px solid var(--bg-hairline); padding: 14px 16px; margin-top: 4px;
}
.bg-plp-nosidebar .filter-current { width: 100%; margin: 8px 0 0; }

/* --- Pagination: square, hairline ----------------------------------------- */
.catalog-category-view .pages .item,
.catalogsearch-result-index .pages .item {
    min-width: 42px; height: 42px; display: inline-grid; place-items: center;
    border-radius: 0;
}
.catalog-category-view .pages .item.current,
.catalog-category-view .pages .item .page {
    border-radius: 0;
}
.catalog-category-view .pages .item.current {
    border: 1px solid var(--bg-accent);
    color: var(--bg-accent);
}

/* --- Gap between the full-bleed category hero and the filter bar ----------- */
.catalog-category-view.homepage-transparent-header .column.main { padding-top: clamp(36px, 4vw, 64px); }
@media (max-width: 1000px) {
    .catalog-category-view.homepage-transparent-header .column.main { padding-top: 28px; }
}