.hero-section { background: var(--al-ivory); padding: 24px 16px; }
.promo-mosaic { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(280px, auto) minmax(208px, auto); gap: 16px; }
.promo-tile { position: relative; isolation: isolate; border-radius: var(--al-radius-card); overflow: hidden; color: var(--al-ink); min-width: 0; display: flex; }
.promo-vitamins { grid-column: span 3; }
.promo-main { grid-column: span 5; }
.promo-skin, .promo-lifestyle { grid-column: span 4; }
.promo-family, .promo-offers { grid-column: span 3; }
.promo-care { grid-column: span 2; }
.promo-theme-light, .promo-theme-ivory { background: #fff; }
.promo-theme-mist { background: var(--al-mist); }
.promo-theme-dark, .promo-theme-forest { background: var(--al-forest); color: white; }
.promo-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 320ms ease-out; }
.promo-tile:hover .promo-photo { transform: scale(1.025); }
.promo-theme-dark::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(29,37,34,.64); }
.promo-theme-light::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(246,243,234,.70); }
.promo-skin::before { background: rgba(246,243,234,.45); }
.promo-content { padding: 24px; width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.promo-label { font-size: 12px; line-height: 16px; font-weight: 600; margin-bottom: 16px; }
.promo-content h1 { font-size: 36px; line-height: 40px; font-weight: 800; max-width: 330px; margin: 0; }
.promo-content h2 { font-size: 22px; line-height: 28px; font-weight: 600; overflow-wrap: anywhere; }
.promo-content p { font-size: 14px; line-height: 20px; margin-top: 12px; max-width: 240px; }
.promo-link { margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.promo-primary-cta { display: inline-flex; align-items: center; gap: 12px; background: white; color: var(--al-forest); border-radius: var(--al-radius-control); padding: 12px 16px; margin-top: 24px; min-height: 44px; font-weight: 600; font-size: 14px; }
.promo-main .promo-label { text-transform: uppercase; }
.promo-care .promo-content, .promo-offers .promo-content { padding: 20px; }
.promo-offers .promo-label::before { content: ''; display: inline-block; background: var(--al-gold); width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .promo-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: minmax(208px, auto); }
  .promo-tile { grid-column: span 1; }
  .promo-main { grid-column: span 2; grid-row: 1; min-height: 280px; }
}
@media (max-width: 767px) {
  .hero-section { padding: 16px; }
  .promo-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(176px, auto) minmax(176px, auto); gap: 12px; }
  .promo-main { grid-column: 1 / -1; grid-row: 1; min-height: 264px; }
  .promo-family { grid-column: 1; grid-row: 2; }
  .promo-vitamins { grid-column: 1; grid-row: 3; }
  .promo-lifestyle { grid-column: 2; grid-row: 2 / 4; }
  .promo-skin, .promo-care, .promo-offers { display: none; }
  .promo-content { padding: 16px; }
  .promo-main .promo-content { padding: 24px; }
  .promo-content h1 { font-size: 36px; line-height: 40px; max-width: 240px; }
  .promo-content h2 { font-size: 18px; line-height: 24px; }
  .promo-label { font-size: 12px; margin-bottom: 12px; }
  .promo-link { font-size: 12px; padding-top: 16px; }
  .promo-lifestyle .promo-content { justify-content: flex-end; }
  .promo-lifestyle .promo-link { margin-top: 0; }
}