/* ТЗ-13.22 → 13.22c (10.2026, рішення власника): плитка товара-дропу «в стилі дропу» — components/product.blade.php (.pc.pcard.is-drop), усі місця
   виводу плитки (каталог/категорії, пошук, каруселі головної, «Ви переглядали», /viewed, by-ids). Підключається в layouts/app лише коли drop_enabled=1
   (або адмін у превʼю). Селектор .pc.pcard.is-drop … = (0,4,0) → перебиває .pcl-catalog-list .pcard … (0,3,0) з custom.min.css без !important.
   13.22c: сітка = ЗВИЧАЙНА плитка (назва → рядок зірок (поки порожній) → стара ціна + бейдж → ціна → кнопка); без статусу/міні-смуги/«В наявності»
   (замість нього порожній спейсер .pc-drop-spacer тієї ж висоти). Стиль дропу: фон з картинкою, міні-стрічка «ЛІМІТОВАНА», кольори, рамка з пульсацією.
   Анімації — лише box-shadow/opacity/transform (без layout → CLS 0); prefers-reduced-motion → без анімацій. Без JS і без нових шрифтів. */

/* 1. фон + фонова картинка дропу (CSS background, без preload) + шар затемнення зверху (13.22a п.7: змінні, щоб підправляти без коду):
      --drop-tile-overlay-top (0 %) → --drop-tile-overlay-mid (50 %, низ фото) → --drop-tile-overlay-bottom (від 60 %, зона тексту).
      Перевірено по пікселях картинки під текстом: з .25→.70 ціна/стара ціна падали до 3.3–3.7, тому низ (де текст) темніший .85 → мін. контраст
      1440: назва 9.9, ціна 6.7, стара ціна 6.0; 390: 8.1 / 5.5 / 4.9 (усі ≥4.5). Верх (рамка навколо фото) лишається світлим .25. */
.pc.pcard.is-drop{
  --drop-tile-overlay-top:rgba(32,13,23,.25);
  --drop-tile-overlay-mid:rgba(32,13,23,.70);
  --drop-tile-overlay-bottom:rgba(32,13,23,.85);
  position:relative;color:#F6E9F1;
  background-color:#200D17;
  background-image:linear-gradient(180deg,var(--drop-tile-overlay-top),var(--drop-tile-overlay-mid) 50%,var(--drop-tile-overlay-bottom) 60%),url("/img/drop/mobile-750.webp");
  background-size:auto,cover;background-position:0 0,50% 10%;background-repeat:no-repeat;
  box-shadow:0 0 0 1px rgba(242,140,40,.45),0 8px 26px rgba(59,28,66,.35);
  animation:dtPulse 3s ease-in-out infinite;
}
@keyframes dtPulse{
  0%,100%{box-shadow:0 0 0 1px rgba(242,140,40,.45),0 8px 26px rgba(59,28,66,.35)}
  50%{box-shadow:0 0 0 1px rgba(242,140,40,.8),0 8px 26px rgba(59,28,66,.35)}
}

/* 2. фото: як є + тінь (на контейнері фото — всередині .pc-thumb-wrap overflow:hidden тінь картинки не видно) */
.pc.pcard.is-drop .pc-thumb-wrap{box-shadow:0 6px 18px rgba(0,0,0,.4);background:#2A1420}
/* міні-стрічка «ЛІМІТОВАНА» за схемою 13.13c: кут 96×96, стрічка 150×24, right:-11px/top:20px → центр span (32,32) на діагоналі x=y;
   радіус кута = радіус фото (.pc-thumb-wrap 12px); шрифт сайту (inherit); блик раз на 3 с */
.pc.pcard.is-drop .pc-drop-ribbon{position:absolute;top:0;left:0;width:96px;height:96px;overflow:hidden;z-index:3;pointer-events:none;border-top-left-radius:12px}
.pc.pcard.is-drop .pc-drop-ribbon span{position:absolute;display:block;width:150px;height:24px;line-height:24px;right:-11px;top:20px;transform:rotate(-45deg);
  background:linear-gradient(90deg,#E0533A,#F28C28 50%,#FFB46B);color:#1A0D14;text-align:center;font-family:inherit;font-weight:700;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;box-shadow:0 3px 8px rgba(0,0,0,.22);overflow:hidden}
.pc.pcard.is-drop .pc-drop-ribbon span::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  transform:translateX(-150%) skewX(-20deg);animation:dtRibbonShine 3s ease-in-out infinite}
@keyframes dtRibbonShine{0%{transform:translateX(-150%) skewX(-20deg)}60%,100%{transform:translateX(400%) skewX(-20deg)}}
html[lang="ru"] .pc.pcard.is-drop .pc-drop-ribbon span{letter-spacing:.04em}   /* «ЛИМИТИРОВАННАЯ» довша */

/* 3. назва — лише колір (висота/шрифт — як у звичайної); рядок зірок .pc-rate — без змін (порожній, доки нема відгуків) */
.pc.pcard.is-drop .pc-title{color:#F6E9F1;font-weight:600}
.pc.pcard.is-drop .pc-rate-count{color:#CDB3C4}
.pc.pcard.is-drop .pc-stars-base{color:rgba(255,255,255,.18)}

/* 4. ціни — типографіка звичайної плитки (розмір/шрифт з custom.min.css), лише кольори */
.pc.pcard.is-drop .pc-old{color:#CDB3C4}
.pc.pcard.is-drop .pc-old s{color:#CDB3C4;text-decoration-color:#E0533A}
.pc.pcard.is-drop .pc-disc{background:#F28C28;color:#1A0D14;font-weight:800}
.pc.pcard.is-drop .pc-price,.pc.pcard.is-drop .pc-price.is-sale{color:#FFB46B}
.pc.pcard.is-drop .pc-price sup{color:#F6E9F1}
/* п.5: залишок 0 → замість ціни «Тираж розпродано» (кнопку приховано в Blade) */
.pc.pcard.is-drop .pc-price.pc-drop-soldout{color:#FFB46B;font-size:14px;line-height:1.3;white-space:normal}

/* 5. на місці «✔ В наявності» — порожній спейсер тієї ж висоти (.pc-stock: margin-top 7 + 12px; у каталозі/каруселях ≥961 рядок .pc-stock.in з іконкою = 20px) →
      ціна «785 грн» на тій самій y, що червона ціна сусідів (заміряно 13.22a/b) */
.pc.pcard.is-drop .pc-drop-spacer{height:12px;margin-top:7px}
@media (min-width:961px){
  .pcl-catalog-list .pc.pcard.is-drop .pc-drop-spacer,.cc-carousel .pc.pcard.is-drop .pc-drop-spacer,.pac-grid__content .pc.pcard.is-drop .pc-drop-spacer{height:20px}
}

/* 6. кнопка кошика: позиція/розмір як у сусідів (custom.min.css), лише стиль дропу */
.pc.pcard.is-drop .pc-cart{background:#F28C28;box-shadow:0 0 14px rgba(242,140,40,.5)}
.pc.pcard.is-drop .pc-cart:hover{background:#FF9D3D}
.pc.pcard.is-drop .pc-cart-ic path,.pc.pcard.is-drop .pc-cart-ic circle{stroke:#1A0D14}

/* висота ряду: .pcard уже height:100% у grid (align-items:stretch) і у flex .swiper-wrapper; .pc-foot прибитий margin-top:auto — нічого не додаємо */

/* мобіла (каталог 2 в ряд): кут 76×76, стрічка 120×20, 9px; right:-9px/top:15px → центр span (25,25) на діагоналі */
@media (max-width:767px){
  .pc.pcard.is-drop .pc-drop-ribbon{width:76px;height:76px}
  .pc.pcard.is-drop .pc-drop-ribbon span{width:120px;height:20px;line-height:20px;right:-9px;top:15px;font-size:9px}
}

@media (prefers-reduced-motion:reduce){
  .pc.pcard.is-drop,.pc.pcard.is-drop .pc-drop-ribbon span::after{animation:none}
}