.product-wrap {
  max-width: 1040px;
}

.product-hero {
  border-top: 3px solid var(--sk-samaya);
}

.product-hero--yonah {
  border-top-color: var(--sk-yonah);
}

.product-grid-card {
  height: 100%;
}

/* Samaya product page */
.samaya-card {
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.samaya-card--hero {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
  border: 1px solid var(--sk-border);
  color: var(--sk-text);
}

.samaya-card--hero .samaya-label {
  color: var(--sk-samaya);
}

.samaya-card--hero .samaya-hero-subtitle {
  color: #0f766e;
}

.samaya-card--hero .muted,
.samaya-card--hero .site-tagline {
  color: var(--sk-muted);
}

.samaya-card:not(.samaya-card--hero) {
  background: #141b34;
  border: 1px solid rgba(155, 168, 206, 0.28);
  color: #e2e8f0;
}

.samaya-card:not(.samaya-card--hero) .muted {
  color: #9ba8ce;
}

.samaya-card:not(.samaya-card--hero) .samaya-label,
.samaya-card:not(.samaya-card--hero) h3.h6 {
  color: var(--sk-header-accent);
}

.samaya-card:not(.samaya-card--hero) .chip {
  border-color: rgba(155, 168, 206, 0.35);
  color: #c8d4e8;
}

.samaya-card:not(.samaya-card--hero) .chip--play {
  border-color: rgba(110, 231, 183, 0.45);
  color: var(--sk-header-accent);
}

/* Yonah product page */
.yonah-card {
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.yonah-card--hero {
  background: linear-gradient(180deg, #f4f1ff 0%, #ffffff 100%);
  border: 1px solid var(--sk-border);
  color: var(--sk-text);
}

.yonah-card--hero .yonah-label {
  color: #7c5cff;
}

.yonah-card--hero .yonah-hero-subtitle {
  color: #6d4fe0;
}

.yonah-card--hero .muted,
.yonah-card--hero .site-tagline {
  color: var(--sk-muted);
}

.yonah-card:not(.yonah-card--hero) {
  background: #1a1a28;
  border: 1px solid rgba(155, 155, 176, 0.28);
  color: #e8e8f0;
}

.yonah-card:not(.yonah-card--hero) .muted {
  color: #9b9bb0;
}

.yonah-card:not(.yonah-card--hero) .yonah-label,
.yonah-card:not(.yonah-card--hero) h3.h6 {
  color: #c4b5fd;
}

.yonah-card:not(.yonah-card--hero) .chip {
  border-color: rgba(155, 155, 176, 0.35);
  color: #c8c8d8;
}

.samaya-card:not(.samaya-card--hero) a {
  color: var(--sk-header-accent);
}

.samaya-card:not(.samaya-card--hero) a:hover {
  color: #a7f3d0;
}

@media (max-width: 767.98px) {
  .yonah-card,
  .samaya-card {
    padding: 1rem;
  }

  .product-wrap .container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

.samaya-card:not(.samaya-card--hero) .section-title--icon,
.yonah-card:not(.yonah-card--hero) .section-title--icon {
  color: #f1f5f9;
}

.samaya-card:not(.samaya-card--hero) .section-title--icon .sk-site-icon,
.samaya-card:not(.samaya-card--hero) .section-title--icon .hub-icon--inline,
.yonah-card:not(.yonah-card--hero) .section-title--icon .sk-site-icon,
.yonah-card:not(.yonah-card--hero) .section-title--icon .hub-icon--inline {
  color: var(--sk-header-accent);
}

.yonah-card:not(.yonah-card--hero) .section-title--icon .sk-site-icon,
.yonah-card:not(.yonah-card--hero) .section-title--icon .hub-icon--inline {
  color: #c4b5fd;
}

.samaya-card--hero .chip .sk-icon {
  color: inherit;
}

.samaya-card:not(.samaya-card--hero) h3.h6 {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.samaya-card:not(.samaya-card--hero) h3.h6 .sk-site-icon,
.samaya-card:not(.samaya-card--hero) h3.h6 .sk-icon,
.yonah-card:not(.yonah-card--hero) h3.h6 .sk-site-icon {
  color: var(--sk-header-accent);
}

.yonah-card:not(.yonah-card--hero) h3.h6 .sk-site-icon {
  color: #c4b5fd;
}

.samaya-card:not(.samaya-card--hero) .btn-product-outline .sk-icon {
  color: inherit;
}

.yonah-card:not(.yonah-card--hero) a {
  color: #c4b5fd;
}

.yonah-card:not(.yonah-card--hero) a:hover {
  color: #ddd6fe;
}

@media (max-width: 767.98px) {
  .yonah-card,
  .samaya-card {
    padding: 1rem;
  }
}