/* Mert Karataş Shop v1.6.52 ---------------------------------------------
   Corrected narrow-desktop/tablet pass after visual regression review.
----------------------------------------------------------------------------- */

/* 1) Homepage gateway: the switch belongs in the open right-hand pocket
      created by the wrapped editorial headline, not under its left edge. */
@media (max-width:1180px){
  .mks-gateway__utility{
    grid-column:2!important;
    grid-row:2!important;
    justify-self:end!important;
    justify-items:end!important;
    width:min(100%,430px)!important;
    margin-top:-.35rem!important;
  }
  .mks-gateway__switch-row{
    justify-self:end!important;
    width:min(100%,420px)!important;
  }
}
@media (max-width:760px){
  .mks-gateway__utility{
    width:min(100%,350px)!important;
    margin-top:-.15rem!important;
  }
  .mks-gateway__switch-row{
    width:min(100%,350px)!important;
    margin-left:auto!important;
  }
}
@media (max-width:430px){
  .mks-gateway__utility,
  .mks-gateway__switch-row{width:100%!important}
}

/* 2) LAB between phone and desktop: do not keep desktop overlays floating on
      top of the artwork. The image becomes a visual stage and the project
      instruments sit in a dedicated strip underneath it. */
@media (max-width:1100px){
  .mks-lab-archive-hero{
    height:auto!important;
    min-height:0!important;
    grid-template-columns:1fr!important;
    overflow:hidden!important;
  }
  .mks-lab-archive-hero__copy{
    min-height:320px!important;
    padding:clamp(1.5rem,4vw,2.5rem)!important;
  }
  .mks-lab-archive-hero__lead{
    min-height:0!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
    border-left:0!important;
    border-top:1px solid var(--line)!important;
    background:#071225!important;
  }
  .mks-lab-archive-hero__lead>img{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/8.4!important;
    object-fit:cover!important;
    transform:none!important;
  }
  .mks-lab-archive-hero__lead::after{display:none!important}
  .mks-lab-archive-hero__lead-copy{
    position:relative!important;
    left:auto!important;right:auto!important;bottom:auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(260px,.72fr)!important;
    gap:.8rem!important;
    align-items:stretch!important;
    padding:.9rem!important;
    background:linear-gradient(180deg,#071225,#050b17)!important;
  }
  .mks-lab-archive-hero__lead-title,
  .mks-lab-funding-card{
    position:relative!important;
    inset:auto!important;
    margin:0!important;
    min-width:0!important;
  }
  .mks-lab-archive-hero__lead-title strong{
    font-size:clamp(1.7rem,4.7vw,2.75rem)!important;
    line-height:.92!important;
  }
}
@media (max-width:760px){
  .mks-lab-archive-hero__copy{min-height:0!important}
  .mks-lab-archive-hero__lead>img{aspect-ratio:16/10!important}
  .mks-lab-archive-hero__lead-copy{grid-template-columns:1fr!important}
}

/* 3) Standard product cards at compact widths: wishlist remains visually
      important and the editorial title should never kiss the left rail. */
@media (max-width:980px){
  .mks-product-card:not(.mks-product-card--pick) .mks-wishlist-btn--card{
    width:44px!important;height:44px!important;
    right:.58rem!important;top:.58rem!important;
  }
  .mks-product-card:not(.mks-product-card--pick) .mks-wishlist-btn--card svg{
    width:22px!important;height:22px!important;
  }
  .mks-product-card:not(.mks-product-card--pick) .mks-product-card__copy{
    padding-left:.9rem!important;
    padding-right:.9rem!important;
  }
}
@media (max-width:760px){
  .mks-product-card:not(.mks-product-card--pick) .mks-product-card__copy h3{
    margin-left:.04rem!important;
    padding-left:0!important;
  }
}

/* 4) Expanded footer: operational/navigation content comes first. Identity
      cards and the brand signature close the composition at the bottom on
      every compact desktop/tablet/mobile layout. */
@media (max-width:1240px){
  .mks-footer--expanded{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:1.6rem!important;
  }
  .mks-footer__stack{order:1!important;width:100%!important}
  .mks-footer__base{order:2!important;width:100%!important}
  .mks-footer__identities{order:3!important;width:100%!important}
  .mks-footer__brand{
    order:4!important;
    width:100%!important;
    justify-items:center!important;
    text-align:center!important;
    align-content:end!important;
    padding-top:.35rem!important;
  }
  .mks-footer__logo{margin-inline:auto!important;justify-content:center!important}
  .mks-footer__brand p{max-width:34ch!important;margin:0 auto!important;text-align:center!important}
}
@media (min-width:761px) and (max-width:1240px){
  .mks-footer__identities{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mks-footer__identities>span{grid-column:1/-1!important}
}

/* 5) Responsive drawer: remove the empty-top / giant-type trap. Controls are
      immediately reachable, navigation has proper hit targets, and all rows
      remain selectable while the panel scrolls. */
@media (max-width:1240px){
  .mks-mobile{
    grid-template-rows:auto auto auto!important;
    align-content:start!important;
    padding:4.9rem clamp(.9rem,2.6vw,1.7rem) max(1rem,env(safe-area-inset-bottom))!important;
    row-gap:.45rem!important;
  }
  body.admin-bar .mks-mobile{padding-top:4.5rem!important}
  .mks-mobile__archive{
    font-size:clamp(5rem,15vw,9rem)!important;
    line-height:.8!important;
    opacity:.018!important;
    pointer-events:none!important;
  }
  .mks-mobile__signal{
    opacity:.15!important;
    pointer-events:none!important;
  }
  .mks-mobile__utility{
    position:relative!important;
    z-index:5!important;
    width:auto!important;
    max-width:100%!important;
    margin:0 0 .35rem!important;
    gap:.45rem!important;
  }
  .mks-mobile__utility .mks-langs,
  .mks-mobile__utility .mks-theme-toggle{
    min-height:44px!important;
  }
  .mks-mobile__utility .mks-langs a{
    min-height:36px!important;
    padding:.38rem .52rem!important;
  }
  .mks-mobile__utility .mks-theme-toggle{
    min-width:98px!important;
    padding:.48rem .62rem!important;
  }
  .mks-mobile__utility .mks-theme-toggle b{font-size:.53rem!important}
  .mks-mobile>nav:not(.mks-mobile__langs){
    position:relative!important;
    z-index:5!important;
    display:grid!important;
    gap:0!important;
    margin:.25rem 0 0!important;
    min-height:0!important;
    pointer-events:auto!important;
  }
  .mks-mobile>nav:not(.mks-mobile__langs) a{
    min-height:56px!important;
    grid-template-columns:30px minmax(0,1fr)!important;
    align-items:center!important;
    padding:.55rem .25rem!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
  .mks-mobile>nav:not(.mks-mobile__langs) small{
    align-self:center!important;
    font-size:.48rem!important;
  }
  .mks-mobile>nav:not(.mks-mobile__langs) span{
    font-size:clamp(1.55rem,4.2vw,2.75rem)!important;
    line-height:.92!important;
    white-space:nowrap!important;
    overflow:visible!important;
    overflow-wrap:normal!important;
  }
  .mks-mobile footer{
    position:relative!important;
    z-index:5!important;
    margin-top:.5rem!important;
    padding-top:.8rem!important;
  }
}
@media (max-width:760px){
  .mks-mobile{padding:4.65rem .9rem max(.9rem,env(safe-area-inset-bottom))!important}
  body.admin-bar .mks-mobile{padding-top:4.4rem!important}
  .mks-mobile__archive{font-size:clamp(4.5rem,23vw,7rem)!important}
  .mks-mobile>nav:not(.mks-mobile__langs) a{min-height:54px!important}
  .mks-mobile>nav:not(.mks-mobile__langs) span{font-size:clamp(1.45rem,7vw,2.25rem)!important}
}