/* UHL Stickers — styles for module-driven stickers.
   Sprite stickers reuse the theme's existing .stickers/.sticker_item and
   .product_label rules, so the 3 system presets render identically.
   The rules below only add what the NEW types (text badge, image) need. */

/* --- Image sticker --- */
.uhl-sticker--image .uhl-sticker__img {
  display: block;
  max-width: 100%;
  height: auto;
}
.product_label.uhl-sticker--image .uhl-sticker__img {
  max-height: 35px;
  width: auto;
}
.stickers .sticker_item.uhl-sticker--image {
  width: auto;
}
/* default size cap for corner image stickers (overridden by the per-sticker "size" inline style) */
.stickers .sticker_item.uhl-sticker--image .uhl-sticker__img {
  max-width: 56px;
  max-height: 56px;
}

/* --- Global badges (footer / header / product-info / custom selector) --- */
.uhl-global-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 4px 6px;
  line-height: 0;
}
.uhl-global-badge .uhl-sticker__img { max-width: 64px; max-height: 64px; height: auto; }
.uhl-global-badge .uhl-sticker__svg,
.uhl-global-badge > svg { width: 40px; height: 40px; }
.uhl-global-badge .uhl-badge { line-height: 1; }

/* --- Custom inline SVG (uhl-svg:* symbols from the library) --- */
.uhl-sticker__svg {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 0;
  padding: 0;
}
.uhl-sticker__svg svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* The theme pads EVERY <span> inside .sticker_item — `.stickers .sticker_item span
   { padding: 0 15px }` (specificity 0,2,1). Our inline-SVG/badge spans live inside
   .sticker_item, so that padding leaked in: with box-sizing:border-box a 36px span
   minus 2×15px = 6px content → the custom SVG rendered as a ~6px "dot". Override it
   with a higher-specificity reset so custom SVGs fill their tile and text badges
   keep their own padding. */
.stickers .sticker_item .uhl-sticker__svg { padding: 0; }
.stickers .sticker_item .uhl-badge { padding: 5px 10px; }
.stickers .sticker_item .uhl-badge--circle { padding: 8px; }

/* --- Text badge (crafted look) --- */
.uhl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .3px;
  white-space: nowrap;
  background: #c0623a;
  color: #fff;
  box-shadow: 0 2px 6px -2px rgba(20,15,10,.45);
}
.uhl-badge--rect   { border-radius: 0; }
.uhl-badge--round  { border-radius: 6px; }
.uhl-badge--circle { border-radius: 50%; min-width: 38px; min-height: 38px; padding: 8px; }
.uhl-badge--ribbon { border-radius: 4px 0 0 4px; padding-right: 14px; clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%); }

/* Text badge inside the corner overlay should not inherit the fixed 36px box */
.stickers .sticker_item.uhl-sticker--text { width: auto; min-height: 0; }

/* --- Corner positioning: HARD anchor to the product CARD, not the legacy box ---
   The theme's `.stickers` is a tiny box pinned 15px top-left of the card, so a
   sticker set to top-right / bottom anchored to THAT box and landed wrong (this
   is what "ломало" the layout). When the module actually renders stickers
   (`.stickers:has(.uhl-sticker)`) we expand `.stickers` to fill the whole card
   (its offset parent is the position:relative `.product-wrap`), make the frame
   click-through, and absolutely pin EACH sticker to its chosen card corner.
   Legacy-mode `.stickers` (no `.uhl-sticker` inside) stays exactly as the theme
   had it. Verified on dev: tl/tr/bl/br each land 15px from the matching card
   corner. --- */
.stickers:has(.uhl-corner .uhl-sticker) {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  /* Above the product image. On hover the card's details panel is lifted ABOVE
     this (rule below) so the open panel covers the stickers instead of a corner
     sticker poking through it. */
  z-index: 6;
}
.stickers:has(.uhl-corner .uhl-sticker) .uhl-sticker { pointer-events: auto; }

/* z-index overlap fix (catalog). On hover the theme drops .product-addinfo
   (position:absolute, the full-spec panel) DOWN over the row below. Lift that
   open panel ABOVE the stickers (z-index 6) so neither the hovered card's own
   corner sticker nor a neighbouring card's sticker pokes through it.
   IMPORTANT: do NOT `isolation:isolate` the cards to achieve this — isolation
   traps the panel inside the card's own stacking context and it disappears
   behind the next row (it must paint OVER the row below). Raising only the
   hovered panel keeps the full hover card visible AND hides the stickers under
   it. Same selector the theme uses to display the panel. */
.product-layout__item .product-wrap:hover  .product-addinfo,
.product-layout__item .product-wrap:active .product-addinfo,
.product-layout__item .product-wrap:focus  .product-addinfo { z-index: 10; }

/* Each corner is a flex stack pinned to a card/image corner — several stickers at
   the SAME corner stack vertically (gap) instead of overlapping one-on-one. Empty
   corner wrappers collapse. Bottom corners stack upward (column-reverse). */
.stickers .uhl-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 80%;
}
.stickers .uhl-corner:empty { display: none; }
.stickers .uhl-corner--tl { top: 15px;    left: 15px;  align-items: flex-start; }
.stickers .uhl-corner--tr { top: 15px;    right: 15px; align-items: flex-end; }
.stickers .uhl-corner--bl { bottom: 15px; left: 15px;  align-items: flex-start; flex-direction: column-reverse; }
.stickers .uhl-corner--br { bottom: 15px; right: 15px; align-items: flex-end;   flex-direction: column-reverse; }
.stickers .uhl-corner .sticker_item { position: static; margin: 0; }

/* --- Product page de-dup safety net ------------------------------------------
   On the product page the THEME renders its own native sale/new labels
   (.product_label with the red_disc_1 / new_block sprite) into .product_labels,
   even when the module already shows them — the twig guard misses this render
   path because `product.uhl_enabled` isn't set there. When the module HAS placed
   corner stickers into the same .product_labels, hide the theme's duplicate
   sale/new/bestseller labels (credit/payment labels are kept). --- */
.product_labels:has(.uhl-corner .uhl-sticker) > .product_label:not(.uhl-sticker):has(.svgi-red_disc_1-dims),
.product_labels:has(.uhl-corner .uhl-sticker) > .product_label:not(.uhl-sticker):has(.svgi-new_block-dims),
.product_labels:has(.uhl-corner .uhl-sticker) > .product_label:not(.uhl-sticker):has(.svgi-yellow_disc_2-dims),
.product_labels:has(.uhl-corner .uhl-sticker) > .product_label.bestseller:not(.uhl-sticker) {
  display: none;
}