/* =========================
   PRODUCT LOOP (ARCHIVES)
========================= */

/* List reset */
body.woocommerce.archive ul.products{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
}

/* Each row */
body.woocommerce.archive ul.products li.product.cck-loop-item{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:22px 0 !important;
  border-bottom:1px solid #efefef;
}

/* Desktop grid */
@media (min-width: 992px) {
  body.woocommerce.archive ul.products li.product.cck-loop-item .cck-loop-grid{
    display:grid !important;
    grid-template-columns: 340px minmax(0, 1fr) 340px !important;
    grid-template-rows: auto auto 1fr !important; /* brand | title | content */
    column-gap: 28px !important;
    row-gap: 8px !important;                     /* <<< tight vertical rhythm */
    align-items:start !important;
  }

  /* Image spans all rows */
  body.woocommerce.archive ul.products li.product.cck-loop-item .cck-loop-media{
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    margin:0 !important;
  }

  /* Brand spans middle+right */
  body.woocommerce.archive ul.products li.product.cck-loop-item .cck-loop-brand{
    grid-column: 2 / 4 !important;
    grid-row: 1 !important;
    margin:0 !important;
    line-height:1.1;
  }

  /* Title spans middle+right */
  body.woocommerce.archive ul.products li.product.cck-loop-item .cck-loop-title{
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    margin:0 !important;
    line-height:1.2;
  }

  /* Mid + right share content row */
  body.woocommerce.archive ul.products li.product.cck-loop-item .cck-loop-mid{
    grid-column: 2 !important;
    grid-row: 3 !important;
    min-width:0 !important;
  }

  body.woocommerce.archive ul.products li.product.cck-loop-item .cck-loop-right{
    grid-column: 3 !important;
    grid-row: 3 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    text-align:right !important;
    gap:10px !important;
    align-self:start !important; /* badges don't drop */
  }
}

/* Left image */
.woocommerce-page ul.products li.product.cck-loop-item .cck-loop-media img{
  width:100% !important;
  height:auto !important;
  max-height:320px !important;
  object-fit:contain !important;
  display:block !important;
}

/* Badges + CTA align right */
.woocommerce-page ul.products li.product.cck-loop-item .cck-var-badges{
  display:flex !important;
  justify-content:flex-end !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}
.woocommerce-page ul.products li.product.cck-loop-item .cck-loop-cta{
  display:flex !important;
  justify-content:flex-end !important;
}

/* Specs list */
.cck-loop-specs{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  font-size:13px !important;
  line-height:1.4 !important;
  opacity:.9;
}
.cck-loop-specs li{ margin:2px 0 !important; }
.cck-loop-specs__k{ font-weight:600; }

/* Woo archive: make the filter/sidebar column narrower */
@media (min-width: 992px){
  body.woocommerce.archive .ct-container[data-sidebar]{
    --sidebar-width: 210px; /* try 180–240px */
  }

  /* Force the grid to use a fixed sidebar width (stops the %/fr sidebar growth) */
  body.woocommerce.archive .ct-container[data-sidebar="left"]{
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
  }

  body.woocommerce.archive .ct-container[data-sidebar="right"]{
    grid-template-columns: minmax(0, 1fr) var(--sidebar-width) !important;
  }

  /* Safety: prevent the actual sidebar inner from stretching wider */
  body.woocommerce.archive #sidebar{
    max-width: var(--sidebar-width) !important;
  }
}
.cck-loop-brand{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 0 4px 0;

}
.cck-loop-brand a{ text-decoration: none; }
.cck-loop-specs{
  margin-top: 6px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  opacity: .9;
}
.cck-loop-specs li{
  margin: 6px 0 !important;
}
.cck-loop-specs__v{
  display: inline-block;
  max-width: 42ch;          /* stop mega lines */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
body.woocommerce.archive ul.products li.product.cck-loop-item .cck-loop-right{
  justify-content: flex-start !important; /* keeps badges + price up top */
}
.cck-loop-specs{ margin-top: 10px !important; }

.cck-loop-specs li{
  margin: 6px 0 !important;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.cck-loop-specs__k{
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  font-weight: 700;
  font-size: 12px;
  opacity: .8;
  white-space: nowrap;
}

.cck-loop-specs__v{
  max-width: 48ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Tablet */
@media (max-width: 991px) and (min-width: 641px){
  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-grid{
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    row-gap: 8px !important;
    align-items: start !important;
  }

  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-media{
    grid-column: 1 !important;
    grid-row: 1 / span 4 !important;
    margin: 0 !important;
    width: 180px !important;
    max-width: 180px !important;
    align-self: start !important;
  }

  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-media .ct-media-container{
    display: block !important;
    width: 180px !important;
    max-width: 180px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-media img{
    display: block !important;
    width: 180px !important;
    max-width: 180px !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain !important;
  }

  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-brand{
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 0 6px 0 !important;
  }

  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-title{
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 0 8px 0 !important;
    min-height: 0 !important;
  }

  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-mid{
    grid-column: 2 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
  }

  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-right{
    grid-column: 2 !important;
    grid-row: 4 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 10px !important;
    margin-top: 8px !important;
  }

  .woocommerce-page ul.products li.product.cck-loop-item .cck-var-badges,
  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-cta{
    justify-content: flex-start !important;
  }

  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-cta .button{
    display: inline-flex !important;
    width: auto !important;
    min-width: 140px !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* Small mobile */
@media (max-width: 640px){
  .woocommerce-page ul.products li.product.cck-loop-item{
    padding: 22px 0 !important;
  }

  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 10px !important;
  }

  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-media,
  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-brand,
  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-title,
  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-mid,
  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-right{
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-media{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 0 14px 0 !important;
  }

  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-media .ct-media-container{
    display: block !important;
    width: 180px !important;
    max-width: 180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-media img{
    display: block !important;
    width: 180px !important;
    max-width: 180px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-right{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    gap: 10px !important;
    margin-top: 4px !important;
  }

  .woocommerce-page ul.products li.product.cck-loop-item .cck-var-badges{
    justify-content: flex-start !important;
  }

  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-cta{
    display: flex !important;
    justify-content: stretch !important;
    width: 100% !important;
  }

  .woocommerce-page ul.products li.product.cck-loop-item .cck-loop-cta .button{
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}

/* Force real mobile container width on Woo archive pages */
@media (max-width: 767px) {
  body.woocommerce.archive {
    --theme-container-width: 100% !important;
  }

  body.woocommerce.archive .ct-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body.woocommerce.archive ul.products {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.woocommerce.archive ul.products li.product.cck-loop-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
}