/* Storefront product card.
   The tile variant keeps its historical .home-product-card class: it first
   appeared on the homepage, and it is the same card the catalog renders -
   one implementation, shared by every page that lists products. */

.home-product-card {
  position: relative;
  border-color: var(--site-border);
  border-radius: 12px;
  background: var(--site-surface);
  color: var(--site-text);
  box-shadow: none;
}

.home-product-card:hover {
  border-color: var(--site-border-strong);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

.home-product-card .product-card__media {
  isolation: isolate;
  aspect-ratio: 1 / .82;
  overflow: hidden;
  border-block-end: 1px solid var(--site-border);
  background: #e9ece7;
}

.home-product-card .product-card__media img {
  width: 100%;
  height: 100%;
  padding: 12px;
  object-fit: contain;
  outline: 0;
  mix-blend-mode: multiply;
}

.home-product-card .product-card__placeholder {
  color: var(--site-text-subtle);
}

.site-favorite-button {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(15, 18, 22, .88);
  color: #f1f3f0;
  cursor: pointer;
  place-items: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  transition: border-color 120ms var(--site-ease), background-color 120ms var(--site-ease), color 120ms var(--site-ease), transform 120ms var(--site-ease);
}

.site-favorite-button:hover,
.site-favorite-button:focus-visible {
  border-color: rgba(255, 255, 255, .28);
  background: #20252b;
  color: #fff;
}

.site-favorite-button:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: 2px;
}

.site-favorite-button:active {
  transform: scale(.95);
}

.site-favorite-button:disabled {
  cursor: wait;
  opacity: .72;
}

.site-favorite-button svg {
  width: 18px;
  height: 18px;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill 120ms var(--site-ease), color 120ms var(--site-ease), transform 120ms var(--site-ease);
}

.site-favorite-button.is-favorite {
  border-color: rgba(238, 97, 103, .46);
  background: rgba(36, 19, 22, .94);
  color: var(--site-danger);
}

.site-favorite-button.is-favorite svg {
  fill: currentColor;
}

.home-product-card__favorite {
  position: absolute;
  z-index: 3;
  inset-block-start: 12px;
  inset-inline-start: 12px;
}

.home-product-card__discount {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  min-height: 28px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--site-danger);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.home-product-card .product-card__body {
  gap: 8px;
  padding: 14px 16px 16px;
}

/* Three lines, always: a long name used to grow its card and push the price
   and the buy row out of line with the rest of the row. The full name stays
   available in the title attribute and on the product page. */
.home-product-card .product-card__name {
  display: -webkit-box;
  min-height: 59px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--site-text);
  font-size: 14px;
  font-weight: 680;
  line-height: 1.4;
  text-decoration: none;
  text-wrap: pretty;
  transition: color 120ms var(--site-ease);
}

.home-product-card .product-card__name:hover,
.home-product-card .product-card__name:focus-visible {
  color: var(--site-accent);
  text-decoration: none;
}

/* Full name bubble for a clamped product name. Mirrors the admin table
   tooltip: dark surface, own border, above the name unless it would leave
   the viewport. */
.home-tooltip {
  position: fixed;
  z-index: 60;
  max-width: min(340px, calc(100vw - 20px));
  padding: 9px 12px;
  border: 1px solid var(--site-border-strong);
  border-radius: 10px;
  background: var(--site-surface-raised);
  color: var(--site-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .38);
  transition: opacity 120ms var(--site-ease);
}

.home-tooltip.is-visible {
  opacity: 1;
}

.home-tooltip[hidden] {
  display: none;
}

.home-product-card .product-card__name:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.home-product-card__sku {
  min-height: 16px;
  color: var(--site-text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .01em;
}

/* Stock reads as a badge, like the discount marker, but sits in the text
   column under the article number rather than on the photo. */
.home-product-card__stock-row {
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* "★ 4.5 (12)" beside the stock badge; only rendered for rated products. */
.home-product-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--site-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.home-product-card__rating svg {
  width: 14px;
  height: 14px;
  fill: var(--site-accent);
  stroke: none;
}

.home-product-card__rating-count {
  color: var(--site-text-muted);
  font-weight: 500;
}

.home-product-card__stock {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 7px;
  background: var(--site-accent);
  color: var(--site-accent-contrast);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.home-product-card__stock.is-unavailable {
  background: var(--site-danger);
  color: #2a0b0d;
}

.home-product-card .product-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-block-start: 8px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--site-border);
}

.home-product-card .product-card__prices {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  margin-inline-end: auto;
}

.home-product-card .product-card__old-price {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  min-height: 0;
  color: var(--site-text-subtle);
  font-size: 11px;
  line-height: 1;
}

.home-product-card .product-card__price {
  color: var(--site-text);
  font-size: 21px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.home-product-card .product-card__price.is-discounted {
  color: var(--site-danger);
}

.home-product-card__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  transition: gap 150ms cubic-bezier(0.2, 0, 0, 1);
}

.home-product-card__quantity {
  display: grid;
  width: 98px;
  height: 40px;
  flex: 0 0 98px;
  grid-template-columns: 32px 34px 32px;
  overflow: hidden;
  border: 1px solid var(--site-border-strong);
  border-radius: 9px;
  background: var(--site-surface-soft);
  transform-origin: center;
  transition:
    width 150ms cubic-bezier(0.2, 0, 0, 1),
    flex-basis 150ms cubic-bezier(0.2, 0, 0, 1),
    opacity 100ms ease-out,
    scale 150ms cubic-bezier(0.2, 0, 0, 1),
    border-color 150ms cubic-bezier(0.2, 0, 0, 1);
}

.home-product-card__quantity-button {
  display: grid;
  width: 32px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--site-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  place-items: center;
  transition: background-color 120ms var(--site-ease), color 120ms var(--site-ease);
}

.home-product-card__quantity-button:hover:not(:disabled) {
  background: var(--site-surface-raised);
  color: var(--site-text);
}

.home-product-card__quantity-button:focus-visible,
.home-product-card__quantity-input:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--site-accent);
  outline-offset: -2px;
}

.home-product-card__quantity-button:disabled {
  color: var(--site-text-subtle);
  cursor: not-allowed;
  opacity: .55;
}

.home-product-card__quantity-input {
  width: 34px;
  height: 38px;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--site-border);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--site-text);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 38px;
  text-align: center;
  appearance: textfield;
}

.home-product-card__quantity-input::-webkit-inner-spin-button,
.home-product-card__quantity-input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.home-product-card__quantity-input:disabled {
  color: var(--site-text-subtle);
  cursor: not-allowed;
}

.home-product-card__buy {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  gap: 0;
  padding: 0;
  border-radius: 9px;
  overflow: hidden;
  white-space: nowrap;
  transition:
    width 150ms cubic-bezier(0.2, 0, 0, 1),
    min-width 150ms cubic-bezier(0.2, 0, 0, 1),
    flex-basis 150ms cubic-bezier(0.2, 0, 0, 1),
    gap 150ms cubic-bezier(0.2, 0, 0, 1),
    padding 150ms cubic-bezier(0.2, 0, 0, 1),
    background-color 120ms var(--site-ease),
    scale 120ms var(--site-ease);
}

.home-product-card__buy svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.home-product-card__buy [data-cart-label] {
  line-height: 1;
  white-space: nowrap;
}

.home-product-card.is-in-cart .home-product-card__actions {
  gap: 0;
}

.home-product-card.is-in-cart .home-product-card__quantity {
  width: 0;
  flex-basis: 0;
  grid-template-columns: 0 0 0;
  border-color: transparent;
  opacity: 0;
  scale: .96;
  pointer-events: none;
}

.home-product-card.is-in-cart .home-product-card__buy {
  width: 146px;
  min-width: 146px;
  flex-basis: 146px;
  gap: 8px;
  padding-inline: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .site-favorite-button,
  .site-favorite-button svg,
  .home-product-card__actions,
  .home-product-card__quantity,
  .home-product-card__buy {
    transition: none;
  }
}

@media (max-width: 620px) {
  .home-product-card .product-card__body {
    padding: 14px 15px 15px;
  }

  .home-product-card .product-card__footer {
    align-items: center;
  }
}

/* Chosen quantity above the known stock (storefront.js applyStockLimit):
   looks disabled, stays focusable so its label/title can be read. */
.home-product-card__buy.is-over-stock,
.home-product-card__buy.is-over-stock:hover {
  border-color: var(--site-border);
  background: var(--site-surface-soft);
  color: var(--site-text-subtle);
  cursor: not-allowed;
}

.home-product-card__stock.is-limited {
  background: var(--site-surface-soft);
  color: var(--site-text);
}