/* ReWrap dynamic packaging skins + ownership / brand-wrap chips */

.rewrap-skin {
  --rw-bg: #fff5f8;
  --rw-bg-soft: #ffe8ef;
  --rw-accent: #ff4d8d;
  --rw-accent-2: #ff7a3d;
  --rw-text: #3a1424;
  --rw-muted: #8c5a6d;
  --rw-border: rgba(255, 77, 141, 0.22);
  --rw-chip: #ff4d8d;
  position: relative;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.rewrap-skin--microsoft_blue {
  --rw-bg: #eef5ff; --rw-bg-soft: #d9e8ff; --rw-accent: #0a66c2; --rw-accent-2: #2f7de1;
  --rw-text: #0f2744; --rw-muted: #5b7394; --rw-border: rgba(10,102,194,0.22); --rw-chip: #0a66c2;
}
.rewrap-skin--nike_black {
  /* Keep packaging light/professional on storefront cards — never full black. */
  --rw-bg: #f7f7f8; --rw-bg-soft: #efeff1; --rw-accent: #111111; --rw-accent-2: #333333;
  --rw-text: #171717; --rw-muted: #6b7280; --rw-border: rgba(17,17,17,0.12); --rw-chip: #111111;
}
.rewrap-skin--samsung_violet {
  --rw-bg: #f4efff; --rw-bg-soft: #e8ddff; --rw-accent: #5b2eff; --rw-accent-2: #7a52ff;
  --rw-text: #24165a; --rw-muted: #6d5f96; --rw-border: rgba(91,46,255,0.2); --rw-chip: #5b2eff;
}
.rewrap-skin--zoho_coral {
  --rw-bg: #fff3ef; --rw-bg-soft: #ffe4da; --rw-accent: #e4572e; --rw-accent-2: #f0784f;
  --rw-text: #4a1d12; --rw-muted: #9a6454; --rw-border: rgba(228,87,46,0.22); --rw-chip: #e4572e;
}
.rewrap-skin--hp_slate {
  --rw-bg: #eef2f6; --rw-bg-soft: #dde5ee; --rw-accent: #0096d6; --rw-accent-2: #32b0e4;
  --rw-text: #17324a; --rw-muted: #617789; --rw-border: rgba(0,150,214,0.22); --rw-chip: #0096d6;
}
.rewrap-skin--rewrap_rose {
  --rw-bg: #fff5f8; --rw-bg-soft: #ffe8ef; --rw-accent: #ff4d8d; --rw-accent-2: #ff7a3d;
  --rw-text: #3a1424; --rw-muted: #8c5a6d; --rw-border: rgba(255,77,141,0.22); --rw-chip: #ff4d8d;
}

/* Carousel stays white — ReWrap only accents ownership chips, not the whole card */
.carousel-card.rewrap-skin {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  color: #14211f;
}
.carousel-card.rewrap-skin .carousel-product-name-compact h3,
.carousel-card.rewrap-skin .current-price-compact,
.carousel-card.rewrap-skin .currency-compact,
.carousel-card.rewrap-skin .price-label-compact {
  color: #14211f;
}
.carousel-card.rewrap-skin .carousel-trust-line,
.carousel-card.rewrap-skin .carousel-compare-at {
  color: #687471;
}
.carousel-card.rewrap-skin .carousel-btn-compact {
  background: #102f2b;
  color: #fff;
  border: 0;
}
.carousel-card.rewrap-skin .rewrap-ownership__day {
  color: #14211f;
}
.carousel-card.rewrap-skin .rewrap-ownership__owned,
.carousel-card.rewrap-skin .rewrap-wrap__eyebrow {
  color: #687471;
}
.carousel-card.rewrap-skin .rewrap-ownership__brand,
.carousel-card.rewrap-skin .rewrap-wrap__brand {
  color: var(--rw-accent, #ff4d8d);
}
.carousel-card.rewrap-skin .rewrap-ownership__rule {
  background: linear-gradient(90deg, transparent, var(--rw-accent, #ff4d8d), transparent);
}

/* Category tile packaging */
.mb-cat-tile__card.rewrap-skin {
  background: linear-gradient(165deg, var(--rw-bg), var(--rw-bg-soft));
  border: 1px solid var(--rw-border);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--rw-accent) 10%, transparent);
}
.mb-cat-tile__card.rewrap-skin .mb-cat-tile__name {
  color: var(--rw-text);
}
.mb-cat-tile__card.rewrap-skin .mb-cat-tile__media {
  background: color-mix(in srgb, var(--rw-bg-soft) 70%, #fff);
}

.rewrap-ownership {
  margin: 0 0 8px;
  text-align: center;
}
.rewrap-ownership__rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rw-accent), transparent);
  opacity: 0.55;
  margin: 4px 0;
}
.rewrap-ownership__day {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--rw-text);
  line-height: 1.25;
}
.rewrap-ownership__owned {
  margin: 2px 0 0;
  font-size: 0.58rem;
  color: var(--rw-muted);
  letter-spacing: 0.04em;
}
.rewrap-ownership__brand {
  margin: 1px 0 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--rw-accent);
  line-height: 1.2;
}

.rewrap-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 0 6px;
}
.rewrap-wrap__eyebrow {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rw-muted);
}
.rewrap-wrap__brand {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--rw-accent);
  line-height: 1.15;
}

.mb-cat-tile__card .rewrap-ownership__day { font-size: 0.52rem; }
.mb-cat-tile__card .rewrap-ownership__brand { font-size: 0.66rem; }
.mb-cat-tile__card .rewrap-wrap__brand { font-size: 0.66rem; }

/* Advertiser pitch page */
.rw-ad-page {
  --ink: #18202b;
  --muted: #66707d;
  background:
    radial-gradient(circle at 100% 0, rgba(255,77,141,0.12), transparent 35%),
    radial-gradient(circle at 0 20%, rgba(10,102,194,0.1), transparent 30%),
    #f7f4fa;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
}
.rw-ad-hero {
  padding: max(18px, env(safe-area-inset-top)) 18px 22px;
  background: linear-gradient(145deg, #102f2b, #1d4a43);
  color: #fff;
  border-radius: 0 0 24px 24px;
}
.rw-ad-hero a { color: rgba(255,255,255,0.84); text-decoration: none; font-size: 0.84rem; }
.rw-ad-hero h1 { margin: 12px 0 6px; font-size: 1.55rem; font-weight: 850; letter-spacing: -0.03em; }
.rw-ad-hero p { margin: 0; color: rgba(255,255,255,0.76); font-size: 0.86rem; line-height: 1.45; max-width: 34rem; }
.rw-ad-shell { width: min(100%, 720px); margin: 0 auto; padding: 16px 14px 40px; }
.rw-ad-card {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 18px;
  padding: 14px;
  margin-top: 12px;
  box-shadow: 0 8px 24px rgba(24,32,43,0.05);
}
.rw-ad-card h2 { margin: 0 0 6px; font-size: 1rem; font-weight: 800; }
.rw-ad-card p { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }
.rw-ad-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.rw-ad-sample {
  border-radius: 16px;
  padding: 12px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(165deg, var(--rw-bg), var(--rw-bg-soft));
  border: 1px solid var(--rw-border);
  color: var(--rw-text);
}
.rw-ad-sample__product {
  margin-top: 8px;
  font-size: 0.95rem;
  font-weight: 800;
}
.rw-ad-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  background: #102f2b;
  color: #fff;
  text-decoration: none;
  font-weight: 750;
  font-size: 0.86rem;
}
@media (max-width: 420px) {
  .rw-ad-grid { grid-template-columns: 1fr; }
}