/* ============================================================
   commerce — товарная карточка (ct-product)
   Все правила ограничены корнем .ct-storefront.
   Компонент не зависит от ct-home, ct-catalog.
   ============================================================ */

/* --- Переменные ---------------------------------------------- */

.ct-storefront {
  --ct-product-gap: var(--ct-space-3);
  --ct-product-media-aspect: 1 / 1;
}

/* --- Карточка ------------------------------------------------ */

.ct-storefront .ct-product {
  display: flex;
  flex-direction: column;
  gap: var(--ct-product-gap);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  min-width: 0;
}

/* --- Медиа (изображение) ------------------------------------- */

.ct-storefront .ct-product__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ct-product-media-aspect);
  overflow: hidden;
  border-radius: var(--ct-radius-md);
  background: var(--ct-color-surface);
}

.ct-storefront .ct-product__media-link {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.ct-storefront .ct-product__media-link:focus-visible {
  outline: 2px solid var(--ct-color-primary);
  outline-offset: -3px;
}

.ct-storefront .ct-product__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ct-storefront .ct-product__image[hidden] {display:none;}

/* Заглушка при отсутствии изображения */
.ct-storefront .ct-product__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ct-color-surface);
}

.ct-storefront .ct-product__media--placeholder::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: block;
  width: 64px;
  height: 64px;
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24' fill='none' stroke='%23526078' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* --- Бейджи -------------------------------------------------- */

.ct-storefront .ct-product__badges {
  position: absolute;
  top: var(--ct-space-2);
  left: var(--ct-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--ct-space-1);
  z-index: 1;
}

.ct-storefront .ct-product__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: var(--ct-radius-pill);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-semibold);
  line-height: 1.3;
  white-space: nowrap;
}

.ct-storefront .ct-product__badge--new {
  background: var(--ct-color-success);
  color: #ffffff;
}

.ct-storefront .ct-product__badge--sale {
  background: var(--ct-color-danger);
  color: #ffffff;
}

/* --- Заголовок (название товара) ----------------------------- */

.ct-storefront .ct-product__title {
  margin: 0;
  font-size: 18px;
  font-weight: var(--ct-font-weight-semibold);
  line-height: 1.4;
  color: var(--ct-color-text);
  overflow-wrap: anywhere;
  min-width: 0;
}

.ct-storefront .ct-product__title-link {
  color: inherit;
  text-decoration: none;
}

.ct-storefront .ct-product__title-link:hover {
  color: var(--ct-color-primary);
  text-decoration: none;
}

.ct-storefront .ct-product__title-link:focus-visible {
  outline: 2px solid var(--ct-color-primary);
  outline-offset: -2px;
  border-radius: var(--ct-radius-sm);
}

/* Ограничение количества строк для названия */
.ct-storefront .ct-product__title--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}

/* --- Цены ---------------------------------------------------- */

.ct-storefront .ct-product__prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ct-space-2);
  min-width: 0;
  max-width: 100%;
}

/* Put the previous price below the current price without reserving an empty line everywhere. */
.ct-storefront .ct-product > .ct-product__prices {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.ct-storefront .ct-catalog__grid:has(.ct-price__old) .ct-product > .ct-product__prices {min-height:3.5rem;}

.ct-storefront .ct-product__price-main {
  color: var(--ct-color-text);
  font-size: var(--ct-font-size-lg);
  font-weight: var(--ct-font-weight-semibold);
  line-height: 1.3;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.ct-storefront .ct-product__price-range {
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-sm);
  font-weight: 400;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ct-storefront .ct-product__price-old {
  color: var(--ct-color-muted);
  font-size: var(--ct-font-size-base);
  font-weight: 400;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* --- Наличие ------------------------------------------------- */

.ct-storefront .ct-product__availability {
  margin: 0;
  font-size: var(--ct-font-size-sm);
  color: var(--ct-color-muted);
}

.ct-storefront .ct-product__availability--in-stock {
  color: var(--ct-color-success);
}

.ct-storefront .ct-product__availability--on-order {
  color: var(--ct-color-muted);
}

.ct-storefront .ct-product__availability--out-of-stock {
  color: var(--ct-color-danger);
}

/* --- Действие (кнопка/ссылка) -------------------------------- */

.ct-storefront .ct-product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ct-space-2);
  margin-top: auto;
}

.ct-storefront .ct-product__actions > * {
  flex: 1 1 7rem;
  min-width: 0;
}

.ct-storefront .ct-product__actions .ct-button {
  width: 100%;
  padding-inline: var(--ct-space-2);
  font-size: var(--ct-font-size-sm);
}

.ct-storefront .ct-product__actions [aria-pressed="true"] {
  border-color: var(--ct-color-primary);
  color: var(--ct-color-primary);
}

.ct-storefront .ct-product__action {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--ct-space-2) var(--ct-space-3);
  color: var(--ct-color-on-primary);
  background: var(--ct-color-primary);
  font-weight: var(--ct-font-weight-semibold);
  font-size: var(--ct-font-size-sm);
  text-decoration: none;
  border: var(--ct-border-width) solid var(--ct-color-primary);
  border-radius:var(--ct-control-radius);
  transition: color var(--ct-transition-fast),
    border-color var(--ct-transition-fast),
    background-color var(--ct-transition-fast);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ct-storefront .ct-product__action:hover {
  border-color: var(--ct-color-primary-hover);
  background: var(--ct-color-primary-hover);
}

.ct-storefront .ct-product__action:focus-visible {
  outline: none;
  box-shadow: var(--ct-focus-ring);
}

/* --- Состояния карточки -------------------------------------- */

/* Товар под заказ */
.ct-storefront .ct-product--on-order {
  border-color: var(--ct-color-border);
}

@media (max-width: 639px) {
  .ct-storefront .ct-product {
    padding: 0;
    gap: var(--ct-space-2);
  }

  .ct-storefront .ct-product__title {
    font-size: 16px;
  }

  .ct-storefront .ct-product__prices .ct-price {
    font-size: var(--ct-font-size-base);
  }

  .ct-storefront .ct-product__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

.ct-storefront .ct-product__compare {position:absolute;top:8px;right:8px;z-index:1;}
.ct-storefront .ct-product__compare[hidden],.ct-storefront .ct-product__actions [hidden] {display:none;}
.ct-storefront .ct-product__compare button {display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--ct-color-border);border-radius:var(--ct-control-radius);background:var(--ct-color-bg);color:var(--ct-color-text);cursor:pointer;}
.ct-storefront .ct-product__compare svg {width:20px;height:20px;}
.ct-storefront .ct-product__compare button[aria-pressed="true"] {color:var(--ct-color-primary);border-color:currentColor;}
.ct-storefront .ct-product__compare button:focus-visible {outline:2px solid var(--ct-color-primary);outline-offset:2px;}
.ct-storefront .ct-product__quick-add {margin:0;}
.ct-storefront .ct-product__quick-add button {width:100%;font-family:inherit;cursor:pointer;}
.ct-storefront .ct-product__action:disabled {opacity:.55;cursor:default;}
.ct-storefront .ct-product__message {margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--ct-color-muted);overflow-wrap:anywhere;}
.ct-storefront .ct-product__message:empty {display:none;}
.ct-storefront .ct-product__rating {display:flex;align-items:center;gap:8px;}
.ct-storefront .ct-product__rating > span {position:relative;display:inline-block;color:#e1e5ec;font-size:22px;line-height:1.2;letter-spacing:3px;white-space:nowrap;}
.ct-storefront .ct-product__rating > span > span {position:absolute;inset:0 auto 0 0;overflow:hidden;color:#f4b942;}
.ct-storefront .ct-product__prices .ct-price {font-size:20px;font-weight:600;}

.ct-storefront .ct-product__rating,.ct-storefront .ct-product__unrated {min-height:27px;}
.ct-storefront .ct-product__unrated {display:flex;align-items:center;margin:0;font-size:13px;color:var(--ct-color-muted);}