/* ============================================================
   Ton Atelier — SALE ribbon
   Loaded on WooCommerce single product pages AND on shop/category
   listings so ribbons appear correctly on product cards too.
   ============================================================ */

.tac-sale-ribbon {
    position: absolute;
    top: 12px;
    left: -6px;
    z-index: 10;
    background: #f0a020;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 5px 14px 5px 10px;
    text-transform: uppercase;
    line-height: 1.4;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    /* Notched right edge for ribbon feel */
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
    pointer-events: none;
}
.tac-sale-ribbon::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 6px;
    height: 6px;
    background: #b87616; /* darker orange = shadow/tail */
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Ensure the parent card/image container is positioned so the absolute ribbon
   anchors correctly. Most themes already do this — this is a defensive override
   for Avada / Astra / Storefront / Kadence / GeneratePress patterns. */
.woocommerce ul.products li.product,
.woocommerce .product,
.woocommerce div.product .images,
.product-image-wrapper,
.product-thumb {
    position: relative;
}

/* Slightly larger on single product page */
.woocommerce div.product .tac-sale-ribbon {
    top: 18px;
    left: -8px;
    font-size: 13px;
    padding: 7px 18px 7px 12px;
}

@media (max-width: 480px) {
    .tac-sale-ribbon {
        top: 8px;
        left: -4px;
        font-size: 10px;
        padding: 4px 10px 4px 8px;
    }
}