.os-eyebrow { margin: 0 0 24px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.os-eyebrow::before { content: ""; display: inline-block; width: 25px; height: 1px; margin: 0 10px 4px 0; background: currentColor; }
.os-button { min-height: 52px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: space-between; gap: 38px; border: 1px solid currentColor; font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; transition: transform .2s ease, background .2s ease, color .2s ease; }
.os-button:hover { transform: translateY(-2px); }
.os-button--dark { color: #fff; border-color: #11110f; background: #11110f; }
.os-button--light { color: #fff; border-color: #fff; }

.os-hero { height: clamp(680px, calc(100svh - 108px), 920px); min-height: 680px; display: grid; grid-template-columns: 44% 56%; align-items: stretch; color: #11110f; background: #f4f1e8; border-bottom: 1px solid #11110f; }
.os-hero__copy { min-width: 0; min-height: 0; height: 100%; box-sizing: border-box; padding: clamp(56px, 8vw, 118px) var(--os-pad) 44px; display: flex; flex-direction: column; align-items: flex-start; }
.os-hero__title { margin: 0; font-size: clamp(58px, 7.4vw, 124px); font-weight: 900; line-height: .79; letter-spacing: -.075em; }
.os-hero__title span, .os-hero__title em { display: block; }
.os-hero__title em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.os-hero__description { max-width: 490px; margin: clamp(34px, 6vh, 68px) 0 0; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5; }
.os-hero__actions { margin-top: 30px; display: flex; align-items: center; gap: 28px; }
.os-text-link { padding: 12px 0; border-bottom: 1px solid currentColor; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.os-hero__rating { margin-top: auto; padding-top: 42px; display: flex; align-items: center; gap: 16px; }
.os-hero__rating-stars { padding: 9px 11px; color: #11110f; background: var(--os-hero-accent); font-size: 12px; letter-spacing: .08em; }
.os-hero__rating p { margin: 0; font-size: 12px; line-height: 1.4; text-transform: uppercase; }

.os-hero__product { min-width: 0; min-height: 0; height: 100%; overflow: hidden; position: relative; isolation: isolate; color: #fff; background: var(--os-hero-bg); }
.os-hero__grid { position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px); background-size: 64px 64px; }
.os-hero__shoe { width: min(88%, 820px); height: min(70%, 620px); max-width: none; max-height: none; position: absolute; z-index: 2; left: 50%; top: 50%; display: block; object-fit: contain; filter: drop-shadow(0 38px 28px rgba(0,0,0,.34)); transform: translate(-50%, -50%) rotate(-9deg); transform-origin: center; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.os-hero__product:hover .os-hero__shoe { transform: translate(-50%, calc(-50% - 12px)) rotate(-5deg) scale(1.02); }
.os-hero__season { margin: 0; position: absolute; z-index: 3; right: 21px; top: 28px; font-size: 12px; font-weight: 800; letter-spacing: .14em; writing-mode: vertical-rl; }
.os-hero__orbit { width: min(52vw, 740px); height: min(52vw, 740px); position: absolute; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; animation: os-spin 22s linear infinite; }
.os-hero__orbit span { position: absolute; top: -7px; font-size: 12px; letter-spacing: .32em; }
.os-hero__product-meta { position: absolute; z-index: 3; left: 28px; right: 210px; bottom: 28px; min-width: 0; display: flex; align-items: center; gap: 15px; text-transform: uppercase; }
.os-hero__product-meta > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; }
.os-hero__product-meta div { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 4px; }
.os-hero__product-meta strong { overflow: hidden; display: block; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.os-hero__product-meta small { font-size: 12px; letter-spacing: .08em; }
.os-hero__swatches { padding: 8px 11px; position: absolute; z-index: 3; right: 29px; bottom: 28px; display: flex; align-items: center; gap: 8px; border: 1px solid currentColor; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.os-hero__swatches i { width: 17px; height: 17px; display: block; border: 1px solid #fff; border-radius: 50%; background: #1647ff; }
.os-hero__swatches i:nth-of-type(2) { background: #e8dfca; }
.os-hero__swatches i:nth-of-type(3) { background: #111; }
@keyframes os-spin { to { transform: rotate(360deg); } }

@media (max-width: 959px) {
  .os-hero { height: auto; min-height: 0; grid-template-columns: 1fr; }
  .os-hero__copy { height: auto; min-height: 620px; }
  .os-hero__product { height: auto; min-height: 620px; }
  .os-hero__orbit { width: 85vw; height: 85vw; }
}
@media (max-width: 600px) {
  .os-hero__copy { min-height: 570px; padding-top: 60px; }
  .os-hero__title { font-size: clamp(58px, 20vw, 88px); }
  .os-hero__description { margin-top: 36px; }
  .os-hero__actions { width: 100%; align-items: flex-start; flex-direction: column; gap: 12px; }
  .os-hero__product { min-height: 500px; }
  .os-hero__shoe { width: 112%; height: 76%; max-width: none; }
  .os-hero__product-meta { right: 20px; }
  .os-hero__orbit, .os-hero__season { display: none; }
  .os-hero__swatches { display: none; }
}