/* Product-specific media and availability state for EM-329.
   Shared spacing, type and layout come from the standard AllTech product styles. */

.header-actions button.hamburger-btn {
  flex: 0 0 48px;
  min-height: 48px;
  padding: 0;
}

.steam-slider-wrapper {
  background: linear-gradient(150deg, #fffdf7 0%, var(--brand-cream-dark) 100%);
  border: 1px solid rgba(51, 59, 62, 0.08);
  box-shadow: var(--shadow-md);
}

.steam-slider-wrapper .slider-img {
  background: #efe5d3;
}

.steam-feature-image {
  aspect-ratio: 3 / 4;
  object-fit: cover !important;
}

.steam-slide {
  padding: clamp(var(--space-6), 5vw, var(--space-12));
  color: var(--brand-dark-deep);
  isolation: isolate;
}

.steam-slide::before,
.steam-slide::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: var(--radius-full);
  pointer-events: none;
}

.steam-slide::before {
  width: 58%;
  aspect-ratio: 1;
  right: -20%;
  top: -8%;
  background: rgba(255, 140, 0, 0.12);
}

.steam-slide::after {
  width: 42%;
  aspect-ratio: 1;
  left: -14%;
  bottom: -12%;
  border: 1px solid rgba(51, 59, 62, 0.12);
}

.steam-slide__content {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-5);
  max-width: 580px;
  margin-inline: auto;
}

.steam-slide__eyebrow,
.availability-badge,
.steam-feature-placeholder > span {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  background: var(--brand-orange-muted);
  color: var(--brand-orange-dark);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.steam-slide strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-tightest);
}

.steam-slide p {
  max-width: 34ch;
  color: var(--color-neutral-600);
  font-size: clamp(var(--font-size-sm), 2vw, var(--font-size-lg));
}

.steam-slide__index {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-6);
  color: var(--color-neutral-500);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
}

.steam-device-mark {
  position: relative;
  width: clamp(150px, 30vw, 260px);
  aspect-ratio: 1;
  align-self: center;
}

.steam-device-mark__body {
  position: absolute;
  inset: 38% 17% 5% 29%;
  border: clamp(5px, 0.7vw, 9px) solid var(--brand-dark);
  border-radius: 42% 42% 30% 30%;
  transform: rotate(-8deg);
}

.steam-device-mark__body::before {
  content: '';
  position: absolute;
  width: 47%;
  height: 24%;
  left: -32%;
  top: -27%;
  border: clamp(5px, 0.7vw, 9px) solid var(--brand-dark);
  border-right: 0;
  border-radius: 22px 0 0 22px;
  transform: rotate(-16deg);
}

.steam-device-mark__body::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 15%;
  right: -38%;
  top: -17%;
  border-radius: var(--radius-full);
  background: var(--brand-orange);
  transform: rotate(-12deg);
}

.steam-device-mark__wave {
  position: absolute;
  top: 8%;
  width: 34%;
  height: 26%;
  border-top: 5px solid var(--brand-orange);
  border-radius: 50%;
  transform: rotate(-14deg);
}

.steam-device-mark__wave--one { right: 5%; }
.steam-device-mark__wave--two { right: 22%; top: 20%; opacity: 0.55; }

.steam-slide--kit {
  background: linear-gradient(155deg, var(--brand-dark-deep), var(--brand-dark-light));
  color: var(--brand-cream);
}

.steam-slide--kit::after { border-color: rgba(253, 246, 227, 0.16); }
.steam-slide--kit p,
.steam-slide--kit .steam-slide__index { color: rgba(253, 246, 227, 0.7); }

.steam-kit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  width: min(100%, 450px);
}

.steam-kit-list span {
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(253, 246, 227, 0.2);
  border-radius: var(--radius-lg);
  background: rgba(253, 246, 227, 0.06);
  color: var(--brand-cream);
  font-weight: var(--font-weight-semibold);
}

.steam-slide--facts .steam-slide__content { max-width: 620px; }

.steam-fact-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  width: 100%;
}

.steam-fact-list span {
  min-width: 0;
  padding: clamp(var(--space-4), 3vw, var(--space-6));
  border-radius: var(--radius-xl);
  background: var(--brand-dark);
  color: var(--brand-cream);
}

.steam-fact-list strong {
  margin-bottom: var(--space-2);
  color: var(--brand-orange-light);
  font-size: clamp(1.6rem, 4vw, 3rem);
}

.steam-fact-list small {
  display: block;
  color: rgba(253, 246, 227, 0.72);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
}

.availability-badge {
  margin-bottom: var(--space-5);
  background: rgba(255, 140, 0, 0.15);
  color: var(--brand-orange-light);
}

.availability-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  margin-right: var(--space-2);
  border-radius: var(--radius-full);
  background: currentColor;
}

.availability-display {
  margin: var(--space-6) 0 var(--space-3);
  color: var(--brand-orange);
  font-family: var(--font-display);
  font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-3xl));
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
}

.availability-note {
  margin-bottom: var(--space-6);
  color: rgba(253, 246, 227, 0.68);
  font-size: var(--font-size-sm);
}

.instruction-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.instruction-cta:hover,
.instruction-cta:focus-visible {
  color: var(--color-white);
}

.steam-feature-placeholder {
  width: min(100%, 440px);
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-3);
  overflow: hidden;
  position: relative;
  border: 1px dashed rgba(51, 59, 62, 0.22);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 80% 18%, rgba(255, 140, 0, 0.2), transparent 34%),
    linear-gradient(145deg, var(--color-neutral-50), var(--brand-cream-dark));
  box-shadow: var(--shadow-md);
}

.steam-feature-placeholder::before {
  content: '';
  position: absolute;
  width: 45%;
  aspect-ratio: 1;
  right: -8%;
  top: 17%;
  border: 2px solid rgba(51, 59, 62, 0.1);
  border-radius: 50%;
}

.steam-feature-placeholder strong {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(var(--font-size-xl), 4vw, var(--font-size-3xl));
  line-height: var(--line-height-tight);
}

.steam-feature-placeholder small {
  position: relative;
  color: var(--color-neutral-600);
  font-size: var(--font-size-sm);
}

.steam-feature-placeholder--kit {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 167, 51, 0.22), transparent 32%),
    linear-gradient(145deg, var(--brand-dark), var(--brand-dark-deep));
  color: var(--brand-cream);
}

.steam-feature-placeholder--kit > span {
  background: rgba(255, 140, 0, 0.15);
  color: var(--brand-orange-light);
}

.steam-feature-placeholder--kit small { color: rgba(253, 246, 227, 0.65); }
.steam-feature-placeholder--kit::before { border-color: rgba(253, 246, 227, 0.12); }

.steam-feature-placeholder--water {
  background:
    linear-gradient(120deg, transparent 48%, rgba(255, 255, 255, 0.42) 49%, transparent 51%),
    linear-gradient(145deg, #edf4f3, var(--brand-cream-dark));
}

@media (max-width: 640px) {
  .steam-slide {
    padding: var(--space-6);
  }

  .steam-slide__content {
    gap: var(--space-4);
  }

  .steam-device-mark {
    width: min(54vw, 210px);
  }

  .steam-fact-list {
    grid-template-columns: 1fr;
  }

  .steam-fact-list span {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .steam-fact-list strong {
    margin: 0;
    font-size: var(--font-size-2xl);
  }

  .steam-slide--facts p {
    display: none;
  }

  .steam-slide__index {
    right: var(--space-4);
    bottom: var(--space-4);
  }

  .steam-feature-placeholder {
    min-height: 250px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .steam-slide,
  .steam-feature-placeholder {
    animation: none;
  }
}