/* WEARING-GUIDE-PREMIUM-047
   Desktop-only editorial treatment for the existing eight-step guide.
   Copy, media, controls, responsive source loading and /qr remain untouched. */

@media (min-width: 1025px) {
  .elementor-945 #kako-jo-nosis.el-wear-steps {
    --wear-ink: #f4f0e9;
    --wear-muted: rgba(244, 240, 233, 0.68);
    --wear-line: rgba(244, 240, 233, 0.2);
    --wear-paper: #171715;
    position: relative;
    padding: clamp(92px, 7.4vw, 118px) clamp(48px, 6.2vw, 100px) clamp(82px, 6.6vw, 106px);
    overflow: hidden;
    background: #171715;
    color: var(--wear-ink);
    box-shadow: inset 0 1px rgba(244, 240, 233, 0.16), inset 0 -1px rgba(244, 240, 233, 0.12);
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__intro,
  .elementor-945 #kako-jo-nosis .el-wear-steps__tutorial,
  .elementor-945 #kako-jo-nosis .el-wear-steps__after {
    max-width: 1280px;
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__intro {
    display: grid;
    grid-template-columns: minmax(380px, 0.92fr) minmax(420px, 0.78fr);
    grid-template-areas:
      "eyebrow eyebrow"
      "title lead";
    align-items: end;
    gap: 26px clamp(70px, 8vw, 138px);
    margin-bottom: clamp(54px, 4.6vw, 74px);
  }

  .elementor-945 #kako-jo-nosis .el-exp__eyebrow {
    grid-area: eyebrow;
    margin-bottom: 0;
    color: rgba(244, 240, 233, 0.72);
  }

  .elementor-945 #kako-jo-nosis h2 {
    grid-area: title;
    max-width: 12ch;
    margin-bottom: 0;
    font-size: clamp(58px, 5.1vw, 76px);
    line-height: 0.98;
  }

  .elementor-945 #kako-jo-nosis .el-exp__lead {
    grid-area: lead;
    max-width: 49ch;
    padding-bottom: 5px;
    color: var(--wear-muted);
    font-size: 17px;
    line-height: 1.72;
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__tutorial {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(330px, 0.68fr);
    grid-template-areas:
      "media panel"
      "rail rail"
      "hint hint";
    align-items: stretch;
    border-top: 1px solid var(--wear-line);
    border-bottom: 1px solid var(--wear-line);
    background: #11110f;
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__media {
    grid-area: media;
    min-height: 610px;
    max-height: 720px;
    aspect-ratio: 10 / 9;
    margin: 0;
    background: #eee8de;
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__media video {
    object-fit: cover;
    background: #eee8de;
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__panel {
    grid-area: panel;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 38px;
    min-width: 0;
    padding: clamp(42px, 4.2vw, 66px) clamp(34px, 3.8vw, 56px);
    border-bottom: 0;
    border-left: 1px solid var(--wear-line);
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__counter {
    margin-bottom: 18px;
    color: rgba(244, 240, 233, 0.54);
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__title {
    max-width: 13ch;
    color: var(--wear-ink);
    font-size: clamp(34px, 3vw, 46px);
    line-height: 1.05;
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__control {
    width: 100%;
    min-height: 50px;
    padding: 12px 10px;
    border-color: rgba(244, 240, 233, 0.28);
    border-radius: 0;
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__control[data-step-replay] {
    order: 3;
    grid-column: 1 / -1;
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__control[data-step-next] {
    min-width: 0;
    border-color: #f4f0e9;
    background: #f4f0e9;
    color: #171715;
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__rail {
    grid-area: rail;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--wear-line);
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__rail button {
    min-height: 70px;
    padding: 0;
    border-left: 1px solid var(--wear-line);
    color: rgba(244, 240, 233, 0.5);
    transition: color 220ms ease, background-color 220ms ease;
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__rail button:first-child {
    border-left: 0;
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__rail button::before {
    top: 0;
    left: 18%;
    width: 64%;
    height: 1px;
    background: transparent;
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__rail button[aria-current="step"] {
    background: rgba(244, 240, 233, 0.07);
    color: #f4f0e9;
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__rail button[aria-current="step"]::before {
    background: #f4f0e9;
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__hint {
    grid-area: hint;
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__after {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 50px 90px;
    margin-top: 0;
    padding-top: 42px;
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__after p {
    max-width: 65ch;
    color: rgba(244, 240, 233, 0.74);
  }

  .elementor-945 #kako-jo-nosis .el-exp__link {
    color: var(--wear-ink);
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__toggle {
    border-color: rgba(244, 240, 233, 0.82);
    background: rgba(17, 17, 15, 0.7);
  }

  .elementor-945 #kako-jo-nosis.wear-motion-ready [data-wear-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1), transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--wear-reveal-delay, 0ms);
  }

  .elementor-945 #kako-jo-nosis.wear-motion-ready [data-wear-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__title.is-step-entering,
  .elementor-945 #kako-jo-nosis .el-wear-steps__counter.is-step-entering {
    animation: wear-step-enter 440ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes wear-step-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-945 #kako-jo-nosis.wear-motion-ready [data-wear-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .elementor-945 #kako-jo-nosis .el-wear-steps__title.is-step-entering,
  .elementor-945 #kako-jo-nosis .el-wear-steps__counter.is-step-entering {
    animation: none;
  }
}