/* ============================================
   HOMEPAGE DESKTOP CATEGORY SIDEBAR
   ============================================
   Desktop only (min-width:1025px — same cutoff already used for the shop
   page's own sidebar+grid vs. mobile stacked layout, see berry-reference.css's
   .berry-shop-layout ul.products 4-column rule this mirrors). Below that,
   .berry-home-layout reverts to plain block flow and the sidebar is hidden —
   the horizontal category row (inc/homepage-category-carousel.php) is what
   shows there instead, completely untouched.
   See inc/homepage-sidebar.php for the markup this styles.
   ============================================ */

.berry-home-sidebar {
  display: none;
}

@media (min-width: 1025px) {
  .berry-home-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    /* stretch (grid's own default — align-items:start was clamping the
       sidebar's box to its own short content height instead of the row's
       full height, which also meant position:sticky below had no room to
       "travel" in past that point and would stop tracking the scroll
       partway down the page, not just look visually short). */
    align-items: stretch;
    column-gap: 24px;
  }

  .berry-home-sidebar {
    display: block;
    /* 85px = .header__inner's real fixed height (berry-reference.css) —
       the header itself is position:sticky too, so once it's fully
       scrolled to the top this is exactly how far down it still occupies,
       and the sidebar must start clearing it from there rather than
       sliding underneath. */
    position: sticky;
    top: 85px;
    background: #ffffff;
    border-radius: var(--radius-lg, 20px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding: 12px;
    /* Caps how tall the sticky box can ever be so it can't pin itself
       taller than the viewport minus the header (which would clip its own
       bottom items off-screen with no way to reach them) — the list
       scrolls internally instead if it ever has more items than fit. */
    max-height: calc(100vh - 85px - 24px);
    overflow-y: auto;
  }

  .berry-home-sidebar__list {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
  }

  .berry-home-sidebar__item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    border-radius: 16px;
    color: var(--clr-text, #1A0A1E);
    text-decoration: none !important;
    transition: var(--transition);
  }

  .berry-home-sidebar__item:hover,
  .berry-home-sidebar__item:focus {
    background: rgba(156, 80, 255, 0.08);
    color: var(--clr-primary, #9c50ff);
  }

  .berry-home-sidebar__item.is-active {
    background: rgba(156, 80, 255, 0.12);
    color: var(--clr-primary, #9c50ff);
    font-weight: 700;
  }

  .berry-home-sidebar__icon {
    /* Sized up from the original 32-40px spec (was 40px) per explicit
       follow-up request, for a bigger, more premium feel now that the
       items are spaced out to fill the sidebar's full height. */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
  }

  .berry-home-sidebar__icon img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .berry-home-sidebar__label {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
  }

  /* The horizontal row this sidebar replaces on desktop — still rendered
     (tablet/mobile need it, per inc/homepage-category-carousel.php),
     just not shown here so the categories aren't listed twice. */
  .berry-cat-carousel-section {
    display: none;
  }

  /* Same 5→4 column shrink already applied to the shop page's own
     narrower (sidebar + grid) layout, for the identical reason: 5 columns
     tuned for the full-width homepage grid gets visibly cramped once a
     250px sidebar eats into that width. Mirrors
     .woocommerce .berry-shop-layout ul.products in berry-reference.css. */
  .woocommerce .berry-home-layout ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}