/* ═══════════════════════════════════════════════════════════════════════════
   MotoMagic — Image placement layer  (css/images.css)
   Loaded after quality.css. Handles all real-image scenarios.
   When images are missing, CSS gradient fallbacks fire automatically.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO BANNERS — full-width background images ─────────────────────── */

/* Homepage hero */
.hero {
  /* hero-home.jpg — strong left gradient keeps text readable,
     right side opens up so the motorcycle photo is clearly visible */
  background-image:
    linear-gradient(
      90deg,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,.65) 38%,
      rgba(0,0,0,.25) 70%,
      rgba(0,0,0,.05) 100%
    ),
    var(--img-hero-home, none);
  background-size:     cover;
  background-position: center right;
  background-repeat:   no-repeat;
}

/* CSS custom properties for banner images.
   Set via JS (images.js) when the file exists. */
:root {
  --img-hero-home:        url('/assets/banners/hero-home.jpg?v=2');
  --img-hero-accessories: url('/assets/banners/hero-accessories.jpg?v=2');
  --img-hero-parts:       url('/assets/banners/hero-parts.jpg?v=2');
  --img-brand-perf:       url('/assets/banners/brand-performance.jpg?v=2');
}

/* Accessories page banner */
.mm-page-banner.accessories {
  min-height:          420px;
  background-image:
    linear-gradient(to right, rgba(5,5,5,.90) 0%, rgba(5,5,5,.55) 50%, rgba(5,5,5,.10) 100%),
    var(--img-hero-accessories, none);
  background-size:     cover;
  background-position: center right;
}

/* Parts page banner */
.mm-page-banner.parts {
  min-height:          420px;
  background-image:
    linear-gradient(to right, rgba(5,5,5,.90) 0%, rgba(5,5,5,.55) 50%, rgba(5,5,5,.10) 100%),
    var(--img-hero-parts, none);
  background-size:     cover;
  background-position: center right;
}

/* Shared banner base styles */
.mm-page-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 420px;
  padding: 110px 0 80px;
  background-size:     cover;
  background-color:    #090909;
  background-repeat:   no-repeat;
}
.mm-page-banner .wrap { position: relative; z-index: 2; }
.mm-page-banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, #090909);
  pointer-events: none;
}

/* ── 2. SALE / PROMO BANNERS ─────────────────────────────────────────────── */

.promo-banner {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 40px 36px;
  min-height: 220px;
  display: flex;
  align-items: center;
  background-color: #0d0d0f;
  border: 1px solid rgba(255,255,255,.08);
}
.promo-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .35;
  transition: opacity .4s ease;
}
.promo-banner:hover::before { opacity: .45; }
.promo-banner .content { position: relative; z-index: 2; max-width: 420px; }

.promo-banner.summer::before  { background-image: var(--img-sale-summer,  none); }
.promo-banner.winter::before  { background-image: var(--img-sale-winter,  none); }
.promo-banner.perf::before    { background-image: var(--img-brand-perf,   none); }
.promo-banner.gear::before    { background-image: var(--img-brand-gear,   none); }

/* Gradient overlay for readability */
.promo-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(227,6,19,.18) 0%,
    rgba(0,0,0,.6) 100%
  );
  pointer-events: none;
}

/* ── 3. CATEGORY CARDS — image + fallback ────────────────────────────────── */

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.cat-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(227,6,19,.3);
  box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(227,6,19,.15);
}

/* Background image (real photo) */
.cat-card[data-cat-img] {
  background-size: cover;
  background-position: center;
}
/* Text label overlay */
.cat-card .cat-nm {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%);
  font-family: var(--font-b, system-ui, sans-serif);
  letter-spacing: .5px;
}
.cat-card .cat-ic {
  position: relative;
  z-index: 2;
  font-size: 28px;
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
  /* Hide emoji icon when a real image is present */
}
.cat-card[data-cat-img] .cat-ic { display: none; }
.cat-card .cat-ct {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  font-size: 10px;
  font-weight: 700;
  background: rgba(227,6,19,.85);
  color: #fff;
  border-radius: 99px;
  padding: 2px 7px;
  font-family: var(--font-b, system-ui, sans-serif);
}

/* ── 4. PRODUCT CARDS — image handling ───────────────────────────────────── */

/* When a real <img> is inside .pmedia, hide the SVG art */
.pmedia img.pimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* never crops — shows complete product */
  padding: 8%;           /* reduced from 12% — more product visible */
  transition: transform .35s ease;
  z-index: 1;
}
.pcard:hover .pmedia img.pimg { transform: scale(1.07); }
.pmedia:has(img.pimg) svg.art { display: none; }

/* Dark image background with subtle grid */
.pmedia:has(img.pimg) {
  background: #0a0a0b;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Transparent-bg product images look better with a subtle vignette */
.pmedia:has(img.pimg)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 40%, rgba(0,0,0,.35) 100%);
  z-index: 2;
  pointer-events: none;
}

/* ── 5. BRAND PROMO GRID ─────────────────────────────────────────────────── */

.brand-promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 48px 0;
}
.brand-promo-grid .promo-banner { min-height: 200px; }

@media (max-width: 768px) {
  .brand-promo-grid { grid-template-columns: 1fr; }
}

/* ── 6. HERO IMAGE OVERLAY GRADIENT (mobile variant) ─────────────────────── */

@media (max-width: 768px) {
  .hero {
    background-image:
      linear-gradient(
        to bottom,
        rgba(5,5,5,.6) 0%,
        rgba(5,5,5,.92) 60%,
        rgba(5,5,5,1) 100%
      ),
      var(--img-hero-home, none);
    background-position: top center;
  }
}

/* ── 7. SHIMMER PLACEHOLDER while image loads ─────────────────────────────── */

.img-loading {
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
}

/* ── 8. LAZY IMAGE base ───────────────────────────────────────────────────── */

img[loading="lazy"] {
  background: var(--card2);
}
img[loading="lazy"].loaded {
  animation: fadeIn .3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── 9. ACCESSIBLE FOCUS on cat-card ─────────────────────────────────────── */

.cat-card:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* ── 10. WEBP / PICTURE ELEMENT SUPPORT ─────────────────────────────────── */

/* <picture> wrapper inside .pmedia */
.pmedia picture {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.pmedia picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12%;
  transition: transform .35s ease;
}
.pcard:hover .pmedia picture img { transform: scale(1.07); }

/* ── 11. IMAGE ERROR / PLACEHOLDER STATE ────────────────────────────────── */

/* When onerror fires, img is removed from DOM.
   .pmedia:not(:has(.pimg)) reverts to SVG art.
   For browsers without :has(), the SVG was never hidden
   because we only hide it via :has(img.pimg). */

/* Explicit placeholder slot — shown via JS when desired */
.pmedia .pimg-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .18;
  z-index: 0;
  pointer-events: none;
}
.pmedia .pimg-placeholder svg {
  width: 40%;
  height: 40%;
}

/* ── 12. BRAND LOGO in product card / detail ────────────────────────────── */

.brand-logo {
  height: 20px;
  width: auto;
  object-fit: contain;
  opacity: .65;
  filter: grayscale(1) brightness(2);
  vertical-align: middle;
  transition: opacity .2s ease;
}
.brand-logo:hover { opacity: 1; filter: none; }
.brand-logo[src=""] { display: none; }

/* Brand logo row in product detail */
.pd-brand-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  opacity: .7;
  filter: grayscale(1) brightness(1.8);
  margin-bottom: 6px;
  display: block;
}

/* ── 13. LAZY LOAD — fade-in on success ─────────────────────────────────── */

img[loading="lazy"] {
  background: var(--card2, #1a1a1c);
}
/* img-loaded: opacity handled per-component */
/* img[loading="lazy"]:is(.loaded) {
  opacity: 1;
} */

/* Trigger via JS: img.onload = () => img.classList.add('img-loaded')
   OR via IntersectionObserver in shop-premium.js                    */

/* ── 14. ASSETS/PLACEHOLDERS — fallback background ──────────────────────── */

.pmedia.img-failed {
  background-image: url('/assets/placeholders/product.svg?v=2');
  background-size: 45%;
  background-position: center;
  background-repeat: no-repeat;
}
.cat-card.img-failed {
  background-image: url('/assets/placeholders/category.svg?v=2') !important;
  background-size: cover;
}

/* ── 15. PRODUCT IMAGE ASPECT RATIO — consistent across card sizes ────────── */

.pmedia {
  aspect-ratio: 1 / 1;   /* square — shows full product symmetrically */
}
/* Override for list view if used later */
.pmedia.wide { aspect-ratio: 4 / 3; }

/* ── PREMIUM NO-IMAGE STATE ─────────────────────────────────────────────────
   When a product image is missing or fails to load, the .pmedia reverts to
   this premium dark card look instead of showing a broken layout.
   The SVG art already handles the icon; this just improves the background.
   ──────────────────────────────────────────────────────────────────────── */

/* Richer dark gradient for image slots without a real photo */
.pmedia {
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%,
      rgba(227,6,19,.06) 0%,
      transparent 70%),
    linear-gradient(160deg, #0d0d0f 0%, #111113 50%, #0a0a0c 100%);
}

/* Subtle grid overlay — gives a technical/premium feel */
.pmedia::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* Push art above the grid */
.pmedia svg.art { position: relative; z-index: 1; }
.pmedia img.pimg { z-index: 2; }

/* Category cards without an image — premium dark tile */
.cat-card:not([data-cat-img]) {
  background: linear-gradient(145deg, #0e0e10 0%, #141416 100%);
  border-color: rgba(255,255,255,.07);
}
.cat-card:not([data-cat-img]):hover {
  border-color: rgba(227,6,19,.3);
  background: linear-gradient(145deg, #100808 0%, #160e0e 100%);
}

/* hero-bike SVG illustration hidden — real photo shows instead */
.hero-bike { display: none; }

/* ── Product card image visibility ──────────────────────────────────────
   Images start at opacity:0, become visible via onload → .img-loaded.
   Fallback: always visible in browsers that do not support :has().    */

/* Browsers without :has() support — show image immediately */
@supports not (selector(:has(*))) {
  .pmedia img.pimg { opacity: 1; }
}
/* Safety: if onload never fires (e.g. cached images), show after delay */



/* ── LAUNCH OFFER price display ─────────────────────────────────────────────
   Applied to product cards and detail page when product.badgeText is set.   */

.launch-badge {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 9px;
  border-radius: 999px;
  margin-bottom: 5px;
  white-space: nowrap;
}

.old-price {
  text-decoration: line-through;
  color: #9ca3af;
  font-size: 14px;
  font-weight: 400;
  display: block;
  line-height: 1.3;
}

.current-price {
  color: #ef4444;
  font-weight: 900;
  font-size: 21px;
  font-family: var(--font-d, system-ui, sans-serif);
  letter-spacing: -.5px;
  display: block;
  line-height: 1.2;
}

.price-eur {
  display: block;
  color: #6b7280;
  font-size: 13px;
  margin-top: 2px;
  font-weight: 400;
}

/* Detail page — larger launch price */
#pd-price .current-price {
  font-size: 32px;
  letter-spacing: -1px;
}
#pd-price .old-price {
  font-size: 17px;
}
#pd-price .price-eur {
  font-size: 15px;
}

/* ══════════════════════════════════════════════════════════════════════════
   DEFINITIVE PRODUCT IMAGE FIX
   Overrides all previous conflicting .pmedia img.pimg opacity rules.
   Multiple sessions accumulated three separate opacity:0 blocks that
   conflict with each other. This final block wins (cascade order).

   Images are ALWAYS visible once loaded.
   onerror="this.remove()" handles broken images — SVG art shows instead.
   ══════════════════════════════════════════════════════════════════════════ */

/* Reset any opacity:0 set by earlier rules */

/* No class needed — image is visible as soon as it loads */

/* Fixed keyframes below */

/* ── Product image: always visible once loaded ───────────────────────────── */
.pmedia img.pimg {
  opacity: 1;
  transition: transform .35s ease;
}
.pmedia img.pimg.img-loaded { opacity: 1; }

@keyframes pimg-show {
  from { opacity: 0; }
  to   { opacity: 1; }
}