/* ==========================================================================
   LEMO × CSB — custom-shop.css
   Archive page (Shop / Collection) + Product Card override
   ========================================================================== */

/* ==========================================================================
   Shop Page Header
   ========================================================================== */
body.lemo-shop .woocommerce-products-header,
body.lemo-shop .archive .page-title-wrapper,
body.woocommerce-page .page-title-wrap {
  padding: 32px 0 16px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--lemo-gray-150) !important;
  margin-bottom: 0 !important;
}

body.lemo-shop .woocommerce-products-header__title,
body.lemo-shop h1.page-title,
body.woocommerce-page h1.entry-title {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

/* ==========================================================================
   Toolbar — sort / result count / view mode
   ========================================================================== */
body.woocommerce-page .woocommerce-notices-wrapper:empty { display: none; }

body.woocommerce-page .woocommerce-result-count {
  font-size: .78rem !important;
  color: var(--lemo-gray-500) !important;
  margin: 0 !important;
  letter-spacing: .02em;
}

body.woocommerce-page .woocommerce-ordering select,
body.woocommerce-page .orderby {
  padding: 8px 36px 8px 14px !important;
  border: 1px solid var(--lemo-gray-300) !important;
  border-radius: var(--lemo-r-full) !important;
  font-size: .78rem !important;
  background-color: var(--lemo-white) !important;
  font-family: var(--lemo-ff) !important;
  cursor: pointer;
  outline: none;
  color: var(--lemo-black);
}
body.woocommerce-page .woocommerce-ordering select:focus {
  border-color: var(--lemo-black) !important;
}

/* Minimog toolbar wrapper */
body.lemo-csb-mode .mnmg-shop-toolbar,
body.lemo-csb-mode .shop-toolbar {
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--lemo-gray-150) !important;
  position: sticky;
  top: 64px;
  background: var(--lemo-white);
  z-index: 10;
}

/* ==========================================================================
   Products Grid — 4 columns, 1px gap (CSB signature)
   ========================================================================== */
body.lemo-csb-mode .woocommerce ul.products,
body.lemo-csb-mode .products.columns-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1px !important;
  background: var(--lemo-gray-150) !important;
  padding: 1px !important;
  margin: 0 !important;
  list-style: none !important;
}

body.lemo-csb-mode .woocommerce ul.products li.product,
body.lemo-csb-mode .products li.product {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--lemo-white) !important;
  float: none !important;
  clear: none !important;
}

/* ==========================================================================
   PRODUCT CARD — CSB style (hover swap, quick add slide up, swatches)
   ========================================================================== */
body.lemo-csb-mode .product,
body.lemo-csb-mode li.product,
body.lemo-csb-mode .product-inner,
body.lemo-csb-mode .mnmg-product {
  position: relative !important;
  background: var(--lemo-white) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: none !important;
}

/* Product image wrap */
body.lemo-csb-mode .product .product-image,
body.lemo-csb-mode li.product .woocommerce-LoopProduct-link,
body.lemo-csb-mode li.product a.product-link,
body.lemo-csb-mode .mnmg-product__image,
body.lemo-csb-mode .product-thumbnail {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  aspect-ratio: 3 / 4 !important;
  background: var(--lemo-gray-100) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

body.lemo-csb-mode .product img,
body.lemo-csb-mode li.product img,
body.lemo-csb-mode li.product .wp-post-image,
body.lemo-csb-mode .mnmg-product img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: opacity .5s ease !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Secondary image hover fade */
body.lemo-csb-mode li.product .product-image .secondary-image,
body.lemo-csb-mode li.product .product-image img:last-of-type:not(:first-of-type),
body.lemo-csb-mode .mnmg-product__image--secondary {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  z-index: 2;
}
body.lemo-csb-mode li.product:hover .product-image img:first-of-type {
  opacity: 0 !important;
}
body.lemo-csb-mode li.product:hover .product-image .secondary-image,
body.lemo-csb-mode li.product:hover .mnmg-product__image--secondary,
body.lemo-csb-mode li.product:hover .product-image img:last-of-type:not(:first-of-type) {
  opacity: 1 !important;
}

/* ==========================================================================
   Product badges (sale/new)
   ========================================================================== */
body.lemo-csb-mode .product .onsale,
body.lemo-csb-mode .product .product-badge,
body.lemo-csb-mode li.product span.onsale,
body.lemo-csb-mode .mnmg-product__label {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 5px 11px !important;
  background: var(--lemo-sale) !important;
  color: var(--lemo-white) !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  border-radius: var(--lemo-r-full) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  z-index: 3 !important;
  font-family: var(--lemo-ff) !important;
}

/* New badge (không phải sale) — đen */
body.lemo-csb-mode .product-badge.new,
body.lemo-csb-mode .label-new,
body.lemo-csb-mode .mnmg-product__label--new {
  background: var(--lemo-black) !important;
}

/* ==========================================================================
   Wishlist / Compare / Quick View icons — đặt top-right
   ========================================================================== */
body.lemo-csb-mode .product .product-actions,
body.lemo-csb-mode .product .wd-buttons,
body.lemo-csb-mode li.product .product-buttons,
body.lemo-csb-mode .mnmg-product__actions {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  z-index: 4 !important;
  opacity: 0;
  transform: translateX(8px);
  transition: all var(--lemo-ease);
}
body.lemo-csb-mode li.product:hover .product-actions,
body.lemo-csb-mode li.product:hover .wd-buttons,
body.lemo-csb-mode li.product:hover .mnmg-product__actions {
  opacity: 1;
  transform: translateX(0);
}

/* Each action button */
body.lemo-csb-mode .product .product-actions a,
body.lemo-csb-mode .product .product-actions button,
body.lemo-csb-mode .product .wd-buttons a,
body.lemo-csb-mode li.product .yith-wcwl-add-to-wishlist a,
body.lemo-csb-mode .mnmg-product__actions > * {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--lemo-white) !important;
  color: var(--lemo-black) !important;
  border-radius: var(--lemo-r-full) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
  border: none !important;
  font-size: 0 !important;
  transition: all var(--lemo-ease) !important;
}
body.lemo-csb-mode .product .product-actions a:hover,
body.lemo-csb-mode .product .product-actions button:hover,
body.lemo-csb-mode .mnmg-product__actions > *:hover {
  background: var(--lemo-black) !important;
  color: var(--lemo-white) !important;
}
body.lemo-csb-mode .product .product-actions a i,
body.lemo-csb-mode .product .product-actions a svg {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
}

/* ==========================================================================
   Quick Add Button (slide up from bottom) — signature CSB behavior
   ========================================================================== */
body.lemo-csb-mode li.product .button,
body.lemo-csb-mode li.product .add_to_cart_button,
body.lemo-csb-mode li.product a.product_type_simple,
body.lemo-csb-mode li.product a.product_type_variable,
body.lemo-csb-mode .mnmg-product__quick-add,
body.lemo-csb-mode li.product .added_to_cart {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 42px !important;
  padding: 0 !important;
  background: var(--lemo-black) !important;
  color: var(--lemo-white) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: none !important;
  z-index: 3 !important;
  margin: 0 !important;
  transform: translateY(100%) !important;
  opacity: 1 !important;
  transition: transform var(--lemo-ease) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--lemo-ff) !important;
}
body.lemo-csb-mode li.product:hover .button,
body.lemo-csb-mode li.product:hover .add_to_cart_button,
body.lemo-csb-mode li.product:hover a.product_type_simple,
body.lemo-csb-mode li.product:hover a.product_type_variable,
body.lemo-csb-mode li.product:hover .mnmg-product__quick-add {
  transform: translateY(0) !important;
}
body.lemo-csb-mode li.product .button:hover {
  background: #000 !important;
}

/* Hide "Added" success chip default Minimog style */
body.lemo-csb-mode li.product .added_to_cart {
  display: none !important;
}

/* ==========================================================================
   Product Card Body (below image)
   ========================================================================== */
body.lemo-csb-mode li.product .product-info,
body.lemo-csb-mode li.product .product-content,
body.lemo-csb-mode li.product .mnmg-product__info {
  padding: 12px 2px 18px !important;
  text-align: left !important;
  background: var(--lemo-white) !important;
}

body.lemo-csb-mode li.product .woocommerce-loop-product__title,
body.lemo-csb-mode li.product h2,
body.lemo-csb-mode li.product h3,
body.lemo-csb-mode li.product .product-title,
body.lemo-csb-mode li.product .mnmg-product__title {
  font-size: .85rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 0 4px !important;
  color: var(--lemo-black) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.lemo-csb-mode li.product a h2:hover,
body.lemo-csb-mode li.product .product-title a:hover {
  color: var(--lemo-gray-500) !important;
}

/* Price */
body.lemo-csb-mode li.product .price,
body.lemo-csb-mode li.product .mnmg-product__price {
  font-size: .82rem !important;
  color: var(--lemo-gray-700) !important;
  font-weight: 500 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
body.lemo-csb-mode li.product .price ins,
body.lemo-csb-mode li.product .price .amount {
  text-decoration: none !important;
  color: var(--lemo-gray-700) !important;
  font-weight: 500 !important;
}
body.lemo-csb-mode li.product .price del,
body.lemo-csb-mode li.product .price del .amount {
  text-decoration: line-through !important;
  color: var(--lemo-gray-400) !important;
  font-weight: 400 !important;
  font-size: .78rem !important;
  opacity: 1 !important;
}
body.lemo-csb-mode li.product.sale .price ins .amount,
body.lemo-csb-mode li.product .price ins .amount {
  color: var(--lemo-sale) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   Color Swatches on Card
   ========================================================================== */
body.lemo-csb-mode li.product .mnmg-product__swatches,
body.lemo-csb-mode li.product .product-swatches,
body.lemo-csb-mode li.product .swatches-on-card,
body.lemo-csb-mode li.product .variation-swatches {
  margin-top: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: wrap;
}
body.lemo-csb-mode li.product .swatch,
body.lemo-csb-mode li.product .variation-swatch,
body.lemo-csb-mode li.product .mnmg-product__swatch {
  width: 14px !important;
  height: 14px !important;
  border-radius: var(--lemo-r-full) !important;
  border: 1px solid var(--lemo-gray-300) !important;
  cursor: pointer;
  padding: 0 !important;
  min-width: 0 !important;
  transition: transform var(--lemo-ease) !important;
  margin: 0 !important;
}
body.lemo-csb-mode li.product .swatch:hover {
  transform: scale(1.25) !important;
}
body.lemo-csb-mode li.product .swatch.selected,
body.lemo-csb-mode li.product .swatch.active {
  border-color: var(--lemo-black) !important;
  border-width: 1.5px !important;
}

/* ==========================================================================
   Filter widgets on shop page
   ========================================================================== */
body.lemo-shop .widget-area .widget-title,
body.lemo-shop .sidebar-widget .widget-title {
  font-size: .74rem !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--lemo-black) !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--lemo-gray-200) !important;
}

/* Filter chip/pill style for category filters */
body.lemo-shop .widget_product_categories a,
body.lemo-shop .widget_product_tag_cloud a {
  display: inline-block;
  padding: 6px 14px !important;
  border: 1px solid var(--lemo-gray-300) !important;
  border-radius: var(--lemo-r-full) !important;
  font-size: .74rem !important;
  color: var(--lemo-gray-700) !important;
  background: var(--lemo-white) !important;
  margin: 0 6px 6px 0 !important;
  transition: all var(--lemo-ease) !important;
  text-decoration: none !important;
}
body.lemo-shop .widget_product_categories a:hover,
body.lemo-shop .widget_product_tag_cloud a:hover {
  background: var(--lemo-black) !important;
  color: var(--lemo-white) !important;
  border-color: var(--lemo-black) !important;
}

/* ==========================================================================
   Pagination — clean numbers
   ========================================================================== */
body.lemo-csb-mode .woocommerce nav.woocommerce-pagination,
body.lemo-csb-mode .shop-pagination {
  text-align: center !important;
  padding: 40px 0 !important;
  border-top: 1px solid var(--lemo-gray-150) !important;
  margin-top: 40px !important;
}
body.lemo-csb-mode .woocommerce nav.woocommerce-pagination ul {
  display: inline-flex !important;
  gap: 6px !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.lemo-csb-mode .woocommerce nav.woocommerce-pagination ul li {
  border: none !important;
}
body.lemo-csb-mode .woocommerce nav.woocommerce-pagination ul li a,
body.lemo-csb-mode .woocommerce nav.woocommerce-pagination ul li span {
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--lemo-gray-200) !important;
  border-radius: var(--lemo-r-xs) !important;
  font-size: .82rem !important;
  color: var(--lemo-gray-700) !important;
  background: var(--lemo-white) !important;
  padding: 0 !important;
  transition: all var(--lemo-ease) !important;
}
body.lemo-csb-mode .woocommerce nav.woocommerce-pagination ul li a:hover,
body.lemo-csb-mode .woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--lemo-black) !important;
  color: var(--lemo-white) !important;
  border-color: var(--lemo-black) !important;
}