/* ============================================================
   JJ Stuff — Shop / Catalog
   ============================================================ */

.shop-head{
  background:linear-gradient(180deg,var(--warm-white),var(--linen));
  border-bottom:1px solid var(--cream);
}
.shop-head__inner{max-width:var(--wrap);margin:0 auto;padding:32px clamp(16px,4vw,24px) 24px;text-align:center}
.shop-head__eyebrow{font-family:var(--font-hand);font-size:22px;color:var(--gold-text)}
.shop-head__title{font-family:var(--font-head);font-size:clamp(28px,5vw,38px);font-weight:600;line-height:1.05}
.shop-head__sub{color:var(--muted);font-size:15px;margin-top:6px}

.shop{max-width:var(--wrap);margin:0 auto;padding:28px clamp(16px,4vw,24px) 56px;display:grid;grid-template-columns:230px 1fr;gap:32px;align-items:start}

/* Filter sidebar */
.filters{position:sticky;top:74px}
.filters__group{border-bottom:1px solid var(--cream);padding:16px 0}
.filters__group:first-child{padding-top:0}
.filters__title{font-family:var(--font-head);font-size:15px;font-weight:600;margin-bottom:12px}
.filter-opt{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--navy);cursor:pointer;padding:5px 0}
.filter-opt input{width:16px;height:16px;accent-color:var(--coral);cursor:pointer}
.filter-opt .count{margin-left:auto;font-size:12px;color:var(--light)}
.filters__clear{margin-top:16px;font-size:13px}
/* The filter sidebar is a GET form; these style the parts WooCommerce's
   original widget markup did not have. */
.filters__apply{width:100%;margin-top:16px;font-size:13px}
.filters__clear{display:block;width:100%;text-align:center;text-decoration:none}
/* An option that would return nothing is dimmed rather than removed, so the
   sidebar does not reshuffle under the cursor as boxes are ticked. */
.filter-opt--empty{color:var(--light);cursor:default}
.filter-opt--empty input{cursor:default}

/* Toolbar */
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.shop-count{font-size:13px;color:var(--muted)}
.shop-count strong{color:var(--navy)}
.shop-sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.shop-sort select{
  font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--navy);
  border:2px solid var(--cream);border-radius:var(--radius-sm);padding:7px 30px 7px 12px;background:var(--warm-white);cursor:pointer;
  appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%231C2E47' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
/* Scoped to the toolbar deliberately. The opener carries .btn for its styling,
   and theme.css (which sets .btn{display:inline-flex}) loads after this file —
   equal specificity, so source order won: a bare .filter-toggle{display:none}
   lost, and the drawer opener showed on desktop beside an already-visible
   sidebar. Two classes outrank one regardless of order. */
.shop-toolbar .filter-toggle{display:none}

/* Grid */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.shop-empty{display:none;text-align:center;color:var(--muted);padding:48px 0;font-size:15px}
.shop-empty.show{display:block}

/* Active filter chips */
.active-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--coral-pale);color:var(--coral-dark);
  border:none;border-radius:20px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font-body);
}
.chip{text-decoration:none}
.chip:hover{background:var(--coral-lt);color:#fff}

/* Mobile drawer for filters */
.filters-backdrop{display:none}
@media (max-width:820px){
  .shop{grid-template-columns:1fr}
  .shop-toolbar .filter-toggle{display:inline-flex}
  .filters{
    position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85vw;background:var(--warm-white);
    z-index:200;padding:20px;overflow-y:auto;transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--shadow-md);
  }
  .filters.open{transform:translateX(0)}
  .filters__mobile-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
  .filters__mobile-head h3{font-family:var(--font-head);font-size:20px}
  .filters__mobile-head button{background:none;border:none;font-size:24px;cursor:pointer;color:var(--muted)}
  .filters-backdrop{position:fixed;inset:0;background:rgba(28,46,71,.4);z-index:199;opacity:0;pointer-events:none;transition:opacity .25s}
  .filters-backdrop.open{display:block;opacity:1;pointer-events:auto}
}
@media (min-width:821px){.filters__mobile-head{display:none}}
@media (max-width:640px){.shop-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
@media (max-width:380px){.shop-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   WooCommerce bridge.

   The grid class is added to WooCommerce's own <ul class="products"> wrapper
   (see jjstuff_loop_grid_class in functions.php) rather than replacing it, so
   these rules undo the list and float styling woocommerce-layout.css applies
   to ul.products / li.product. Without them the <li> elements keep their
   float + percentage width and sit one per row inside the grid.
--------------------------------------------------------------------------- */
.shop-main{min-width:0}

ul.shop-grid{list-style:none;margin:0;padding:0}

/* WooCommerce clearfixes ul.products with ::before/::after {content:" ";
   display:table}. Harmless for a float layout, but in a GRID container those
   pseudo-elements become real grid items: they take the first and last cells
   and push every product one place along, which is why the first card started
   in column two and each card appeared offset from its own text. */
.woocommerce ul.shop-grid::before,
.woocommerce ul.shop-grid::after,
ul.shop-grid::before,
ul.shop-grid::after{content:none !important;display:none !important}

.woocommerce ul.shop-grid > li.product,
ul.shop-grid > li.product{
  margin:0 !important;
  padding:0;
  width:auto !important;
  float:none !important;
  clear:none !important;
  display:block !important;
}
.shop-grid > li.product::before,
.shop-grid > li.product::after{content:none}
.shop-grid > li.product > .product-card{width:100%;height:100%}

/* Featured image fills the card's fixed-ratio media slot. */
.product-card__img > img{width:100%;height:100%;object-fit:cover;display:block}

/* Category fallback list, used when no widgets are in Shop Sidebar. */
.filters__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.filters__list a{font-size:14px;color:var(--navy);text-decoration:none}
.filters__list a:hover{color:var(--coral-dark)}
.filters__list span{color:var(--muted);font-size:12px}

/* WooCommerce's ordering form inside the theme toolbar. */
.shop-sort .woocommerce-ordering{margin:0}
.shop-toolbar .woocommerce-result-count{display:none}