/* Decorative only: every WooCommerce link, button and price remains in its original markup. */
body.ds-shop-reflective-cards #dsn-products ul.products > li.product {
  --ds-reflect-x: 50%;
  --ds-reflect-y: 42%;
  --ds-reflect-rx: 0deg;
  --ds-reflect-ry: 0deg;
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background:
    radial-gradient(240px circle at var(--ds-reflect-x) var(--ds-reflect-y), rgba(108, 206, 255, .17), transparent 75%),
    linear-gradient(153deg, #fff 5%, #f3f9fe 54%, #fff 100%) !important;
  transform-style: preserve-3d;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 600px;
  max-width: 330px;
  border: 1px solid #c8d9ec !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 38px rgba(11, 49, 93, .10), inset 0 1px 0 #fff !important;
}

/* Match the approved 330px card. Columns wrap naturally as the catalogue narrows. */
body.ds-shop-reflective-cards #dsn-products ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 330px)) !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 20px !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .astra-shop-thumbnail-wrap {
  position: relative !important;
  width: auto !important;
  height: 300px !important;
  min-height: 300px !important;
  margin: 12px 12px 0 !important;
  border: 1px solid #d9e9f4 !important;
  border-radius: 13px !important;
  background: radial-gradient(circle at 50% 45%, #fff 10%, #e3f2fc 83%) !important;
  overflow: hidden !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .astra-shop-thumbnail-wrap > a {
  inset: 12px !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .astra-shop-thumbnail-wrap img {
  object-fit: contain !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bsi-card-purchase {
  display: flex !important;
  flex: 1 1 auto !important;
  padding: 7px 19px 20px !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .astra-shop-summary-wrap {
  display: grid !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto 1fr auto auto !important;
  align-content: start !important;
  column-gap: 8px !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .dsn-shop-card-brand {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  margin: 0 0 7px !important;
  color: #0671c7 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .ast-loop-product__link {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .woocommerce-loop-product__title {
  min-height: 48px !important;
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .ast-woo-product-category {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  margin: 7px 0 0 !important;
  color: #58718c !important;
  font-size: 12px !important;
  opacity: 1 !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .price {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  align-self: end !important;
  width: 100% !important;
  margin: 14px 0 0 !important;
  padding: 15px 0 0 !important;
  border-top: 1px solid #d7e4ef !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bs-price-display__primary {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  min-height: 0 !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bs-price-display__label {
  font-size: 13px !important;
  white-space: nowrap !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bs-price-display__primary-amount {
  font-size: 22px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  text-align: right !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bs-price-display__secondary {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  gap: 3px !important;
  margin: 5px 0 0 !important;
  font-size: 11px !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bs-price-display__secondary-label,
body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bs-price-display__secondary-amount {
  flex: 0 0 auto !important;
  font-size: 11px !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bs-price-display__secondary-amount {
  margin: 0 !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bsi-card-quantity {
  grid-column: 1 !important;
  grid-row: 5 !important;
  width: 92px !important;
  max-width: 92px !important;
  min-width: 0 !important;
  height: 39px !important;
  margin: 13px 0 0 !important;
  border: 1px solid #b5cadf !important;
  border-radius: 8px !important;
  background: #fff !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .astra-shop-summary-wrap > a.add_to_cart_button,
body.ds-shop-reflective-cards #dsn-products ul.products > li.product .astra-shop-summary-wrap > a.product_type_simple,
body.ds-shop-reflective-cards #dsn-products ul.products > li.product .astra-shop-summary-wrap > a.product_type_variable,
body.ds-shop-reflective-cards #dsn-products ul.products > li.product .astra-shop-summary-wrap > a.product_type_external {
  grid-column: 2 !important;
  grid-row: 5 !important;
  min-width: 0 !important;
  min-height: 39px !important;
  margin: 13px 0 0 !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  color: #082244 !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .astra-shop-summary-wrap:not(:has(.bsi-card-quantity)) > a:is(.add_to_cart_button, .product_type_simple, .product_type_variable, .product_type_external) {
  grid-column: 1 / -1 !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bsi-card-sku {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 6 !important;
  align-self: end !important;
  width: auto !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #5d7183 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .dsn-shop-stock {
  grid-column: 2 !important;
  grid-row: 6 !important;
  justify-self: end !important;
  align-self: end !important;
  width: auto !important;
  margin: 14px 0 0 !important;
  font-size: 11px !important;
  text-align: right !important;
}

@media (max-width: 359px) {
  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bs-price-display__secondary {
    flex-wrap: wrap !important;
  }
}

/* Android's "Desktop site" keeps a wide layout viewport on a touch screen.
   Fit three complete cards inside the catalogue area without changing true
   desktop or the regular mobile layout. */
@media (min-width: 760px) and (max-width: 1100px) and (pointer: coarse) {
  body.ds-shop-reflective-cards #dsn-products ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    gap: 12px !important;
  }

  body.ds-shop-reflective-cards #dsn-products ul.products > li.product {
    max-width: none;
    min-height: 0;
    border-radius: 14px !important;
  }

  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .astra-shop-thumbnail-wrap {
    height: clamp(140px, 18vw, 190px) !important;
    min-height: clamp(140px, 18vw, 190px) !important;
    margin: 8px 8px 0 !important;
  }

  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .astra-shop-thumbnail-wrap > a {
    inset: 7px !important;
  }

  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bsi-card-purchase {
    padding: 8px 10px 12px !important;
  }

  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .astra-shop-summary-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto 1fr auto auto auto !important;
  }

  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .dsn-shop-card-brand {
    margin-bottom: 4px !important;
    font-size: 10px !important;
  }

  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .woocommerce-loop-product__title {
    min-height: 0 !important;
    font-size: 13px !important;
  }

  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .ast-woo-product-category {
    margin-top: 5px !important;
    font-size: 10px !important;
  }

  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .price {
    margin-top: 8px !important;
    padding-top: 8px !important;
  }

  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bs-price-display__primary {
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
  }

  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bs-price-display__label,
  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bs-price-display__secondary-label,
  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bs-price-display__secondary-amount {
    font-size: 10px !important;
  }

  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bs-price-display__primary-amount {
    font-size: 17px !important;
  }

  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bs-price-display__secondary {
    flex-wrap: wrap !important;
    gap: 1px 3px !important;
  }

  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bsi-card-quantity {
    grid-column: 1 !important;
    grid-row: 5 !important;
    margin-top: 9px !important;
  }

  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .astra-shop-summary-wrap > a:is(.add_to_cart_button, .product_type_simple, .product_type_variable, .product_type_external) {
    grid-column: 1 !important;
    grid-row: 6 !important;
    margin-top: 6px !important;
    font-size: 11px !important;
  }

  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bsi-card-sku {
    grid-column: 1 !important;
    grid-row: 7 !important;
    margin-top: 8px !important;
    font-size: 9px !important;
  }

  body.ds-shop-reflective-cards #dsn-products ul.products > li.product .dsn-shop-stock {
    grid-column: 1 !important;
    grid-row: 7 !important;
    margin-top: 8px !important;
    font-size: 9px !important;
  }
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product::before {
  content: '';
  position: absolute;
  inset: -42% -95%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(107deg,
    transparent 40%,
    rgba(74, 171, 230, .06) 44%,
    rgba(255, 255, 255, .75) 48%,
    rgba(111, 212, 255, .43) 50%,
    rgba(255, 255, 255, .12) 53%,
    transparent 58%);
  transform: translate3d(-48%, 0, 0) rotate(-8deg);
  will-change: transform, opacity;
}

body.ds-shop-reflective-cards #dsn-products ul.products > li.product .bsi-card-purchase {
  position: relative !important;
  z-index: 3 !important;
}

@media (hover: hover) and (pointer: fine) {
  body.ds-shop-reflective-cards #dsn-products ul.products > li.product:is(:hover, :focus-within) {
    border-color: #92c4e7 !important;
    box-shadow: 0 18px 36px rgba(14, 63, 102, .18), 0 0 0 1px rgba(129, 209, 255, .42) !important;
    transform: perspective(1100px) translateY(-4px) rotateX(var(--ds-reflect-rx)) rotateY(var(--ds-reflect-ry)) !important;
  }

  body.ds-shop-reflective-cards #dsn-products ul.products > li.product:is(:hover, :focus-within)::before {
    opacity: 1;
    animation: ds-card-reflect-sweep 1.25s cubic-bezier(.2, .55, .25, 1) both;
  }
}

@keyframes ds-card-reflect-sweep {
  from { transform: translate3d(-48%, 0, 0) rotate(-8deg); }
  to { transform: translate3d(48%, 0, 0) rotate(-8deg); }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  body.ds-shop-reflective-cards #dsn-products ul.products > li.product::before { display: none !important; animation: none !important; }
  body.ds-shop-reflective-cards #dsn-products ul.products > li.product:is(:hover, :focus-within) { transform: none !important; }
}