/*
 * Combinations archive (/bundles/).
 *
 * Only the archive's own furniture lives here. The hero, the introduction and
 * the sorting/filtering panels reuse the storefront blocks from
 * woocommerce-custom.css and categoria.css — this sheet loads after both and
 * carries just the places the archive design differs from them. The bundle card
 * itself is styled by bundle-card.css and is shared with the homepage block and
 * the wishlist, so nothing here may reach inside it.
 */

/* Hero — 276px desktop comes from .taxonomy-cat-top-banner; the artboard crops
   it to 150px on mobile rather than the shared 194px. */
@media (max-width: 768px) {
  .bundles-archive .taxonomy-cat-top-banner.bundles-archive-hero {
    min-height: 150px;
    max-height: 150px;
  }
}

/* Breadcrumb + controls row, mirroring section.taxonomy-sorting. */
.bundles-archive-subheader {
  display: flex;
  position: relative;
  gap: 20px;
  padding-bottom: 15px;
  margin: 35px auto 0;
  align-items: center;
  max-width: 1230px;
  border-bottom: 1px solid #e0e0e0;
  justify-content: space-between;
}

/* Document order already puts the breadcrumb first, which under dir=rtl renders
   it on the right with the controls on the left — the arrangement both the
   artboard and the product archive use. Do not reorder these. */
.bundles-archive-subheader .bundles-archive-controls {
  gap: 45px;
  /* The panels are absolutely positioned at `top: 96%` of their nearest
     positioned ancestor. Without this they anchor to the whole subheader row,
     so any padding on that row drops them away from the toggles they belong to.
     Anchoring them to the controls group instead keeps them pinned under the
     toggles no matter how the row around them is spaced. */
  position: relative;
}

/* categoria.css pins every toggle to a fixed 108px box and then restates that
   box — plus a height — on the active state. That was sized for the product
   archive's short מיון / סינון labels; this archive's desktop labels are longer,
   so the fixed box made the toggle resize the moment a panel opened and the row
   visibly jumped. Let the label size the toggle, identically in both states. */
.bundles-archive-controls .arcaffe-sorting-toggle,
.bundles-archive-controls .arcaffe-filters-sorting-toggle,
.bundles-archive-controls .arcaffe-sorting-toggle.active-sorting,
.bundles-archive-controls .arcaffe-filters-sorting-toggle.active-filter-sorting {
  width: auto;
  max-width: none;
  height: auto;
  white-space: nowrap;
}

.bundles-archive nav.menus-breadcrumbs {
  margin: 0;
  padding: 0;
}

/* Heading + introduction. section.taxonomy-info supplies the centred 1230px
   block; the artboard's heading is larger than the product-archive one and its
   copy measure is slightly narrower. */
/* Qualified for the same reason as the heading below: section.taxonomy-info
   carries its own 35px block padding and outweighs a single class. Values are
   measured off the artboard — heading ink-top 98.9px and grid top 201.4px below
   the hero. */
section.taxonomy-info.bundles-archive-info {
  padding-top: 37px;
  padding-bottom: 26px;
}

/* Qualified with section.taxonomy-info so it outweighs that block's own
   `section.taxonomy-info h1`, which is otherwise more specific than a single
   class and would keep the product-archive's 18px/bold heading. */
section.taxonomy-info.bundles-archive-info h1 {
  font-size: 22px;
  font-weight: 900;
  line-height: 26px;
  color: #060706;
  margin: 0;
}

.bundles-archive-info .wrapperDescriptionCategories {
  max-width: 624px;
  margin: 4px auto 0;
}

.bundles-archive-info .wrapperDescriptionCategories p {
  font-size: 15px;
  font-weight: normal;
  line-height: 22px;
  color: #060706;
  margin: 0;
}

/* The mobile controls row is hidden above 768px by categoria.css; it only needs
   the archive's own width and spacing. */
.bundles-archive > .arcaffe-filters-sorting-container-mobile {
  max-width: 1230px;
  margin: 0 auto 12px;
}

/* Grid. Card pitch in the artboard is 314px over a 291px card, i.e. the 1230px
   container and 22px gutter the storefront already uses. */
.bundles-archive-wrapper {
  max-width: 1230px;
  margin: 0 auto;
  padding: 0 0 60px;
}

.bundles-archive .bundleslist-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.bundles-archive-empty {
  text-align: center;
  color: #666;
  padding: 40px 0;
}

.bundles-archive .pagination,
.bundles-archive .wp-block-query-pagination,
.bundles-archive .navigation.pagination {
  margin-top: 40px;
  text-align: center;
}

@media (max-width: 1250px) {
  .bundles-archive-subheader,
  .bundles-archive-wrapper,
  .bundles-archive > .arcaffe-filters-sorting-container-mobile {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }
}

@media (max-width: 1024px) {
  .bundles-archive .bundleslist-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* The mobile artboard is a single column, and the row above the grid is the
   mobile controls rather than the breadcrumb pair. */
@media (max-width: 768px) {
  .bundles-archive .bundleslist-grid {
    grid-template-columns: 1fr;
  }

  .bundles-archive-subheader {
    border-bottom: 0;
  }

  /* categoria.css sets this block's mobile padding with !important, so matching
     the mobile artboard's rhythm needs the same weight — there is no selector
     that can outrank it otherwise. The artboard puts the heading 36px and the
     first card 196.5px below the hero; the surrounding margins here carry the
     rest of that distance. */
  section.taxonomy-info.bundles-archive-info {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .bundles-archive-subheader {
    margin-top: 13px;
  }

  .bundles-archive > .arcaffe-filters-sorting-container-mobile {
    margin-bottom: 10px;
  }
}

/* The apply control is a real submit button rather than the product archive's
   <a href="#">, because a global handler in scripts.js claims that anchor and
   rewrites only the product filter params. Match the anchor's look so the two
   panels still read the same. */
.bundles-archive-controls .arcaffe-filters-block-item-wrapper button[type="submit"] {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  color: #060706;
  font-family: "Almoni", sans-serif;
}

/* The clear link in the filtered-empty state. A plain link, so the global
   a[href="#"] apply handler in scripts.js never claims it. */
.bundles-archive-empty .bundles-archive-reset {
  display: inline;
  font-size: inherit;
  color: #060706;
  text-decoration: underline;
}

.bundles-archive-controls .bundles-archive-reset {
  display: block;
  font-size: 14px;
  font-weight: normal;
  color: #060706;
  text-decoration: underline;
  font-family: "Almoni", sans-serif;
}