/**
 * UruShop Search Cards — reskin of Searchanise results to match .urushop-card.
 *
 * Scoped to #snize_results (results page). Token values are copied here because
 * the canonical card's CSS custom properties are scoped under .urushop-card and
 * are NOT inherited by Searchanise nodes.
 *
 * @see docs/superpowers/specs/2026-06-09-search-cards-design.md
 */

/* ---- Card container ------------------------------------------------------ */
#snize_results .snize-product {
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #FFFFFF;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
}
#snize_results .snize-product:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}

/* ---- Image --------------------------------------------------------------- */
#snize_results .snize-thumbnail,
#snize_results .snize-item-image {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
#snize_results .snize-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter .2s ease;
}

/* ---- Title / description / price ----------------------------------------- */
#snize_results .snize-title {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: #1B4332;
  margin: 10px 12px 4px;
  display: block;
}
#snize_results .snize-description {
  font-size: 13px;
  color: #6B7280;
  margin: 0 12px 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ---- Footer: price then compact icon CTA, right-aligned -----------------
   Searchanise renders the price (.snize-price-list) and buttons
   (.snize-buttons) as separate stacked siblings inside .snize-overhidden. We
   keep the icon button in normal flow (NOT absolutely positioned) so it can
   never overlap the title/description, and right-align it on its own row just
   below the price — a clean compact footer that matches the catalog button. */
#snize_results .snize-price-list,
#snize_results .snize-price {
  font-weight: 700;
  color: #00A86B;
}
#snize_results .snize-price-list {
  margin: 0 12px 8px;
}
#snize_results .snize-buttons {
  margin: 0 12px 12px;
  display: flex;
  justify-content: flex-end;
}
/* Hide Searchanise's default "View product" button ONLY once our CTA is injected
   (the JS adds .urushop-card to the card at injection time). Keeping this scoped to
   .urushop-card avoids a button-less flash before the async CTA arrives, and avoids
   button-less cards in the JS fallback paths that never add .urushop-card. */
#snize_results .urushop-card .snize-view-product-button {
  display: none !important;
}

/* Compact icon-only button — identical shape/icons to the canonical card
   (.urushop-card__cta in urushop-product-card-css/card.css). Shape props use
   !important because our anchor also carries WooCommerce's .button /
   .add_to_cart_button classes, whose theme/Searchanise rules would otherwise
   force a pill radius and a visible text label. */
#snize_results .urushop-card__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px !important;
  min-height: 42px !important;
  width: auto !important;
  box-sizing: border-box;
  padding: 10px 18px !important;
  background-color: #00A86B;
  border: 2px solid #00A86B;
  color: #FFFFFF;
  border-radius: 8px !important;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px;
  font-size: 0 !important; /* icon-only; label read by screen readers via aria-label */
  transition: background-color .2s ease, border-color .2s ease;
}
#snize_results .urushop-card__cta:hover {
  background-color: #008f5a;
  border-color: #008f5a;
}
/* CTA icons — inlined SVG, mirroring card.css. */
#snize_results .urushop-card__cta--add_to_cart,
#snize_results .urushop-card__cta--select_options {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}
#snize_results .urushop-card__cta--notify_me {
  background-color: #4B5563;
  border-color: #4B5563;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}
#snize_results .urushop-card__cta--notify_me:hover {
  background-color: #374151;
  border-color: #374151;
}
#snize_results .urushop-card__cta.loading {
  opacity: .6;
  pointer-events: none;
}
/* WooCommerce injects a "View basket" link after a successful add — hide it
   the same way the canonical card does. */
#snize_results .urushop-card a.added_to_cart {
  display: none !important;
}

/* ---- Out of stock (pure CSS, keyed off Searchanise's own class) ---------- */
#snize_results .snize-product-out-of-stock .snize-thumbnail img {
  filter: grayscale(1);
}
#snize_results .snize-product-out-of-stock:hover .snize-thumbnail img {
  filter: grayscale(.7);
}
#snize_results .snize-product-out-of-stock .snize-thumbnail {
  position: relative;
}
#snize_results .snize-product-out-of-stock .snize-thumbnail::after {
  content: var(--urushop-oos-label, "Out of stock");
  position: absolute;
  top: 8px;
  left: 8px;
  background: #4B5563;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  z-index: 2;
}