/* ---------------------------------------------------------------------------
   "Sponsored" label - FTC paid-placement disclosure.

   Shown whenever a product whose rank is boosted by a paid seller bid
   (oc_wk_mp_ad_product.bid_per_click > 0) is displayed. The flag itself is set
   in ONE place - catalog/model/journal3/product.php::getProduct() - so every
   surface that hydrates products through it inherits `is_sponsored`.

   Loaded site-wide via catalog/controller/journal3/event/header.php, because
   product cards render on many surfaces (category, search, module carousels,
   and the mega-menu category preview).

   Neutral gray, understated but legible: the disclosure must be clear without
   masquerading as a promotional "deal" badge.
   --------------------------------------------------------------------------- */

/* Base marker - works anywhere the class appears (mega-menu preview, etc.). */
.product-sponsored {
  display: inline-block;
  color: #6b7076;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Product card: a small pill sitting on the photo itself, bottom-left corner,
   chosen over a caption line on 2026-09-03. New / Sale labels and the hover-only
   quickview button own the other corners/center, so this does not collide with
   them.

   An image overlay costs no layout space of its own: earlier this was a line
   in the caption, present only on sponsored cards, which made those cards one
   line taller than their neighbours and threw off every row in the grid (name,
   price and buttons all sat lower). Overlaying the photo sidesteps that
   entirely - sponsored or not, every card's caption starts at the same height. */
.product-thumb .image > .product-sponsored,
.side-product .image > .product-sponsored,
.reco-thumb > .product-sponsored {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 4px 10px;
  /* Translucent, not opaque: readable on any photo without reading as a
     printed badge (2026-09-03 - "biraz daha geçirgen olsun çok belli olmasın"). */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  color: rgba(74, 74, 74, 0.85);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* .image is the positioning context for this and the theme's own overlays
   (quickview button, New/Sale labels) - stated explicitly in case a future
   skin doesn't already make it relative.

   .side-product is the mini card the block above a category listing draws. Its
   photo is 100x100 rather than a full card image, so the pill is scaled down to
   match - at the full size it would cover most of the thumbnail. */
.product-thumb .image,
.side-product .image,
.reco-thumb {
  position: relative;
}

/* Recommendation cards (product page row, wishlist/compare rail) are 158-300px
   wide, between the mini card and a listing card, so the pill sits in between. */
.reco-thumb > .product-sponsored {
  left: 6px;
  bottom: 6px;
  padding: 3px 8px;
  font-size: 10px;
}

.side-product .image > .product-sponsored {
  left: 4px;
  bottom: 4px;
  padding: 2px 6px;
  font-size: 9px;
  letter-spacing: 0.02em;
}

/* Mega-menu category preview: sits next to the catalog title. */
.catalog-title + .product-sponsored {
  margin-left: 6px;
  font-size: 10px;
}

/* Touch screens (2026-10-13). Without hover, the theme shows the quickview
   button all the time and parks it in the photo's bottom-left corner - the
   corner this pill owns, so on a phone the magnifier sat on top of "Sponsored"
   (the mini card and the listing grid alike). The button moves to the top-right
   corner, which nothing else uses since the product labels went (sql/180); the
   disclosure stays where it is.
   The theme's rules for it carry .touchevents plus up to four classes (and a
   module id on the mini card), so each selector here has one class more. */
.touchevents .side-products .side-product .image .quickview-button,
.touchevents .main-products-style.product-grid .product-thumb .image .quickview-button,
.touchevents .main-products-style.product-list .product-thumb .image .quickview-button {
  align-items: flex-start;
  justify-content: flex-end;
}