/* DN TANC — Product card layout.
   Moved here from the "DN TANC - Product card layout" Content Block (was output
   via hook:835 as inline CSS scoped to `main`). Now version-controlled in the
   plugin and scoped to :is(main, .dn-tanc-most-loved) so it styles BOTH the
   shop/archive product cards AND the mega-menu "Most Loved" card from one place. */

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 38px;
  grid-template-areas:
  "image image image"
  "title title cart"
  "price swatches swatches"
  "stock . .";
  column-gap: 10px;
  row-gap: 10px;
}

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product):not(:has(.dn-tanc-stock-left)) {
  grid-template-areas:
  "image image image"
  "title title cart"
  "price swatches swatches";
}

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product):not(:has(.dn-tanc-stock-left)) .ct-product-content-block {
  display: none;
}

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) figure {
  grid-area: image;
}

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .woocommerce-loop-product__title {
  grid-area: title;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  align-self: center;
}

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .woocommerce-loop-product__title a {
  display: block;
}

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .price {
  grid-area: price;
  justify-self: start;
  align-self: center;
  margin: 0 !important;
  text-align: left;
}

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .ct-woo-card-actions {
  grid-area: cart;
  width: 38px;
  margin: 0 !important;
  justify-self: end;
  align-self: center;
}

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .ct-product-content-block {
  grid-area: stock;
  margin: 0 !important;
  justify-self: start;
  align-self: start;
}

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .ct-product-content-block p {
  margin: 0;
}

/* Icon button: simple add-to-cart and variable select-options */

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .ct-woo-card-actions .button {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 999px;
  font-size: 0 !important;
  line-height: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Inline SVG icons injected from child theme */

/* Centre the icon geometrically instead of through flex metrics. Flex centring
   renders correctly in desktop browsers at any width, but lands a couple of
   pixels off inside the circle on a real iOS device (reported on device, not
   reproducible in a desktop browser or in Chromium at the same viewport).
   Absolute positioning against the round button resolves identically on every
   engine, so the icon cannot drift. */
:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .ct-woo-card-actions .dn-tanc-card-icon {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex: 0 0 auto;
}

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .ct-woo-card-actions .dn-tanc-check-icon {
  display: none;
  width: 20px;
  height: 20px;
}

/* After an AJAX add-to-cart, show the check icon instead of the cart icon.
   This covers variable products too: once a card swatch resolves a variation,
   Blocksy turns that button into an ajax add-to-cart as well. */

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .ct-woo-card-actions .button.added .dn-tanc-cart-icon {
  display: none;
}

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .ct-woo-card-actions .button.added .dn-tanc-check-icon {
  display: block;
}

/* Hide cart/check while the Woo loading spinner is active */

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .ct-woo-card-actions .button.loading {
  position: relative;
}

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .ct-woo-card-actions .button.loading .dn-tanc-card-icon {
  opacity: 0;
}

/* Center native Woo/Blocksy loading spinner inside the round icon button */

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .ct-woo-card-actions .button.loading::before,
:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .ct-woo-card-actions .button.loading::after {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
}

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .ct-woo-card-actions .button.loading::after {
  width: 16px !important;
  height: 16px !important;
}

/* Hide Woo's appended View Cart link after AJAX add-to-cart */

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .ct-woo-card-actions .added_to_cart.wc-forward {
  display: none !important;
}

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .ct-card-variation-swatches {
  grid-area: swatches;
  margin: 0 !important;
  align-self: center;
  justify-self: end;
  width: auto;
  max-width: 100%;
}

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .ct-card-variation-swatches .ct-variation-swatches {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--swatches-gap, 5px);
}

:is(main, .dn-tanc-most-loved) [data-products="type-1"] .product:not(#woo-cart-panel .product) .ct-card-variation-swatches .ct-swatch-container {
  flex: 0 0 auto;
}