/* =========================================
   WooCommerce Product Cards – Global
   Theme: Vape Shop SocalBird
   File: assets/css/woocommerce-products.css
   -----------------------------------------
   Goal:
   - Home page এ যেই product card CSS use হচ্ছে
     (home-products-by-categories-section.css)
   - ঠিক সেই ফাইলটাই সব loop এর জন্য reuse করা,
     যাতে 1%–ও design change না হয়।
========================================= */

@import url('home-products-by-categories-section.css');

/* ============================================================
   SHOP ARCHIVE GRID FIX (ONLY inside .vss-shop-archive__products)
   - 4 columns desktop
   - কোনো ফাঁকা first column না
   - কার্ড height equal রাখতে flex ব্যবহার
============================================================ */

/* UL -> proper grid container */
.vss-shop-archive__products ul.products {
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* Woo default clearfix pseudo element গুলো hide করে দিচ্ছি,
   যেন grid এ কোনো extra "ghost" item না ধরা পড়ে */
.vss-shop-archive__products ul.products::before,
.vss-shop-archive__products ul.products::after {
  content: none !important;
  display: none !important;
}

/* প্রতিটা product item কে grid cell এর ভেতরে full-height card করি */
.vss-shop-archive__products ul.products li.product {
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  width: auto !important;

  /* cell এর ভেতরে content vertically stretch হবে */
  display: flex;
  flex-direction: column;
}

/* li.product এর ভেতরের card wrapper পুরো width/height নিক */
.vss-shop-archive__products ul.products li.product > * {
  width: 100%;
}

/* =========================================
   SHOP ARCHIVE – EQUAL CARD HEIGHT TWEAK
========================================= */

.vss-shop-archive__products ul.products li.product .price,
.vss-shop-archive__products ul.products li.product .vss-product-card__footer {
  margin-top: auto;
}

/* =========================================
   LOOP ADD TO CART → VIEW CART STATE
   - extra injected Woo link hide (safety)
   - clicked button becomes black/white
========================================= */

/* WooCommerce ajax default injected extra link (hide globally in loop cards) */
.vss-shop-archive__products ul.products li.product a.added_to_cart.wc-forward,
.vss-shop-archive__products ul.products li.product .home-pbc__actions > a.added_to_cart.wc-forward {
  display: none !important;
}

/* Our main cart button when changed to "View Cart" */
.vss-shop-archive__products ul.products li.product .home-pbc__btn--cart.is-added,
.vss-shop-archive__products ul.products li.product .home-pbc__btn--cart[data-added="1"] {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

/* hover/focus same black */
.vss-shop-archive__products ul.products li.product .home-pbc__btn--cart.is-added:hover,
.vss-shop-archive__products ul.products li.product .home-pbc__btn--cart.is-added:focus,
.vss-shop-archive__products ul.products li.product .home-pbc__btn--cart[data-added="1"]:hover,
.vss-shop-archive__products ul.products li.product .home-pbc__btn--cart[data-added="1"]:focus {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

/* optional: adding state */
.vss-shop-archive__products ul.products li.product .home-pbc__btn--cart.is-adding {
  pointer-events: none;
  opacity: 0.85;
}