/* ============================================================
   PUSK HEADER V13 — IMAGE VISUAL + LIVE HIT AREAS
   Desktop visual comes from PUSK_HEADER_V2.png.
   Existing functional controls remain active underneath.
   ============================================================ */

@media (min-width: 761px) {

  .pusk-header-v12 {
    position: relative;

    padding:
      8px
      0
      2px !important;

    min-height: 0 !important;

    background: transparent !important;
  }

  .pusk-header-stage-v12 {
    position: relative !important;

    width:
      min(
        calc(100% - 40px),
        1320px
      ) !important;

    max-width: 1320px !important;
    height: 150px !important;

    margin:
      0
      auto !important;

    display: block !important;

    transform: none !important;

    gap: 0 !important;
  }

  /* Generated transparent visual */

  .pusk-header-v13-art {
    position: absolute;

    z-index: 1;

    left: 50%;
    top: 50%;

    width: 100%;
    max-width: none;
    height: auto;

    transform:
      translate(
        -50%,
        -44%
      );

    pointer-events: none;

    user-select: none;
    -webkit-user-drag: none;

    filter:
      drop-shadow(
        0 12px 28px
        rgba(0, 0, 0, .24)
      );
  }

  /* Brand stays a real link but becomes a transparent hit area */

  .pusk-brand-v12 {
    position: absolute !important;

    z-index: 3 !important;

    left: 1.5% !important;
    top: 14% !important;

    width: 30% !important;
    height: 72% !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    background: transparent !important;

    pointer-events: auto !important;
  }

  .pusk-brand-v12 > * {
    visibility: hidden !important;
  }

  /* Functional controls fill the same geometry as the artwork */

  .pusk-header-actions-v12 {
    position: absolute !important;

    z-index: 4 !important;

    inset: 0 !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    pointer-events: none !important;
  }

  .pusk-action-v12 {
    position: absolute !important;

    top: 14% !important;

    height: 72% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 18px !important;

    background: transparent !important;

    box-shadow: none !important;

    transform: none !important;

    pointer-events: auto !important;

    color: transparent !important;
  }

  .pusk-action-v12 > * {
    visibility: hidden !important;
  }

  .pusk-windows-v12 {
    left: 32% !important;

    width: 17.5% !important;

    flex: none !important;
  }

  .pusk-android-v12 {
    left: 49.5% !important;

    width: 16.5% !important;

    flex: none !important;
  }

  .pusk-ios-v12 {
    left: 66% !important;

    width: 14% !important;

    flex: none !important;
  }

  .pusk-cabinet-v12 {
    left: 80.5% !important;

    width: 19% !important;

    flex: none !important;

    margin-left: 0 !important;
  }

  .pusk-cabinet-v12::before {
    display: none !important;
  }

  /* Keyboard focus remains visible */

  .pusk-brand-v12:focus-visible,
  .pusk-action-v12:focus-visible {
    outline:
      2px solid
      rgba(102, 233, 255, .88);

    outline-offset: 2px;
  }

}


/* Mobile keeps the existing live V12 layout for now. */

@media (max-width: 760px) {

  .pusk-header-v13-art {
    display: none !important;
  }

}