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

.product-card {
    background: var(--theme-panel, #ffffff);
    border-radius: 14px;
    border: 1px solid var(--theme-border, rgba(15, 23, 42, 0.08));
    box-shadow: 0 3px 14px rgba(var(--theme-shadow-rgb, 15, 23, 42), 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%; /* выравнивание высоты карточек */
    max-width: 285px;

    /* анимация появления при загрузке */
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    animation: cardFadeIn 0.5s ease forwards;
    animation-delay: calc(var(--card-index, 0) * 80ms);
}

/* эффект наведения в стиле Apple Store: лёгкий подъём + мягкая тень */
.product-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(var(--theme-shadow-rgb, 15, 23, 42), 0.09);
    border-color: var(--theme-border, rgba(15, 23, 42, 0.14));
}

/* --- Фото товара на всю ширину --- */

.product-image-wrapper {
    width: 100%;
    height: 240px;
    overflow: hidden;
    background: var(--theme-raised, #f3f4f6);
}

.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: var(--theme-panel, #fff);
}

/* лёгкий zoom картинки при наведении */
.product-card:hover .product-image {
    transform: scale(1.01);
}

/* --- Текстовая часть --- */

.product-info {
    padding: 14px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1; /* чтобы блок с кнопками прижимался к низу */
}

.product-name {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--theme-text, #111827);
    margin: 0;
    line-height: 1.35;
}

.product-name__link {
    color: inherit;
    text-decoration: none;
}

.product-name__link:hover,
.product-name__link:focus-visible {
    text-decoration: underline;
}

.product-price {
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: var(--theme-text, #111827);
    margin: 0;
}

/* небольшое описание под ценой */
.product-desc {
    text-align: center;
    font-size: 13px;
    line-height: 1.35;
    color: var(--theme-muted, #475569);
    margin: 2px 0 0;
    min-height: 0;
}
/* --- Блок с кнопками --- */

.product-actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.product-actions .btn {
    flex: 0 0 auto;
}

.product-variant--custom + .product-actions {
    margin-top: 8px;
}

/* --- Анимация появления карточек --- */

@keyframes cardFadeIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.product-variant {
  margin-top: auto;
}

.product-variant__select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--theme-border, rgba(15, 23, 42, 0.12));
  background: var(--theme-input, #fff);
  font-size: 14px;
  outline: none;
}

.product-variant__select:focus {
  border-color: var(--theme-focus, rgba(37, 99, 235, 0.6));
}

/* --- Custom dropdown (Apple-like) --- */

.product-variant--custom {
  position: relative;
  z-index: 5;
  margin-top: auto;
}

.product-variant__native {
  display: none; /* скрываем нативный select */
}

.product-variant__button {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 14px;
  border-radius: 14px;
  border: 1px solid var(--theme-border, rgba(15, 23, 42, 0.12));
  background: var(--theme-panel-translucent, rgba(255, 255, 255, 0.92));
  color: var(--theme-text, #0f172a);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
}

.product-variant__button:hover {
  border-color: var(--theme-border, rgba(15, 23, 42, 0.18));
}

.product-variant__button:active {
  transform: scale(0.99);
}

.product-variant__button:focus {
  border-color: var(--theme-focus, rgba(37, 99, 235, 0.55));
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16);
}

.product-variant__label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* стрелка */
.product-variant__chevron {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(45deg);
  color: var(--theme-text, #0f172a);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  pointer-events: none;
  transition: transform 0.18s ease;
}

/* меню */
.product-variant__menu {
  position: fixed;
  left: 0;                /* будет перезаписано JS */
  top: 0;                 /* будет перезаписано JS */
  width: auto;            /* будет перезаписано JS */
  margin: 0;

  border-radius: 16px;
  background: var(--theme-panel, #fff);
  border: 1px solid var(--theme-border, rgba(15, 23, 42, 0.10));
  box-shadow: 0 24px 80px rgba(var(--theme-shadow-rgb, 15, 23, 42), 0.18);
  overflow: hidden;

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 9999;          /* поверх всего */
}

/* Портальное меню dropdown (рендерится в body) */
.variant-portal {
  position: fixed;
  left: 0;
  top: 0;
  width: 320px; /* JS перезапишет */
  border-radius: 16px;
  background: var(--theme-panel, #fff);
  border: 1px solid var(--theme-border, rgba(15, 23, 42, 0.10));
  box-shadow: 0 24px 80px rgba(var(--theme-shadow-rgb, 15, 23, 42), 0.18);
  overflow: hidden;
  z-index: 9999;

  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.variant-portal--open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.variant-portal__option {
  width: 100%;
  border: none;
  background: transparent;
  padding: 12px 14px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-text, #0f172a);
  cursor: pointer;
  transition: background 0.15s ease;
}

.variant-portal__option:hover {
  background: var(--theme-hover, rgba(15, 23, 42, 0.06));
}

.variant-portal__option.is-active {
  background: var(--theme-selected, rgba(37, 99, 235, 0.10));
}



.product-variant__option {
  width: 100%;
  border: none;
  background: transparent;
  padding: 12px 14px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--theme-text, #0f172a);
  cursor: pointer;
  transition: background 0.15s ease;
}

.product-variant__option:hover {
  background: var(--theme-hover, rgba(15, 23, 42, 0.06));
}

.product-variant__option.is-active {
  background: var(--theme-selected, rgba(37, 99, 235, 0.10));
}



.product-variant--open .product-variant__chevron {
  transform: translateY(-45%) rotate(225deg);
}


/* контейнер с dropdown должен позволять выход за пределы карточки */
.product-variant--custom {
    position: relative;
    z-index: 5;
}

/* когда открыт — поднимаем над карточкой */
.product-variant--open {
    z-index: 50;
}

.product-prices {
  display: flex;
  align-items: baseline;
  gap: 12px;
  justify-content: center;
}

.product-price--discount {
  font-weight: 800;
}

/* новая цена */
.product-price--new {
  font-size: 17px;
  font-weight: 400;
  color: var(--theme-text, #0b1220);
  letter-spacing: 0;
  line-height: 1.3;
}

/* контейнер старой цены */
.product-price-old-wrap {
  position: relative;
  display: inline-flex;
  align-items: baseline;
}

/* старая цена */
.product-price--old {
  font-size: 14px;
  font-weight: 500;
  color: var(--theme-muted, rgba(15, 23, 42, 0.5));
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* скидка "как степень" */
.product-discount-sup {
  position: absolute;
  top: -0.55em;      /* чуть выше */
  left: 95%;        /* строго справа от старой цены */
  margin-left: 6px;  /* небольшой зазор */

  font-size: 11px;
  font-weight: 700;
  color: var(--theme-danger, #9f1239);

  background: var(--theme-danger-bg, #ffe4e6);
  border: 1px solid var(--theme-danger-border, #fecdd3);
  padding: 2px 6px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}

.product-actions .btn-details {
  background: var(--theme-panel, #ffffff);
  color: var(--theme-text, #0f172a);
  border: 1px solid var(--theme-border, rgba(15, 23, 42, 0.14));
  box-shadow: none;
}

.product-actions .btn-details:hover {
  opacity: 1;
  background: var(--theme-raised, #f1f5f9);
  border-color: var(--theme-border, rgba(15, 23, 42, 0.2));
}

.product-actions .btn-cart {
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}

.product-actions .btn-cart:hover {
  opacity: 1;
  filter: brightness(0.97);
}

/* общий контейнер корзины = "кнопка В корзину" по ширине */
.js-cart-control{
  width: 100%;
  min-width: 0;
  display: block; /* по умолчанию */
}

/* когда qty=0 показываем обычную кнопку */
.js-cart-control:not(.is-active) .js-cart-dec,
.js-cart-control:not(.is-active) .js-cart-inc{
  display: none;
}

/* В НЕактивном виде кнопка растягивается на всю ширину */
.js-cart-control:not(.is-active) .js-cart-main{
  width: 100%;
}

/* В активном виде делаем 3 колонки: - | qty | + */
.js-cart-control.is-active{
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 8px;
}

/* + и - как "корзина": зелёные, круглые */
.js-cart-control.is-active .js-cart-dec, .btn-decrease, .btn-increase,
.js-cart-control.is-active .js-cart-inc{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  background: #10b981; /* зелёный как корзина */
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}

.js-cart-control.is-active .js-cart-dec:hover,
.js-cart-control.is-active .js-cart-inc:hover{
  filter: brightness(0.95);
}

.js-cart-control.is-active .js-cart-dec:active,
.js-cart-control.is-active .js-cart-inc:active{
  transform: translateY(1px);
}

/* число = просто число (без кнопочного вида) */
.js-cart-control.is-active .js-cart-main{
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  color: var(--theme-text, rgba(15,23,42,0.9));
  font-weight: 800;
  font-size: 18px;
  text-align: center;
  cursor: default; /* не выглядит как кнопка */
}

/* чтобы на клик по числу не было "синего" выделения/эффекта */
.js-cart-control.is-active .js-cart-main:focus{
  outline: none;
}

/* Catalog cart controls use the same blue accent as cabinet primary buttons. */
.product-actions .btn-cart {
  background: linear-gradient(135deg, #005bff, #0ea5e9);
  box-shadow: 0 4px 10px rgba(11, 98, 255, 0.22);
}

.js-cart-control.is-active .js-cart-dec,
.js-cart-control.is-active .js-cart-inc {
  background: linear-gradient(135deg, #005bff, #0ea5e9);
  box-shadow: 0 4px 10px rgba(11, 98, 255, 0.22);
}

.product-actions .js-cart-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.product-actions .cart-control__status {
  min-width: 0;
  color: var(--theme-success, #358b55);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.product-actions .js-cart-control:not(.is-active) .cart-control__status {
  display: none;
}

.product-actions .js-cart-control:not(.is-active) .js-cart-main {
  width: auto;
  min-width: 132px;
  padding-left: 18px;
  padding-right: 18px;
}

.product-actions .js-cart-control.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 44px;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 0 6px;
}

.product-actions .js-cart-control.is-active .cart-control__status {
  display: block;
  padding-right: 18px;
}

.product-actions .js-cart-control.is-active .js-cart-main {
  display: none;
}

.product-actions .js-cart-control.is-active .js-cart-dec,
.product-actions .js-cart-control.is-active .js-cart-inc {
  width: 44px;
  height: 34px;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--theme-panel, #fff), var(--theme-panel, #fff)) padding-box,
    linear-gradient(135deg, #005bff, #0ea5e9) border-box;
  color: var(--theme-link, #005bff);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.product-actions .js-cart-control.is-active .js-cart-dec {
  border-right-width: 1px;
  border-radius: 999px 0 0 999px;
}

.product-actions .js-cart-control.is-active .js-cart-inc {
  border-left-width: 1px;
  border-radius: 0 999px 999px 0;
}

.product-actions .js-cart-control.is-active .js-cart-dec:hover,
.product-actions .js-cart-control.is-active .js-cart-inc:hover {
  background:
    linear-gradient(var(--theme-panel, #fff), var(--theme-panel, #fff)) padding-box,
    linear-gradient(135deg, #005bff, #0ea5e9) border-box;
  filter: none;
}