@layer components {
  .leather-footer {
    position: relative;
    overflow: hidden;
    /* removed border-radius for full-width edge-to-edge design */

    /* real depth like your screenshot */
    box-shadow:
      0 18px 45px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -14px 28px rgba(0,0,0,.42);

    border: 1px solid rgba(255,255,255,.06);
    border-top: none; /* remove top border, using dashed pattern instead */
  }

  /* stitch pattern at top using image */
  .leather-footer__stitch {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px; /* adjust height as needed for stitch visibility */
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: top center;
    z-index: 5; /* above leather/light/veil layers, below content */
    pointer-events: none;
    opacity: 0.7;
  }

  /* leather base */
  .leather-footer__leather {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;    /* no repeat, use cover instead */
    background-size: cover;          /* cover entire area */
    background-position: center;
    transform: translateZ(0);
    opacity: 0.4;                    /* reduce opacity to make pattern less obvious */
    filter: blur(0.5px);              /* slight blur to soften pattern edges */
  }

  /* lighting overlay: keeps it looking like your screenshot instead of "flat texture" */
  .leather-footer__light {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(1200px 400px at 50% 65%, rgba(255,170,110,.25), transparent 65%),
      radial-gradient(1000px 350px at 20% 70%, rgba(255,150,90,.15), transparent 65%),
      radial-gradient(1200px 450px at 85% 70%, rgba(0,0,0,.45), transparent 65%),
      linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.40) 100%),
      /* additional noise/grain to break up pattern */
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,.02) 2px,
        rgba(0,0,0,.02) 4px
      );
    opacity: .95;
    mix-blend-mode: overlay;
  }

  /* readability overlay for text - also helps mask pattern */
  .leather-footer__veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: 
      rgba(0,0,0,.35),
      /* subtle gradient to break up pattern visibility */
      radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,.15) 100%);
  }
}