/* ==========================================================================
   LEAFERRY WOOCOMMERCE PRODUCT CATALOG GRID & PORCELAIN CARDS
   Blocksy-Native Architecture: Zero !important Overrides
   Translucent Glass Surface, Balanced Typography, and Quick View Eye Icon
   ========================================================================== */

/* 1. Catalog Grid Layout Spacing (Controlled by Blocksy Columns) */
[data-products],
.ct-products-grid,
ul.products {
  --theme-grid-gap: 40px 28px;
  margin-bottom: 60px;
}

@media (max-width: 767px) {
  [data-products],
  .ct-products-grid,
  ul.products {
    --theme-grid-gap: 26px 14px;
  }
}

/* 2. Product Card Porcelain Glass & Hover Elevation */
.ct-product-card,
.woocommerce ul.products li.product {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.35s ease,
    border-color 0.35s ease;
}

/* Paper Archive Card Architecture for Boxed Cards (Type 2) */
[data-products="type-2"] li.product,
[data-cards="type-2"] .ct-product-card,
[data-cards="type-2"] li.product,
.ct-product-card[data-card-type="type-2"],
.woocommerce ul.products li.product {
  --card-background-color: #FFFFFF;
  background-color: #FFFFFF;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0, 84, 65, 0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(24, 51, 38, 0.03);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Subtle Border Focus on Hover */
[data-products="type-2"] li.product:hover,
[data-cards="type-2"] .ct-product-card:hover,
[data-cards="type-2"] li.product:hover,
.ct-product-card[data-card-type="type-2"]:hover,
.woocommerce ul.products li.product:hover {
  transform: none;
  background-color: #FFFFFF;
  border-color: rgba(0, 84, 65, 0.24);
  box-shadow: 0 4px 16px rgba(24, 51, 38, 0.06);
}

/* Sub-Container for Card Actions */
[data-products="type-2"] .ct-woo-card-actions {
  border-top: 1px solid rgba(0, 84, 65, 0.06);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 12px 16px;
  transition: border-color 0.25s ease;
}

[data-products="type-2"] li.product:hover .ct-woo-card-actions {
  border-top-color: rgba(0, 84, 65, 0.12);
  background: transparent;
}

/* 3. Product Image Transition & Hover Zoom */
.ct-product-card figure,
.woocommerce ul.products li.product figure {
  overflow: hidden;
}

.ct-product-card img,
.woocommerce ul.products li.product img {
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

.ct-product-card:hover img,
.woocommerce ul.products li.product:hover img {
  transform: scale(1.03);
}

/* 4. Editorial Title Typography (Centered & Balanced) */
.woocommerce-loop-product__title,
.ct-product-title,
li.product h2,
li.product h3 {
  font-family: var(--theme-headings-font-family, "Cormorant Garamond", Georgia, serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.015em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: balance;
  text-align: center;
  line-height: 1.38;
  margin: 0 auto 6px auto;
  padding: 0 14px;
  letter-spacing: 0.015em;
  transition: color 0.22s ease;
}

.woocommerce-loop-product__title a:hover,
.ct-product-title a:hover,
li.product h2 a:hover,
li.product h3 a:hover {
  color: var(--theme-palette-color-1);
}

@media (max-width: 689px) {
  .woocommerce-loop-product__title,
  .ct-product-title,
  li.product h2 {
    font-size: 14px;
    line-height: 1.35;
    padding: 0 10px;
  }
}

/* 5. Price - Quiet Numeric Figure in Plus Jakarta Sans */
.woocommerce ul.products li.product .price,
.ct-product-price,
li.product .price {
  font-family: var(--theme-font-family, "Plus Jakarta Sans", sans-serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--theme-palette-color-4, #1A3326);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px auto 12px auto;
  padding: 0 14px;
}

.woocommerce ul.products li.product .price ins,
.ct-product-price ins {
  text-decoration: none;
  color: var(--theme-palette-color-1, #005441);
  font-weight: 600;
}

.woocommerce ul.products li.product .price del,
.ct-product-price del {
  color: #8E9290;
  font-size: 13.5px;
  margin-right: 6px;
}

/* 6. Add to Cart Button in Loop - Solid Deep Forest Jade Button */
.woocommerce ul.products li.product .button.add_to_cart_button,
.ct-product-button .button,
li.product .button.add_to_cart_button,
.ct-woo-card-actions .button {
  background: #005441 !important;
  color: #FFFFFF !important;
  border-radius: 4px;
  font-family: var(--theme-font-family, "Plus Jakarta Sans", sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 16px;
  box-shadow: 0 2px 6px rgba(0, 84, 65, 0.15);
  transition: all 0.2s ease;
}

.woocommerce ul.products li.product .button.add_to_cart_button::after,
.ct-woo-card-actions .button::after {
  display: none;
}

.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.ct-product-button .button:hover,
li.product .button.add_to_cart_button:hover,
.ct-woo-card-actions .button:hover {
  background: #003D2F !important;
  color: #FFFFFF !important;
  transform: none;
  box-shadow: 0 4px 10px rgba(0, 84, 65, 0.25);
}

/* 7. Category Meta Tag in Loop */
li.product .meta-categories,
li.product .meta-categories a {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8C9E94;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

li.product .meta-categories a:hover {
  color: var(--theme-palette-color-1, #005441);
}

/* 8. Quick View Eye Icon (Floating Frosted Circle) */
.ct-woo-card-extra {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
}

.ct-open-quick-view,
.ct-quick-view-button,
button.ct-open-quick-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 50%;
  color: var(--theme-palette-color-4, #1A3326);
  opacity: 0.8;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ct-open-quick-view svg,
button.ct-open-quick-view svg {
  fill: currentColor;
  width: 15px;
  height: 15px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), fill 0.2s ease;
}

.ct-open-quick-view:hover,
button.ct-open-quick-view:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.95);
  color: #BA4F18;
  transform: scale(1.08);
}

.ct-open-quick-view:hover svg,
button.ct-open-quick-view:hover svg {
  fill: #BA4F18;
}