/* Final responsive storefront overrides.
   Loaded after the legacy styles so the cart and reel media stay consistent. */
html,
body{
  overflow-x:hidden;
}

.card-media{
  position:relative;
  aspect-ratio:9/16;
  overflow:hidden;
  background:linear-gradient(135deg,#fff,#fff2f8);
}

.card-media .slider,
.card-media .slides,
.card-media .slide{
  width:100%;
  height:100%;
}

.card-media .slide{
  min-width:100%;
  flex:0 0 100%;
}

.card-media img,
.card-media .slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width:520px){
  .container{
    width:min(calc(100% - 18px),1180px);
    padding:14px 0 92px;
  }

  .topbar{
    padding:13px 12px;
    align-items:center;
  }

  .contact-bar{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding:10px;
    overflow:visible;
  }

  .contact-item{
    justify-content:center;
    min-height:44px;
    padding:9px 8px;
    text-align:center;
    white-space:normal;
    font-size:13px;
  }

  .products{
    grid-template-columns:1fr;
  }

  .card{
    width:min(100%,420px);
    margin-inline:auto;
  }

  .btn-primary,
  .btn-outline,
  .drawer-buttons > *{
    min-height:46px;
  }

  .floating-wa,
  .floating-cart{
    width:56px;
    height:56px;
  }

  .floating-wa{
    right:12px;
    bottom:max(16px,env(safe-area-inset-bottom));
  }

  .floating-cart{
    left:50%;
    right:auto;
    bottom:max(16px,env(safe-area-inset-bottom));
    transform:translateX(-50%);
    box-shadow:0 14px 35px rgba(108,92,231,.38);
  }

  .bottom-drawer{
    width:calc(100% - 12px);
    max-height:86dvh;
    border-radius:24px 24px 0 0;
    padding:14px 14px calc(14px + env(safe-area-inset-bottom));
    overscroll-behavior:contain;
  }

  .drawer-buttons > *{
    width:100%;
  }

  .drawer-body .form-control,
  .form-control,
  input,
  textarea,
  select{
    min-height:46px;
    font-size:16px;
  }

  .qty-btn{
    width:46px;
    height:46px;
  }

  .qty-value{
    height:46px;
  }

  .modal{
    padding:10px;
  }

  .modal-content{
    max-height:calc(100dvh - 20px);
    overflow:auto;
    padding:22px 16px 18px;
  }
}