/* Layout primitives for the own sector designs. Original three themes stay independent. */
.hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:560px;
  margin-top:28px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  isolation:isolate;
}

.hero-copy {
  align-self:center;
  padding:clamp(28px,4vw,58px);
}

.hero-copy h1 {
  font-size:clamp(2.8rem,4.6vw,4.8rem);
  max-width:12ch;
  overflow-wrap:normal;
}

.hero-copy p {
  max-width:37ch;
}

.hero-art {
  position:relative;
  min-width:0;
  overflow:hidden;
  background:var(--photo-bg);
}

.hero-art img {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:75% center;
}

.hero-art:after {
  content:'';
  position:absolute;
  inset:0;
  border:18px solid transparent;
  pointer-events:none;
}

.hero-meta {
  right:24px;
  bottom:22px;
  padding:9px 14px;
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius);
  letter-spacing:.06em;
  font-size:.65rem;
}

.hero-serial {
  display:inline-flex;
  gap:13px;
  align-items:center;
  margin-bottom:22px;
  color:var(--muted);
  font-size:.69rem;
  font-weight:700;
  letter-spacing:.1em;
}

.hero-serial:before {
  content:'';
  height:1px;
  width:34px;
  background:var(--accent);
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
}

.hero-actions .text-link {
  font-size:.82rem;
}

.brand-name {
  letter-spacing:-.04em;
}

.brand small {
  letter-spacing:.1em;
}

.sector-note {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:18px 0;
  color:var(--muted);
  font-size:.7rem;
  letter-spacing:.08em;
  border-bottom:1px solid var(--line);
}

.category {
  min-width:0;
  padding:24px 18px;
}

.category strong {
  overflow-wrap:anywhere;
}

.collection {
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
}

.collection-image img {
  object-position:75% center;
}

.product-card .add-button {
  min-width:44px;
  min-height:44px;
}

.article img {
  border-radius:var(--radius);
}

@media(max-width:1050px) {
  .main-nav {
    gap:18px;
  }
  .hero-copy h1 {
    font-size:clamp(2.8rem,5vw,4rem);
  }
  .hero-copy {
    padding:34px;
  }
  .category {
    gap:12px;
  }
}

@media(max-width:760px) {
  .section-head {
    flex-wrap:wrap;
  }
  .hero {
    grid-template-columns:1fr;
    min-height:0;
    margin-top:18px;
  }
  .hero-copy {
    padding:30px 24px 32px;
  }
  .hero-copy h1 {
    font-size:clamp(2.65rem,10vw,3.8rem);
    max-width:13ch;
    margin-block:18px;
  }
  .hero-copy .eyebrow {
    font-size:.61rem;
  }
  .hero-copy p {
    max-width:43ch;
  }
  .hero-art {
    min-height:285px;
  }
  .hero-art img {
    object-position:75% center;
  }
  .hero-meta {
    right:14px;
    bottom:14px;
  }
  .hero-serial {
    margin-bottom:12px;
  }
  .hero-actions {
    gap:16px;
  }
  .hero-actions .text-link {
    font-size:.76rem;
  }
  .sector-note {
    flex-wrap:wrap;
    gap:8px;
    font-size:.6rem;
  }
  .category {
    padding:18px 12px;
  }
  .brand small {
    max-width:23ch;
    font-size:6px;
  }
}