/* PURE – brand landing pages (Figma: "pure / DUE / BAPIEX Desktop Homepage" + matching mobile frames).
   Loaded after home.css, which provides the header, drawer, product card, ticker and footer. */

/* ---------- Themes ---------- */
body[data-brand="pure"] { --strip-bg: #002300; --ticker-bg: #56b14a; --footer-bg: #002300; --price: #56b14a; --sale-badge-bg: #eb1e23; }
body[data-brand="due"] { --strip-bg: #eb1e23; --ticker-bg: #eb1e23; --footer-bg: #002300; --price: #eb1e23; --sale-badge-bg: #eb1e23; }
body[data-brand="bapiex"] { --strip-bg: #283876; --ticker-bg: #283876; --footer-bg: #071035; --price: #283876; --sale-badge-bg: #76bae1; }

/* ---------- Hero (desktop: 1440-wide frames, scaled by aspect ratio) ---------- */
.brand-hero { position: relative; overflow: hidden; background: #f3f3f3; }
.brand-hero picture, .brand-hero .layer { position: absolute; max-width: none; }
.brand-hero .hero-desktop { position: absolute; inset: 0; }
.brand-hero img { position: absolute; max-width: none; }

.brand-hero--pure, .brand-hero--due { aspect-ratio: 1440 / 518; }
.brand-hero--bapiex { aspect-ratio: 1440 / 542; }

.brand-hero--pure .l-hero { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brand-hero--pure .hero-logo { left: 12.29%; top: 18.15%; width: 16.88%; aspect-ratio: 243 / 114; overflow: hidden; position: absolute; }
.hero-logo img { width: 115.38%; height: 135%; left: -8.55%; top: -34.77%; }

.brand-hero--due .l-hero { left: 0; top: -.04%; width: 100%; height: 104.39%; }
.brand-hero--due .hero-copy { left: 6.6%; top: 28%; width: 28.06%; }
.brand-hero--bapiex .l-bg { left: 0; top: -8.32%; width: 100%; height: 112.6%; }
.brand-hero--bapiex .l-hero { left: -1.6%; top: 0; width: 101.74%; height: 101.29%; object-fit: cover; }
.brand-hero--bapiex .hero-copy { left: 7.99%; top: 30.63%; width: 28.06%; }

.hero-copy { position: absolute; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-copy .hero-brand-logo { position: relative; display: block; overflow: hidden; }
.brand-hero--due .hero-brand-logo { width: 51.49%; aspect-ratio: 208 / 121; }
.brand-hero--due .hero-brand-logo img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brand-hero--bapiex .hero-brand-logo { width: 82.43%; aspect-ratio: 333 / 156; }
.brand-hero--bapiex .hero-brand-logo img { left: 0; top: -4.57%; width: 100%; height: 112.17%; }
.hero-tagline { font-size: clamp(14px, 2.43vw, 35px); line-height: 1.2; white-space: nowrap; }
.brand-hero--due .hero-tagline { font-family: "Oleo Script", var(--font-body); color: #eb1e23; }
.brand-hero--bapiex .hero-tagline { font-family: "Oooh Baby", var(--font-body); color: #283876; }


/* ---------- PURE categories ---------- */
.brand-categories { display: flex; justify-content: center; align-items: flex-end; gap: clamp(32px, 5vw, 80px); margin-top: 62px; width: 100%; max-width: 100%; padding-inline: var(--gutter); box-sizing: border-box; }
.brand-category { display: flex; flex-direction: column; align-items: center; gap: 13px; width: 240px; }
.brand-category img { width: 240px; height: 240px; border-radius: 50%; transition: transform .3s; }
.brand-category:hover img { transform: scale(1.04); }
.brand-category span { font-weight: 700; font-size: 22px; color: var(--dark); }

/* ---------- Product grid ---------- */
.brand-products { width: 100%; max-width: 100%; margin: 72px 0 0; padding-inline: var(--gutter); box-sizing: border-box; }
body[data-brand="pure"] .brand-products { margin-top: 86px; }
.brand-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.brand-grid .product-card { min-height: 375px; }
.brand-page .offers-ticker { margin-top: 103px; }
.brand-page .offers-ticker .ticker-track { animation-duration: 22s; }
/* ON SALE! carousel under the ticker, spaced like the homepage one. */
.brand-page .offers-block { margin-top: 0; }
.brand-page .sale-empty { padding: 40px 16px 60px; text-align: center; color: var(--gray); }
.brand-page .site-footer { margin-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-categories { gap: 32px; }
  .brand-category { width: 200px; }
  .brand-category img { width: 200px; height: 200px; }
  .brand-category span { font-size: 18px; }
}

@media (max-width: 767px) {
  /* Small screens show the whole desktop banner, scaled down (the layers are positioned in %). */
  .hero-tagline { font-size: 3.2vw; }

  .brand-categories { justify-content: space-between; gap: 10px; margin-top: 44px; }
  .brand-category { width: 31%; gap: 8px; }
  .brand-category img { width: 100%; height: auto; aspect-ratio: 1; }
  .brand-category span { font-size: 12px; text-align: center; }

  .brand-products, body[data-brand="pure"] .brand-products { margin-top: 44px; }
  .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .brand-grid .product-card { min-height: 0; }
  .brand-page .offers-ticker { margin-top: 48px; }
}