/* ==========================================================
   Store.Toolsheep V39 — Layout Structure Refactor
   12-column Desktop / 8-column Tablet / 4-column Mobile
   Goal: consistent modular proportions across all homepage sections.
   ========================================================== */

.stsh-v2-root{
  --stsh-grid-cols:12;
  --stsh-grid-gutter:16px;
  --stsh-module-gap:32px;
}

/* ----------------------------------------------------------
   DESKTOP — 12-column system
   Hero 8+4
   Category 4-up (3 cols each)
   Product 4-up (3 cols each)
   Brand 4-up (3 cols each)
   Solution 3-up (4 cols each)
   Bottom 2-up (6 cols each)
   ---------------------------------------------------------- */
@media (min-width:1025px){
  /* One 12-col rail for all homepage modules. */
  .stsh-v2-root .stsh-v2-shell{
    width:min(1160px,calc(100% - 32px))!important;
    max-width:1160px!important;
  }

  /* HERO = 8 / 4 columns instead of arbitrary 70 / 30. */
  .stsh-v2-root .stsh-v2-hero{
    display:grid!important;
    grid-template-columns:repeat(12,minmax(0,1fr))!important;
    column-gap:var(--stsh-grid-gutter)!important;
    row-gap:0!important;
    align-items:stretch!important;
  }
  .stsh-v2-root .stsh-v2-hero-main{
    grid-column:span 8!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
  }
  .stsh-v2-root .stsh-v2-hero-side{
    grid-column:span 4!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
  }

  /* CATEGORY = 4 cards × 2 rows. Each item occupies 3/12 columns. */
  .stsh-v2-root .stsh-v5-category-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
    overflow:visible!important;
  }
  .stsh-v2-root .stsh-v5-cat{
    min-width:0!important;
    min-height:88px!important;
    padding:16px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:16px!important;
    text-align:left!important;
    border:1px solid #E4EDF1!important;
    border-radius:12px!important;
    background:#fff!important;
  }
  .stsh-v2-root .stsh-v5-cat-icon{
    width:56px!important;
    height:56px!important;
    flex:0 0 56px!important;
    margin:0!important;
    border-radius:16px!important;
    font-size:22px!important;
  }
  .stsh-v2-root .stsh-v5-cat strong{
    width:auto!important;
    min-height:0!important;
    font-size:13px!important;
    line-height:1.4!important;
    text-align:left!important;
  }

  /* PRODUCT SHELVES = 4-up. All product cards land on the same 3-col rhythm. */
  .stsh-v2-root .stsh-v27-panel ul.products,
  .stsh-v2-root .stsh-v2-products:not(.stsh-v23-products) ul.products{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
  }
  .stsh-v2-root .stsh-v2-products ul.products li.product{
    min-width:0!important;
  }
  .stsh-v2-root .stsh-v2-products ul.products li.product img{
    height:208px!important;
    padding:8px!important;
    margin-bottom:8px!important;
    object-fit:contain!important;
  }
  .stsh-v2-root .stsh-v2-products .woocommerce-loop-product__title{
    min-height:40px!important;
    height:40px!important;
    margin:0 12px 8px!important;
    font-size:12.5px!important;
    line-height:1.5!important;
  }
  .stsh-v2-root .stsh-v2-products .price{
    margin:0 12px 12px!important;
    font-size:14px!important;
  }
  .stsh-v2-root .stsh-v2-products li.product > .button,
  .stsh-v2-root .stsh-v2-products li.product > a.button{
    height:40px!important;
    min-height:40px!important;
    margin-left:12px!important;
    margin-right:12px!important;
    font-size:11px!important;
  }

  /* Flash uses the same physical card width as Featured: 4 visible cards. */
  .stsh-v2-root .stsh-v23-products ul.products{
    gap:16px!important;
  }

  /* BRANDS = 4 × 2. Already conceptually correct; lock dimensions to grid. */
  .stsh-v2-root .stsh-v24-brand-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
  }
  .stsh-v2-root .stsh-v24-brand-card{
    min-width:0!important;
    min-height:104px!important;
    padding:16px!important;
    gap:16px!important;
  }
  .stsh-v2-root .stsh-v24-brand-media{
    width:80px!important;
    height:64px!important;
    flex:0 0 80px!important;
  }
  .stsh-v2-root .stsh-v24-brand-copy strong{font-size:15px!important;}
  .stsh-v2-root .stsh-v24-brand-copy small{font-size:10px!important;}

  /* CAMPAIGN = full 12 columns. */
  .stsh-v2-root .stsh-v3-campaign-module{
    width:min(1160px,calc(100% - 32px))!important;
  }

  /* SOLUTION = 3 × 2. Each item occupies 4/12 columns. */
  .stsh-v2-root .stsh-v26-solution-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
  }
  .stsh-v2-root .stsh-v26-solution-card{
    min-width:0!important;
    min-height:128px!important;
    padding:24px!important;
  }

  /* BOTTOM = balanced 6 + 6 columns, not 0.92 / 1.08. */
  .stsh-v2-root .stsh-v26-bottom-grid,
  .stsh-v2-root .stsh-v28-bottom-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
  }
}

/* ----------------------------------------------------------
   TABLET — 8-column system
   Hero 5+3 / category 4-up / product 4-up / brand 4-up /
   solution 2-up / bottom 2-up
   ---------------------------------------------------------- */
@media (min-width:768px) and (max-width:1024px){
  .stsh-v2-root{--stsh-grid-cols:8;--stsh-grid-gutter:16px;}

  .stsh-v2-root .stsh-v2-hero{
    display:grid!important;
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
    gap:16px!important;
  }
  .stsh-v2-root .stsh-v2-hero-main{grid-column:span 5!important;width:auto!important;min-width:0!important;}
  .stsh-v2-root .stsh-v2-hero-side{grid-column:span 3!important;width:auto!important;min-width:0!important;}

  .stsh-v2-root .stsh-v5-category-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
  }
  .stsh-v2-root .stsh-v5-cat{
    min-width:0!important;
    min-height:104px!important;
    padding:12px!important;
    border:1px solid #E4EDF1!important;
    border-radius:12px!important;
    background:#fff!important;
  }

  .stsh-v2-root .stsh-v27-panel ul.products,
  .stsh-v2-root .stsh-v2-products:not(.stsh-v23-products) ul.products{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
  }
  .stsh-v2-root .stsh-v2-products ul.products li.product img{height:160px!important;}
  .stsh-v2-root .stsh-v2-products .woocommerce-loop-product__title{font-size:11px!important;}

  .stsh-v2-root .stsh-v24-brand-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
  }
  .stsh-v2-root .stsh-v24-brand-card{
    min-height:96px!important;
    padding:12px!important;
    gap:10px!important;
  }
  .stsh-v2-root .stsh-v24-brand-media{width:56px!important;height:48px!important;flex:0 0 56px!important;}
  .stsh-v2-root .stsh-v24-brand-copy strong{font-size:12.5px!important;}
  .stsh-v2-root .stsh-v24-brand-copy small{font-size:9px!important;}

  .stsh-v2-root .stsh-v26-solution-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
  }
  .stsh-v2-root .stsh-v26-bottom-grid,
  .stsh-v2-root .stsh-v28-bottom-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
  }
}

/* ----------------------------------------------------------
   MOBILE — 4-column rail.
   Keep proven swipe patterns, but all fixed grids use integer spans.
   ---------------------------------------------------------- */
@media (max-width:767px){
  .stsh-v2-root{--stsh-grid-cols:4;--stsh-grid-gutter:8px;}

  /* Hero = full 4 columns. */
  .stsh-v2-root .stsh-v2-hero{
    display:flex!important;
    flex-direction:column!important;
  }

  /* Category = 4-up × 2 rows, each icon owns exactly one mobile column. */
  .stsh-v2-root .stsh-v5-category-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
    overflow:visible!important;
    padding-bottom:0!important;
    margin-right:0!important;
  }
  .stsh-v2-root .stsh-v5-cat{
    min-width:0!important;
    width:auto!important;
    min-height:88px!important;
    padding:8px 2px!important;
    scroll-snap-align:none!important;
  }

  /* Featured = 2-up, each card spans 2/4 columns. */
  .stsh-v2-root .stsh-v27-panel ul.products{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  /* Flash remains a swipe shelf; 2-card calculation is aligned to the 4-col mobile system. */
  .stsh-v2-root .stsh-v23-viewport{
    padding-right:0!important;
    margin-right:0!important;
  }
  .stsh-v2-root .stsh-v23-products ul.products{
    gap:8px!important;
    padding-right:0!important;
  }

  /* Brands remain swipeable to avoid making the page excessively tall. */
  .stsh-v2-root .stsh-v24-brand-grid{
    gap:8px!important;
  }

  /* Solution remains swipeable on mobile; shelf aligns to the 4-col content rail. */
  .stsh-v2-root .stsh-v26-solution-grid{
    gap:8px!important;
  }
}