.product-card-clickable{position:relative;cursor:pointer}
.product-card-clickable .product-card-hitarea{position:absolute;inset:0;z-index:2;border-radius:inherit}
.product-card-clickable .product-image,.product-card-clickable h3 a,.product-card-clickable .product-card-form,.product-card-clickable .product-card-action{position:relative;z-index:3}
.product-card-clickable .product-body>small,.product-card-clickable .product-prices{position:relative;z-index:1;pointer-events:none}
.product-card-clickable:has(.product-card-hitarea:focus-visible){outline:3px solid color-mix(in srgb,var(--brand) 45%,white);outline-offset:3px}
.product-card-clickable:hover{transform:translateY(-2px)}

.product-image,.detail-main{position:relative}
.promotion-badge{position:absolute!important;top:10px;right:10px;z-index:6;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:900;line-height:1;color:#fff;box-shadow:0 5px 15px rgba(0,0,0,.12)}
.promotion-badge.is-discount{background:#222}
.promotion-badge.is-amazing{background:var(--brand)}
.detail-promotion-badge{top:14px;right:14px;font-size:12px;padding:8px 12px}

.product-prices{display:flex;flex-wrap:wrap;align-items:flex-end;gap:7px 12px}
.product-prices .old-price,.product-prices .new-price{display:flex;flex-direction:column;gap:2px;line-height:1.45}
.product-prices .old-price small,.product-prices .new-price>small{font-size:11px;font-weight:700;opacity:.62}
.product-prices .old-price del{font-size:13px;font-weight:700;opacity:.58;text-decoration-thickness:2px;text-decoration-color:currentColor}
.product-prices .new-price strong{font-size:16px;font-weight:900;color:var(--brand)}
.product-prices .new-price strong span{font-size:11px;font-weight:700}
.detail-product-prices{align-items:center;gap:10px 18px;margin-top:14px}
.detail-product-prices .old-price del{font-size:16px}
.detail-product-prices .new-price strong{font-size:28px;line-height:1.2}
.detail-product-prices .new-price strong small{font-size:13px}
.cart-promotion-old{display:block;margin-top:3px;color:#777}
.cart-promotion-old del{text-decoration-thickness:2px}

@media(max-width:760px){
  .product-prices{gap:5px 8px}
  .product-prices .old-price del{font-size:12px}
  .product-prices .new-price strong{font-size:15px}
  .detail-product-prices{align-items:flex-start;flex-direction:column;gap:7px}
  .detail-product-prices .old-price del{font-size:15px}
  .detail-product-prices .new-price strong{font-size:25px}
  .promotion-badge{top:8px;right:8px}
}