/* Beds Furniture Modern - Shop / category archive styles (enqueued only on shop & product-category pages) */

/* =========================================================
   SHOP BANNER
========================================================= */
.bf-shop-banner{position:relative;min-height:150px;display:flex;align-items:center;background:var(--ink);color:#fff;overflow:hidden;}
.bf-shop-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;}
.bf-shop-banner .container{position:relative;z-index:1;padding:38px 20px;}
.bf-shop-banner h1{color:#fff;margin-bottom:6px;font-family:var(--f-head);font-style:italic;font-weight:500;}
.bf-shop-banner p{color:var(--on-dark-muted);max-width:600px;margin:0;}
@media(max-width:480px){
    .bf-shop-banner{min-height:0;}
    .bf-shop-banner .container{padding:26px 20px;}
}

/* =========================================================
   CATEGORY SHOWCASE
   (.bf-cat-card itself is defined in the shared style.css - the
   homepage grid re-uses the same component.)
========================================================= */
.bf-shop-cat-showcase{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-auto-rows:140px;gap:14px;padding:22px 0 4px;
}
.bf-shop-main__heading{font-family:var(--f-head);font-size:24px;font-weight:600;font-style:italic;color:var(--ink);margin-bottom:18px;}
@media(max-width:480px){
    .bf-shop-cat-showcase{grid-template-columns:repeat(2,1fr);grid-auto-rows:128px;gap:10px;padding:18px 0 2px;}
    .bf-shop-main__heading{font-size:19px;}
}

/* =========================================================
   TOOLBAR
   Replaces the old left sidebar entirely: result count + a
   "Filters" button that opens a slide-out drawer (whatever widgets
   used to live in the sidebar - price filter, category list - now
   render inside that drawer) sit on the left, sort on the right.
========================================================= */
.bf-shop-toolbar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
    padding:16px 0;border-bottom:1px solid var(--line);margin-bottom:26px;
}
.bf-shop-toolbar__left{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.bf-shop-toolbar .woocommerce-result-count{color:var(--muted);font-size:13.5px;margin:0;}
.bf-shop-toolbar mark.count{color:var(--ink);font-weight:700;background:none;}
.bf-shop-toolbar__right{display:flex;align-items:center;gap:12px;}
.bf-shop-toolbar select,
.bf-shop-toolbar .woocommerce-ordering select{
    padding:9px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
    font-family:inherit;background:#fff;font-size:13.5px;color:var(--ink-text);max-width:100%;
}
.bf-shop-toolbar form.woocommerce-ordering{margin:0;}

.bf-shop-filter-toggle{
    display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:var(--r-sm);
    border:1.5px solid var(--ink);background:var(--ink);color:#fff;font-weight:600;font-size:13.5px;cursor:pointer;
    transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.bf-shop-filter-toggle:hover{background:var(--ink-soft);}
.bf-shop-filter-toggle i{font-size:13px;}

@media(max-width:520px){
    .bf-shop-toolbar{flex-direction:column;align-items:flex-start;gap:10px;}
    .bf-shop-toolbar__left,.bf-shop-toolbar__right{width:100%;justify-content:space-between;}
    .bf-shop-toolbar__right select{width:100%;}
}

/* =========================================================
   SHOP LAYOUT
   Full-width product grid, no reserved sidebar column - scoped to
   .bf-shop-layout only, so the sitewide header/footer (which also
   use .container at --wrap) are untouched.
========================================================= */
.bf-shop-layout{padding:30px 0 60px;}
.bf-shop-layout .container{max-width:1180px;}

/* Flat, borderless main column - no heavy card chrome, just the grid
   sitting directly on the page. */
.bf-shop-main{background:transparent;border:0;border-radius:var(--r-sm);padding:0;box-shadow:none;}

/* =========================================================
   SLIDE-OUT FILTER DRAWER
   Holds whatever widgets are assigned to the "Shop Sidebar" widget
   area - price filter, category list, etc. IDs are a fixed contract
   with theme.js.
========================================================= */
.shop-filter-scrim{
    display:none;position:fixed;inset:0;background:rgba(var(--ink-rgb),.5);z-index:290;
    opacity:0;transition:opacity .2s ease;
}
.shop-filter-scrim.is-open{display:block;opacity:1;}
.shop-filter-drawer{
    position:fixed;top:0;left:0;bottom:0;width:340px;max-width:88vw;background:#fff;z-index:300;
    display:flex;flex-direction:column;box-shadow:14px 0 40px rgba(var(--ink-rgb),.22);
    transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.shop-filter-drawer.is-open{transform:translateX(0);}
.shop-filter-drawer__head{
    display:flex;align-items:center;justify-content:space-between;padding:18px 20px;
    border-bottom:1px solid var(--line);flex-shrink:0;
}
.shop-filter-drawer__head h3{margin:0;font-size:17px;font-family:var(--f-head);font-weight:600;}
.shop-filter-drawer__close{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font-size:14px;}
.shop-filter-drawer__close:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
.shop-filter-drawer__body{flex:1;overflow-y:auto;padding:16px 20px 30px;}
.shop-filter-drawer__body .widget{padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid var(--line);}
.shop-filter-drawer__body .widget:last-child{border-bottom:0;margin-bottom:0;}
.shop-filter-drawer__body .widget h3,.shop-filter-drawer__body .widget-title{
    font-family:var(--f-head);font-size:15px;font-weight:600;margin-bottom:14px;color:var(--ink);
    display:inline-block;padding-bottom:7px;border-bottom:2px solid var(--rust);
}
.shop-filter-drawer__body ul{list-style:none;}
.shop-filter-drawer__body li{margin-bottom:8px;font-size:13.5px;}
.shop-filter-drawer__body li a{transition:color .15s ease,padding-left .15s ease;}
.shop-filter-drawer__body li a:hover{color:var(--rust);padding-left:3px;}
@media(max-width:480px){.shop-filter-drawer{width:100%;max-width:100%;}}

.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px;list-style:none;margin:0;padding:0;}
/* .pagination-wrap itself lives in the shared style.css - the blog
   archive and the generic index.php fallback both paginate with it
   too, not just this shop grid. */

/* Mobile grid fix: shop.css is enqueued with a dependency on
   beds-style, so it is printed AFTER style.css in the page - at equal
   specificity the later stylesheet wins even inside a media query,
   which meant this file's unconditional auto-fill/minmax(250px,1fr)
   rule above was overriding style.css's own "@media(max-width:640px)
   .product-grid{grid-template-columns:repeat(2,1fr)}" mobile rule.
   With only ~335px of content width on a 375px phone, minmax(250px,1fr)
   can only fit a single column, so every card stretched edge-to-edge
   ("boht bary bary" / oversized cards). Repeating the 2-column rule
   here, after the base rule in this same file, guarantees it wins. */
@media(max-width:640px){
    .product-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
}
@media(max-width:400px){
    .product-grid{gap:8px;}
}

/* =========================================================
   INFINITE SCROLL
   IDs are a fixed contract with theme.js - .is-entering too.
========================================================= */
.infinite-scroll-sentinel{height:1px;}
.infinite-scroll-loader{
    display:flex;align-items:center;justify-content:center;gap:10px;padding:30px 0;color:var(--muted);font-weight:600;font-size:13.5px;
    animation:bf-fade-in .25s ease;
}
.infinite-scroll-loader .spinner{
    width:20px;height:20px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--rust);
    animation:bf-spin .7s linear infinite;
}
@keyframes bf-spin{to{transform:rotate(360deg);}}
.infinite-scroll-end{
    text-align:center;padding:34px 0 10px;color:var(--muted);font-size:13.5px;font-weight:600;
    animation:bf-fade-in .35s ease;
}
.infinite-scroll-end::before{
    content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--brass);
    display:block;font-size:18px;margin-bottom:8px;
}
@keyframes bf-fade-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
/* The [hidden] attribute has the same CSS specificity as a class
   selector, so without this, our own .infinite-scroll-loader{display:flex}
   rule always wins and the loading row never actually disappears when
   theme.js sets hidden=true. */
.infinite-scroll-loader[hidden],.infinite-scroll-end[hidden]{display:none!important;}

.product-grid > .is-entering{opacity:0;transform:translateY(14px);}
.product-grid > li{transition:opacity .35s ease,transform .35s ease;}
.woocommerce-info.no-products{grid-column:1/-1;}