/* 1) Center the overall cart layout */
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
    display: flex;
    flex-wrap: wrap;          /* stack on mobile */
    justify-content: center;  /* center both columns */
    gap: 2rem;                /* spacing between list and totals */
    max-width: 1200px;        /* cap total width */
    margin: 2rem auto;        /* vertical spacing + center on page */
    padding: 0 1rem;          /* side padding */
  }
  
  /* 2) Make the items table flexibly fill available space */
  .wp-block-woocommerce-cart .wc-block-cart__main {
    flex: 1 1 600px;          /* grow/shrink, ideal 600px */
    min-width: 300px;         /* don’t shrink smaller than this */
  }
  
  /* 3) Fix the sidebar (totals) at a comfortable width */
  .wp-block-woocommerce-cart .wc-block-components-sidebar {
    flex: 0 0 300px;          /* always 300px wide */
    min-width: 250px;
  }
  
  /* 4) Center the Proceed to Checkout button under totals */
  .wp-block-cart__submit {
    text-align: center;
    margin-top: 2rem;
  }
  
  /* 5) Optional: tighten up the table styling */
  .wp-block-cart-items {
    width: 100%;
    border-collapse: collapse;
  }
  .wp-block-cart-items th,
  .wp-block-cart-items td {
    padding: 1rem;
    border-bottom: 1px solid #eee;
  }
  
  /* 6) Ensure the header row stands out */
  .wp-block-cart-items__header th {
    text-transform: uppercase;
    font-weight: 600;
  }
  
  /* 7) Stack on narrow viewports */
  @media (max-width: 768px) {
    .wc-block-components-sidebar-layout {
      flex-direction: column;
    }
    .wc-block-cart__main,
    .wc-block-components-sidebar {
      flex: 1 1 auto;
      min-width: auto;
    }
  }
  
  /* Hide the empty-cart icon from the cart title */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    content: none !important;
  }


/* Center the “New in Store” product grid */
.wc-block-grid__products {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;  /* center all items */
    gap: 2rem;                /* adjust spacing between items */
    list-style: none;
    margin: 0 auto;           /* center the whole block if it has a width */
    padding: 0;
  }
  
  /* Optional: Make each product card a consistent width */
  .wc-block-grid__product {
    flex: 0 1 300px;          /* don’t grow, can shrink, ideal width 300px */
    box-sizing: border-box;
  }