/* ==========================================================================
   Sticker module (extension/module/sticker) on product cards

   Linked from product/category_{grid,inline,micro}.twig as stickers.css?v=N
   rather than living in app.css: the server sends no Cache-Control, so
   browsers keep app.css?v1.2.0 and the module's unversioned sticker.css for
   days or weeks after a deploy. Bump ?v= in all three templates whenever
   this file changes.
   ========================================================================== */

/* Card-wide box with the same 1.5rem inset as the theme's corner badges and
   buttons */
.products__item-stickers {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    z-index: 95; /* above the image gallery (90), below badges and buttons (100) */
    pointer-events: none;
}

/* The side comes from a float, not from left/right: .sticker-left and
   .sticker-right are physical sides (the templates mirror them for RTL) and
   floats ignore the page direction. The module's left/right/top offsets from
   customN.css still nudge the block, but the [dir="rtl"] left/right flip that
   browsers still hold in a cached pre-7839ff40 sticker.css can no longer
   throw it across the card onto the compare and wishlist buttons. */
.products__item-stickers .sticker-catalog {
    position: relative;
}

.products__item-stickers .sticker-left {
    float: left;
}

.products__item-stickers .sticker-right {
    float: right;
}

/* The "Ribbon" type is a fixed 120x40 box with a no-repeat background drawn
   for a 120x40 ribbon image. The store's sticker uses the 70x30
   bigrectangle/orange.png plate, so the text ran off it. Size the plate to
   the text instead, in every language, like the theme's own .ui-badge. */
.products__item-stickers .sticker-ribbon {
    width: auto;
    height: auto;
    padding: 0 0.8rem;
    line-height: 2.6rem; /* as tall as the compare and wishlist buttons */
    background-size: 100% 100%;
}

/* Hidden where the theme hides its own badges */
@media (max-width: 767px) {
    .products__item--responsive .products__item-stickers {
        display: none;
    }
}