/* === CCMBX Mailbox UX Cleanup === */

/* Product grid alignment */
.woocommerce ul.products,
.woocommerce-page ul.products{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:16px !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  float:none !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
}

/* Make each product “card” behave consistently */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce ul.products li.product .woocommerce-loop-product__link{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
}

/* Keep title readable + consistent spacing */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  line-height:1.25 !important;
  margin:10px 0 8px !important;
}

/* Ensure CTA area is clean and centered */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button{
  width:100% !important;
  text-align:center !important;
  white-space:normal !important;
  line-height:1.15 !important;
  padding:12px 10px !important;
  font-weight:700 !important;
}

/* If any theme/plugin injects small grey “subtext” next to the button, kill it */
.woocommerce ul.products li.product .button + small,
.woocommerce ul.products li.product .button + span,
.woocommerce ul.products li.product .button + em{
  display:none !important;
}

/* Remove ugly tiny meta near buttons (varies by theme/plugins) */
.woocommerce ul.products li.product .product-meta,
.woocommerce ul.products li.product .woocommerce-product-details__short-description{
  display:none !important;
}

/* Clean up price spacing */
.woocommerce ul.products li.product .price{
  margin:6px 0 12px !important;
  font-weight:700 !important;
}

/* On mobile, keep cards full width */
@media (max-width: 768px){
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product{
    width:100% !important;
  }
}

/* === CCMBX: Printing page product grid fix (scoped) === */
body.page-id-1097 .woocommerce ul.products,
body.page-id-1097 .woocommerce-page ul.products{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap:18px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

/* make each tile a real “card” */
body.page-id-1097 .woocommerce ul.products li.product,
body.page-id-1097 .woocommerce-page ul.products li.product{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
}

/* don't let the link become a weird full-height flex container */
body.page-id-1097 .woocommerce ul.products li.product .woocommerce-LoopProduct-link,
body.page-id-1097 .woocommerce ul.products li.product .woocommerce-loop-product__link{
  display:block !important;
  height:auto !important;
}

/* pin the button to the bottom of the card */
body.page-id-1097 .woocommerce ul.products li.product a.button,
body.page-id-1097 .woocommerce ul.products li.product .button{
  margin-top:auto !important;
  width:100% !important;
}

/* === end printing fix === */


/* === CCMBX STEP 1: remove clearfix pseudo-elements that become grid items === */
body.page-id-1097 .woocommerce ul.products::before,
body.page-id-1097 .woocommerce ul.products::after,
body.page-id-1097 .woocommerce-page ul.products::before,
body.page-id-1097 .woocommerce-page ul.products::after{
  content: none !important;
  display: none !important;
}
/* === end step 1 === */


/* === CCMBX STEP 2: force dense grid packing + reset any forced placement === */
body.page-id-1097 .woocommerce ul.products,
body.page-id-1097 .woocommerce-page ul.products{
  grid-auto-flow: row dense !important;
}

body.page-id-1097 .woocommerce ul.products li.product,
body.page-id-1097 .woocommerce-page ul.products li.product{
  grid-column: auto !important;
  grid-row: auto !important;
  order: 0 !important;
  clear: none !important;
}
/* === end step 2 === */


/* === CCMBX STEP 2: force dense grid packing + reset any forced placement === */
body.page-id-1097 .woocommerce ul.products,
body.page-id-1097 .woocommerce-page ul.products{
  grid-auto-flow: row dense !important;
}

body.page-id-1097 .woocommerce ul.products li.product,
body.page-id-1097 .woocommerce-page ul.products li.product{
  grid-column: auto !important;
  grid-row: auto !important;
  order: 0 !important;
  clear: none !important;
}
/* === end step 2 === */



/* === CCMBX DIAG (TEMP): show UL bounds vs LI bounds === */
body.page-id-1097 .woocommerce ul.products{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 4px solid rgba(255,0,0,.45) !important; /* UL = red */
}

body.page-id-1097 .woocommerce ul.products li.product{
  outline: 4px solid rgba(0,128,255,.45) !important; /* LI = blue */
}
/* === end diag === */


/* === CCMBX DIAG (TEMP): label printing products by ID === */
body.page-id-1097 .woocommerce ul.products li.product{ position:relative !important; }

body.page-id-1097 .woocommerce ul.products li.product.post-1101::before{content:"1101"; position:absolute; top:10px; left:10px; z-index:99; padding:4px 8px; border-radius:999px; font-weight:900; font-size:12px; background:#111; color:#fff;}
body.page-id-1097 .woocommerce ul.products li.product.post-1102::before{content:"1102"; position:absolute; top:10px; left:10px; z-index:99; padding:4px 8px; border-radius:999px; font-weight:900; font-size:12px; background:#111; color:#fff;}
body.page-id-1097 .woocommerce ul.products li.product.post-1103::before{content:"1103"; position:absolute; top:10px; left:10px; z-index:99; padding:4px 8px; border-radius:999px; font-weight:900; font-size:12px; background:#111; color:#fff;}
body.page-id-1097 .woocommerce ul.products li.product.post-1104::before{content:"1104"; position:absolute; top:10px; left:10px; z-index:99; padding:4px 8px; border-radius:999px; font-weight:900; font-size:12px; background:#111; color:#fff;}
body.page-id-1097 .woocommerce ul.products li.product.post-1105::before{content:"1105"; position:absolute; top:10px; left:10px; z-index:99; padding:4px 8px; border-radius:999px; font-weight:900; font-size:12px; background:#111; color:#fff;}
/* === end label diag === */