:root {
    --media-wall-calc-bg: #F2F4F6;
    --media-wall-calc-surface: #FFFFFF;
    --media-wall-calc-surface-2: #FAFBFC;
    --media-wall-calc-ink: #2B2B2B;
    --media-wall-calc-ink-2: #3D4348;
    --media-wall-calc-ink-3: #6B7378;
    --media-wall-calc-line: #DDE2E6;
    --media-wall-calc-line-strong: #B8BFC5;
    --media-wall-calc-accent: #3D7DA8;
    --media-wall-calc-accent-deep: #2D6189;
    --media-wall-calc-accent-soft: #C7DCEC;
    --media-wall-calc-warm-shadow: rgba(43, 43, 43, 0.06);
  }

  /* Wrapper — scopes all calculator styles */
  .media-wall-calc-wrapper {
    color: var(--media-wall-calc-ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  /* Scoped reset (only inside the calculator) */
  .media-wall-calc-wrapper * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* Flame flicker animation (used in fireplace SVG) */
  @keyframes media-wall-calc-flicker {
    0%, 100% { transform: scaleY(1) scaleX(1); opacity: 0.85; }
    25% { transform: scaleY(1.08) scaleX(0.92); opacity: 0.95; }
    50% { transform: scaleY(0.92) scaleX(1.06); opacity: 0.75; }
    75% { transform: scaleY(1.04) scaleX(0.96); opacity: 0.9; }
  }
  @keyframes media-wall-calc-flicker-fast {
    0%, 100% { transform: scaleY(1); opacity: 0.95; }
    33% { transform: scaleY(1.12); opacity: 0.7; }
    66% { transform: scaleY(0.88); opacity: 1; }
  }
  .media-wall-calc-wrapper .flame {
    transform-origin: center bottom;
    transform-box: fill-box;
  }
  .media-wall-calc-wrapper .flame-inner {
    transform-origin: center bottom;
    transform-box: fill-box;
  }

  /* Calculator layout */
  .media-wall-calc-wrapper .calculator {
    max-width: 1280px;
    margin: 0px auto;
    padding: 0px;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 40px;
    align-items: start;
  }

  @media (max-width: 980px) {
    .media-wall-calc-wrapper .calculator { grid-template-columns: 1fr; gap: 32px; }
  }

  /* Input panel */
  .media-wall-calc-wrapper .inputs {
    background: var(--media-wall-calc-surface);
    border: 1px solid var(--media-wall-calc-line);
    border-radius: 4px;
    padding: 32px;
    position: sticky;
    top: 24px;
  }
  @media (max-width: 980px) {
    .media-wall-calc-wrapper .inputs { position: static; }
  }
  .media-wall-calc-wrapper .inputs-title {
    font-size: 24px;
    margin-bottom: 4px;
    color: var(--media-wall-calc-ink);
  }
  .media-wall-calc-wrapper .inputs-sub {
    font-size: 13px;
    line-height: 20px;
    color: var(--media-wall-calc-ink-3);
    margin-bottom: 28px;
  }

  .media-wall-calc-wrapper .field {
    margin-bottom: 24px;
  }
  .media-wall-calc-wrapper .field-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
  }
  .media-wall-calc-wrapper .field-label-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--media-wall-calc-ink);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .media-wall-calc-wrapper .field-value {
    font-size: 18px;
    color: var(--media-wall-calc-accent);
  }

  /* Range slider */
  .media-wall-calc-wrapper input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: var(--media-wall-calc-line);
    border-radius: 2px;
    outline: none;
  }
  .media-wall-calc-wrapper input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--media-wall-calc-accent);
    border: 3px solid var(--media-wall-calc-surface);
    box-shadow: 0 0 0 1px var(--media-wall-calc-accent);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s;
  }
  .media-wall-calc-wrapper input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
  }
  .media-wall-calc-wrapper input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--media-wall-calc-accent);
    border: 3px solid var(--media-wall-calc-surface);
    box-shadow: 0 0 0 1px var(--media-wall-calc-accent);
    border-radius: 50%;
    cursor: pointer;
  }

  /* Option group (buttons) */
  .media-wall-calc-wrapper .option-group {
    display: grid;
    gap: 6px;
  }
  .media-wall-calc-wrapper .option-group.cols-2 { grid-template-columns: 1fr 1fr; }
  .media-wall-calc-wrapper .option-group.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .media-wall-calc-wrapper .option-group.cols-5 { grid-template-columns: repeat(5, 1fr); }

  .media-wall-calc-wrapper .option-btn {
    background: var(--media-wall-calc-surface-2);
    border: 1px solid var(--media-wall-calc-line);
    color: var(--media-wall-calc-ink-2);
    padding: 12px 8px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.18s;
    border-radius: 2px;
    text-align: center;
  }
  .media-wall-calc-wrapper .option-btn:hover {
    border-color: var(--media-wall-calc-line-strong);
    color: var(--media-wall-calc-ink);
  }
  .media-wall-calc-wrapper .option-btn.active {
    background: var(--media-wall-calc-accent);
    border-color: var(--media-wall-calc-accent);
    color: #FFFFFF;
  }
  .media-wall-calc-wrapper .option-btn small {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
    margin-top: 2px;
  }

  /* Visual panel */
  .media-wall-calc-wrapper .visual-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .media-wall-calc-wrapper .stage {
    background: var(--media-wall-calc-surface);
    border: 1px solid var(--media-wall-calc-line);
    border-radius: 4px;
    padding: 32px;
    position: relative;
  }
  .media-wall-calc-wrapper .stage-label {
    position: absolute;
    top: 24px;
    left: 32px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--media-wall-calc-ink-3);
  }
  .media-wall-calc-wrapper .stage-style {
    position: absolute;
    top: 24px;
    right: 32px;
    font-style: italic;
    font-size: 16px;
    color: var(--media-wall-calc-accent);
  }
  .media-wall-calc-wrapper .stage-svg-wrap {
    margin-top: 40px;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .media-wall-calc-wrapper .stage-svg-wrap svg {
    width: 100%;
    height: 100%;
    max-height: 480px;
  }

  /* Price range block */
  .media-wall-calc-wrapper .price-block {
    background: var(--media-wall-calc-surface);
    border: 1px solid var(--media-wall-calc-line);
    border-radius: 4px;
    padding: 28px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    position: relative;
  }
  @media (max-width: 720px) {
    .media-wall-calc-wrapper .price-block { flex-direction: column; align-items: flex-start; }
  }
  .media-wall-calc-wrapper .price-label {
    flex-shrink: 0;
  }
  .media-wall-calc-wrapper .price-label-eyebrow {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--media-wall-calc-ink-3);
    margin-bottom: 4px;
  }
  .media-wall-calc-wrapper .price-label-title {
    font-size: 22px;
    color: var(--media-wall-calc-ink);
    line-height: 1.15;
  }
  .media-wall-calc-wrapper .price-amount {
    font-size: clamp(28px, 4.5vw, 28px);
    color: var(--media-wall-calc-accent);
    line-height: 1;
    letter-spacing: -0.05em;
    text-align: right;
  }
  @media (max-width: 720px) {
    .media-wall-calc-wrapper .price-amount { text-align: left; }
  }
  .media-wall-calc-wrapper .price-sub {
    font-size: 12px;
    color: var(--media-wall-calc-ink-3);
    margin-top: 6px;
  }

  /* Spec strip */
  .media-wall-calc-wrapper .specs {
    background: var(--media-wall-calc-surface);
    color: var(--media-wall-calc-ink);
    border: 1px solid var(--media-wall-calc-line);
    border-top: 3px solid var(--media-wall-calc-accent);
    border-radius: 4px;
    padding: 28px 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  @media (max-width: 720px) {
    .media-wall-calc-wrapper .specs { grid-template-columns: 1fr 1fr; }
    .media-wall-calc-wrapper .stage-label {
        position: relative;
        top: 0;
        left: 0;
    }
    .media-wall-calc-wrapper .stage-style {
        position: relative;
        top: 3px;
        right: auto;
        left: 0;
    }
    .media-wall-calc-wrapper .stage-svg-wrap {
        margin-top: 20px;
        aspect-ratio: 15 / 9;
    }
  }
  .media-wall-calc-wrapper .spec-item-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--media-wall-calc-ink-3);
    margin-bottom: 6px;
  }
  .media-wall-calc-wrapper .spec-item-value {
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--media-wall-calc-accent);
  }
  .media-wall-calc-wrapper .spec-item-value small {
    font-size: 14px;
    color: var(--media-wall-calc-ink-3);
    margin-left: 2px;
  }

  /* Design notes */
  .media-wall-calc-wrapper .design-notes {
    background: var(--media-wall-calc-surface-2);
    border: 1px solid var(--media-wall-calc-line);
    border-radius: 4px;
    padding: 28px 32px;
  }
  .media-wall-calc-wrapper .design-notes-title {
    font-size: 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .media-wall-calc-wrapper .design-notes p {
    font-size: 15px;
    color: var(--media-wall-calc-ink-2);
    line-height: 1.65;
  }
  .media-wall-calc-wrapper .design-notes p + p { margin-top: 10px; }

  /* Disclaimer banner */
  .media-wall-calc-wrapper .disclaimer-banner {
    background: var(--media-wall-calc-accent-soft);
    color: var(--media-wall-calc-ink);
    padding: 14px 24px;
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 2px;
    margin-top: 16px;
  }
  .media-wall-calc-wrapper .disclaimer-banner strong {
    font-weight: 600;
  }