html,body{margin:0;overflow-x:hidden;max-width:100%}
body{background:#FBF6EC;font-family:'Nunito',sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:#d8c9ec;border-radius:6px}
a{color:#4E2A7E}
a:hover{color:#F4901E}
img{max-width:100%}
.qb-page{overflow-x:hidden;min-width:0}
.qb-menu-btn{
  display:none;width:44px;height:44px;border:none;border-radius:50%;
  background:rgba(255,255,255,0.1);align-items:center;justify-content:center;
  cursor:pointer;flex:none;padding:0
}
.qb-header-actions{display:flex;align-items:center;gap:8px;flex:none}
.qb-nav-item{white-space:nowrap}
.qb-nav-backdrop{display:none}
.qb-chips{min-width:0}
.qb-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qb-form-span{grid-column:1/-1}
.qb-field input,.qb-field textarea{
  width:100%;padding:13px 16px;border-radius:12px;border:2px solid #E4D9F2;
  font-size:14px;font-family:'Nunito',sans-serif;color:#2B1B3D;background:#FFFFFF
}
.qb-field input:focus,.qb-field textarea:focus{outline:none;border-color:#4E2A7E}
.qb-field textarea{min-height:88px;resize:vertical}
.qb-pay-list{display:flex;flex-direction:column;gap:10px}
.qb-bank{background:#F3EDFB;border-radius:14px;padding:16px 18px;font-size:13px;color:#5A4C6E;line-height:1.6}

@media (max-width:1024px){
  .qb-header{padding:0 24px !important;position:sticky !important}
  .qb-section{padding-left:24px !important;padding-right:24px !important}
  .qb-hero-title{font-size:44px !important}
  .qb-grid-4{grid-template-columns:repeat(2,1fr) !important}
  .qb-cta{padding:48px 24px !important}
  .qb-footer{padding:32px 24px !important}
  .qb-menu-btn{display:flex !important}
  .qb-nav{
    display:none !important;position:absolute !important;top:100% !important;
    left:0 !important;right:0 !important;background:#2E1650 !important;
    flex-direction:column !important;align-items:stretch !important;gap:0 !important;
    padding:8px 0 12px !important;box-shadow:0 16px 32px rgba(0,0,0,0.25);
    border-top:1px solid rgba(255,255,255,0.08)
  }
  .qb-header.qb-menu-open .qb-nav{display:flex !important}
  .qb-nav-item{padding:14px 24px !important;border-bottom:none !important;font-size:16px !important}
  .qb-nav-backdrop{
    display:block;position:fixed;inset:0;background:rgba(20,8,36,0.4);z-index:40
  }
  .qb-hero{grid-template-columns:1fr !important;gap:28px !important;padding:40px 24px 28px !important}
  .qb-grid-2{grid-template-columns:1fr !important;gap:28px !important}
  .qb-grid-3{grid-template-columns:repeat(2,1fr) !important}
  .qb-cart-layout{grid-template-columns:1fr !important;gap:24px !important}
  .qb-cart-summary{position:static !important}
  .qb-page-title{font-size:28px !important}
  .qb-confirm{padding:64px 24px !important}
  .qb-chips{
    flex-wrap:nowrap !important;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin-bottom:28px !important
  }
  .qb-chips::-webkit-scrollbar{display:none}
  .qb-chips > *{flex:none;white-space:nowrap}
}

@media (max-width:560px){
  .qb-header{padding:0 14px !important;height:68px !important}
  .qb-brand-title{font-size:17px !important}
  .qb-brand-tag{display:none !important}
  .qb-logo{width:44px !important;height:44px !important}
  .qb-hero-title{font-size:30px !important}
  .qb-hero-actions{flex-direction:column !important;align-items:stretch !important}
  .qb-hero-actions button{width:100%}
  .qb-grid-4,.qb-grid-3{grid-template-columns:1fr !important;gap:16px !important}
  .qb-section{padding-left:16px !important;padding-right:16px !important}
  .qb-cta{padding:40px 16px !important}
  .qb-cta-title{font-size:24px !important}
  .qb-footer{padding:28px 16px !important}
  .qb-footer-inner{justify-content:center !important;text-align:center}
  .qb-page-title{font-size:26px !important}
  .qb-product-title{font-size:26px !important}
  .qb-related{margin-top:40px !important}
  .qb-cart-line{flex-wrap:wrap}
  .qb-form-grid{grid-template-columns:1fr !important}
}

@media (max-width:380px){
  .qb-brand{gap:8px !important}
  .qb-brand-title{font-size:15px !important}
  .qb-header{padding:0 10px !important}
  .qb-header-actions{gap:4px}
}
