/**
 * Scope ff-wheels shop/PDP chrome on Felgenforum v2.
 * Keeps shop functions (hero viz, filters, size swatches, Freigabe)
 * without full-bleed width / doubled chrome bars.
 */

body.ff-shopbereich .ff-shop-sec,
body.ff-shopbereich .ff-shop-sec--hero,
body.ff-shopbereich .ff-shop-sec--grid,
body.single-product .ff-product {
  width: min(100% - 2.5rem, var(--ff-max, 1400px));
  max-width: var(--ff-max, 1400px);
  margin-inline: auto;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  body.ff-shopbereich .ff-shop-sec,
  body.ff-shopbereich .ff-shop-sec--hero,
  body.ff-shopbereich .ff-shop-sec--grid,
  body.single-product .ff-product {
    width: min(100% - 5rem, var(--ff-max, 1400px));
  }
}

/*
 * PDP content rail: ported FF markup uses .fx, v2 chrome uses .ff-wrap.
 * Only .ff-pdp was width-scoped before → gallery constrained, Fahrzeug /
 * Komplettrad / Details / Alt full-bleed. All rails share --ff-max.
 */
body.single-product .ff-page .fx,
body.single-product .ff-page .ff-wrap {
  width: min(100% - 2.5rem, var(--ff-max, 1400px));
  max-width: var(--ff-max, 1400px);
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  body.single-product .ff-page .fx,
  body.single-product .ff-page .ff-wrap {
    width: min(100% - 5rem, var(--ff-max, 1400px));
  }
}

/* Section shells stay full-bleed; width lives on the inner rail. */
body.single-product .ff-pdp,
body.single-product .ff-fzg,
body.single-product .ff-kr,
body.single-product .ff-pdp-details,
body.single-product .ff-alt {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
}

/*
 * Gallery | Buy: two equal cards in DOM order (gallery first).
 * chrome.css .ff-prod-grid is the 4-col listing alias — override hard.
 */
body.single-product .ff-prod-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  width: 100%;
  max-width: none;
  margin: 0;
  list-style: none;
  padding: 0;
}
body.single-product .ff-prod-grid > .kfg__card {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
body.single-product .ff-prod-grid > .kfg__card:first-child {
  order: 1; /* gallery */
}
body.single-product .ff-prod-grid > .kfg__card:last-of-type {
  order: 2; /* buy box */
}
@media (max-width: 900px) {
  body.single-product .ff-prod-grid {
    grid-template-columns: 1fr !important;
  }
}

/* One hero card — avoid a second full-width dark strip above the vehicle card. */
body.ff-shopbereich .ff-shop-sec--hero + .ff-shop-sec--hero,
body.ff-shopbereich .ff-shop-trust-bar:not(#ff-hero-card *) {
  display: none;
}

body.ff-shopbereich #ff-hero-card {
  border-radius: 18px;
  overflow: hidden;
}

/* Ohne Fahrzeug: Audi+Felgen in der niedrigen Standard-Hero (300/190).
   Hoeher wird die Karte nur mit .ff-cfgviz-tall (echte Fahrzeugbilder). */
body.ff-shopbereich #ff-hero-card .ff-hero-shop-wheels {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
body.ff-shopbereich #ff-hero-card .ff-hero-shop-wheels .ff-hero__stage {
  position: absolute;
  inset: 0;
}
body.ff-shopbereich #ff-hero-card .ff-hero-shop-wheels .ff-hero__slides {
  position: absolute;
  inset: 0;
}
body.ff-shopbereich #ff-hero-card .ff-hero-shop-wheels.ff-hero--wheels .ff-hero__img {
  object-position: center 50%;
}
body.ff-shopbereich #ff-hero-card .ff-hero-shop-wheels .ff-hero__shade {
  z-index: 3;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0.35) 100%);
}
/* Farbwahl unten rechts wie im Startseiten-Kopf (chrome.css .ff-hero__wheels),
   nicht mittig unter dem Titel. */
body.ff-shopbereich #ff-hero-card .ff-hero-shop-wheels .ff-hero__wheels {
  position: absolute;
  left: auto;
  right: 20px;
  bottom: 18px;
  transform: none;
  z-index: 3;
  pointer-events: auto;
}
@media (max-width: 767px) {
  body.ff-shopbereich #ff-hero-card .ff-hero-shop-wheels .ff-hero__wheels { right: 12px; bottom: auto; top: 54px; }  /* unter der Trefferzahl, frei vom Titel */
}
body.ff-shopbereich #ff-hero-card:not(.ff-cfgviz-tall) #ff-hero-video {
  opacity: 0 !important;
  pointer-events: none;
}
body.ff-shopbereich #ff-hero-card.ff-cfgviz-tall .ff-hero-shop-wheels {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Light theme paints all h1 ink-dark — force white on the dark shop hero. */
html[data-theme="light"] body.ff-shopbereich #ff-hero-card .kfg__viz-vehicle-name,
body.ff-shopbereich #ff-hero-card h1.kfg__viz-vehicle-name {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Keep original kfg chip/back/count sizes on the shop hero (no shrink). */

body.ff-shopbereich .kfg__products-grid.ff-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

@media (min-width: 1100px) {
  body.ff-shopbereich .kfg__products-grid.ff-grid.is-flat {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* PDP: keep buy box readable inside v2 chrome */
body.single-product .rw-woo-shell,
body.single-product .wlf-woocommerce {
  max-width: none;
  padding-inline: 0;
}

/* PDP has no video hero — only /felgen keeps #ff-hero-card. */
body.single-product .ff-pdp {
  padding-top: calc(64px + 24px);
}

/* ATC label: long on desktop, short on phone (product.css may lose out to
   v2 button rules that force both spans visible). */
body.single-product .ff-kauf-kurz {
  display: none;
}
@media (max-width: 640px) {
  body.single-product .ff-kauf-lang {
    display: none;
  }
  body.single-product .ff-kauf-kurz {
    display: inline;
  }
}

/* ── PDP polish (Felgenforum v2 chrome + ff-wheels buy box) ───────── */
body.single-product .ff-prod-grid > .kfg__card {
  background: var(--ff-card, #fff);
  border: 1px solid var(--ff-line, rgba(0, 0, 0, 0.08));
  border-radius: 18px;
  box-shadow: none;
}
body.single-product .ff-action-row .ff-btn-atc,
body.single-product .ff-action-row .btn.btn--fill {
  border-radius: 10px !important;
}
body.single-product .ff-qty {
  border-radius: 10px;
}
body.single-product .ff-express--produkt .ff-express__btn {
  border-radius: 10px;
  background: #fff;
}
body.single-product .ff-express--produkt .ff-express__logo {
  display: block !important;
  height: 18px;
  width: auto;
  max-width: 72px;
  object-fit: contain;
}
body.single-product #ffb-no-fit-cta[hidden],
body.single-product #ffb-no-fit-cta[style*="display: none"],
body.single-product #ffb-no-fit-cta[style*="display:none"] {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Konfi/Felgen cards: same 18px radius as FF chrome (konfi tokens used to be 8px). */
body.page-template-page-konfigurator .kfg__card,
body.page-template-page-konfigurator .kfg__pcard,
body.ff-shopbereich .kfg__pcard,
body.single-product .ff-prod-grid > .kfg__card {
  border-radius: 18px;
}

/* /felgen: gleicher Kopf-Abstand wie Home/Konfi (.ff-hero / .kfg). */
body.ff-shopbereich .ff-shop-sec--hero {
  padding-top: 0.85rem !important;
}
@media (min-width: 768px) {
  body.ff-shopbereich .ff-shop-sec--hero {
    padding-top: 1.15rem !important;
  }
}
@media (max-width: 767px) {
  body.ff-shopbereich .ff-shop-sec--hero {
    padding-top: 0.75rem !important;
  }
}

/* /felgen + Konfi-Karten: Aufbau und Aussehen in produktkarten.css. */
body.ff-shopbereich .ff-pcard-sizes,
body.page-template-page-konfigurator .kfg__pcard-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 4px;
}