/* Default to grid visible / list hidden before JS applies the stored
   preference, matching the toggle's own default mode. block_7 now renders
   nested inside block_6's own wrapper (attached, not separately placed -
   see views.view.commerce_products.yml), so this matches it regardless of
   nesting depth. !important guards against the theme's
   ".product-grid { display: block !important }" rule, which block_6's own
   row content (.view-content) still inherits via the master view's
   css_class (block_7 itself uses "product-list" instead, so isn't
   actually affected by that rule, but this stays consistent/defensive). */
.view-display-id-block_7 {
  display: none !important;
}

/* ListControlsArea's own form starts out hidden too - shown only in list
   mode, same as block_7 above, but needs its own rule since it's a
   separate sibling element (in block_6's header) rather than a descendant
   of .view-display-id-block_7. */
.dte-list-controls {
  display: none !important;
}

/* The theme has a couple of equally-specific ".view-header" /
   ".form-group .view-header" rules (margin-bottom: 15-40px) that apply to
   any view's header - including ours, which holds nothing but these two
   buttons. !important guards against CSS aggregation/load order deciding
   the tie instead of us. */
.view-display-id-block_6 > .view-header {
  margin-bottom: 0.15em !important;
}

.catalog-view-toggle {
  /* The theme auto-adds ".form-group" (margin-bottom: 15px) to any
     "#type: container" element; override it rather than fight it. */
  display: flex;
  gap: 0.35em;
  margin: 0.15em 0 !important;
}

.catalog-view-toggle-button {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 0.25em 0.5em;
  line-height: 1;
  cursor: pointer;
}

.catalog-view-toggle-button.is-active {
  background: #289c1a;
  border-color: #289c1a;
  color: #fff;
}

.dte-list-controls {
  margin-bottom: 0.5em;
}

/* Deliberately no ".dte-list-controls .form-item" margin-right rule: the
   grid's native exposed-form fields get their own gaps purely from plain
   whitespace between inline-block "form-item" divs (see the literal
   spaces ListControlsArea::render() joins its fields with) - Bootstrap's
   ".form-inline .form-group" has no margin-right, and the theme's own
   "margin-right: 10px" rule for this form is nested under
   ".views-exposed-form", which (like its sibling padding-top/position
   rules - see further down) never reaches the real exposed-filter block.
   Adding an explicit margin here on top of that whitespace measurably
   over-spaced list controls relative to the grid's actual gaps. */

/* The grid's own Sort by/Order/Items per page row is a separate Layout
   Builder block (not part of the view), so it doesn't pick up
   ".dte-list-controls"'s margin-bottom above; no theme rule sets one for
   it either, so it was falling back to its generic block/form-group
   spacing - matching it here keeps the gap above the toggle the same in
   both modes. !important matches the specificity fights already being
   fought elsewhere in this file against the theme's own block spacing. */
.block-views-exposed-filter-blockcommerce-products-block-6 {
  margin-bottom: 0.5em !important;
}

/* The theme's ".path-taxonomy .view-commerce-products { padding-top: 5em }"
   (8em under 540px) was written assuming the grid's exposed-filter block
   sits absolutely-positioned ON TOP of the view, needing clearance so it
   doesn't cover the view's own content - see
   "_product-by-category-view.scss"'s ".views-exposed-form { position:
   absolute; top: 2em; }" nested under the same selector. In the live DOM,
   though, that exposed-filter block is its own sibling Layout Builder
   block (see views_exposed_filter_block:commerce_products-block_6 in
   core.entity_view_display.taxonomy_term.catalog.default.yml), not a
   descendant of ".view-commerce-products" - so that absolute-positioning
   rule never actually matches it, and the 5em/30px padding-top is just
   dead space between it and this view's own header (toggle buttons,
   ".dte-list-controls" in list mode, result count). Zeroed out here,
   scoped to block_6 specifically so it doesn't affect this same view's
   other placements (the product-page "related products" EVA display and
   the dashboard's "My Favorites" block, which keep the theme's padding). */
.path-taxonomy .view-commerce-products.view-display-id-block_6 {
  padding-top: 0 !important;
}

@media screen and (max-width: 540px) {
  .path-taxonomy .view-commerce-products.view-display-id-block_6 {
    padding-top: 0 !important;
  }
}

/* List mode's gap below the toggle (before "Displaying X of Y") comes from
   block_7's OWN nested ".view-commerce-products" wrapper - block_7 is a
   separate attached display of this same view, so it gets that same class
   and the same ".path-taxonomy" ancestor match, and its padding-top was
   deliberately left alone above (zeroing it would also affect the
   "Displaying" line's position within block_7's own content, which isn't
   what was asked). Matching that same amount here, on grid's own result
   count, keeps the two modes' spacing below the toggle visually the same
   without touching block_7. */
.dte-result-count {
  margin-top: 5em;
}

@media screen and (max-width: 540px) {
  .dte-result-count {
    margin-top: 8em;
  }
}