/* Trijal Mart v15: mobile hero parity fix only.
   Purpose: keep the same hero slide content as desktop, but stop mobile from
   splitting it into a separate-looking text block and oversized buttons. */

@media (max-width: 820px){
  .kg-hero{
    width:calc(100% - 24px)!important;
    height:auto!important;
    min-height:0!important;
    margin:14px auto 0!important;
    border-radius:20px!important;
    overflow:hidden!important;
    background:linear-gradient(180deg,#fff 0%,#fff8f4 58%,#f6f9fd 100%)!important;
    box-shadow:0 14px 34px rgba(15,23,42,.08)!important;
  }

  .kg-hero-stage,
  .kg-hero-slide{
    height:auto!important;
    min-height:0!important;
  }

  .kg-hero-slide{
    position:relative!important;
    display:none!important;
    opacity:1!important;
    visibility:visible!important;
    padding:0!important;
    background:transparent!important;
  }

  .kg-hero-slide.is-active{
    display:block!important;
  }

  /* Image remains the hero visual, not a separate detached card. */
  .kg-hero-media{
    position:relative!important;
    inset:auto!important;
    order:initial!important;
    height:218px!important;
    margin:12px 12px 0!important;
    border-radius:18px!important;
    overflow:hidden!important;
    background:#eef3f8!important;
    box-shadow:0 12px 26px rgba(15,23,42,.08)!important;
  }

  .kg-hero-media:after{
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.12))!important;
  }

  .kg-hero-media img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    transform:none!important;
    filter:saturate(.98) contrast(.99)!important;
  }

  .kg-hero-slide.is-active .kg-hero-media img{
    transform:none!important;
  }

  .kg-hero-shell{
    position:relative!important;
    z-index:2!important;
    height:auto!important;
    width:100%!important;
    display:block!important;
    padding:0!important;
  }

  .kg-hero-copy{
    width:100%!important;
    max-width:none!important;
    padding:18px 18px 54px!important;
    color:#0b1220!important;
  }

  .kg-eyebrow{
    height:28px!important;
    padding:0 12px!important;
    margin:0 0 11px!important;
    border-radius:999px!important;
    font-size:10.5px!important;
    line-height:28px!important;
  }

  .kg-hero h1{
    font-size:31px!important;
    line-height:1.08!important;
    letter-spacing:-.045em!important;
    margin:0 0 9px!important;
    max-width:100%!important;
  }

  .kg-hero p{
    font-size:14.5px!important;
    line-height:1.45!important;
    margin:0 0 14px!important;
    max-width:100%!important;
    font-weight:700!important;
    color:#52637a!important;
  }

  /* Critical fix: previous CSS used column + flex-basis, creating huge red/white blocks. */
  .kg-hero-actions{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    flex-wrap:wrap!important;
    margin:0 0 13px!important;
  }

  .kg-btn-primary,
  .kg-btn-secondary{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 17px!important;
    border-radius:13px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:14px!important;
    line-height:1!important;
  }

  .kg-hero-meta{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    overflow-x:auto!important;
    padding:0 0 2px!important;
    scrollbar-width:none!important;
  }

  .kg-hero-meta::-webkit-scrollbar{display:none!important;}

  .kg-hero-meta span{
    flex:0 0 auto!important;
    height:26px!important;
    padding:0 10px!important;
    font-size:10px!important;
    white-space:nowrap!important;
    background:#fff!important;
  }

  .kg-hero-arrow{
    top:121px!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    width:38px!important;
    height:38px!important;
    font-size:24px!important;
    z-index:8!important;
  }

  .kg-hero-arrow.is-prev{left:22px!important;}
  .kg-hero-arrow.is-next{right:22px!important;}

  .kg-hero-controls{
    bottom:14px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    height:24px!important;
    padding:5px 8px!important;
    z-index:8!important;
  }
}

@media (max-width: 430px){
  .kg-hero{width:calc(100% - 18px)!important;border-radius:18px!important;}
  .kg-hero-media{height:205px!important;margin:10px 10px 0!important;border-radius:16px!important;}
  .kg-hero-copy{padding:17px 16px 52px!important;}
  .kg-hero h1{font-size:28px!important;line-height:1.08!important;}
  .kg-hero p{font-size:14px!important;}
  .kg-btn-primary,.kg-btn-secondary{height:40px!important;min-height:40px!important;padding:0 14px!important;font-size:13.5px!important;}
  .kg-hero-arrow{top:112px!important;}
}