.aisle-archive-head h1{font-family:var(--font-body); font-weight:700; font-size:30px; letter-spacing:-0.01em; margin-top:4px;}

/* Category-page breadcrumb — see dwc_woocommerce_breadcrumb_defaults
   removal in inc/woocommerce-support.php and the manual
   woocommerce_breadcrumb() call in woocommerce/archive-product.php.
   Typography matches .product-breadcrumb (main.css) for consistency with
   the single-product page's own hand-built breadcrumb, but without
   display:flex/gap — core's breadcrumb output is plain text with an
   inline delimiter between <a> tags, not discrete sibling elements the
   way the hand-built product one is, so flex would just create odd
   anonymous-item spacing around the delimiter text. */
.dwc-category-breadcrumb{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); margin-bottom:20px; display:block;}
.dwc-category-breadcrumb a{color:var(--ink-soft);}
.dwc-category-breadcrumb a:hover{color:var(--red);}

.term-description{font-size:17px; color:var(--ink); font-weight:500; margin-top:12px; max-width:640px; line-height:1.5;}
.term-description p{margin:0 0 8px;}
.term-description p:last-child{margin-bottom:0;}
.archive-toolbar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
.woocommerce-result-count{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); margin:0;}
.woocommerce-ordering{margin-left:auto;}
.woocommerce-ordering select{
  border:var(--border-w) solid var(--line); border-radius:var(--radius-sm); background:var(--surface); font-family:var(--font-mono);
  font-size:12px; padding:8px 10px; width:auto; min-width:160px;
}
.woocommerce-pagination{margin-top:32px; display:flex; justify-content:center; gap:6px;}
.woocommerce-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px;
  border:var(--border-w) solid var(--line); border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:12px;
}
.woocommerce-pagination .page-numbers.current{background:var(--ink); color:#fff; border-color:var(--ink);}
.woocommerce-pagination .page-numbers:not(.current):not(.dots):hover{background:var(--accent); color:#fff; border-color:var(--accent);}

/* ---------- Aisle wayfinding + shelf grouping ----------
   Category pages group products by warehouse shelf (see
   dwc_group_products_by_shelf() in inc/template-helpers.php) instead of one
   flat grid, with this jump bar acting like a store directory board. ---------- */
.aisle-jump-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border:var(--border-w) solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm);
  padding:10px 14px; margin-bottom:30px; position:sticky; top:88px; z-index:10;
}
.aisle-jump-label{font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; color:var(--ink-soft); flex-shrink:0;}
.aisle-jump-link{
  font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--ink); border-radius:var(--radius-pill);
  border:var(--border-w) solid var(--line); padding:4px 10px; white-space:nowrap;
}
.aisle-jump-link:hover{border-color:var(--accent); background:var(--accent); color:#fff;}

.shelf-row{margin-bottom:40px; scroll-margin-top:150px;}
.shelf-row:last-child{margin-bottom:0;}
.shelf-row-label{
  display:flex; align-items:baseline; gap:10px; margin-bottom:16px;
  padding-bottom:8px; border-bottom:1px solid var(--line);
}
.shelf-tag{font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:0.04em;}
.shelf-count{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft);}

/* ---------- Empty aisle — points at neighboring aisles instead of a
   dead end ---------- */
.aisle-empty{display:flex; flex-direction:column; align-items:center; gap:10px;}
.aisle-empty-next{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); margin-top:6px;}
.aisle-empty-links{display:flex; gap:8px; flex-wrap:wrap; justify-content:center;}
.aisle-empty-link{
  font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--ink); border-radius:var(--radius-pill);
  border:var(--border-w) solid var(--line); background:var(--surface); padding:6px 12px;
}
.aisle-empty-link:hover{background:var(--accent); border-color:var(--accent); color:#fff;}

@media (max-width:640px){
  .aisle-jump-bar{position:static; overflow-x:auto; flex-wrap:nowrap;}
}
/* Aisle header photo collage — see dwc_get_category_header_images() in
   inc/category-fields.php. Fixed mosaic layouts for 1–6 photos (rather
   than a true dynamic masonry) so it always looks intentional regardless
   of how many photos a category has. Categories with none set skip this
   block entirely (see woocommerce/archive-product.php). */
.aisle-header-masonry{
  display:grid; gap:6px; margin-bottom:20px; border-radius:var(--radius-lg); overflow:hidden; height:320px;
}
.aisle-header-masonry-tile{overflow:hidden; min-height:0; min-width:0;}
.aisle-header-masonry-tile img{width:100%; height:100%; object-fit:cover; display:block;}

.aisle-header-masonry-1{grid-template-columns:1fr; grid-template-areas:"a";}
.aisle-header-masonry-1 .aisle-header-masonry-tile:nth-child(1){grid-area:a;}

.aisle-header-masonry-2{grid-template-columns:1fr 1fr; grid-template-areas:"a b";}
.aisle-header-masonry-2 .aisle-header-masonry-tile:nth-child(1){grid-area:a;}
.aisle-header-masonry-2 .aisle-header-masonry-tile:nth-child(2){grid-area:b;}

.aisle-header-masonry-3{grid-template-columns:1.4fr 1fr; grid-template-rows:1fr 1fr; grid-template-areas:"a b" "a c";}
.aisle-header-masonry-3 .aisle-header-masonry-tile:nth-child(1){grid-area:a;}
.aisle-header-masonry-3 .aisle-header-masonry-tile:nth-child(2){grid-area:b;}
.aisle-header-masonry-3 .aisle-header-masonry-tile:nth-child(3){grid-area:c;}

.aisle-header-masonry-4{grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:1fr 1fr; grid-template-areas:"a a b c" "a a d c";}
.aisle-header-masonry-4 .aisle-header-masonry-tile:nth-child(1){grid-area:a;}
.aisle-header-masonry-4 .aisle-header-masonry-tile:nth-child(2){grid-area:b;}
.aisle-header-masonry-4 .aisle-header-masonry-tile:nth-child(3){grid-area:c;}
.aisle-header-masonry-4 .aisle-header-masonry-tile:nth-child(4){grid-area:d;}

.aisle-header-masonry-5{grid-template-columns:1.2fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr; grid-template-areas:"a b c" "a b d" "a e d";}
.aisle-header-masonry-5 .aisle-header-masonry-tile:nth-child(1){grid-area:a;}
.aisle-header-masonry-5 .aisle-header-masonry-tile:nth-child(2){grid-area:b;}
.aisle-header-masonry-5 .aisle-header-masonry-tile:nth-child(3){grid-area:c;}
.aisle-header-masonry-5 .aisle-header-masonry-tile:nth-child(4){grid-area:d;}
.aisle-header-masonry-5 .aisle-header-masonry-tile:nth-child(5){grid-area:e;}

.aisle-header-masonry-6{grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr; grid-template-areas:"a b c" "d e f";}
.aisle-header-masonry-6 .aisle-header-masonry-tile:nth-child(1){grid-area:a;}
.aisle-header-masonry-6 .aisle-header-masonry-tile:nth-child(2){grid-area:b;}
.aisle-header-masonry-6 .aisle-header-masonry-tile:nth-child(3){grid-area:c;}
.aisle-header-masonry-6 .aisle-header-masonry-tile:nth-child(4){grid-area:d;}
.aisle-header-masonry-6 .aisle-header-masonry-tile:nth-child(5){grid-area:e;}
.aisle-header-masonry-6 .aisle-header-masonry-tile:nth-child(6){grid-area:f;}

@media (max-width:640px){
  .aisle-header-masonry{height:220px;}
}

/* Inline "AI Aisle Finder" scan bar on category ("aisle") pages — see
   template-parts/aisle-ai-scan.php. Renders full-bleed, BEFORE .wrap
   opens, and docks flush under the sitewide sticky header (same
   background, no gap, real elevation shadow) so it reads as an extension
   of the site's header chrome — a persistent utility bar — rather than a
   card that happens to float over whatever product row is scrolled
   underneath it. header.nav is itself position:sticky and only slides via
   a transform on scroll (see .nav--hidden in main.css), so its rendered
   height is stable regardless of scroll state — assets/js/aisle-scan.js
   measures it once on load/resize into --dwc-header-h, which this docks
   directly against (no added gap). The form itself reuses
   .ai-finder-form / .search-row / .ai-finder-eyebrow from header-nav.css
   (same styling as the header's modal, already loaded site-wide). */
.aisle-scan-bar{
  position:sticky; top:var(--dwc-header-h, 64px); z-index:20;
  background:var(--bg); border-bottom:var(--border-w) solid var(--line);
  box-shadow:var(--shadow);
  transition:top 0.25s ease;
}
/* header.nav slides itself out of view on scroll-down (see .nav--hidden in
   main.css + assets/js/header-scroll.js) — that's a transform, so it
   doesn't change layout/height, but it DOES mean the header can be gone
   while this was still sticking at "however tall the header is", leaving
   an empty gap above it. assets/js/aisle-scan.js mirrors header.nav's
   .nav--hidden onto <html> as .dwc-header-hidden so this can collapse its
   offset to 0 the instant the header disappears. */
html.dwc-header-hidden .aisle-scan-bar{top:0;}
.aisle-scan-bar-inner{padding:16px 28px;}
.aisle-scan-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.aisle-scan-bar .ai-finder-form{margin-top:10px;}
.aisle-scan-bar textarea{min-height:40px; background:var(--surface);}
.aisle-scan-scope{display:flex; gap:6px;}
.aisle-scan-scope-btn{
  border:var(--border-w) solid var(--line); border-radius:var(--radius-pill); background:var(--surface);
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.02em; padding:6px 12px; color:var(--ink-soft); text-transform:uppercase;
}
.aisle-scan-scope-btn:hover{border-color:var(--accent); color:var(--ink);}
.aisle-scan-scope-btn.is-active{background:var(--ink); border-color:var(--ink); color:#fff;}
.aisle-scan-active-note{
  font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); margin-top:12px;
}
.aisle-scan-active-note a{color:var(--accent); text-decoration:underline; margin-left:6px;}
.aisle-scan-active-note a:hover{color:var(--red);}

@media (max-width:640px){
  .aisle-scan-bar{position:static;} /* Sticky gets cramped on small screens next to the mobile nav — sits inline instead. */
  .aisle-scan-bar-inner{padding:14px 16px;}
}