.product-spiral { direction: rtl; position: relative; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; width: min(1360px, calc(100% - 48px)); margin: 72px auto; overflow: hidden; isolation: isolate; border: 1px solid #cbb493; border-radius: 32px; background: #e9d4b7; color: #10384c; }
.product-spiral__copy { position: relative; z-index: 2; padding: clamp(28px, 5vw, 72px); }
.product-spiral__eyebrow { display: block; margin-bottom: 24px; color: #6c6157; font-size: 13px; }
.product-spiral h2 { margin: 0 0 24px; color: #10384c; font-size: clamp(32px, 4vw, 56px); line-height: 1.65; font-weight: 800; }
.product-spiral h2 em { color: #b93631; font-style: normal; }
.product-spiral__copy p { max-width: 370px; margin: 0 0 28px; font-size: 16px; line-height: 2.1; color: #526773; }
.product-spiral__shop { display: inline-flex; align-items: center; gap: 32px; min-height: 48px; padding: 12px 22px; border-radius: 12px; background: #10384c; color: #fff; font-weight: 700; text-decoration: none; }
.product-spiral__shop:hover { background: #20546b; color: #fff; }
.product-spiral__controls { display: flex; align-items: center; gap: 8px; margin-top: 28px; }
.product-spiral__controls[hidden] { display: none; }
.product-spiral__controls button { min-width: 44px; min-height: 44px; padding: 8px 14px; border: 1px solid #c6ccc9; border-radius: 24px; background: #ffffff99; color: #10384c; font: inherit; font-size: 13px; cursor: pointer; }
.product-spiral__hint { display: block; margin-top: 16px; font-size: 12px; color: #626d70; }
.product-spiral a:focus-visible, .product-spiral button:focus-visible { outline: 3px solid #ba3933; outline-offset: 4px; }
.product-spiral__stage { position: relative; min-width: 0; min-height: 600px; align-self: stretch; overflow: hidden; perspective: 1000px; touch-action: pan-y; user-select: none; background: transparent; }
.product-spiral__orbit { position: absolute; inset: 12% 20%; border: 1px solid #10384c15; border-radius: 50%; transform: rotate(-24deg); pointer-events: none; }
.product-spiral__card { position: relative; display: inline-flex; flex-direction: column; width: 160px; height: 180px; margin: 8px; padding: 10px; overflow: hidden; border: 1px solid #d7e2db; border-radius: 18px; background: #fff; box-shadow: 0 14px 38px #10384c24; color: #10384c; text-decoration: none; }
.product-spiral__card img { display: block; width: 100%; height: 132px; object-fit: contain; pointer-events: none; }
.product-spiral__card span { display: block; margin-top: auto; padding: 6px 0; font-size: 13px; font-weight: 700; text-align: center; }
.product-spiral__card[aria-hidden="true"] { display: none; }
.product-spiral.is-animated .product-spiral__card { position: absolute; top: 50%; left: 50%; display: flex; margin: 0; will-change: transform, opacity, filter; }
@media (max-width: 760px) { .product-spiral { grid-template-columns: 1fr; width: calc(100% - 28px); margin: 40px auto; border-radius: 24px; } .product-spiral__copy { padding: 30px 26px 0; } .product-spiral h2 { font-size: 34px; margin-bottom: 14px; } .product-spiral h2 br { display: none; } .product-spiral__copy p { font-size: 14px; margin-bottom: 20px; } .product-spiral__stage { min-height: 460px; } .product-spiral__controls { margin-top: 20px; } }
@media (prefers-reduced-motion: reduce) { .product-spiral__stage { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; min-height: 0; padding: 28px 16px; } .product-spiral__card { width: 140px; margin: 0; } .product-spiral__orbit { display: none; } }