/* Картки товарів у категоріях (демо 19.10.2026, як на ubeauty): біла картка, фото в квадраті, назва у 2 рядки,
   зірки, статус наявності кольоровою крапкою, нова й стара ціна в один рядок, «Купити» на всю ширину.
   Усі рядки мають сталу висоту — статуси, ціни й кнопки стоять рівно в усіх картках. Обгортка .dp-cards — у category.tpl.
   Тема anystore має сильні правила (#content, body …), тому селектори з #content і багато !important. */
#content .dp-cards{display:flex !important;flex-wrap:wrap;margin:0 -6px !important}
#content .dp-cards:before,#content .dp-cards:after{display:none !important}
#content .dp-cards > .product-layout{display:flex;float:none !important;padding:0 6px !important;margin-bottom:12px !important}

#content .dp-cards .product-thumb{position:relative;display:flex !important;flex-direction:column !important;width:100%;height:auto !important;min-height:0 !important;margin:0 !important;padding:10px !important;background:#fff !important;border:1px solid #e9e9ec !important;border-radius:14px !important;box-shadow:none !important;overflow:hidden;transition:border-color .15s,box-shadow .2s}
#content .dp-cards .product-thumb:hover{border-color:#d6d6dc !important;box-shadow:0 6px 20px rgba(20,20,30,.07) !important}
#content .dp-cards .product-thumb > div:not(.image){display:flex !important;flex-direction:column !important;flex:1 1 auto;padding:0 !important;margin:0 !important;width:auto !important;float:none !important}

/* фото */
#content .dp-cards .product-thumb .image{position:relative;width:100% !important;height:auto !important;float:none !important;margin:0 !important;padding:0 !important;aspect-ratio:1/1;border-radius:10px;background:#fff !important;display:flex;align-items:center;justify-content:center;overflow:hidden}
#content .dp-cards .product-thumb .image > a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
#content .dp-cards .product-thumb .image img{max-width:92% !important;max-height:92% !important;width:auto !important;height:auto !important;object-fit:contain;margin:0 auto}
#content .dp-cards .product-thumb .dp-fav{position:absolute !important;top:6px !important;right:6px !important;left:auto !important;width:32px !important;height:32px !important;border-radius:50% !important;background:#fff !important;border:1px solid #ececf0 !important;box-shadow:none !important;display:flex !important;align-items:center;justify-content:center;z-index:2}
/* терези «Порівняти» (дермапени, скрабери) — під сердечком, а не поверх нього */
#content .dp-cards .product-thumb .dp-fav.dpk-btn,#content .dp-cards .product-thumb .dpk-btn{top:44px !important;right:6px !important}
#content .dp-cards .stiker-sale{position:absolute !important;top:32px !important;left:14px !important;right:auto !important;z-index:2;margin:0 !important;padding:2px 7px !important;border-radius:6px !important;background:#2b2233 !important;color:#fff !important;font-size:11.5px !important;font-weight:700 !important;line-height:1.35 !important;width:auto !important;height:auto !important}

/* назва (завжди 2 рядки) і зірки (місце є завжди) */
#content .dp-cards .product-thumb .caption{padding:0 !important;margin:10px 0 0 !important;min-height:0 !important;height:auto !important;text-align:left !important}
#content .dp-cards .product-thumb .caption h4{margin:0 !important;padding:0 !important;font-size:15.5px !important;line-height:1.38 !important;font-weight:400 !important;text-align:left !important;height:auto !important;max-height:none !important;min-height:0 !important;display:block !important;overflow:visible !important;white-space:normal !important}
#content .dp-cards .product-thumb .caption h4 a{display:inline !important;font-size:inherit !important;line-height:inherit !important;font-weight:inherit !important;height:auto !important;text-align:left !important;color:#222 !important;text-decoration:none}
#content .dp-cards .product-thumb .caption h4 a:hover{color:var(--dp-primary-hover) !important}
/* зірки — як було: дрібні, ніжно-бузкові, зверху на фото в лівому куті */
#content .dp-cards .product-thumb .rating{display:block !important;position:absolute !important;top:14px !important;left:14px !important;z-index:2;margin:0 !important;padding:0 !important;height:auto;font-size:10px !important;line-height:1 !important;white-space:nowrap;text-align:left !important}
#content .dp-cards .product-thumb .rating .fa-star{color:#b993c8 !important}
#content .dp-cards .product-thumb .rating .fa-star-o{color:#e2d5e9 !important}
/* статус наявності — один рядок */
.dp-cst{display:flex;align-items:center;gap:6px;margin:auto 0 0;padding-top:8px;box-sizing:content-box;font-size:12.5px;font-weight:500;line-height:18px;height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.dp-cst i{display:none}
.dp-cst--ok{color:#1d7a46}.dp-cst--ok i{background:#22a35a}
.dp-cst--wait{color:#a85a00}.dp-cst--wait i{background:#ee8a0b}
.dp-cst--no{color:#86868f}.dp-cst--no i{background:#c2c2ca}

/* ціна: нова й стара в один рядок; разом із кнопкою притиснута до низу картки */
#content .dp-cards .product-thumb .price{margin:0 !important;padding:6px 0 0 !important;min-height:0 !important;width:100% !important;float:none !important;text-align:left !important;font-size:18px !important;font-weight:800 !important;line-height:1.2 !important;color:#222 !important;display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;align-items:baseline !important;justify-content:flex-start !important;gap:0 8px}
#content .dp-cards .product-thumb .price br{display:none !important}
#content .dp-cards .product-thumb .price .price-new{color:var(--dp-ink) !important;font-size:18px !important;font-weight:800 !important}
#content .dp-cards .product-thumb .price .price-old{color:#9a9aa3 !important;font-size:13px !important;font-weight:500 !important;text-decoration:line-through;margin-left:8px !important}
#content .dp-cards .product-thumb .price .price-tax{display:none !important}
#content .dp-cards .product-thumb .button-group{margin:10px 0 0 !important;padding:0 !important;border:0 !important;background:none !important;width:100% !important;float:none !important;position:static !important}
#content .dp-cards .product-thumb .button-group .theme-btn-add-cart{width:100% !important;max-width:none !important;height:var(--dp-btn-md) !important;margin:0 !important;padding:0 10px !important;border:0 !important;border-radius:var(--dp-radius-pill) !important;background:var(--dp-primary) !important;color:var(--dp-on-primary) !important;font-size:var(--dp-btn-size) !important;font-weight:var(--dp-btn-weight) !important;display:inline-flex !important;align-items:center;justify-content:center;gap:8px;white-space:nowrap;box-shadow:none !important;transition:background .15s}
#content .dp-cards .product-thumb .button-group .theme-btn-add-cart:hover{background:var(--dp-primary-hover) !important}
#content .dp-cards .product-thumb .button-group .theme-btn-add-cart.dp-unavailable{background:var(--dp-disabled) !important;color:var(--dp-disabled-ink) !important;cursor:default}
#content .dp-cards .product-thumb .button-group .theme-btn-add-cart.btn-status .fa{display:none !important}

/* картка-стаття («Як вибрати дермапен») — маленький банер на всю ширину */
.dp-art-top{display:flex;width:100%;margin:0 0 12px}
.dp-art{display:flex;align-items:center;gap:14px;width:100%;padding:10px 14px;background:#fff;border:1px solid #e9e9ec;border-radius:14px;text-decoration:none !important;color:#222 !important;transition:border-color .15s}
.dp-art:hover{border-color:#d6d6dc}
.dp-art img{flex:0 0 52px;width:52px;height:52px;object-fit:contain;border-radius:10px}
.dp-art span{display:flex;flex-direction:column;min-width:0;flex:1}
.dp-art b{font-size:15px;font-weight:700;line-height:1.3;color:#222}
.dp-art small{font-size:13px;color:#86868f;margin-top:2px}
.dp-art em{flex:0 0 auto;font-style:normal;font-size:14.5px;font-weight:700;color:var(--dp-primary);white-space:nowrap}

@media (max-width:767px){
  #content .dp-cards{margin:0 -14px !important}
  #content .dp-cards > .product-layout{padding:0 3px !important;margin-bottom:6px !important}
  #content .dp-cards .product-thumb{padding:8px !important;border-radius:12px !important}
  #content .dp-cards .product-thumb .dp-fav{width:28px !important;height:28px !important;top:4px !important;right:4px !important}
  #content .dp-cards .product-thumb .dp-fav.dpk-btn,#content .dp-cards .product-thumb .dpk-btn{top:36px !important;right:4px !important}
  #content .dp-cards .stiker-sale{top:28px !important;left:12px !important}
  #content .dp-cards .product-thumb .rating{top:12px !important;left:12px !important}
  #content .dp-cards .product-thumb .caption h4{font-size:14.5px !important}
  .dp-cst{font-size:12px}
  #content .dp-cards .product-thumb .price,#content .dp-cards .product-thumb .price .price-new{font-size:16px !important}
  #content .dp-cards .product-thumb .price{gap:0 6px}
  #content .dp-cards .product-thumb .price .price-old{font-size:12px !important}
  #content .dp-cards .product-thumb .button-group .theme-btn-add-cart{height:var(--dp-btn-md) !important;font-size:var(--dp-btn-size-sm) !important}
  .dp-art-top{margin:0 0 8px}
  .dp-art{padding:8px 12px;gap:12px}
  .dp-art img{flex-basis:44px;width:44px;height:44px}
  .dp-art b{font-size:14px}
}