/* /assets/css/price-box.css */

/* --- БАЗА: еднакъв вид за карти, листинг, quick view, детайли --- */
.price-area { padding: .25rem 0; }

.price-area .qv-price-box {
  display: inline-flex;
  flex-direction: column;     /* нова/единична над старата */
  align-items: center;
  gap: .25rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

/* редове */
.price-area .qv-price-box .price-line { display: inline-block; }

/* стара цена (с промо) */
.price-area .qv-price-box .js-price-old {
  color: #666;
  font-size: 1.05rem;
  font-weight: 500;
}
.price-area .qv-price-box .js-price-old del { opacity: .95; }

/* нова цена */
.price-area .qv-price-box .js-price-new {
  color: #e11e48;
  font-weight: 500;
  font-size: 1.15rem;
}

/* единична цена */
.price-area .qv-price-box .js-price-single {
  color: #111;
  font-weight: 500;
  font-size: 1.15rem;
}

/* utility */
.price-area .qv-price-box .is-hidden { display: none !important; }

/* Наклонена червена линия само върху <del> */
.price-area .qv-price-box del {
  color: #767676;                  /* цвят на ТЕКСТА на старата цена */
  text-decoration: none;
  position: relative;
  display: inline-block;
}
.price-area .qv-price-box del::after {
  --strike-color: #e11e1e;
  --strike-thickness: 1px;
  --strike-angle: -14deg;
  content: "";
  position: absolute;
  left: -2px; right: -2px; top: 50%;
  height: var(--strike-thickness);
  background: var(--strike-color);
  transform: rotate(var(--strike-angle));
  transform-origin: 50% 50%;
  pointer-events: none;
}

/* --- КАРТИ НА ХОУМА: гарантираме реда цена -> рейтинг --- */
.product-card2 .product-card-content { 
  display: flex; 
  flex-direction: column; 
  gap: .35rem;
}
.product-card2 .product-card-content .price-area { order: 2; }
.product-card2 .product-card-content .rating     { order: 3; margin-top: .2rem; }

/* (бек-цомпат за вече вмъкнатия quick view селектор) */
#product-view .qv-price-box { display: inline-flex; flex-direction: column; gap: .25rem; }

/* --- Карти: подравняване и ред --- */
.product-card2 .product-card-content{
  display:flex;
  flex-direction:column;
  gap:.35rem;                 /* общ малък „ритъм“ */
}

/* по-малко отстояние под заглавието, за да „качи“ цената */
.product-card2 .product-card-content h6{
  margin-bottom:.15rem;
}

/* цена винаги преди рейтинга */
.product-card2 .product-card-content .price-area{ order:2; margin-top:.05rem; }
.product-card2 .product-card-content .rating{ order:3; margin-top:.25rem; }

/* ----- Анти-„скачане“ на височина при двойна цена ----- */
/* резервира ~2 реда височина, но центрира съдържанието вертикално */
.price-area .qv-price-box{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:.25rem;
  line-height:1.25;

  /* ключът: запазена височина за 2 реда (десктоп) */
  min-height: 2.8rem;        /* ~две линии с текущите размери */
}

/* малко по-ниско на по-малки екрани */
@media (max-width: 576px){
  .price-area .qv-price-box{ min-height: 2.4rem; }
}

/* бонус: ако искаш едноредовата цена да е визуално центрирана в запазеното поле */
.price-area .qv-price-box:not(:has(.js-price-old:not(.is-hidden)))
{ justify-content:center; }   /* когато НЯМА стара цена */

/* Карта съдържание – вертикален ред и подредба */
.product-card2 .product-card-content{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.product-card2 .product-card-content h6{ margin-bottom:.15rem; }

/* цена винаги преди рейтинга */
.product-card2 .product-card-content .price-area{ order:2; margin-top:.05rem; }
.product-card2 .product-card-content .rating{ order:3; margin-top:.25rem; }

/* унифициран price box (както във Featured/QuickView) */
.price-area .qv-price-box{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  line-height:1.25;
  min-height:2.8rem;          /* пази място за 2 реда → няма „скачане“ */
}
@media (max-width:576px){ .price-area .qv-price-box{ min-height:2.4rem; } }

/* ако е единична цена – центрирай вертикално в запазеното поле */
.price-area .qv-price-box:not(:has(.js-price-old:not(.is-hidden))){
  justify-content:center;
}

/* редове/цветове – същите като в Featured */
.qv-price-box .price-line{ line-height:1.2; }
.qv-price-box .js-price-old{ color:#474747; font-size:1.05rem; font-weight:500; }
.qv-price-box .js-price-new{ color:#e11e48; font-size:1.15rem; font-weight:600; }
.qv-price-box .js-price-single{ color:#111; font-size:1.15rem; font-weight:600; }
.qv-price-box .is-hidden{ display:none !important; }

/* зачеркване с наклонена червена линия върху <del> */
.price-area .price del{
  color:#767676;
  font-family:var(--font-Jost);
  font-size:16px;
  font-weight:500;
  line-height:1;
  text-decoration:none;
  position:relative;
  display:inline-block;
}
.price-area .price del::after{
  --strike-color:#e11e1e;
  --strike-thickness:1px;
  --strike-angle:-12deg;
  content:"";
  position:absolute; left:-2px; right:-2px; top:50%;
  height:var(--strike-thickness);
  background:var(--strike-color);
  transform:rotate(var(--strike-angle));
  transform-origin:50% 50%;
  pointer-events:none;
}