/* Global responsive layer added for Bootstrap-friendly layouts. */
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
img,video,canvas,svg{max-width:100%;height:auto}
table{max-width:100%}
input,select,textarea,button{max-width:100%}
.container,.wrap,.pm-container,.page,.content,.main,.card,.panel{max-width:100%}
.table-wrap,.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table,.table-responsive table{min-width:680px}

/* Landing/header responsive */
.yellow-shell{width:min(100%,1380px)!important;padding-left:clamp(14px,3vw,28px)!important;padding-right:clamp(14px,3vw,28px)!important}
.yellow-nav{max-width:100%!important}
.yellow-brand,.brand{min-width:0}
.yellow-menu,.yellow-auth,.yellow-quick,.links,.quick{max-width:100%}
.yellow-quick{padding-bottom:4px}
.yellow-account-menu{max-width:calc(100vw - 28px)!important}
.yellow-title{overflow-wrap:anywhere}
.yellow-subtitle{padding-left:8px;padding-right:8px}

@media (min-width: 1201px){
  .yellow-nav{display:grid!important;grid-template-columns:auto minmax(360px,auto) auto;align-items:center!important;justify-content:center!important;gap:16px 22px!important}
  .yellow-brand{justify-self:start!important}
  .yellow-menu{justify-self:center!important;margin:0!important}
  .yellow-auth{justify-self:end!important;margin:0!important}
  .yellow-quick{grid-column:1/-1!important;justify-content:center!important;flex-wrap:wrap!important;overflow:visible!important}
}
@media (max-width: 1200px){
  .yellow-nav{display:flex!important;justify-content:center!important;gap:12px!important;padding-left:8px!important;padding-right:8px!important}
  .yellow-brand{width:100%!important;justify-content:center!important;margin:0!important}
  .yellow-menu{order:2!important;width:auto!important;max-width:100%!important;margin:0!important;overflow-x:auto!important;white-space:nowrap!important;flex-wrap:nowrap!important;justify-content:flex-start!important;padding:10px 12px!important;scrollbar-width:none}
  .yellow-menu::-webkit-scrollbar{display:none}
  .yellow-auth{order:3!important;width:100%!important;justify-content:center!important;margin:0!important}
  .yellow-quick{order:4!important;width:100%!important;justify-content:flex-start!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:visible!important;padding-bottom:8px!important;scrollbar-width:thin}
  .yellow-quick .quick-pill{flex:0 0 auto!important;white-space:nowrap!important}
  .yellow-account{flex:0 0 auto!important}
}
@media (max-width: 768px){
  .landing-yellow-top{min-height:auto!important;padding-bottom:24px!important}
  .yellow-nav{min-height:0!important;padding-top:14px!important;padding-bottom:8px!important}
  .yellow-brand{font-size:20px!important}
  .yellow-brand img,.yellow-logo-fallback{width:38px!important;height:38px!important;border-radius:12px!important}
  .yellow-menu{font-size:12px!important;gap:12px!important;border-radius:16px!important}
  .yellow-auth{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .yellow-auth .yellow-btn{width:100%!important}
  .yellow-quick{gap:8px!important;padding-left:2px!important;padding-right:2px!important}
  .yellow-quick .quick-pill,.yellow-account-btn{height:40px!important;padding:0 12px!important;border-radius:13px!important;font-size:12px!important}
  .yellow-account-menu{left:0!important;right:auto!important;transform:none!important;min-width:220px!important}
  .yellow-hero{padding:42px 0 48px!important}
  .yellow-trust{font-size:12px!important;padding:8px 13px!important}
  .yellow-title{font-size:clamp(34px,11vw,56px)!important;line-height:1.08!important;letter-spacing:-1.4px!important;margin:22px 0 14px!important}
  .yellow-subtitle{font-size:15px!important;line-height:1.55!important;margin-bottom:22px!important}
  .yellow-actions{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin-bottom:30px!important}
  .yellow-actions .yellow-btn{width:100%!important;height:50px!important}
  .yellow-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .yellow-stat{padding:14px 10px!important;border-radius:16px!important}
  .yellow-stat b{font-size:24px!important}
  .floating-actions{right:10px!important;left:10px!important;bottom:10px!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  .floating-actions a,.floating-actions button{min-width:0!important;font-size:12px!important;padding:10px 8px!important;justify-content:center!important}
}
@media (max-width: 420px){
  .yellow-stats{grid-template-columns:1fr!important}
  .yellow-auth{grid-template-columns:1fr!important}
  .yellow-title{font-size:34px!important}
}

/* Dashboard/admin responsive */
@media (max-width: 1100px){
  .layout{grid-template-columns:1fr!important}
  .sidebar{position:relative!important;width:100%!important;height:auto!important;max-height:none!important;overflow:visible!important;border-right:0!important;border-bottom:1px solid var(--line,rgba(150,170,255,.16))!important}
  .sidebar .menu{overflow:visible!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding-right:0!important;margin-right:0!important}
  .sidebar-bottom{position:relative!important;bottom:auto!important;background:transparent!important}
  .main{padding:20px 16px!important;width:100%!important}
  .top{flex-direction:column!important;align-items:flex-start!important;gap:12px!important}
  .quick{width:100%!important;display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:6px!important}
  .quick a,.quick button,.quick .btn{flex:0 0 auto!important}
}
@media (max-width: 760px){
  .sidebar{padding:16px!important}
  .sidebar .menu{grid-template-columns:1fr!important}
  .side-actions{grid-template-columns:1fr 1fr!important}
  .stats,.feature-grid,.grid,.summary-grid,.cards,.form-grid{grid-template-columns:1fr!important}
  .card,.panel,.hero,.box{border-radius:18px!important;padding:16px!important}
  h1{font-size:clamp(26px,8vw,36px)!important;line-height:1.15!important}
  h2{font-size:clamp(22px,6vw,30px)!important}
  .table{min-width:640px!important}
}

/* Public catalog/product grids */
@media (max-width: 1180px){
  .catalog-layout,.catalog-grid{grid-template-columns:1fr!important}
  .catalog-sidebar,.filters-sidebar,.filter-panel{position:relative!important;top:auto!important;width:100%!important}
}
@media (max-width: 900px){
  .products,.product-grid,.top-products,.reviews,.faqs,.cats{grid-template-columns:repeat(2,minmax(0,1fr))!important;display:grid!important;gap:14px!important}
  .cat,.top-product,.product-card{width:100%!important;min-width:0!important}
  .head{align-items:flex-start!important;flex-direction:column!important}
}
@media (max-width: 560px){
  .products,.product-grid,.top-products,.reviews,.faqs,.cats{grid-template-columns:1fr!important}
  .top-product{aspect-ratio:auto!important;height:auto!important;min-height:240px!important}
  .cat{aspect-ratio:auto!important;min-height:140px!important}
}

/* Forms and modals */
.modal,.dialog,.popup,.payment-modal,.modal-box{max-width:calc(100vw - 24px)!important}
@media (max-width: 760px){
  .modal,.dialog,.popup,.payment-modal,.modal-box{width:calc(100vw - 24px)!important;max-height:calc(100vh - 24px)!important;overflow:auto!important;border-radius:18px!important}
  .modal form,.dialog form,.popup form{display:block!important}
  input,select,textarea{font-size:16px!important}
  .btn,.pill,button{min-height:40px}
}

/* Mobile/tablet dashboard sidebar: buka/tutup menu */
.sidebar-toggle-btn,.sidebar-close-btn,.sidebar-backdrop{display:none}
@media (max-width:1100px){
  body.has-dashboard-sidebar{padding-top:0!important}
  body.has-dashboard-sidebar .layout{display:block!important;min-height:100vh!important}
  body.has-dashboard-sidebar .main{width:100%!important;min-width:0!important;padding:76px 14px 22px!important}
  body.has-dashboard-sidebar .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(84vw,310px)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    z-index:10050!important;
    transform:translateX(-110%)!important;
    transition:transform .24s ease!important;
    border-right:1px solid rgba(93,114,178,.55)!important;
    border-bottom:0!important;
    box-shadow:28px 0 60px rgba(0,0,0,.48)!important;
    padding:18px!important;
    display:block!important;
    background:rgba(11,16,32,.98)!important;
  }
  body.has-dashboard-sidebar.sidebar-open .sidebar{transform:translateX(0)!important}
  body.has-dashboard-sidebar .sidebar .menu{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;overflow:visible!important;max-height:none!important;padding-right:0!important;margin-right:0!important}
  body.has-dashboard-sidebar .sidebar-bottom{position:relative!important;bottom:auto!important;background:transparent!important;margin-top:14px!important}
  body.has-dashboard-sidebar .sidebar-backdrop{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    background:rgba(0,0,0,.58)!important;
    backdrop-filter:blur(3px)!important;
    z-index:10040!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:opacity .2s ease!important;
  }
  body.has-dashboard-sidebar.sidebar-open .sidebar-backdrop{opacity:1!important;pointer-events:auto!important}
  body.has-dashboard-sidebar .sidebar-toggle-btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    position:fixed!important;
    left:14px!important;
    top:14px!important;
    z-index:10030!important;
    height:44px!important;
    padding:0 14px!important;
    border-radius:14px!important;
    border:1px solid rgba(93,114,178,.75)!important;
    background:linear-gradient(135deg,rgba(124,77,255,.95),rgba(29,155,240,.95))!important;
    color:#fff!important;
    font-weight:950!important;
    box-shadow:0 16px 42px rgba(0,0,0,.34)!important;
  }
  body.has-dashboard-sidebar .sidebar-close-btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:absolute!important;
    right:12px!important;
    top:12px!important;
    width:38px!important;
    height:38px!important;
    border-radius:13px!important;
    border:1px solid rgba(93,114,178,.65)!important;
    background:rgba(255,255,255,.06)!important;
    color:#fff!important;
    font-size:22px!important;
    font-weight:950!important;
    z-index:2!important;
  }
  body.has-dashboard-sidebar .brand{padding-right:42px!important;margin-bottom:18px!important}
  body.has-dashboard-sidebar .top{padding-left:0!important}
  body.has-dashboard-sidebar .quick{width:100%!important;overflow-x:auto!important;flex-wrap:nowrap!important;justify-content:flex-start!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:thin!important}
  body.has-dashboard-sidebar .quick .btn,body.has-dashboard-sidebar .quick a,body.has-dashboard-sidebar .quick button{flex:0 0 auto!important;white-space:nowrap!important}
  body.has-dashboard-sidebar.sidebar-open{overflow:hidden!important}
}
@media (max-width:560px){
  body.has-dashboard-sidebar .main{padding:72px 10px 18px!important}
  body.has-dashboard-sidebar .sidebar{width:min(90vw,300px)!important;padding:16px!important}
  body.has-dashboard-sidebar .sidebar-toggle-btn{left:10px!important;top:10px!important;height:42px!important;padding:0 12px!important;font-size:13px!important}
  body.has-dashboard-sidebar .stats{grid-template-columns:1fr!important;gap:12px!important}
  body.has-dashboard-sidebar .stat{padding:16px!important;border-radius:18px!important}
  body.has-dashboard-sidebar .card{padding:16px!important;border-radius:18px!important}
}
@media (min-width:1101px){
  body.has-dashboard-sidebar .sidebar-backdrop,body.has-dashboard-sidebar .sidebar-toggle-btn,body.has-dashboard-sidebar .sidebar-close-btn{display:none!important}
}

/* Compact mobile top buttons: no long horizontal scrollbar */
@media (max-width: 760px){
  body.has-dashboard-sidebar .top{gap:14px!important}
  body.has-dashboard-sidebar .quick{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    overflow:visible!important;
    padding-bottom:0!important;
    justify-content:stretch!important;
  }
  body.has-dashboard-sidebar .quick .btn,
  body.has-dashboard-sidebar .quick a,
  body.has-dashboard-sidebar .quick button{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    flex:0 1 auto!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 9px!important;
    border-radius:13px!important;
    font-size:13px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.has-dashboard-sidebar .quick .badge{padding:3px 6px!important;font-size:10px!important;min-width:auto!important}
}
@media (max-width: 380px){
  body.has-dashboard-sidebar .quick{
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }
  body.has-dashboard-sidebar .quick .btn,
  body.has-dashboard-sidebar .quick a,
  body.has-dashboard-sidebar .quick button{
    font-size:12px!important;
    padding:0 7px!important;
  }
}

/* Public header buttons also wrap neatly on small screens */
@media (max-width: 760px){
  .nav .links,.navwrap .nav .links{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    overflow:visible!important;
    justify-content:stretch!important;
  }
  .nav .links .pill,.navwrap .nav .links .pill,
  .nav .links .btn,.navwrap .nav .links .btn{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 9px!important;
    font-size:12px!important;
    border-radius:13px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .nav .links .theme-btn,.navwrap .nav .links .theme-btn{
    width:40px!important;
    justify-self:start!important;
  }
  .nav .links .account-menu,.navwrap .nav .links .account-menu{width:100%!important;min-width:0!important}
  .nav .links .account-toggle,.navwrap .nav .links .account-toggle{width:100%!important}
  .nav .links .account-dropdown,.navwrap .nav .links .account-dropdown{
    left:0!important;
    right:auto!important;
    width:min(260px,calc(100vw - 28px))!important;
  }
}

/* Fix mobile create-order header: keep it clean, not a gray block. */
@media (max-width: 900px){
  body.create-page.has-dashboard-sidebar .main{
    max-width:none!important;
    margin:0!important;
    padding:76px 14px 22px!important;
    background:radial-gradient(circle at top left,rgba(124,77,255,.18),transparent 36%),radial-gradient(circle at bottom right,rgba(35,156,255,.10),transparent 30%),var(--bg,#070814)!important;
  }
  body.create-page.has-dashboard-sidebar .top{
    position:static!important;
    display:block!important;
    width:100%!important;
    min-height:0!important;
    margin:0 0 16px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
  }
  body.create-page.has-dashboard-sidebar .top:before{content:none!important;display:none!important;}
  body.create-page.has-dashboard-sidebar .title h1{
    font-size:26px!important;
    line-height:1.15!important;
    white-space:normal!important;
    margin:0!important;
  }
  body.create-page.has-dashboard-sidebar .title p{
    display:block!important;
    margin:8px 0 0!important;
    font-size:13px!important;
    line-height:1.45!important;
    color:var(--muted,#aab2ca)!important;
  }
  body.create-page.has-dashboard-sidebar .quick{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    margin-top:14px!important;
    overflow:visible!important;
    padding:0!important;
    justify-content:stretch!important;
  }
  body.create-page.has-dashboard-sidebar .quick .btn,
  body.create-page.has-dashboard-sidebar .quick a,
  body.create-page.has-dashboard-sidebar .quick button{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 8px!important;
    border-radius:12px!important;
    font-size:12px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.create-page.has-dashboard-sidebar .panel.order-create-mobile{
    margin:0!important;
    padding:16px!important;
    border:1px solid var(--line,#26345d)!important;
    border-radius:18px!important;
    background:rgba(16,23,42,.88)!important;
  }
  body.create-page.has-dashboard-sidebar .order-create-shell{max-width:none!important;}
  body.create-page.has-dashboard-sidebar .feature-box{margin:0 0 18px!important;}
  body.create-page.has-dashboard-sidebar .filter-row{grid-template-columns:1fr 1fr!important;gap:10px!important;}
  body.create-page.has-dashboard-sidebar .public-order-form input,
  body.create-page.has-dashboard-sidebar .public-order-form select,
  body.create-page.has-dashboard-sidebar .public-order-form textarea{font-size:14px!important;}
  body.create-page.has-dashboard-sidebar .submit-row{position:static!important;background:transparent!important;padding:0!important;}
}
@media (max-width: 420px){
  body.create-page.has-dashboard-sidebar .main{padding-left:10px!important;padding-right:10px!important;}
  body.create-page.has-dashboard-sidebar .top{margin-bottom:14px!important;}
  body.create-page.has-dashboard-sidebar .title h1{font-size:24px!important;}
  body.create-page.has-dashboard-sidebar .title p{font-size:12px!important;}
  body.create-page.has-dashboard-sidebar .quick{gap:7px!important;}
  body.create-page.has-dashboard-sidebar .quick .btn,
  body.create-page.has-dashboard-sidebar .quick a,
  body.create-page.has-dashboard-sidebar .quick button{font-size:11px!important;padding:0 6px!important;}
  body.create-page.has-dashboard-sidebar .panel.order-create-mobile{padding:14px!important;}
}
@media (max-width: 360px){
  body.create-page.has-dashboard-sidebar .filter-row{grid-template-columns:1fr!important;}
  body.create-page.has-dashboard-sidebar .payment-pills{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;}
  body.create-page.has-dashboard-sidebar .payment-pill{width:100%!important;justify-content:center!important;font-size:12px!important;padding:0 6px!important;}
}